{%  extends "WebBackBundle::layout_lte.html.twig" %}

{% block title %} Commandes WebSite {% endblock %}
{% block bodytile %}La liste des commandes WebSite{% endblock %}
{% block body %}
	<!-- script data tabels -->

	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>

	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>


	<!-- DataTables -->
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

	<div class="container-fluid">



	  <!-- DataTables Example -->
	  <div class="card mb-3">

	    <div class="card-body">
	      <div class="table-responsive">
			  <table id="tablcommande" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
	          <thead>
	            <tr>
	              <th>Ref</th>
                  <th>Total</th>
                  <th>Date</th>
				  <th>Paiement</th>
				  <th>Plateforme</th>
                  <th>Etat</th>
                  <th>Action</th>
	            </tr>
	          </thead>
	          <tfoot>
	            <tr>
	              <th>Ref</th>
                  <th>Total</th>
                  <th>Date</th>
				  <th>Paiement</th>
				  <th>Etat</th>
                  <th>Action</th>
	            </tr>
	          </tfoot>
	          <tbody>
	          	{% for order in orders %}
					{% if order.totalPrice != 0 %}
		            <tr>
	                    <td>{{order.ref}}</td>
	                    <td>{{order.totalPrice}}</td>
	                    <td>{{order.dateOrder.date|split('.' )[0]}}</td>
						<td>{% if order.paymentMethod is empty %} Not Yet. {% else %} {{ order.paymentMethod }}{% endif %}</td>
						<td>{{ order.plateforme }}</td>
	                    <td>
	                        {% if order.etat == 1 %}
	                            <span class="btn btn-info">Attente</span>
	                        {% elseif order.etat == 2 %}
	                            <span class="btn btn-success">Traité</span>
	                        {% elseif order.etat == 5 %}
	                            <span class="btn btn-danger">Non Payee</span>
                            {% else %}
                            	<span class="btn btn-warning">Non Traité</span>
	                        {% endif %}
						</td>
						<td>
	                        <a href="{{ path('order_detail_back',{'id':order.id}) }}" class="btn btn-primary">Détails</a>

						{% if order.etat != 2 %}
							<a href="#" data-toggle="modal" data-target="#exampleModal{{ order.id }}" class="btn btn-danger">Supprmier</a>
						{% endif %}


	                    </td>
	                </tr>
					<div class="modal fade" id="exampleModal{{ order.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title">Confirmation de la suppression</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<p>Voulez-vous vraiment supprimer cet enregistrement ?</p>
								</div>
								<div class="modal-footer">
									<a href="{{ path('delete_order',{'id':order.id}) }}" class="btn btn-danger">Supprmier</a>
									<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
								</div>
							</div>
						</div>
					</div>
               		{% endif %}
                {% endfor %}
	          </tbody>
	        </table>

			  <script>
				  $(document).ready(function() {
					  $('#tablcommande').DataTable( {
						  "order": false,
						  responsive: true,
						  "iDisplayLength": 20,
						  "language": {
							  "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json",

						  },
						  dom: 'Bfrtip',
						  buttons: [



						  ],

					  } );
				  } );
			  </script>
	      </div>
	    </div>
	  </div>



	</div>

{% endblock %}