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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/offers_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/select2.min.css")}}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_styles.css") }}">
    <link rel="stylesheet" type="text/css" href="{{ asset("assets/styles/about_responsive.css") }}">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


{% endblock %}

{% block body %}



    <!-- Home -->

    <div class="home">
        <div id="overlay"></div>
        <div class="home_background parallax-window" data-parallax="scroll" data-image-src="{{ asset("assets/uploads/Fast Track Maroc Booking.jpg")}}" style="background-image:url({{ asset("assets/uploads/Fast Track Maroc Booking.jpg")}})"></div>
        <div class="home_content">
            <div class="home_title">Commandes</div>
        </div>
    </div>

    <!-- Offers -->

    <!-- Contact -->

    <div class="contact_form_section">
        <div class="container" style="margin-top:3%;margin-bottom: 3%;">
            <div class="row">
                 <table id="ordersTable" class="table table-striped" style="width:100%">
                    <thead>
                        <tr>
                            <th>Commande</th>
                            <th>Total</th>
                            <th>Date</th>
                            <th>Status</th>
							<th>Méthode de paiement</th>
                            <th>Détails</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                            {% if order.totalPrice != 0 %}
                            <tr>
                                <td style="color: #0e9aef"><b>{{order.ref}}</b></td>
                                <td>{{order.totalPrice}}</td>
                                <td>{{order.dateOrder.date|split('.' )[0]}}</td>
                                {% if order.etat == 1 %}
                                    <td style="color: yellow">Attente de paiement</td>
                                {% elseif order.etat == 2 %}
                                    <td style="color: green">Traité</td>
                                {% else %}
                                    <td style="color: red">Non Traité</td>
                                {% endif %}
								<td> 
								<center>
								{% if order.paymentMethod %}{{ order.paymentMethod }} {% else %} - {% endif %}
								</center>
								</td>
                                <td>
                                    <a href="/{{ locale }}/order/detail/{{order.id}}" >
                                       <u> Détails </u>
                                    </a>
                                </td>
                            </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
            </table>
            </div>
        </div>
      </div>
<!-- popup -->
    </div>



{% endblock %}

{% block scripts %}
    <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="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready( function () {
            $('#ordersTable').DataTable({
                "order": [[ 0, "desc" ]],
                responsive: true,
                "iDisplayLength": 40
                });
    } );
</script>



{% endblock %}