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

{% block title %}Action Aujourd'hui{% endblock %}

{% block body %}
    <div class="tbl-container tbl-container-formateur" id="main_div">
        <table class="action_new_table">
            <div style="background:#fff">
                <thead class="tbl-header">
                    <tr class="tbl-row-header">
                        <th style="width: 3.5vw !important;">Action</th>
                        <th>Date de l'intervention</th>
                        <th>Code Action</th>
                        <th>Formateur</th>
                        <th>Intitulé de formation</th>
                        <th>Type de formation</th>
                        <th>Zone Géo</th>
                        <th>Nombre d'heures</th>
                    </tr>
                </thead>
            </div>
            <tbody class="tbl-body">
            {% for action in actionsJour %}
                <tr class="tbl-body-rows">
                    <td>
                        <a class="collection-edit"
                           href="#" title="Editer cette action">
                            <i class="far fa-edit" onclick="showAction(this)" data-link="{{path('action_today',  {'id': action[0]})}}"></i>
                        </a>
                        <a class="collection-edit"
                           href="{{ path('action_today_pointage', {'id' : action[0]})}}" target="_blank" title="Validez la présence des candidats">
                           <i class="far fa-calendar-check"></i>
                        </a>
                    </td>
                    <td>{{ action[1] ? action[1]|date('d/m/Y') : '' }}</td>
                    <td>
                        <a href="{{ path('dossier_show', {'id' : action[8]}) }}" target="_blank">
                            {{ action[2] }}
                        </a>
                    </td>
                    <td {% if action[9]|length > 0 %} style="background: #e74c3c; font-weight: 700;color:#fff; cursor: pointer"
                        onclick="showActionsOnConflicts(this)"
                        data-actionId="{{ action[0] }}"
                        data-link="{{ path('action_today') }}"
                        {% endif %}>{{ action[3] }}</td>
                    <td>{{ action[4] }}</td>
                    <td>{{ action[5] }}</td>
                    <td>{{ action[6] }}</td>
                    <td>{{ action[7] }}</td>
                </tr>
                {% else %}
                    <tr>
                        <td colspan="8">
                            La requête n'a retourné aucune données.
                        </td>
                    </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {{ include('components/codeActionFiltre.html.twig', {'datalist' : dataList}) }}

    <div class="popup-background" onclick="removePopup()"></div>
    <div class="popup-modal" id="main_today_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))

        }

        $('.fa-edit')[0].addEventListener('click',e => {
            e.preventDefault()
        })

        function showAction($this) {
            action_url = $this.dataset.link.split("?")[0];
            action_id = $this.dataset.link.split("=")[1]
            let data ={
                'actionId' : action_id
            }

            $.post(action_url, data).then(function (data) {
                let main = $(data).find('#main_today_form');
                $('#main_today_form').replaceWith(main);
                $(".popup-modal")[1].style.cssText = "top:10vh; display:flex;opacity:100;left:12vw";
                $(".popup-background")[1].style.cssText = "height:100vh; display:block;left:0"
                $('#main_today_form form')[0].style.cssText = "width:100%";
                $('.selectpicker').selectpicker();
                $( "form" ).on( "submit", function( event ) {
                    event.preventDefault();
                    let data = {
                        'action' : {
                            'actionId': action_id,
                            'dateIntervention': $('#action_type_edit_date_intervention').val(),
                            'formateur': $('#action_type_edit_nomFormateur').val(),
                            'nombreDheure': $('#action_type_edit_nombre_dheure').val(),
                            'notes': $('#action_type_edit_notes').val()
                        }
                    }
                    $.post(action_url, data).then(function (data) {
                       let main = $(data).find('#main_div');
                       $('#main_div').replaceWith(main);
                       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-background")[1].style.cssText = "height:0vh; display:none"
        }
    </script>



{% endblock %}