{% 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') }}">
{% 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('viewList', {'codeLigne': ligne.code}) }}"><i class="i-Gears"></i> {{ ligne.nom }}</a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- born du date -->
        <!--div class="">
            <label for="datedeb">Date début : </label><input type="text"  value ="01/01/2022" name="datedeb" id="min">
            <label for="datefin">Date Fin : </label><input type="text" value ="31/12/2022" name="datefin" id="max">
        </div-->
    </div>
    {% if MODE_PLANNING == 'Semaine' %}
        <div class="d-flex align-items-center pl-3 pr-2">
            <i class="fas fa-chevron-left fa-2x cursor-pointer" id="semainePrecedente" onclick="semainePrecedente()"></i>
            <!--input type="text" name="numsemaine" class="semaine border" id="semaine" value="{{ NUMSEMAINE }}"-->

             <span class="semaine border p-1" id="semaine">{{ NUMSEMAINE }}</span>
            <!--span class="semaine border p-1" id="semaine"></span-->
            <i class="fas fa-chevron-right fa-2x cursor-pointer" id ="semaineSuivante" onclick="semaineSuivante()"></i>
        </div>
        <!--div class="d-flex align-items-center pl-3 pr-2">
            <label for="">Date debut :</label><input type="date" name="datedeb" class="semaine border p-1" id="datedeb">
            <label for="">Date fin :</label><input type="date" name="datefin" class="semaine border p-1" id="datefin">
        </div-->
    {% elseif MODE_PLANNING == 'Glissant' %}
        <div class="d-flex align-items-center pl-3 pr-2">
            <i class="icone-gantt i-Magnifi-Glass-" onclick="zoomIn()"></i>
            <i class="icone-gantt i-Magnifi-Glass" onclick="zoomOut()"></i>
        </div>
    {% endif %}
{% 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>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.numero }}</td>
                          <td>{{ operation.ordreFabrication.article }}</td>
                          <td>{{ operation.ordreFabrication.designationArticle }}</td>
                          <td>{{ operation.semaine_listOPE(operation.dateDebut|date('d/m/y')) }}</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>Maintenance</td>
                          <td>{{ maintenance.libelle }}</td>
                          <td id="dateligdeb">{{ maintenance.dateDebut|date('d/m/y H:i') }}</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/datetime-moment.js') }}"></script>
    <script src="{{ asset('js/liste-operations/data-table.js') }}"></script>
    
    <script src="{{ asset('lib/gantt_trial/codebase/dhtmlxgantt.js') }}"></script>


	<script>

        var MODE_PLANNING = "{{ MODE_PLANNING }}";
        //Ajouter par Abdel le 10/01/2023 : Numéro de la semaine 
        //debut traitement numero de la semaine :
        var NUMSEMAINE = parseInt("{{ NUMSEMAINE }}");

		/* Fonction de filtrage personnalisée qui recherchera les données dans la date OF entre deux dates */
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            var datdeb = Date.parse($('#min').val());
            var datfin = Date.parse($('#max').val());
            var dateof = Date.parse(data[4]); // use data for the age column

            if (
                (isNaN(datdeb) && isNaN(datfin)) ||
                (isNaN(datdeb) && dateof <= datfin) ||
                (datdeb <= dateof && isNaN(datfin)) ||
                (datdeb <= dateof && dateof <= datfin)
            ) {
                return true;
            }
            return false;
        });
    
        $(document).ready(function () {
            var table = $('#order-listing').DataTable();
        
            // filtrage de plage à redessiner sur l’entrée
            $('#min, #max').keyup(function () {
                table.draw();
            });
        });
        //fin filtrage du born date
        //debut num semaine
        gantt.config.d = new Date();
gantt.config.d.setDate(gantt.config.d.getDate());

gantt.config.Date_deb = new Date(gantt.config.d.getFullYear(), 0, 1);
gantt.config.jour = Math.floor((gantt.config.d - gantt.config.Date_deb) / (24 * 60 * 60 * 1000));
gantt.config.semaine = Math.ceil(gantt.config.jour / 7); 

gantt.config.j = 0;
gantt.config.i = 0;

$(document).ready(function(){
    gantt.config.test = 1;
    $("#semaineSuivante").click(function(){
                        
        gantt.config.i =  7;
        gantt.config.d.setDate(gantt.config.d.getDate() +  gantt.config.i);

        gantt.config.Date_deb = new Date(gantt.config.d.getFullYear(), 0, 1);
        gantt.config.jour = Math.floor((gantt.config.d - gantt.config.Date_deb) / (24 * 60 * 60 * 1000));
        gantt.config.semaine = Math.ceil(gantt.config.jour / 7); 
        // log console calc result     
        console.log("*>>>>> le numero de la semaine du " + gantt.config.d +" est :   " + gantt.config.semaine);

        $("#semaine").val(gantt.config.semaine);
    });
    $("#semainePrecedente").click(function(){

        gantt.config.j = 7;
        gantt.config.d.setDate(gantt.config.d.getDate() -  gantt.config.j);

        gantt.config.Date_deb = new Date(gantt.config.d.getFullYear(), 0, 1);
        gantt.config.jour = Math.floor((gantt.config.d - gantt.config.Date_deb) / (24 * 60 * 60 * 1000));
        gantt.config.semaine = Math.ceil(gantt.config.jour / 7); 
        // log console calc result      
        console.log("*<<<<< le numero de la semaine du " + gantt.config.d +" est :   " + gantt.config.semaine);
        //$("#semaine").text(parseInt($("#semaine").text())-1);
        $("#semaine").val(gantt.config.semaine);
    });
});
//fin traitement Numéro de la semaine

        //fin num semaine

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