{% extends 'menuback.html.twig' %}
{% set refTva = 0 %}
 
 
{% for produit in commande.produit %}
    {% set refTva = refTva+ produit.prix   %}
{% endfor %}
 
{% block stylesheets %} 
   {{parent()}}
     <style>
     li *{
    display:inline-block;
    margin:0 10px;
}
    </style>
           <style>
.select2-search__field{
      width: 350px !important;
}
.select2-selection select2-selection--multiple{

   width:100px; 
}
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa; //change the border here
  border-radius: 4px;
}
      </style>

      <link rel="stylesheet"   href="{{ asset('back/bundles/datatables/datatables.min.css') }}">
      <link rel="stylesheet"   href="{{ asset('back/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css') }}">
 
 {% endblock %}

{% block body %}
    <!-- Main Content -->


      <div class="main-content">

     <div class="card">

      <table class="table">
        <tbody>
            {# <tr>
                <th>Id</th>
                <td>{{ commande.id }}</td>
            </tr> #}
            {# <tr>
                <th>Titrecivilite</th>
                <td>{{ commande.titrecivilite }}</td>
            </tr> #}
            <tr>
                <th>Nom:</th>
                <td>{{ commande.nom }}</td>
            </tr>
            <tr>
                <th>Prenoms:</th>
                <td>{{ commande.prenoms }}</td>
            </tr>
            <tr>
                <th>Email client:</th>
                <td>{{ commande.email }}</td>
            </tr>
            {# <tr>
                <th>Adresseclient:</th>
                <td>{{ commande.adresseclient }}</td>
            </tr> #}
            <tr>
                <th>Adresseclientlivraison:</th>
                <td>{{ commande.adresseclientlivraison }}</td>
            </tr>

<tr>
                <th>frais de livraison :</th>
                <td>{{ commande.fraislivraison  }}&nbsp francs</td>
            </tr>

            <tr>
                <th>Prix total (Frais de livraison inclu) :</th>
                <td>{{refTva  + commande.fraislivraison   }}&nbsp francs</td>
            </tr>
             <tr>
                <th>Article commandé:</th>

                
                <td style="">
                {% for produit in commande.produit %}
               article n° {{loop.index}}
                -<b style="font-size:20px;color:{{ random(['red', '#000000', 'green']) }} ;">Designation&nbsp :&nbsp{{produit.designation|slice(0,20)}};&nbspQuantité&nbsp:{{produit.quantite}};&nbspPrix:&nbsp{{produit.prix|number_format(2, ',', ' ') }}</b><br>{% endfor %}</td>
                </tr>
            <tr>
                <th>Datelivraison:</th>
                <td><div class="datelivraisoncomplet"></div></td>
            </tr>
            <tr>
                <th>Datecommande:</th>
<td><div class="datecommandecomplet"></div></td>       
     </tr>
        </tbody>
    </table>
     
      {{ form_start(form) }}
                  <div class="card-header">
                    <h4>Changement  de statut</h4>
                  </div>
                  <div class="card-body">
                    <div class="form-row">
                      <div class="form-group col-md-6">
                          {{ form_widget(form.typestatut, {'attr': {'class': 'js-example-basic-single','placeholder':'Nom'}}) }}
   <div class="invalid-feedback">
                       {{ form_errors(form.typestatut) }}
                    </div>
                      
   </div> </div>
                  <div class="card-footer">
                    {{ form_widget(form.submit) }}
                                            <a href="{{ path('commandes_index') }}" class="btn btn-success">Retour a la liste</a>

            {# <button type="submit" id="add_category" class="btn btn-icon btn-primary">Ajoutez une reference</button></div> #}

                  </div>
                </div>
         {{ form_end(form) }}
          
      </div>
{% endblock %}
{% block javascripts %} 
   {{parent()}}
 <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
 <script>
 
$(document).ready(function() {
    moment.locale('fr');
    moment.updateLocale('fr', {
    longDateFormat : {
        LT: "h:mm A",
        LTS: "h:mm:ss A",
        L: "MM/DD/YYYY",
        LL: "MMMM Do YYYY",
        LLL: "MMMM Do YYYY LT",
        LLLL: "dddd Do MMMM YYYY"
    }
});
 const datelivraison = moment('{{commande.datelivraison|date('Y')}}-{{commande.datelivraison|date('m')}}-{{commande.datelivraison|date('d')}}').format('LLLL');
  const datecommande = moment('{{commande.datecommande|date('Y')}}-{{commande.datecommande|date('m')}}-{{commande.datecommande|date('d')}}').format('LLLL');

     $('.datelivraisoncomplet').html(datelivraison);
     $('.datecommandecomplet').html(datecommande);
    $('.js-example-basic-single').select2({
  theme: "classic",
  placeholder: 'choisir un type'
});


 console.log(start);
});
     </script>
 
 
 {% endblock %}