{% 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"> {% trans %}Details of the order{% endtrans %} {{order.ref}}</h1>


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

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

            <div class="container-fluid">


                <div class="row">




                    {% set total = 0 %}
                    {% set total_trans_all = 0 %}
                    {% set countTrans=0 %}
                    <table class="table table-striped w-auto">

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

                        </tr>
                        </thead>
                        <tbody>

                        {% for fasttrack in ftrs %}
                            <tr>
                                <td>
                                    {% if fasttrack.type==0 %}

                                        <h5><strong>- {{fasttrack.pack.title}} - Departure from {{fasttrack.pack.aeroport.title}}</strong></h5>
                                    {% else %}

                                        <h5><strong> - {{fasttrack.pack.title}} - Arrrival to {{fasttrack.pack.aeroport.title}}</strong></h5>
                                    {% endif %}
                                </td>
                                <td valign="top">
                                    {% set prix_dh = fasttrack.price*10 %}
                                    <h5><strong>{{fasttrack.price|round(2, 'floor')}}€ / {{prix_dh|round(2, 'floor')}} MAD</strong></h5>
                                </td>
                            </tr>
                                {% if fasttrack.getResaTrans()==1 %}
                               <tr>
                                <td>

                                        {%  set total_trans=0 %}
                                        {% for trans in transport[countTrans] %}

                                            <h5><strong>- {{ trans.getVehicule() }}</strong></h5>
                                            {%  set total_trans=total_trans+trans.getPrix() %}
                                            {% set total_trans_all = total_trans_all + total_trans %}
                                        {% endfor %}
                                        {% set countTrans=countTrans+1 %}

                                </td>

                                <td>
                                    {% set total_trans_dh= total_trans*10 %}
                                        <h5><strong>{{total_trans|round(2, 'floor')}}€ / {{total_trans_dh|round(2, 'floor')}} MAD</strong></h5>

                                </td>
                               </tr>
                                {% endif %}



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

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="footer text-center m-b-40">
                {% if order.etat == 3 %}
                <span class="btn btn-primary">{% trans %}Confirmed{% endtrans %}</span>
                {% elseif order.etat == 2 %}
                <span class="btn btn-primary">{% trans %}Pending confirmation of payment{% endtrans %}</span>
                {% else %}
                    <a href="{{ path('order_payment_mobile',{'id':order.id}) }}" class="reserver_fasttrack btn btn-primary btn-round">{% trans %}Pay{% endtrans %}<div class="ripple-container"></div></a>
                {% endif %}
            </div>

            <!-- 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 %}