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

{% block title %}Actions des candidats{% endblock %}

{% block body %}
    {{ include('components/codeActionFiltre.html.twig', {'datalist' : dataList}) }}
    <div style="margin-left: 10px"  id="main_div_affectation" data-beg="{{ date[0] }}" data-end="{{ date[1] }}">
        <form class="finance-form flex-container" id="affectation_form"
              action="{{ path('action_presence_candidat') }}" method="POST"
              style="display: flex;flex-direction: column"
        >
            <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  style="display: flex;flex-direction: row; margin-top: 5px"  >
                <div class="finance-form-date" style="display: flex;flex-direction: row" >
                    <div>
                        <span>Filtrer par</span>
                        <label for="formateur"> candidat: </label>
                    </div>
                    <select id="select-candidat">
                        {% for candidat in dataListCandidat %}
                            <option>{{ candidat }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="finance-form-date" style="display: flex;flex-direction: row">
                    <div>
                        <label for="formateur"> formateur: </label>
                    </div>
                    <select id="select-formateur">
                        {% for formateur in dataListFormateur %}
                            <option>{{ formateur }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="finance-form-date" style="display: flex;flex-direction: row">
                    <div>
                        <label for="codeAction">code action: </label>
                    </div>
                    <select id="select-codeAction">
                        {% for codeAction in dataListCodeAction %}
                            <option>{{ codeAction }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="tbl-container tbl-container-formateur" id="main_div" style="height: 90vh !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;">Pointage</th>
                            <th>Candidat</th>
                            <th>Date de l'intervention</th>
                            <th>Code Action</th>
                            <th>Intitulé de formation</th>
                            <th>Formateur</th>
                            <th style="width: 4.5% !important;">Nombre d'heures</th>
                            <th style="width: 3% !important;">Présence</th>
                        </tr>
                    </thead>
                </div>
                <tbody class="tbl-body">

                {% for action in actionsPeriode %}
                    <tr class="tbl-body-rows">
                        <td>
                            <a
                               href="#"
                               onclick="showForm(this)"
                               data-date="{{ trans_day_hash[action[2]|date('l')] }} - {{ action[2]|date('d/m/Y') }} "
                               data-candidat="{{ action[1] }}"
                               data-statut="{{ action[9] }}"
                               data-formateur="{{ action[5] }}"
                               data-action="{{ action[0] }}"
                               data-absent="{% if action[7] %}true{% else %}false{% endif %}"
                               data-motif="{{ action[10] }}"
                               title="Validez la présence des candidats">
                                <i class="far fa-calendar-check"></i>
                            </a>
                        </td>
                        <td>{{ action[1] }}</td>
                        <td>{{ action[2] ? action[2]|date('d/m/Y') : '' }}</td>
                        <td>
                            <a href="{{ path('dossier_show',{id: action[8]}) }}" target="_blank" >
                                {{ action[3] }}
                            </a>
                        </td>
                        <td>{{ action[4] }}</td>
                        <td>{{ action[5] }}</td>
                        <td>{{ action[6] }}</td>
                        <td {% if not action[7] %}style="background: #2ecc71; font-weight: 700; color:#fff"{% else %}style="background: #e74c3c; font-weight: 700;color:#fff" {% endif %} >{% if not action[7] %}Oui{%else%}Non{% endif %}</td>
                    </tr>
                    {% if not action[7] %} {% set nbHeuresCandidatsPresent = nbHeuresCandidatsPresent + action[6] %} {% else %} {% set nbHeuresCandidatsAbsent = nbHeuresCandidatsAbsent + action[6] %} {% endif  %}
                {% endfor %}
                    <tr>
                        <td colspan="4"></td>
                        <td>
                            <b>Total heures</b>
                        </td>
                        <td>
                            <i class="far fa-long-arrow-right"></i>
                        </td>
                        <td>
                            <b>{{ nbHeuresCandidatsPresent }}</b> h présentes
                        </td>
                        <td>
                            <b>{{ nbHeuresCandidatsAbsent }}</b> h absentes
                        </td>
                    </tr>
                </tbody>
            </table>
        {% endif %}
    </div>

    <div class="popup-background" onclick="removePopup()"></div>
    <div class="popup-modal" id="div_absence">
        <div class="popup-modal-head">
            <i class="fad fa-user-graduate fa-2x"></i>
            <span class="popup-modal-head_name" id="title_candidat"></span>
            <span class="popup-modal-head_statut" id="statut_candidat"></span>
        </div>
        <div class="popup-modal-body" id="popup_body" style="margin-top:15%">
            <soan id="action_date"></soan><br>
            <span id="action_formateur"></span>
            <div class="popup-modal-body-form">
                <div class="popup-modal-body-form-input">
                    <p>Valider la présence</p>
                    <div class="popup-modal-body-form-input-radio">
                        <div class="popup-modal-body-form-input-radio-2">
                            <label for="present" style="color:#2ecc71;">Present: </label>
                            <input type="radio" id="present" name="present">
                        </div>
                        <div class="popup-modal-body-form-input-radio-1">
                            <label for="absent" style="color:#c0392b;">Absent: </label>
                            <input type="radio" id="absent" name="absent" >
                        </div>
                    </div>
                </div>
                <div class="popup-modal-body-form-textarea" id="motifAbsence">
                    <label for="motif">Motif de l'absence : </label>
                    <textarea id="motif" name="motif"></textarea>
                </div>
                <button class="save-btn btn btn-success btn-lg" type="submit" id="enrPresence" style="margin-top: 5%; width: 100%;" disabled="true" onclick="submitModification(this)"
                        data-link="{{ path('action_presence_candidat') }}"> Enregistrer</button>
            </div>
        </div>
    </div>

    <script>
        let check1 = document.getElementById('present');
        let check2 = document.getElementById('absent');
        let popupBody = document.getElementById('popup_body');
        let motif = document.getElementById('motif');
        let enrPresence = document.getElementById('enrPresence');
        let action;
        function showForm($this){
            action = $this.dataset.action;

            $(".popup-modal")[1].style.cssText ="top: 15vh;flex-direction: column; margin-left: 10%; opacity: 100; width:20vw !important; height: 45vh !important; border-radius:0; background:#fff";
            $(".popup-background")[1].style.cssText = "height:100vh; display:block; left:0";
            document.getElementById('action_date').innerHTML=`<i class="far fa-calendar-alt"></i> ${$this.dataset.date}`;
            document.getElementById('action_formateur').innerHTML=`<i class="fas fa-user-circle" title="Formateur"></i> ${$this.dataset.formateur}`;
            document.getElementById('title_candidat').innerText = $this.dataset.candidat;
            document.getElementById('statut_candidat').innerText = $this.dataset.statut;
            if($this.dataset.statut === "En formation"){
                document.getElementById('statut_candidat').style.background = "#2ecc71";
            }
            else if ($this.dataset.statut === "Abandon"){
                document.getElementById('statut_candidat').style.background = "#e74c3c";
            }
            else {
                document.getElementById('statut_candidat').style.background = "#d29d40";
            }

            if($this.dataset.absent === "true"){
                check2.checked = true;
                motif.value = $this.dataset.motif;
                popupBody.style.marginTop = "0";
                motifAbsence.style.display = "flex";

            }
            else{
                check1.checked = true;
                motifAbsence.style.display = "none";
                popupBody.style.marginTop = "15%";
                enrPresence.disabled = true;
            }
            check1.addEventListener('change', () => {
                check2.checked = false
                if (check1.checked === true){
                    motifAbsence.style.display = "none";
                    popupBody.style.marginTop = "15%";
                    enrPresence.disabled = false;

                }
            });

            check2.addEventListener('change', () => {
                check1.checked = false;
                if (check2.checked === true){
                    popupBody.style.marginTop = "0";
                    motifAbsence.style.display = "flex";
                    if(motif.value !== "") {
                        enrPresence.disabled = true;
                    }
                }
            });

            motif.addEventListener('input', () => {
                if(motif.value === "") {
                    enrPresence.disabled = true;
                }
                else{
                    enrPresence.disabled = false;
                }
            });

        }

        function submitModification($this){
            let data = {
                action: action,
                absent: check2.checked,
                motif: motif.value
            }
            $.post($this.dataset.link, data).then(function(){
                let data = {
                    dateFrom : $('#f-from').val(),
                    dateTo : $('#f-to').val(),
                    candidat: $('#select-candidat option:selected').text(),
                    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();
        }

        function removePopup() {
            $(".popup-modal")[1].style.cssText = "top:100vh; display:none;opacity:0";
            $(".popup-background")[1].style.cssText = "height:0vh; display:none";
            check1.checked = false;
            check2.checked = false;
        }
    </script>



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

{% endblock %}