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

{% block title %}
    Pointage dossier {{ dossier.intituleFormation }}
{% endblock %}

{% block body %}
    <div class="show-container" id="main_div">
        {% if candidats|length == 0 %}
            <div class="empty-data">Aucun candidat n'a pas été affecté pour cette formation</div>
        {% else %}
            <div class="profile-content formateur">
                <div class="formateur-planning" id="planning_div">
                    <div class="formateur-planning-dossier">
                        <h2>Emploi du temps du dossier : <u>{{ dossier.intituleFormation }}</u></h2>
                    </div>
                    <table class="formateur-planning-table" style="width: 30%;">
                        <thead>
                        <tr>
                            <th></th>
                            <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>
                        </tr>
                        </thead>
                        <tbody>

                        {% for candidat in candidats %}
                            <tr>
                                <td>
                                    <div>
                                        <span class="formateur-planning-table-nom">{{ candidat.nom }} {{ candidat.prenom }}</span>
                                    </div>
                                    <div>
                                        {% if candidat.statut == "Abandon" %}
                                            <span class="formateur-planning-table_action-tag_absence">Abandon</span>
                                        {% endif %}
                                    </div>
                                </td>
                                {% if tabActionsCandidats|length > 0 %}
                                        <td>
                                            <div class="formateur-planning-table_action" onclick="showForm(this)"
                                                 data-date="{{ trans_day_hash[tabActionsCandidats[index][1]|date('l')] }} - {{ tabActionsCandidats[index][1]|date('d/m/Y') }} "
                                                 data-candidat="{{ candidat.nom }} {{ candidat.prenom }}"
                                                 data-statut="{{ candidat.statut }}"
                                                 data-formateur="{{ tabActionsCandidats[index][4] }}"
                                                 data-action="{{ tabActionsCandidats[index][0] }}"
                                                 data-absent="{% if tabActionsCandidats[index][2] %}true{% else %}false{% endif %}"
                                                 data-motif="{{ tabActionsCandidats[index][3] }}">

                                                <span class="formateur-planning-table_action-module"><i class="fas fa-bookmark"></i> Module</span>
                                                <span class="formateur-planning-table_action-module"><i class="fas fa-user-circle"></i> {{ tabActionsCandidats[index][4]}}</span>
                                                {% if (tabActionsCandidats[index][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>
                                {% endif %}
                            </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" 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_today_pointage', {'id': Action.id}) }}"> Enregistrer</button>
                    </div>
                </div>
            </div>
        {% endif %}
    </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>

{% endblock %}