{% extends "MobileBundle::layout.html.twig" %}

{% block body %}

<div id="main">

    <div class="page-header valign-wrapper more-p" data-parallax="active" style="background-image: url('{{ asset("assets/uploads/Fast Track Maroc Booking.jpg") }}') !important; transform: translate3d(0px, 0px, 0px);">
        <div class="opacity-overlay"></div>
        <div class="container not-center">
            <div class="row valign">
                <div class="col-md-8 col-md-offset-2">
                    <div class="brand">
                        <h1 class="title">Shopping Cart</h1>


                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="section white main main-raised m-b-40">

        <div class="container-fluid">


            <div class="row">

                {% if fasttracks|length==0 %}
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">
                        <img style="width:100%" src="{{ asset("assets/images/cart-empty.jpg")}}">
                    </div>
                {% else %}


                        {% set total = 0 %}
                        {% set total_trans_all = 0 %}

                        <table class="table table-striped w-auto">

                            <!--Table head-->
                            <thead>
                            <tr>
                                <th>{% trans %}Item{% endtrans %}</th>
                                <th>{% trans %}Price{% endtrans %}</th>
                                <th>{% trans %}Action{% endtrans %}</th>
                            </tr>
                            </thead>
                            <tbody>

                        {% for fasttrack in fasttracks %}
                            <tr>
                                <td>
                                    {% if fasttrack.type=='depart' %}

                                        <h5><strong>- {{datas[fasttrack.pack]['namefstk']}} - Departure from {{datas[fasttrack.pack]['arprt']}}</strong></h5>
                                    {% else %}

                                            <h5><strong>- {{datas[fasttrack.pack]['namefstk']}} - Arrival to {{datas[fasttrack.pack]['arprt']}}</strong></h5>
                                    {% endif %}

                                    {% if fasttrack.transport!=null %}
                                    {%  set total_trans=0 %}
                                    {% for trans in fasttrack.transport %}

                                        <h5><strong>- {{ trans.getVehicule() }}</strong></h5>
                                        {%  set total_trans=total_trans+trans.getPrix() %}
                                        {% set total_trans_all = total_trans_all + total_trans %}
                                    {% endfor %}
                                    {% endif %}
                                </td>
                                <td valign="top">
                                    {% set prix_dh= fasttrack.prix*10 %}
                                    <h5><strong>{{fasttrack.prix|round(2, 'floor')}}€ / {{prix_dh|round(2, 'floor')}} MAD</strong></h5>
                                    {% if fasttrack.transport!=null %}
                                        {% set total_trans_dh= total_trans*10 %}
                                        <h5><strong>{{total_trans|round(2, 'floor')}}€ / {{total_trans_dh|round(2, 'floor')}} MAD</strong></h5>
                                    {% endif %}
                                </td>
                                <td>

                                    <a  href="{{ path("item_delete_mobile",{"id":loop.index}) }}" class="col-sm-2">
                                        <button type="button" rel="tooltip" title="" class="btn btn-just-icon btn-rose" data-original-title="Delete this item" aria-describedby="tooltip441889">
                                            <i class="material-icons">delete_forever</i>
                                            <div class="ripple-container"></div></button></a>

                                </td>
                            </tr>

                            {% set total = total + fasttrack.prix %}
                    {% endfor %}
                        {% set total = total + total_trans_all %}
                        {% set total_dh = total*10 %}
                        <tr>
                            <td  style="text-align: right">
                                <h5><strong>{% trans %}Subtotal{% endtrans %} : </strong></h5>
                            </td>
                            <td>
                               <h5><strong>{{total|round(2, 'floor')}}€  / {{total_dh|round(2, 'floor')}} MAD</strong></h5>
                            </td>
                           <td>&nbsp;</td>
                        </tr>
                            </tbody>
                        </table>

                {% endif %}
    </div>
</div>
        {% if fasttracks|length!=0 %}
        <div class="footer text-center m-b-40">
            {% if app.user %}
            <form id="checkoutorder"  method="post">

            <button type="submit" class="reserver_fasttrack btn btn-primary btn-round">{% trans %}Proceed to Chekout{% endtrans %}<div class="ripple-container"></div></button>
                <input type="hidden" name="locale" value="{{ app.request.getLocale() }}">
            </form>
            {% else %}
            <a href="{{ path("login_mobile2",{'loc':'cart'}) }}" class="reserver_fasttrack btn btn-primary btn-round">{% trans %}Proceed to Chekout{% endtrans %}<div class="ripple-container"></div></a>
            {% endif %}
        </div>
        {% endif %}
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog" style="opacity: 1 !important;">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Please Login if you have already an account or Create a new one by Registering</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body row">
                    <div class="col-sm-6">

                        <div id="formContent">
                            <!-- Tabs Titles -->
                            <style>
                                body {
                                    font-family: "Poppins", sans-serif;
                                    background-repeat: no-repeat; /* Do not repeat the image */
                                    background-size: cover;
                                }
                            </style>
                            <!-- Icon -->
                            <div class="fadeIn first">
                                <img src="/assets/images/logo fast.png" id="icon" alt="FastTrack Maroc logo">
                                <h3 style="color: #FF4500;"><b>Login Now</b></h3>
                            </div>
                            <!-- Login Form -->
                            <form action="{{ path('fos_user_security_check') }}" method="post">

                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />

                                <input type="text" id="login" class="fadeIn second" name="_username" required="required" autocomplete="username" placeholder="login">

                                <input type="password" id="password" class="fadeIn third" name="_password" required="required" autocomplete="current-password" placeholder="password">

                                <input type="hidden" name="go_to" value="/checkout/order" />
                                <input type="hidden" name="back_to" value="/login" />

                                <label class="container">Remember me
                                    <input type="checkbox" checked="checked" id="remember_me" name="_remember_me" value="on">
                                    <span class="checkmark"></span>
                                </label>

                                <input style="padding: 15px 35px;" type="submit" class="fadeIn fourth" name="_submit" value="Log in">

                            </form>

                            <!-- Remind Passowrd -->
                            <div id="formFooter">
                                <a class="underlineHover" href="{{ path('fos_user_resetting_request') }}">Forgot Password?</a>
                            </div>

                        </div>

                    </div>
                    <div class="col-sm-6">
                        <div id="formContent">

                            <div class="fadeIn first">
                                <img src="/assets/images/logo fast.png" id="icon" alt="FastTrack Maroc logo">
                                <h3 style="color: #FF4500;"><b>Register Now</b></h3>
                            </div>

                            <form name="fos_user_registration_form" method="post" action="/register/" class="fos_user_registration_register">
                                <div id="fos_user_registration_form">
                                    <div>
                                        <label for="fos_user_registration_form_prenom" class="required"> </label>
                                        <input type="text" id="fos_user_registration_form_prenom" name="fos_user_registration_form[prenom]" required="required" placeholder="Your First Name">
                                    </div>
                                    <input type="hidden" name="goto" value="panier">
                                    <div>
                                        <label for="fos_user_registration_form_nom" class="required"> </label>
                                        <input type="text" id="fos_user_registration_form_nom" name="fos_user_registration_form[nom]" required="required" placeholder="Your Last Name">
                                    </div>
                                    <div>
                                        <label for="fos_user_registration_form_telephone" class="required"> </label>
                                        <input type="text" id="fos_user_registration_form_telephone" name="fos_user_registration_form[telephone]" required="required" placeholder="Your Phone">
                                    </div>
                                    <div>
                                        <label for="fos_user_registration_form_email" class="required"> </label>
                                        <input type="email" id="fos_user_registration_form_email" name="fos_user_registration_form[email]" required="required" placeholder="Your email">
                                    </div>

                                    <div>
                                        <label for="fos_user_registration_form_plainPassword_first" class="required"> </label>
                                        <input type="password" id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" required="required" placeholder="Your Password">
                                    </div>
                                    <div>
                                        <label for="fos_user_registration_form_plainPassword_second" class="required"> </label>
                                        <input type="password" id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" required="required" placeholder="Re-enter your Password">
                                    </div>
                                    <input type="hidden" name="go_to" value="/checkout/order" />
                                    <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="{{ csrf_token('registration') }}">
                                </div>
                                <div>
                                    <input type="submit" value="Register">
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <!-- popup -->
    </div>


    <script src="{{ asset("assets/js/jquery-3.2.1.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/parallax-js-master/parallax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/Isotope/isotope.pkgd.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TweenMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/TimelineMax.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/scrollmagic/ScrollMagic.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/animation.gsap.min.js")}}"></script>
    <script src="{{ asset("assets/plugins/greensock/ScrollToPlugin.min.js")}}"></script>
    <script src="{{ asset("assets/js/select2.min.js")}}"></script>

    <script src="{{ asset("assets/js/custom.js")}}"></script>
    <script src="{{ asset("assets/js/bookoffre_custom_mobile.js")}}"></script>

{% endblock %}