{% 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') }}">
    <!-- Gantt CSS -->
    <link href="{{ asset('css/gantt.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('viewGanttViewer', {'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">
                        <h2 class="title">Dernière synchro</h2>
                        <h4 class="title mb-4">{{ DERNIERE_SYNCHRO }}</h4>
                    </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" id="semainePrecedente" onclick="semainePrecedente()"></i>
            <span class="semaine border p-1" id="semaine">{{ NUMSEMAINE }}</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 %}
    <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 %}
    {% if MODE_PLANNING == 'Glissant' %}
        <div class="actions-gantt pl-3 pr-3">
            <i class="icone-gantt i-Magnifi-Glass-" onclick="zoomIn()"></i>
            <i class="icone-gantt i-Magnifi-Glass" onclick="zoomOut()"></i>
        </div>
    {% endif %}
{% endblock %}

{% block page %}

    <div id="gantt"></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 }}";
        var POPUP_VIEWER  = "{{ POPUP_VIEWER }}";               
    </script>
    
    {# DHTMLX Gantt #}
    <script src="{{ asset('lib/gantt_trial/codebase/dhtmlxgantt.js') }}"></script>
    <script src="{{ asset('js/gantt/config-viewer.js') }}"></script>
    <script src="{{ asset('js/gantt/events-viewer.js') }}"></script>
    
    <script>
        
        $(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");
        
    </script>
    
{% endblock %}