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

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

{% block body %}
    {% set name = 'Dossiers' %}
    <div class="show-container" id="show_div" >
        <div class="show-container_title">
            <div class="show-container_title-left">
                <h3>
                    Dossier {{ dossier.codeAction }}
                </h3>

                <div class="edit_btn">
                    <a class="btn btn-outline-light btn-lg btn-block"
                       href="{{ path(
                           'dossier_edit',
                           {
                               id: dossier.id
                           }
                       ) }}" target="_blank" title="Édition du dossier">
                        <span>Éditer ce dossier</span>
                        <i class="fal fa-file-edit"></i>
                    </a>
                </div>
            </div>
            <div class="dossier-state" title="status du dossier n°{{ dossier.id }}">
                {% if dossier.statut == 'Terminé' %}
                    <span class="finished">{{ dossier.statut }}</span>
                {% elseif dossier.statut == 'En cours' %}
                    <span class="ongoing">{{ dossier.statut }}</span>
                {% elseif dossier.statut == 'Abandonné' %}
                    <span class="aborted">{{ dossier.statut }}</span>
                {% else %}
                    <span class="started">{{ dossier.statut }}</span>
                {% endif %}
            </div>
            <div class="dossier-delete" title="Supprimer ce dossier">
                {{ include('dossier/_delete_form.html.twig') }}
            </div>
        </div>
        <div class="show-container_content">
            <div class="show-container_content-side up">
                {##############################################################################################}
                <fieldset>
                    <legend>Dossier</legend>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Code Action</span><i class="far fa-long-arrow-right">
                        </i><span class="dossier_field-value">{{ dossier.codeAction }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Intitulé Formation</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.intituleFormation }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Date de Début</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.debutFormation|date('d/m/Y') }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Date de Fin</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.finFormation|date('d/m/Y') }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Zone Géographique</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.zoneGeo }}</span>
                    </div>
                </fieldset>

                {##########################################################################################################}

                <fieldset>
                    <legend>Formation en {{ dossier.modFormation }}</legend>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Type de Formation</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.tpForm }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Code direct</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.codeDireccte }}
          </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Adresse de formation</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
          {{ dossier.lieuFormation }}
        </span>
                    </div>
                    {% if periodes_formation is defined and periodes_formation|length > 0 %}
                        <div class="dossier_field stage_periode_header">
                            <span class="dossier_field-name "> Periodes de formation</span>
                        </div>
                        <div {% if periodes_formation|length > 4 %}style="height: 15vh;overflow-y: scroll;" {% endif %}>
                        {% for periode_formation in periodes_formation %}
                            <div class="dossier_field stage_periode_values">
                                <span class="dossier_field-name">Du : {{ periode_formation.dateDebut|date('d/m/Y') }}</span>
                                <i class="far fa-long-arrow-right"></i>
                                <span class="dossier_field-value">Au : {{ periode_formation.dateFin|date('d/m/Y') }}</span>
                                <div class="stage_action">
                                    <a class="collection-edit btn btn-sm"
                                       href="{{
                                       path('periode_formation_edit', {id: periode_formation.id})}}"
                                       title="Editer cette période">
                                        <i class="far fa-edit"></i>
                                    </a>
                                    <p>
                                        {{ include('cruds/periode_formation/_delete_form.html.twig') }}
                                    </p>
                                </div>
                            </div>
                        {% endfor %}
                        </div>
                    {% endif %}

                </fieldset>
                {##########################################################################################################}
            </div>
            <div class="show-container_content-side btm">
                {###########################################################################################################}

                <fieldset>
                    <legend>Financement</legend>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Compte Client</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.nomCompte }}</span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Financement</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.financement }}
          </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Tarif contracté</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.tarifContracte }}
          </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Bon de Commande</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">{{ dossier.bonCommande }}</span>
                    </div>
                </fieldset>

                {##########################################################################################################}
                <fieldset>
                    <legend>Dossier & <span>Stagiaires</span></legend>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Nombre de Candidats
                            <a href="#"
                               title="Voir la liste et ajouter des candidats">
                                <i class="fas fa-plus-circle" onclick="openPopupCandidat()"></i>
                            </a>
                        </span>
                        <i class="far fa-long-arrow-right"></i>
                        <span class="dossier_field-value">
                            {{ dossier.nombreCandidat }}
                        </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Heures en Centre</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.heuresEnCentre }}
          </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Heures en PAE</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.heuresEnEntreprise }}
          </span>
                    </div>
                    <div class="dossier_field">
                        <span class="dossier_field-name">Heures Totales</span><i class="far fa-long-arrow-right">

                        </i><span class="dossier_field-value">
            {{ dossier.heuresTotales}}
          </span>
                    </div>
                </fieldset>
                {##########################################################################################################}

            </div>
        </div>
        <span class="certificate"><i>Cette formation{{ dossier.certifiant ? ' est ' : ' n\'est pas ' }}certifiante pour les candidats.</i></span>

        {% if dossier.notes %}
            <div class="dossier_notes">
                <span class="dossier_notes-label">Notes :</span><span
                        class="dossier_notes-value">{{ dossier.notes }}</span>
            </div>
        {% endif %}

        {% include 'dossier/planning.html.twig' with {'id_dossier' : dossier.id } %}
    </div>

    <div class="popup-background" onclick="removePopup()" style="left:0"></div>
    <div class="popup-modal" id="main_candidat" style="left:15%;">
        <div class="show-container_content">
            <div class="show-container_content-side">
                <fieldset>
                    <legend>Candidats inscrits à cette formation</legend>
                    <div class="candidat" id="candidat_div">
                        {% for candidat in candidatsAffectes %}
                            <div class="dossier_field" id="{{ candidat.id }}" {% if candidat.statut == "Abandon" %} style="color:#e74c3c;" title="Ce candidat a abandoné la formaton" {% endif %}>
                                <div class="dossier_field_name">
                                    <span>{{ candidat.nom }}</span>
                                    <span>{{ candidat.prenom }}</span>
                                </div>
                                <div  class="dossier_field_action">
                                    <i id="abandon_{{ candidat.id }}" {% if candidat.statut == "Abandon" %} style="cursor: not-allowed" title="Ce candidat a abandoné la formation" {% else %} style="cursor: pointer;" {% endif %} class="far fa-user-slash fa-2x" onclick="defineAbandon(this)" data-candidat="{{ candidat.id }}"  data-link="{{ path('candidats_history') }}"></i>
                                    <i style="cursor: pointer;" class="fad fa-trash-alt fa-2x" onclick="removeCandidat(this)" data-id="{{ candidat.id }}" data-dossier="{{ dossier.id }}" data-link="{{ path('candidats_history') }}" title="Supprimer candidat de la formation"></i>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="show-container_content" style="margin-right: 2%">
            <div class="show-container_content-side">
                <fieldset>
                    <legend>Liste des candidats</legend>
                    <div class="candidat">
                        {% for candidat in candidats %}
                            <div id="element_{{ candidat.id }}" class="candidat-list" title="Affecter ce candidat à cette formation
">
                                <a id="element_link_{{ candidat.id }}" href="#" onclick="addCandidat(this)" data-dossier="{{ dossier.id }}" data-candidat="{{ candidat.id }}|{{ candidat.nom }}|{{ candidat.prenom }}" data-link="{{ path('candidats_history') }}">
                                    <span class="dossier_field-name">{{ candidat.nom }}</span>
                                    <span class="dossier_field-value">{{ candidat.prenom }}</span>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </fieldset>
            </div>
        </div>
    </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>

    <div class="loader">Loading...</div>

    <script>

        function showActionsOnConflicts($this){
            let data = {
                actionWithConflicts: $this.dataset.actionid,
            }
            $.post($this.dataset.link, data).done(function (data) {
                let main = $(data).find('#main_conflit');
                $('#main_conflit').replaceWith(main);
                $(".popup-modal")[2].style.cssText = "height: auto; top:10vh; opacity:100; left:15%";
                $(".popup-background")[1].style.cssText = "height:100vh; display:block; left:0"
            }).catch( er => console.log(er))

        }

        let candidats = [];
        function openPopupCandidat() {
            let tabCandidat = $('#candidat_div div');
            for(let i = 0; i<tabCandidat.length; i++){
                let id = parseInt(tabCandidat[i].getAttribute('id'));
                if(!candidats.includes(id)){
                    candidats.push(id)
                    let element = document.getElementById(`element_${id}`);
                    let elementA = document.getElementById(`element_link_${id}`);
                    if (element && elementA) {
                        element.style.backgroundColor = "#1b2b4f";
                        element.style.borderRadius = "15px"
                        elementA.style.color = "#fff";
                    }
                }
            }
            $(".popup-modal")[1].style.cssText = "top:10vh; opacity:100; left:15%";
            $(".popup-background")[1].style.cssText = "height:100vh; display:block; left:0"

        }

        function addCandidat($this){
            let div = document.getElementById('candidat_div')
            let candidat  = $this.dataset.candidat.split('|');
            let nom = candidat[1];
            let prenom = candidat[2];
            let id = parseInt(candidat[0]);
            if(!candidats.includes(id)){
                candidats.push(parseInt(id))
                div.innerHTML += (`<div class="dossier_field" id="${id}">
                                    <div class="dossier_field_name">
                                        <span>${nom}</span>
                                        <span>${prenom}</span>
                                    </div>
                                    <div  class="dossier_field_action">
                                        <i style="cursor: pointer;" id="abandon_${id}" class="far fa-user-slash fa-2x" onclick="defineAbandon(this)" data-candidat="${id}"  data-link="${$this.dataset.link}" title="Le candidat a abandoné la formation"></i>
                                        <i style="cursor: pointer;" class="fad fa-trash-alt fa-2x" onclick="removeCandidat(this)" data-id="${id}" data-dossier="${$this.dataset.dossier}" data-link="${$this.dataset.link}" title="Supprimer candidat de la formation"></i>
                                    </div>
                                   </div>`)
                let data = {
                    action: "Affecter",
                    dossierId: $this.dataset.dossier,
                    candidat: candidats[candidats.length-1]
                }
                $('.loader')[0].style.cssText = " position: absolute !important; z-index: 9990 !important; top: 35%; display: block; left: 45.5%;";
                $(".popup-background")[1].style.cssText = "height:100vh; z-index: 9980 !important;  display:block; left:0"
                $.post($this.dataset.link, data).then(function () {
                    $('.loader')[0].style.cssText = "top: 100%;display:none ; z-index: -1";
                    $(".popup-background")[1].style.cssText = "height:100vh; z-index: 7000 !important;  display:block; left:0"
                    let element = document.getElementById(`element_${id}`);
                    let elementA = document.getElementById(`element_link_${id}`);
                    element.style.backgroundColor = "#1b2b4f";
                    element.style.borderRadius = "15px"
                    elementA.style.color = "#ffffff";

                }).catch( er => console.log(er))
            }
            else{
                alert('Ce candidat est déjà affécté à cette formation.')
            }
        }

        function defineAbandon($this){
            let id = $this.dataset.candidat;
            let data = {
                action: "Abandon",
                candidatId: id,
            }
            console.log(data);
            $.post($this.dataset.link, data).then(function () {
                document.getElementById(`${id}`).style.color = "#e74c3c";
                document.getElementById(`abandon_${id}`).style.cursor = "not-allowed"
                document.getElementById(`${id}`).setAttribute('title', "Ce candidat a abandoné la formation");
            }).catch( er => console.log(er))
        }

        function removeCandidat($this) {
            let id = $this.dataset.id;
            let data = {
                action: "Desaffecter",
                dossierId: $this.dataset.dossier,
                candidatId: id
            }
            let i = 0;
            while(i<candidats.length && candidats[i]!== parseInt(id)){
                i++
            }
            candidats.splice(i,1);
            document.getElementById(id).remove();
            let element = document.getElementById(`element_${id}`);
            let elementA = document.getElementById(`element_link_${id}`);
            element.style.backgroundColor = "";
            element.style.border = "";
            element.style.borderRadius = ""
            elementA.style.color = "";
            $('.loader')[0].style.cssText = " position: absolute !important; z-index: 9990 !important; top: 35%; display: block; left: 45.5%;";
            $(".popup-background")[1].style.cssText = "height:100vh; z-index: 9980 !important;  display:block; left:0"
            $.post($this.dataset.link, data).then(function () {
                $('.loader')[0].style.cssText = "top: 100%;display:none ; z-index: -1";
                $(".popup-background")[1].style.cssText = "height:100vh; z-index: 7000 !important;  display:block; left:0"
            }).catch( er => console.log(er))
        }

        function removePopup() {
            $(".popup-modal")[1].style.cssText = "top:100vh; display:none;opacity:0";
            $(".popup-modal")[2].style.cssText = "top:100vh; display:none;opacity:0";
            $(".popup-background")[1].style.cssText = "height:0vh; display:none";

            document.location.reload(true);
        }
    </script>
    <script src="{{ asset('assets/scripts/action_multi_selection.js') }}"></script>


{% endblock %}