@extends('models')
@section('titre-page', 'Envoi des documents par mail')
@section('content-body')

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <div class="col-xl-12 col-12">
            <div class="row mb-3 align-items-end">
                <div class="col-xl-7 col-md-6 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Paramétrages</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Envoi des documents par mail</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-3 col-md-4 ms-auto mt-2">
                    <p class="mb-0 text-muted">Agence</p>
                    <select class="form-select" id="mailAgence" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                        @foreach ($agences as $agence)
                            <option value="{{ $agence->IDAGENCE }}" @selected($agence->IDAGENCE == session('IDAGENCE'))>{{ $agence->NomAgence }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row">

        {{-- Serveur d'envoi de l'agence --}}
        <div class="col-xl-4">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">Serveur d'envoi de l'agence</div>
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <p class="mb-0 text-muted">Serveur SMTP</p>
                        <input type="text" class="form-control" id="AdresseServeurMail" placeholder="ssl0.ovh.net" autocomplete="off">
                    </div>
                    <div class="row">
                        <div class="col-6 mb-2">
                            <p class="mb-0 text-muted">Port</p>
                            <input type="number" class="form-control text-center" id="PortServeurMail" placeholder="587">
                        </div>
                        <div class="col-6 mb-2">
                            <p class="mb-0 text-muted">Chiffrement</p>
                            <select class="form-select" id="ChiffrementServeurMail">
                                @foreach ($chiffrements as $valeur => $libelle)
                                    <option value="{{ $valeur }}">{{ $libelle }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-2">
                        <p class="mb-0 text-muted">Utilisateur (adresse d'envoi)</p>
                        <input type="text" class="form-control" id="UtilisateurSMTPMail" autocomplete="off">
                    </div>
                    <div class="mb-2">
                        <p class="mb-0 text-muted">Mot de passe</p>
                        <input type="password" class="form-control" id="MotPasseExpediteurMail" autocomplete="new-password">
                        <small class="text-muted" id="infoMotDePasse"></small>
                    </div>
                    <div class="mb-3">
                        <p class="mb-0 text-muted">Nom affiché de l'expéditeur</p>
                        <input type="text" class="form-control" id="ExpediteurServeurMail" placeholder="Nom de la société">
                    </div>
                    <button type="button" class="btn btn-primary w-100" id="btnEnregistrerServeur">Enregistrer le serveur</button>

                    <hr>

                    <p class="mb-0 text-muted">Envoyer un mail d'essai à</p>
                    <div class="input-group">
                        <input type="email" class="form-control" id="AdresseTest" placeholder="adresse@exemple.com">
                        <button type="button" class="btn btn-secondary-light" id="btnTesterServeur">Tester</button>
                    </div>
                    <small class="text-muted">L'essai utilise la configuration enregistrée.</small>
                </div>
            </div>
        </div>

        {{-- Messages par document --}}
        <div class="col-xl-8">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="card-title">Message envoyé avec chaque document</div>
                    <div style="min-width: 260px;">
                        <select class="form-select" id="mailDocument">
                            @foreach ($documents as $code => $document)
                                <option value="{{ $code }}">{{ $document['libelle'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-2">
                        Le message commun vaut pour toutes les agences. Un message propre à l'agence choisie le
                        remplace pour elle ; sans message propre, l'agence utilise le commun.
                    </p>

                    <ul class="nav nav-tabs mb-3" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ongletCommun" type="button" role="tab">Message commun</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#ongletAgence" type="button" role="tab">
                                Message de l'agence <span class="badge bg-light text-muted ms-1" id="etatModeleAgence"></span>
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        @foreach (['Commun' => 'ongletCommun', 'Agence' => 'ongletAgence'] as $portee => $onglet)
                            <div class="tab-pane fade {{ $portee == 'Commun' ? 'show active' : '' }}" id="{{ $onglet }}" role="tabpanel">
                                <div class="mb-2">
                                    <p class="mb-0 text-muted">Objet</p>
                                    <input type="text" class="form-control champMessage" id="Objet{{ $portee }}" maxlength="255">
                                </div>
                                <div class="mb-2">
                                    <p class="mb-0 text-muted">Message</p>
                                    <div id="Contenu{{ $portee }}"></div>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="Actif{{ $portee }}" checked>
                                        <label class="form-check-label" for="Actif{{ $portee }}">Actif</label>
                                    </div>
                                    <div>
                                        @if ($portee == 'Agence')
                                            <button type="button" class="btn btn-danger-light me-1" id="btnSupprimerModeleAgence">
                                                Revenir au message commun
                                            </button>
                                        @endif
                                        <button type="button" class="btn btn-primary btnEnregistrerModele" data-portee="{{ $portee }}">
                                            Enregistrer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <hr>
                    <p class="mb-1 fw-semibold">Variables disponibles <small class="text-muted fw-normal">(cliquer pour insérer dans le champ en cours)</small></p>
                    <div id="listeVariables"></div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script src="{{ assetVersionne('assets/js/fonction/editeurMail.js') }}"></script>
    <script>
        const documentsMail = @json($documents);
        const csrfMail = document.querySelector('meta[name="csrf-token"]').content;
        const editeursMail = {
            Commun: creerEditeurMail('#ContenuCommun'),
            Agence: creerEditeurMail('#ContenuAgence'),
        };
        // Dernier champ utilisé : un champ objet (élément) ou un éditeur (Quill).
        let dernierChampMessage = editeursMail.Commun;
        let configurationMail = null;

        $.each(editeursMail, function (portee, editeur) {
            editeur.on('selection-change', function (position) {
                if (position) dernierChampMessage = editeur;
            });
        });

        function agenceMail() {
            return $('#mailAgence').val();
        }

        function reponseMail(response, siSucces) {
            if (response.error) {
                notifWarning(response.message);
                return;
            }
            notifSuccess(response.message);
            if (siSucces) siSucces(response);
        }

        function erreurMail(xhr) {
            notifError(xhr.responseJSON?.message ?? "Une erreur est survenue");
        }

        function afficherVariables() {
            let variables = documentsMail[$('#mailDocument').val()]?.variables ?? {};
            let html = '';
            $.each(variables, function (code, libelle) {
                html += `<span class="badge bg-primary-transparent me-1 mb-1 variableMail" style="cursor:pointer" data-code="${code}" title="${libelle}">${code}</span>`;
            });
            $('#listeVariables').html(html);
        }

        function afficherModeles() {
            let modeles = configurationMail?.modeles?.[$('#mailDocument').val()] ?? {};
            let commun = modeles.commun, agence = modeles.agence;

            $('#ObjetCommun').val(commun?.ObjetMail ?? '');
            chargerEditeurMail(editeursMail.Commun, commun?.ContenuMail);
            $('#ActifCommun').prop('checked', commun ? !!commun.Actif : true);

            $('#ObjetAgence').val(agence?.ObjetMail ?? '');
            chargerEditeurMail(editeursMail.Agence, agence?.ContenuMail);
            $('#ActifAgence').prop('checked', agence ? !!agence.Actif : true);
            $('#btnSupprimerModeleAgence').prop('disabled', !agence);
            $('#etatModeleAgence').text(agence ? (agence.Actif ? 'propre' : 'désactivé') : 'commun');
        }

        function chargerConfigurationMail() {
            $.get("{{ route('mailDocuments.chargerConfiguration') }}", { IDAGENCE: agenceMail() }, function (response) {
                if (response.error) {
                    notifWarning(response.message);
                    return;
                }
                configurationMail = response;

                let serveur = response.serveur;
                $('#AdresseServeurMail').val(serveur.AdresseServeurMail);
                $('#PortServeurMail').val(serveur.PortServeurMail);
                $('#ChiffrementServeurMail').val(serveur.ChiffrementServeurMail);
                $('#UtilisateurSMTPMail').val(serveur.UtilisateurSMTPMail);
                $('#ExpediteurServeurMail').val(serveur.ExpediteurServeurMail);
                $('#MotPasseExpediteurMail').val('');
                $('#infoMotDePasse').text(serveur.MotDePasseRenseigne
                    ? 'Un mot de passe est enregistré : laisser vide pour le conserver.'
                    : 'Aucun mot de passe enregistré.');

                // Sans ligne de paramétrage pour l'agence sur cette base, rien ne peut être enregistré.
                $('#btnEnregistrerServeur, #btnTesterServeur').prop('disabled', !serveur.AgenceConnue);
                if (!serveur.AgenceConnue) {
                    notifWarning("Cette agence n'a pas de paramétrage sur cette base : son serveur d'envoi se configure depuis la base de l'agence.");
                }

                afficherModeles();
            }).fail(erreurMail);
        }

        $(document).on('change', '#mailAgence', chargerConfigurationMail);
        $(document).on('change', '#mailDocument', function () {
            afficherVariables();
            afficherModeles();
        });

        $(document).on('focus', '.champMessage', function () {
            dernierChampMessage = this;
        });

        // Insère la variable à l'emplacement du curseur dans le dernier champ utilisé.
        $(document).on('click', '.variableMail', function () {
            let champ = dernierChampMessage;
            let code = $(this).data('code');

            if (champ instanceof Quill) {
                insererVariableEditeurMail(champ, code);
                return;
            }

            let debut = champ.selectionStart ?? champ.value.length;
            let fin = champ.selectionEnd ?? champ.value.length;
            champ.value = champ.value.slice(0, debut) + code + champ.value.slice(fin);
            champ.focus();
            champ.selectionStart = champ.selectionEnd = debut + code.length;
        });

        $(document).on('click', '#btnEnregistrerServeur', function () {
            $.post("{{ route('mailDocuments.enregistrerServeur') }}", {
                _token: csrfMail,
                IDAGENCE: agenceMail(),
                AdresseServeurMail: $('#AdresseServeurMail').val(),
                PortServeurMail: $('#PortServeurMail').val(),
                ChiffrementServeurMail: $('#ChiffrementServeurMail').val(),
                UtilisateurSMTPMail: $('#UtilisateurSMTPMail').val(),
                ExpediteurServeurMail: $('#ExpediteurServeurMail').val(),
                MotPasseExpediteurMail: $('#MotPasseExpediteurMail').val(),
            }, function (response) {
                reponseMail(response, chargerConfigurationMail);
            }).fail(erreurMail);
        });

        $(document).on('click', '#btnTesterServeur', function () {
            let bouton = $(this).prop('disabled', true);
            $.post("{{ route('mailDocuments.testerServeur') }}", {
                _token: csrfMail,
                IDAGENCE: agenceMail(),
                AdresseTest: $('#AdresseTest').val(),
            }, function (response) {
                reponseMail(response);
            }).fail(erreurMail).always(() => bouton.prop('disabled', false));
        });

        $(document).on('click', '.btnEnregistrerModele', function () {
            let portee = $(this).data('portee');
            $.post("{{ route('mailDocuments.enregistrerModele') }}", {
                _token: csrfMail,
                IDAGENCE: agenceMail(),
                CodeDocument: $('#mailDocument').val(),
                Commun: portee == 'Commun' ? 1 : 0,
                ObjetMail: $('#Objet' + portee).val(),
                ContenuMail: contenuEditeurMail(editeursMail[portee]),
                Actif: $('#Actif' + portee).is(':checked') ? 1 : 0,
            }, function (response) {
                reponseMail(response, chargerConfigurationMail);
            }).fail(erreurMail);
        });

        $(document).on('click', '#btnSupprimerModeleAgence', function () {
            $.post("{{ route('mailDocuments.supprimerModeleAgence') }}", {
                _token: csrfMail,
                IDAGENCE: agenceMail(),
                CodeDocument: $('#mailDocument').val(),
            }, function (response) {
                reponseMail(response, chargerConfigurationMail);
            }).fail(erreurMail);
        });

        afficherVariables();
        chargerConfigurationMail();
    </script>
@endsection