{% set trans_day_hash = {
    Monday: 'Lundi',
    Tuesday: 'Mardi',
    Wednesday: 'Mercredi',
    Thursday: 'Jeudi',
    Friday: 'Vendredi',
    Saturday: 'Samedi',
    Sunday: 'Dimanche'
} %}

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

{% block title %}Affectation des formateurs{% endblock %}

{% block body %}
    <div class="finance" id="main_div_affectation" data-beg="{{ date[0] }}" data-end="{{ date[1] }}">
        <form class="finance-form flex-container" id="affectation_form" action="{{ path('action_index') }}" method="POST">
            <div class="finance-form-date">
                <span>Pour la periode </span>
                <label for="f-from">du :</label>
                <input type="date" name="f-from" id="f-from"/>
                <label for="f-to">au :</label>
                <input type="date" name="f-to" id="f-to" readonly/>
            </div>
            <div class="finance-form-date">
                <span>Filtrer par</span>
                <label for="formateur"> formateur: </label>
                <select id="select-formateur">
                    {% for formateur in dataListFormateur %}
                        <option>{{ formateur }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="finance-form-date">
                <label for="codeAction">code action: </label>
                <select id="select-codeAction">
                    {% for codeAction in dataListCodeAction %}
                        <option>{{ codeAction }}</option>
                    {% endfor %}
                </select>
            </div>
        </form>
    </div>
    <div class="tbl-container tbl-container-formateur" id="main_div" style="height:91.5vh!important;">
        {% if actionsPeriode is defined %}
            <table class="action_new_table">
                <div style="background:#fff">
                    <thead class="tbl-header">
                    <tr class="tbl-row-header">
                        <th style="width: 2.5vw !important;">Action</th>
                        <th>Date de l'intervention</th>
                        <th>Code Action</th>
                        <th>Intitulé de formation</th>
                        <th>Formateur</th>
                        <th>Nombre d'heures</th>
                        <th>Zone Géo</th>
                    </tr>
                    </thead>
                </div>
                <tbody class="tbl-body">
                {% for action in actionsPeriode %}
                    <tr class="tbl-body-rows">
                        <td>
                            <a
                               href="#">
                                <i class="far fa-edit" onclick="editAction(this)" data-link="{{path('action_affect',  {'id': action[0]})}}"></i>
                            </a>
                        </td>
                        <td>{{ action[1] ? action[1]|date('d/m/Y') : '' }}</td>
                        <td>
                            <a href="{{ path('dossier_show',{id: action[7]}) }}" target="_blank" >
                                {{ action[2] }}
                            </a>
                        </td>
                        <td>{{ action[3] }}</td>
                        <td {% if action[8]|length > 0 %} style="background: #e74c3c; font-weight: 700;color:#fff; cursor: pointer"
                            onclick="showActionsOnConflicts(this)" data-actionId="{{ action[0] }}"
                            data-link="{{ path('action_index') }}"
                            {% endif %}
                            >{{ action[4] }}</td>
                        <td>{{ action[5] }}</td>
                        <td>{{ action[6] }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
    {{ include('components/codeActionFiltre.html.twig', {'datalist' : dataList}) }}

    <div class="popup-background" onclick="removePopup()"></div>
    <div class="popup-modal" id="main_form">
        {% if form is defined %}
            {{ form_start(form) }}
            <div class="show-container" style="height: 70vh; ">
                <div class="show-container_title action-title">
                    <div class="show-container_title-left">
                        <h3>
                            Action du dossier <span class='id_value'>{{ action.dossier.codeAction }}</span>
                        </h3>
                    </div>
                    <div class="show-container_title-right">
                        <a class="save-btn btn btn-danger btn-lg" href="#"
                           onclick="removePopup()">
                            Abadonner
                        </a>
                        <button class="action-btn save-btn btn btn-success btn-lg">
                            {{ button_label|default('Enregistrer') }}
                        </button>
                    </div>
                </div>

                <div class="show-container_content" style="margin-left: 0;">
                    <div class="show-container_content-side" style="height: auto !important;">
                        <fieldset>
                            <legend>Modifier une action</legend>
                            <div class="dossier_field">
                                <span class="dossier_field-name">Date de l'intervention</span>
                                <i class="far fa-long-arrow-right"></i>
                                <span class="dossier_field-value">
                                    {{ form_widget(form.date_intervention) }}
                                </span>
                            </div>
                            <div class="dossier_field">
                                <span class="dossier_field-name">Formateur</span>
                                <i class="far fa-long-arrow-right"></i>
                                <span class="dossier_field-value">
                                  {{ form_widget(form.nomFormateur) }}
                                </span>
                            </div>
                            <div class="dossier_field">
                                <span class="dossier_field-name">Nombre d'heures</span>
                                <i class="far fa-long-arrow-right"></i>
                                <span class="dossier_field-value">
                                  {{ form_widget(form.nombre_dheure) }}
                                </span>
                            </div>
                        </fieldset>
                    </div>
                    <div class="dossier_notes" style="height: 25vh">
                        <span class="dossier_notes-label">Notes :</span>
                        <span class="dossier_notes-value">
                            {{ form_widget(form.notes,{ 'attr': { 'style' : 'height:100% !important'}}) }}
                        </span>
                    </div>
                </div>
            </div>
            {{ form_end(form) }}
        {% endif %}
    </div>

    <div class="popup-modal" id="main_conflit" style="left:15%;">
        {% if tabActionsConflicts|length > 0 %}
            {% set index = 0 %}
            <div class="tbl-container plan-container" style="padding: 20px 20px">
                <table class="tbl-container-plan" style="height:auto !important; width: 100%">
                    <thead class="tbl-header">
                        <tr class="tbl-row-header">
                            <th>
                                Code Action Dossier
                            </th>
                            <th>
                                Date de l'intervention
                            </th>
                            <th>
                                Jour
                            </th>
                            <th>
                                Formateur
                            </th>
                            <th>
                                Nombre d'heures
                            </th>
                            <th>
                                Notes
                            </th>
                        </tr>
                    </thead>
                    <tbody class="tbl-body">
                    <tr class="tbl-body-rows">
                        <td colspan="6">
                            <h6 style="color:#d29d40">Le formateur affecter à cette action: <b style="color:#e74c3c">{{ actionOnConflict.nomFormateur }} </b></h6>
                        </td>
                    </tr>
                    <tr class="tbl-body-rows">
                        <td>
                            <a href="{{ path('dossier_show', {id: tabDossiers[index]}) }}" target="_blank"
                               title="Naviger vers le dossier">
                                {{ actionOnConflict.dossier.codeAction }}
                            </a>
                        </td>
                        <td>
                            {{ (actionOnConflict.dateIntervention|date('d/m/Y')|slice(0, 1)) != '-'
                            ? actionOnConflict.dateIntervention|date('d/m/Y')
                            : 'Date invalide: ' ~ (actionOnConflict.dateIntervention|date('d/m/Y')) }}
                        </td>
                        <td>
                            {{ trans_day_hash[actionOnConflict.dateIntervention|date('l')] }}
                        </td>
                        <td >
                            {{ actionOnConflict.nomFormateur }}
                        </td>
                        <td>
                            {{ actionOnConflict.nombreDheure }}
                        </td>
                        <td>
                            {{ actionOnConflict.notes }}
                        </td>
                    </tr>
                    <tr class="tbl-body-rows">
                        <td colspan="6">
                            <h6 style="color:#d29d40">A été affecté à la liste suivante des actions:</h6>
                        </td>
                    </tr>
                    {% for action in tabActionsConflicts %}
                        <tr class="tbl-body-rows">
                            <td>
                                <a href="{{ path('dossier_show', {id: tabDossiers[index]}) }}" target="_blank"
                                   title="Naviger vers le dossier">
                                    {{ tabDossiers[index].codeAction }}
                                </a>
                            </td>
                            <td>
                                {{ (action.dateIntervention|date('d/m/Y')|slice(0, 1)) != '-'
                                ? action.dateIntervention|date('d/m/Y')
                                : 'Date invalide: ' ~ (action.dateIntervention|date('d/m/Y')) }}
                            </td>
                            <td>
                                {{ trans_day_hash[action.dateIntervention|date('l')] }}
                            </td>
                            <td >
                                {{ action.nomFormateur }}
                            </td>
                            <td>
                                {{ action.nombreDheure }}
                            </td>
                            <td>
                                {{ action.notes }}
                            </td>
                        </tr>
                        {% set index = index +1 %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>

    <script>

        function showActionsOnConflicts($this){
            let data = {
                actionWithConflicts: $this.dataset.actionid,
            }
            $.post($this.dataset.link, data).then(function (data) {
                let main = $(data).find('#main_conflit');
                $('#main_conflit').replaceWith(main);
                $(".popup-modal")[2].style.cssText = "height: auto !important; top:10vh; display:flex; justify-content: space-between; opacity:100; left:15%";
                $(".popup-background")[1].style.cssText = "height:100vh; display:block; left:0"
            }).catch( er => console.log(er))

        }

        function editAction($this) {
            action_url = $this.dataset.link.split("?")[0];
            action_id = $this.dataset.link.split("=")[1]
            let data ={
                'deb' : $('#f-from').val(),
                'end' :  $('#f-to').val(),
                'actionId' : action_id
            }
            $.post(action_url, data).then(function (data) {
                let main = $(data).find('#main_form');
                $('#main_form').replaceWith(main);
                $(".popup-modal")[1].style.cssText = "top:10vh; border-radius: 0; height:auto; display:flex;opacity:100;left:12vw";
                $(".popup-background")[1].style.cssText = "height:100vh; display:block;left:0"
                $('#main_form form')[0].style.cssText = "width:100%";
                $('.selectpicker').selectpicker();
                $( "form" ).on( "submit", function( event ) {
                    event.preventDefault();
                    let data = {
                        'action' : {
                            'deb' : $('#f-from').val(),
                            'end' :  $('#f-to').val(),
                            'actionId': action_id,
                            'dateIntervention': $('#action_type_edit_date_intervention').val(),
                            'formateur': $('#action_type_edit_nomFormateur').val(),
                            'nombreDheure': parseInt($('#action_type_edit_nombre_dheure').val()),
                            'notes': $('#action_type_edit_notes').val()
                        }
                    }
                    $.post(action_url, data).then(function () {
                        let data = {
                            dateFrom : $('#f-from').val(),
                            dateTo : $('#f-to').val(),
                            formateur: $('#select-formateur option:selected').text(),
                            codeAction: $('#select-codeAction option:selected').text()
                        }
                        $.post(formPeriode.getAttribute('action'), data).then(function (data) {
                            let main = $(data).find('#main_div');
                            $('#main_div').replaceWith(main);
                        }).catch( er => console.log(er))
                        removePopup()
                    }).catch( er => console.log(er))
                });
            }).catch( er => console.log(er))
        }
        function removePopup() {
            $(".popup-modal")[1].style.cssText = "top:100vh; display:none;opacity:0";
            $(".popup-modal")[2].style.cssText = "top:100vh; display:none;opacity:0";
            $(".popup-background")[1].style.cssText = "height:0vh; display:none"
        }
    </script>



    <script src="{{ asset('assets/scripts/form_req.js') }}" type="text/javascript"></script>

{% endblock %}