{% set trans_day_hash = {
    Monday: 'Lundi',
    Tuesday: 'Mardi',
    Wednesday: 'Mercredi',
    Thursday: 'Jeudi',
    Friday: 'Vendredi',
    Saturday: 'Samedi',
    Sunday: 'Dimanche'
} %}
{% set index = 0 %}
<div class="profile-content formateur">
    <div class="formateur-planning" id="planning_div">
        <table class="formateur-planning-table">
            <thead>
                <tr>
                    <th></th>
                    {% for action in tabActionsFormateur %}
                        <th>
                            <div class="formateur-planning-table_thead">
                                <span class="formateur-planning-table_thead-day">{{ trans_day_hash[action.dateIntervention|date('l')] }}</span>
                                <span class="formateur-planning-table_thead-date">{{ action.dateIntervention|date('d/m/Y') }}</span>
                            </div>
                        </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>

                {% for candidat in candidats %}
                    <tr>
                        <td><span class="formateur-planning-table-nom">{{ candidat.nom }} {{ candidat.prenom }}</span></td>
                        {% for action in tabActionsCandidats[index] %}
                            <td>
                                <div class="formateur-planning-table_action" onclick="showForm(this)" data-date="{{ trans_day_hash[action[1]|date('l')] }} {{ action[1]|date('d/m/Y') }} "
                                     data-candidat="{{ candidat.nom }} {{ candidat.prenom }}"
                                     data-action="{{ action[0] }}" data-absent="{% if action[2] %}true{% else %}false{% endif %}" data-motif="{{ action[3] }}">
                                    <span class="formateur-planning-table_action-module">Module d'enseignement</span>
                                    {% if (action[2] is null) %}
                                        <span class="formateur-planning-table_action-tag_null">Indéfini</span>
                                    {% elseif (action[2]) %}
                                        <span class="formateur-planning-table_action-tag_absence">Abscent</span>
                                    {% else %}
                                        <span class="formateur-planning-table_action-tag_present">Présent</span>
                                    {% endif %}
                                </div>
                            </td>
                        {% endfor %}
                    </tr>
                {% set index = index + 1 %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</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">En Formation</span>
    </div>
    <div class="popup-modal-body" id="popup_body" style="margin-top:15%">
        <soan id="action_date"></soan>
        <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 onclick="submitModification(this)"
                    data-link="{{ path('profil_program', {'user': user, 'dossier' : dossier}) }}"> 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 action;
    function showForm($this){
        action = $this.dataset.action;

        $(".popup-modal")[0].style.cssText ="top: 15vh;flex-direction: column; margin-left: 10%; opacity: 100; width:20vw !important; height: 40vh !important; border-radius:0; background:#fff";
        $(".popup-background")[0].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('title_candidat').innerText = $this.dataset.candidat;
        if($this.dataset.absent === "true"){
            check2.checked = true;
            motif.value = $this.dataset.motif;
            popupBody.style.marginTop = "0";
            motifAbsence.style.display = "flex";
            enrPresence.disabled = false;
        }

        if($this.dataset.absent === "false"){
            check1.checked = true;
            motifAbsence.style.display = "none";
            popupBody.style.marginTop = "15%";
            enrPresence.disabled = false;
        }
        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;
                }
            }
        });

    }

    function submitModification($this){
        let data = {
            action: action,
            absent: check2.checked,
            motif: motif.value
        }
        $.post($this.dataset.link, data).then(function(data){
            let main = $(data).find('#planning_div');
            $('#planning_div').replaceWith(main);
            removePopup();
            location.reload();
        }).catch();
    }

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