{% 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">
                    <thead>
                    <tr>
                        <th style="background: #fff">
                        </th>
                        {% for action in tabActionsDossier %}
                            <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>
                                <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 %}
                                {% 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-statut="{{ candidat.statut }}"
                                             data-formateur="{{ action[4] }}"
                                             data-action="{{ action[0] }}"
                                             data-absent="{% if action[2] %}true{% else %}false{% endif %}"
                                             data-motif="{{ action[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> {{ action[4]}}</span>
                                            {% if (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 %}
                            {% 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 onclick="submitModification(this)"
                            data-link="{{ path('dossier_presence', {'id': dossier.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 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";
            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")[1].style.cssText = "top:100vh; display:none;opacity:0";
        $(".popup-background")[1].style.cssText = "height:0vh; display:none"
    }
</script>

{% endblock %}