{% extends 'body.html.twig' %}

{% block title %}
    {{ parent() }} - Accueil
{% endblock %}

{% block stylesheets %}	
    <link rel="stylesheet" href="{{ asset('lib/datatables-1.11.3/css/jquery.dataTables.min.css') }}">   
    <link rel="stylesheet" href="{{ asset('lib/datatables-1.11.3/css/dataTables.bootstrap4.min.css') }}">
    <!-- Listing CSS -->
    <link href="{{ asset('css/listing.css') }}" rel="stylesheet" />
{% endblock %}

{% block megamenu %}
    <div class="d-flex align-items-center border-left border-right pl-3 pr-2">
        <!-- Mega menu -->
        <div class="dropdown mega-menu d-none d-md-block">
            <a href="#" class="btn btn-secondary mr-2 btn-actions-header" id="dropdownMegaMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ ligneDeFabrication.code }}</a>
            <div class="dropdown-menu text-left" aria-labelledby="dropdownMenuButton">
                <div class="row m-0">
                    <div class="col-md-4 p-4">
                        <p class="text-primary text--cap border-bottom-primary d-inline-block">Postes de charge</p>
                        <div class="menu-icon-grid w-auto p-0">
                            {% for ligne in lignes %}
                                <a href="{{ path('liste-OF', {'codeLigne': ligne.code}) }}"><i class="i-Gears"></i> {{ ligne.nom }}</a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex align-items-center pl-3 pr-2">
        <i class="fas fa-chevron-left fa-2x cursor-pointer" id="semainePrecedente"></i>
        <span class="semaine border p-1" id="semaine">{{ numSemaine }}</span>
        <i class="fas fa-chevron-right fa-2x cursor-pointer" id ="semaineSuivante"></i>
    </div>

{% endblock %}

{% block headerbar %}
{% endblock %}

{% block rightbar %}
{% endblock %}

{% block page %}

    <div class="row mt-1">
        <div class="col-12">
            
            <div class="table-responsive">
              <table id="order-listing" class="table" data-page-length="20">
                  <thead>
                      <tr>
                        <th>OF</th>
                        <th>Statut</th>
                        <th>Ope</th>
                        <th>Article</th>
                        <th>Désignation</th>
                        {#<th>Num Semaine</th>#}
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Qté lancée</th>
                        <th>Qté produite</th>
                      </tr>
                  </thead>
                  <tbody id="liste">
                      {% for operation in operations %}
                      
                      <tr>
                          <td class="font-weight-bold">{{ operation.ordreFabrication.code }}<span class="carre-couleur-liste" style="background:{{ operation.ordreFabrication.couleur }};"></span></td>
                          <td>{{ operation.ordreFabrication.statutOF }}</td>
                          <td>{{ operation.numero }}</td>
                          <td>{{ operation.ordreFabrication.article }}</td>
                          <td>{{ operation.ordreFabrication.designationArticle }}</td>
                          {#<td>{{ operation.dateDebut|date('d/m/y',) }}</td>#}
                          {#<td id="dateligdeb">{{ operation.dateDebut|date('d/m/y H:i') }}</td>#}
                          <td id="dateligdeb">{{ operation.dateDebut|date('d/m/Y') }}</td>
                          <td id="dateligfin">{{ operation.dateFin|date('d/m/y H:i') }}</td>
                          <td class="text-right">{{ operation.ordreFabrication.quantiteLancee }}</td>
                          <td class="text-right">{{ operation.ordreFabrication.quantiteProduite }}</td>
                      </tr>
                      
                      {% endfor %}

                      {% for maintenance in maintenances %}
                      
                      <tr>
                          <td class="font-weight-bold">{{ maintenance.numero }}<span class="carre-couleur-liste" style="background:{{ maintenance.couleur }};"></span></td>
                          <td></td>
                          <td></td>
                          <td>Maintenance</td>
                          <td>{{ maintenance.libelle }}</td>
                          <td id="dateligdeb">{{ maintenance.dateDebut|date('d/m/Y') }}</td>
                          <td id="dateligfin">{{ maintenance.dateFin|date('d/m/y H:i') }}</td>
                          <td class="text-right">0</td>
                          <td class="text-right">0</td>
                      </tr>
                     
                      {% endfor %}
                  </tbody>
              </table>
            </div>
        </div>
    </div>
    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <script src="{{ asset('lib/datatables-1.11.3/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/moment.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/dataTables.dateTime.min.js') }}"></script>
    <script src="{{ asset('lib/datatables-1.11.3/js/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/liste-operations/data-table.js') }}"></script>
    
    <script>
        $(document).ready(function(){
            
            d = new Date("{{ filtreDateDebut }}"+"T00:00:00");

console.log("Date filtre debut date : {{ filtreDateDebut | date('d-m-Y') }}");

            d.setDate(d.getDate());

            Date_deb = new Date(d.getFullYear(), d.getMonth(), d.getDate());
            jour = Math.floor((d - Date_deb) / (24 * 60 * 60 * 1000));
            semaine = Math.ceil(jour / 7); 

            j = 0;
            i = 0;
            
            $("#semaineSuivante").click(function(){
                i =  7;
                d.setDate(d.getDate() +  i);

                Date_deb = new Date(d.getFullYear(), 0, 1);
                jour = Math.floor((d - Date_deb) / (24 * 60 * 60 * 1000));
                semaine = Math.ceil(jour / 7);
            
                $("#semaine").val(semaine);
                var dataURL = "{{ path('liste-OF', {'codeLigne': ligneDeFabrication.code }) }}";
                dataURL = dataURL + "/" + semaine;
                document.location.href = dataURL;
                
            });
            $("#semainePrecedente").click(function(){
                j = 7;
                d.setDate(d.getDate() -  j);

                Date_deb = new Date(d.getFullYear(), 0, 1);
                jour = Math.floor((d - Date_deb) / (24 * 60 * 60 * 1000));
                semaine = Math.ceil(jour / 7); 
                
                $("#semaine").val(semaine);
                var dataURL = "{{ path('liste-OF', {'codeLigne': ligneDeFabrication.code }) }}";
                dataURL = dataURL + "/" + semaine;
                document.location.href=dataURL;
            });
        });

        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
    
{% endblock %}