{% extends 'base.html.twig' %}

{% block title %}Gestion du client {{ client.getNomDossier }}{% endblock %}

{% block body %}
    <div class="card card-primary card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {% if tab == 'infos' %}active{% endif %}" id="tab-infos-tab" data-toggle="pill" href="#tab-infos" role="tab" aria-controls="tab-infos" aria-selected="true">
                        Informations
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if tab == 'settings' %}active{% endif %}" id="tab-settings-tab" data-toggle="pill" href="#tab-settings" role="tab" aria-controls="tab-settings" aria-selected="false">
                        Livrables et robots sélectionnés
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if tab == 'fec' %}active{% endif %}" id="tab-fec-tab" data-toggle="pill" href="#tab-fec" role="tab" aria-controls="tab-fec" aria-selected="false">
                        Fichiers FEC et Budget
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if tab == 'traitements' %}active{% endif %}" id="tab-traitements-tab" data-toggle="pill" href="#tab-traitements" role="tab" aria-controls="tab-traitements" aria-selected="false">
                        Traitements et livrables
                    </a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="custom-tabs-three-tabContent">
                <div class="tab-pane fade {% if tab == 'infos' %}show active{% endif %}" id="tab-infos" role="tabpanel" aria-labelledby="tab-infos-tab">


                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success">
                            <i class="icon fas fa-check"></i> {{ message }}
                        </div>
                    {% endfor %}

                    {# Prototype AVANT le form_start() #}
                    {% set interlocuteur_prototype %}
                        <tr>
                            <td>__prenom__</td>
                            <td>__nom__</td>
                            <td>__email__</td>
                            <td>
                                <button type="button" class="btn btn-sm btn-danger" data-action="collection#remove">
                                    Supprimer
                                </button>
                            </td>
                        </tr>
                    {% endset %}

                    {% set prototype_row %}
                        {% set rowHtml %}
                            <tr>
                                <td>{{ form_widget(form.interlocuteurs.vars.prototype.prenom) }}</td>
                                <td>{{ form_widget(form.interlocuteurs.vars.prototype.nom) }}</td>
                                <td>{{ form_widget(form.interlocuteurs.vars.prototype.email) }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger" data-action="collection#remove">Supprimer</button>
                                </td>
                            </tr>
                        {% endset %}
                        {{ rowHtml|e('html_attr') }}
                    {% endset %}



                    {{ form_start(form) }}

                    <div class="row">

                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Informations</h3>
                                </div>
                                <div class="card-body">
                                    {{ form_row(form.compta_engagement) }}
                                    {{ form_row(form.code_dossier) }}
                                    {{ form_row(form.nom_dossier) }}

                                    <div class="row">
                                        <div class="col-sm-8">
                                            {{ form_row(form.siret) }}
                                        </div>
                                        <div class="col-sm-4">
                                            {{ form_row(form.naf) }}
                                        </div>
                                    </div>

                                    {{ form_row(form.adresse) }}

                                    <div class="row">
                                        <div class="col-sm-4">
                                            {{ form_row(form.cp) }}
                                        </div>
                                        <div class="col-sm-8">
                                            {{ form_row(form.ville) }}
                                        </div>
                                    </div>

                                    {{ form_row(form.expert) }}
                                    {{ form_row(form.reviseur) }}
                                    {{ form_row(form.api) }}
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title d-block">Dirigeant</h3>
                                </div>
                                <div class="card-body">
                                    {{ form_row(form.vousvoiement) }}
                                    {{ form_row(form.prenom_dirigeant) }}
                                    {{ form_row(form.nom_dirigeant) }}
                                    {{ form_row(form.email_dirigeant) }}
                                    {{ form_row(form.tel_dirigeant) }}

                                    {{ form_row(form._token) }}

                                </div>
                            </div>

                            <div class="card mt-4">
                                <div class="card-header">
                                    <h3 class="card-title">Interlocuteurs</h3>
                                </div>
                                <div class="card-body">
                                    <p>Tous les interlocuteurs recevront les e-mails de livraison des rapports.</p>
                                    <div data-controller="collection"
                                                            data-collection-prototype="{{ prototype_row }}">


                                    <table class="table table-bordered align-middle">
                                            <thead>
                                            <tr>
                                                <th>Prénom</th>
                                                <th>Nom</th>
                                                <th>E-mail</th>
                                                <th style="width: 120px;"></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for subform in form.interlocuteurs %}
                                                <tr>
                                                    <td>{{ form_widget(subform.prenom) }}</td>
                                                    <td>{{ form_widget(subform.nom) }}</td>
                                                    <td>{{ form_widget(subform.email) }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger" data-action="collection#remove">
                                                            Supprimer
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>

                                    <button type="button"
                                            class="btn btn-outline-primary mt-2"
                                            data-action="collection#add">
                                        Ajouter un interlocuteur
                                    </button>
                                </div>
                            </div>

                        </div>

                    </div>

                    <button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>

                    {{ form_end(form, {'render_rest': false}) }}

                </div>
                <div class="tab-pane fade {% if tab == 'settings' %}show active{% endif %}" id="tab-settings" role="tabpanel" aria-labelledby="tab-settings-tab">


                    {% for message in app.flashes('success-settings') %}
                        <div class="alert alert-success">
                            <i class="icon fas fa-check"></i> {{ message }}
                        </div>
                    {% endfor %}

                    <form method="post">
                    <div class="row">
                        <div class="col-lg-6">


                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Livrables sélectionnés</h3>
                                </div>
                                <div class="card-body">
                                    <div id="client_params">

                                        {% for livrable in livrables %}
                                            {% set video_disabled = livrable.getSlug() == 'video' and not client.getParentUser().getApiKeyHeygen() %}
                                            {% set checked = false %}
                                            {% set client_params = false %}

                                            {% for ClientLivrable in client.getClientLivrables() %}
                                                {% if ClientLivrable.livrable.getId() == livrable.getId() %}
                                                    {% set checked = true %}
                                                    {% set client_params = ClientLivrable.getParams() %}
                                                {% endif %}
                                            {% endfor %}

                                            <div class="param-main form-group d-flex align-items-center">
                                                <!-- Colonne pour le switch -->
                                                <div class="livrable-switch col-4">
                                                    {% if livrable.getSlug() == 'video' and video_disabled %}
                                                        <p class="text-danger">Pour pouvoir sélectionner la vidéo, il vous faut au préalable indiquer une Clé API HeyGen depuis votre <a href="{{ path('app_user') }}">fiche cabinet</a>.</p>
                                                    {% endif %}
                                                    <div class="form-check">
                                                        <input {% if video_disabled %}disabled{% endif %} type="checkbox" {% if checked %}checked{% endif %} id="client_livrables_{{ loop.index }}" name="client_livrables[livrables][{{ livrable.getId() }}][on]" data-bootstrap-switch data-parent-switch="true" value="1" />
                                                        <label class="form-check-label" for="client_livrables_{{ loop.index }}">{{ livrable.getTitre() }}</label>
                                                    </div>
                                                    <small class="form-text text-muted">{{ livrable.getDescription()|raw }}</small>
                                                </div>

                                                <!-- Colonne pour les paramètres associés -->
                                                <div class="livrable-params col-8">
                                                    {% if livrable.getParams().params|default %}
                                                        <div class="child-params {% if not checked %}hidden-element{% endif %}">
                                                            {% for param in livrable.getParams().params %}

                                                                {# Gestion des selects #}
                                                                {% if param.type == 'select' and param.choices|default %}
                                                                    <div class="param-child mt-2 form-group d-flex align-items-center">
                                                                        <label class="required mr-3" for="client_livrables{{ param.slug }}">{{ param.name }}</label>
                                                                        <select id="client_livrables{{ param.slug }}"
                                                                                name="client_livrables[livrables][{{ livrable.getId() }}][settings][{{ param.slug }}]]"
                                                                                class="form-control"
                                                                                {% if param.requires is defined %}data-requires="{{ param.requires|join(',') }}"{% endif %}>
                                                                            {% for choice in param.choices %}
                                                                                <option
                                                                                        {% if choice.value == 6 and param.slug == 'modele' %}disabled{% endif %}
                                                                                        {% if client_params is defined and client_params[param.slug] is defined and choice.value == client_params[param.slug] %}selected{% endif %}
                                                                                        value="{{ choice.value }}">
                                                                                    {{ choice.label }}
                                                                                </option>
                                                                            {% endfor %}
                                                                        </select>
                                                                    </div>
                                                                {% endif %}

                                                                {# Gestion des sources dynamiques #}
                                                                {% if param.type == 'select' and param.source|default %}
                                                                    <div class="param-child mt-2 form-group d-flex align-items-center">
                                                                        <label class="required mr-3" for="client_livrables{{ param.slug }}">{{ param.name }}</label>
                                                                        {% if sources[param.source] %}
                                                                            <select id="client_livrables{{ param.slug }}"
                                                                                    name="client_livrables[livrables][{{ livrable.getId() }}][settings][{{ param.slug }}]]"
                                                                                    class="form-control"
                                                                                    {% if param.requires is defined %}data-requires="{{ param.requires|join(',') }}"{% endif %}>
                                                                                <option disabled selected></option>
                                                                                {% for elem in sources[param.source] %}
                                                                                    <option {% if client_params is defined and client_params[param.slug] is defined and elem.value == client_params[param.slug] %}selected{% endif %} value="{{ elem.value }}">{{ elem.label }}</option>
                                                                                {% endfor %}
                                                                            </select>
                                                                        {% else %}
                                                                            <p class="text-error">Aucune donnée disponible</p>
                                                                        {% endif %}
                                                                    </div>
                                                                {% endif %}

                                                                {# Gestion des inputs texte #}
                                                                {% if param.type == 'input' %}
                                                                    <div class="param-child mt-2 form-group d-flex align-items-center">
                                                                        <label class="required mr-3" for="client_livrables{{ param.slug }}">{{ param.name }}</label>
                                                                        <input class="form-control"
                                                                               type="text"
                                                                               value="{% if client_params and client_params[param.slug] %}{{ client_params[param.slug].value }}{% endif %}"
                                                                               name="client_livrables[livrables][{{ livrable.getId() }}][settings][{{ param.slug }}]]"
                                                                               {% if param.requires is defined %}data-requires="{{ param.requires|join(',') }}"{% endif %}>
                                                                    </div>
                                                                {% endif %}

                                                                {# Gestion des booléens avec un switch #}
                                                                {% if param.type == 'boolean' %}
                                                                    <div class="param-child mt-2 form-group d-flex align-items-center">
                                                                        <label class="form-check-label mr-3" for="client_livrables_{{ param.slug }}">{{ param.name }}</label>
                                                                        <input type="checkbox"
                                                                               {% if client_params is defined and client_params[param.slug] is defined and client_params[param.slug] == true %}checked{% endif %}
                                                                               id="client_livrables_{{ param.slug }}"
                                                                               name="client_livrables[livrables][{{ livrable.getId() }}][settings][{{ param.slug }}]]"
                                                                               data-bootstrap-switch value="1"
                                                                                {% if param.requires is defined %}data-requires="{{ param.requires|join(',') }}"{% endif %} />
                                                                    </div>
                                                                {% endif %}

                                                            {% endfor %}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>

                                            <hr>

                                        {% endfor %}
                                    </div>


                                    <input type="hidden" name="client_livrables[_token]" value="{{ csrf_token('edit_params' ~ client.id) }}">
                                    <button class="btn btn-primary">{{ button_label|default('Enregistrer') }}</button>
                                </div>
                            </div>

                        </div>

                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Robots sélectionnés</h3>
                                </div>
                                <div class="card-body robot-main">

                                    <div class="form-check">
                                        <input type="checkbox" {% if client.getCabinet().checkUrssafCredentials() == false %}disabled{% endif %} {% if client.URSSAF_on() %}checked{% endif %} id="client_robots_1" name="client_robots[robots][1][on]" data-bootstrap-switch value="1" />
                                        <label class="form-check-label" for="client_robots_1">Robot URSSAF</label>
                                    </div>
                                    {% if client.getCabinet().checkUrssafCredentials() == false %}
                                        <small class="form-text text-danger">Vous devez renseigner vos identifiants URSSAF sur votre fiche cabinet pour pouvoir activer ce robot.</small>
                                    {% endif %}
                                    <small class="form-text text-muted">Active la relève automatique des messages, pièces jointes et conversations URSSAF vers l'adresse e-mail du réviseur du dossier.</small>

                                </div>
                            </div>
                        </div>
                    </div>
                    </form>

                </div>
                <div class="tab-pane fade {% if tab == 'fec' %}show active{% endif %}" id="tab-fec" role="tabpanel" aria-labelledby="tab-fec-tab">

                    {% for message in app.flashes('success-fec') %}
                        <div class="alert alert-success">
                            <i class="icon fas fa-check"></i> {{ message }}
                        </div>
                    {% endfor %}

                    <div id="liste-fec-wrapper">
                        {{ include('client/liste_fec.html.twig', { 'modal':false }) }}
                    </div>

                    {{ include('client/_form_fec.html.twig') }}

                </div>
                <div class="tab-pane fade {% if tab == 'traitements' %}show active{% endif %}" id="tab-traitements" role="tabpanel" aria-labelledby="tab-traitements-tab">

                    {{ include('client/liste_traitements.html.twig', { 'modal':false }) }}

                </div>
            </div>
        </div>

    </div>
    <a class="p-3 d-inline-block" href="{{ path('app_client_index') }}"><i class="fas fa-arrow-left"></i> Retour à la liste</a>

{% endblock %}

{% block css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css">
{% endblock %}

{% block javascript %}
<script src="/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
    <script>
    $(document).ready(function() {

        const $collectionWrapper = $('div[data-controller="collection"]');
        const prototype = $collectionWrapper.data('collection-prototype');
        const $tableBody = $collectionWrapper.find('tbody');
        let index = $tableBody.find('tr').length;

        // Ajout d’un nouvel interlocuteur
        $('[data-action="collection#add"]').on('click', function () {
            const newRow = prototype.replace(/__name__/g, index);
            $tableBody.append(newRow);
            index++;
        });

            // Suppression d’un interlocuteur
            $collectionWrapper.on('click', '[data-action="collection#remove"]', function () {
            $(this).closest('tr').remove();
        });

        // Fonction pour vérifier si toutes les dépendances d'un paramètre sont satisfaites
        function checkRequires($element) {
            var requiresList = $element.data('requires');
            if (!requiresList) {
                return true; // Pas de dépendances, donc afficher par défaut
            }

            requiresList = requiresList.split(','); // Convertir la chaîne en tableau

            var allRequiredMet = true;

            // Vérifier si toutes les dépendances sont activées
            for (var i = 0; i < requiresList.length; i++) {
                var requiredSlug = requiresList[i].trim();
                var $requiredElement = $("#client_livrables_" + requiredSlug);

                // Si une des dépendances n'est pas cochée, on ne remplit pas la condition
                if (!$requiredElement.prop('checked')) {
                    allRequiredMet = false;
                    break;
                }
            }

            return allRequiredMet;
        }

        // Fonction pour appliquer la logique de dépendance au chargement et lors des changements
        function applyDependencies() {
            $("[data-requires]").each(function() {
                var $currentParam = $(this).closest('.param-child');

                // Vérifier les dépendances de chaque élément
                if (checkRequires($(this))) {
                    $currentParam.removeClass('hidden-element'); // Afficher si toutes les dépendances sont remplies
                } else {
                    $currentParam.addClass('hidden-element'); // Masquer sinon
                }
            });
        }

        // Fonction pour gérer la logique parent/enfant
        function handleParentChildSwitches() {
            $("input[data-parent-switch]").each(function() {
                var $childParams = $(this).closest('.param-main').find('.child-params');
                if ($(this).prop('checked')) {
                    $childParams.removeClass('hidden-element'); // Afficher les paramètres enfants si le parent est activé
                } else {
                    $childParams.addClass('hidden-element'); // Masquer sinon
                }

                // Écouter les changements sur le parent switch
                $(this).on('switchChange.bootstrapSwitch', function(event, state) {
                    if (state) {
                        $childParams.removeClass('hidden-element'); // Afficher les paramètres enfants
                    } else {
                        $childParams.addClass('hidden-element'); // Masquer les paramètres enfants
                    }

                    // Réappliquer la logique de dépendance après chaque changement de parent
                    applyDependencies();
                });
            });
        }

        // Initialisation des switches et application des dépendances
        $("input[data-bootstrap-switch]").each(function() {
                $(this).bootstrapSwitch('state', $(this).prop('checked'));

                // Appliquer la logique parent/enfant
                handleParentChildSwitches();

                // Appliquer les dépendances au chargement
                applyDependencies();

                // Écouter les changements pour réévaluer les dépendances
                $(this).on('switchChange.bootstrapSwitch', function(event, state) {
                    applyDependencies(); // Réévaluer les dépendances lorsque l'état du switch change
                });
            });
        });

    </script>


{% endblock %}