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

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

{% block stylesheets %}	
    <link rel="stylesheet" href="{{ asset('lib/gantt_trial/codebase/dhtmlxgantt.css') }}">
    <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('viewGantt', {'codeLigne': ligne.code}) }}" class="{% if ligneDeFabrication.code == ligne.code %}border border-primary{% endif %}"><i class="i-Gears"></i> {{ ligne.code }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-4 p-4">
                        <p class="text-primary text--cap border-bottom-primary d-inline-block">Raccourcis</p>
                        <ul class="links">
                            {#<li><a href="">Tout positionner</a></li>#}
                            <li><a href="{{ path('depublier', {'codeLigne': ligneDeFabrication.code}) }}">Tout dépositionner</a></li>
                            <li><a href="{{ path('creer-maintenanceFabrication') }}">Créer une maintenance</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4 p-4">
                        <h2 class="title">Dernière synchro</h2>
                        <h4 class="title mb-4">{{ DERNIERE_SYNCHRO }}</h4>
                        <div class="text-center">
                            <a id="boutonSynchro" class="btn btn-success mr-1" data-style="expand-left" href="{{ path('recuperation-of') }}">
                                <span class="ladda-label"><i class="fas fa-sync"></i> Synchro ERP</span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
                            </a>
                            <a id="boutonPublication" class="btn btn-primary ml-1" data-style="expand-left" href="{{ path('publication-of') }}">
                                <span class="ladda-label"><i class="fas fa-share"></i> Publier le planning</span><span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </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" onclick="semainePrecedente()"></i>
            <span class="semaine border p-1" id="semaine">S41</span>
            <i class="fas fa-chevron-right fa-2x cursor-pointer" onclick="semaineSuivante()"></i>
        </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 %}
    <div class="infos-barre-haute">
        <div class="row">
            <div class="col-md-4 infos-ope pl-3 pr-3 border-left border-right">

            </div>
            <div class="col-md-4 infos-ope2 pl-3 pr-3 border-right">

            </div>
            <div class="col-md-4 infos-ope3 pl-3 pr-3 border-right">

            </div>
        </div>
    </div>
{% endblock %}

{% block rightbar %}
    <div class="actions-gantt pl-3 pr-3">
        <i class="icone-gantt i-Left" onclick="gantt.undo()"></i>
        <i class="icone-gantt i-Right" onclick="gantt.redo()"></i>
    </div>
{% endblock %}

{% block page %}
    
    
    <div class="loader">
        <div class="loader-bubble loader-bubble-primary m-5"></div>
    </div>

    <div id="gantt"></div>
    
    <div id="modalOFNonPlanifies" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-OFNonPlanifies" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Opérations à planifier</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"><i class='i-Close'></i></span>
            </button>
          </div>
          <div class="modal-body" id="OpeNonPlanifies">
              {# Alimenté en Ajax #}
          </div>
        </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>
        var horairesLundi    = {% if ligneDeFabrication.horairesLundi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesLundi|raw }}]{% endif %};
        var horairesMardi    = {% if ligneDeFabrication.horairesMardi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesMardi|raw }}]{% endif %};
        var horairesMercredi = {% if ligneDeFabrication.horairesMercredi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesMercredi|raw }}]{% endif %};
        var horairesJeudi    = {% if ligneDeFabrication.horairesJeudi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesJeudi|raw }}]{% endif %};
        var horairesVendredi = {% if ligneDeFabrication.horairesVendredi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesVendredi|raw }}]{% endif %};
        var horairesSamedi   = {% if ligneDeFabrication.horairesSamedi == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesSamedi|raw }}]{% endif %};
        var horairesDimanche = {% if ligneDeFabrication.horairesDimanche == 'Fermé' %}false{% else %}[{{ ligneDeFabrication.horairesDimanche|raw }}]{% endif %};
        var HEURE_DEBUT = {{ HEURE_DEBUT }};
        var HEURE_FIN = {{ HEURE_FIN }};
        var GROUPAGE_OPERATIONS_OF = "{{ GROUPAGE_OPERATIONS_OF }}";
        var MODE_PLANNING = "{{ MODE_PLANNING }}";
    </script>
    
    {# DHTMLX Gantt #}
    <script src="{{ asset('lib/gantt_trial/codebase/dhtmlxgantt.js') }}"></script>
    <script src="{{ asset('js/gantt/config.js') }}"></script>
    <script src="{{ asset('js/gantt/events.js') }}"></script>
    
    <script>
        //Gestion Loader
        var $loading = $('.loader').hide();
        $(document)
          .ajaxStart(function () {
            $loading.show();
          })
          .ajaxStop(function () {
            $loading.hide();
          });

        //Au clic sur le bouton de synchro ou publication on affiche le loader
        $('#boutonSynchro').on("click", function() {
            $('.loader').show();
        });
        $('#boutonPublication').on("click", function() {
            $('.loader').show();
        });
        
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        })
        
        gantt.init("gantt");
        gantt.load("{{ path('data', {'codeLigne': ligneDeFabrication.code}) }}", "json");

        
        var dp = new gantt.dataProcessor("{{ path('gantt') }}");
        dp.init(gantt);
        dp.setTransactionMode("REST");
        
        //Fonction de mise à jour de la liste des opérations non planifiés
        function majListeOpeNonPlanifies() {
            setTimeout(function(){
                $('#OpeNonPlanifies').html('');
                var dataURL = "{{ path('recup-ope-non-planifiees', {'codeLigne': ligneDeFabrication.code}) }}";
                $('#OpeNonPlanifies').load(dataURL);
            }, 1000);
        }
    
        $(function () {
            
            //On met à jour la liste des opé non planifies
            majListeOpeNonPlanifies()
            
            setTimeout(function(){
                //Ajout d'un bouton pour ajouter une opération non planifiée sur chaque ligne d'opération planifié et en entête pour ajouter la première opé quand il n'y en a pas
                setInterval(function(){
                    //Icones + sur les lignes d'opé
                    $(".gantt_last_cell .gantt_tree_content").each(function( index ) {
                        $( this ).html('<div class="icone_addOF"></div>');
                    });
                    //Gestion clic sur icone_addOF et ouverture modal de sélection des opérations non planifiées
                    $('.icone_addOF').on('click', function(){
                       var task_id_click = $(this).parent().parent().parent().attr('task_id');
                       $('#indice-ope-clic-addOF').html(task_id_click);
                       $('#modalOFNonPlanifies').modal('show');
                    });
                    
                    //Icone + entête pour première opé à positionner
                    if(gantt.getTaskCount() <= 0) {
                        $(".gantt_grid_head_addOF").each(function( index ) {
                            $( this ).html('<div class="icone_addOF_first"></div>');
                        });
                        //Gestion clic sur icone addOF_first et ouverture modal de sélection des opérations non planifiées
                        $('.icone_addOF_first').on('click', function(){
                           $('#indice-ope-clic-addOF').html("first");
                           $('#modalOFNonPlanifies').modal('show');
                        });
                    }
                }, 1000);
            }, 1000);
        });
        
    </script>
    
{% endblock %}