@extends('models')
@php
    $ModeGpharma = ModeGpharma() ?? 1;
    // Le second jeu d'informations porte le nom du dispositif selon le mode.
    $libelleCMU = $ModeGpharma == 3 ? 'TPOM' : 'C.M.U';
@endphp
@section('titre-page', 'Info administration')
@section('content-body')

    <style>
        /* -------------------------------------------------------------------
           Cartes de logo (société et CMU).

           Les classes du thème .ecommerce-sale-image / .ecommerce-sale ne sont
           plus utilisées ici : la première imposait height:16.625rem et un voile
           noir à 60%, la seconde n'est définie nulle part. Le logo s'affichait
           donc à sa taille intrinsèque, d'où des cartes de hauteurs variables.
           Zone d'aperçu à hauteur fixe + object-fit:contain : n'importe quel
           format s'affiche entier, sans déformation.
           ------------------------------------------------------------------- */

        .carteLogo {
            transition: box-shadow .22s ease, transform .22s ease;
        }

        .carteLogo:hover {
            transform: translateY(-2px);
            box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
        }

        .carteLogoEntete {
            padding: .45rem .75rem;
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #845adf;
            background-color: rgba(132, 90, 223, .08);
            border-bottom: 1px solid rgba(132, 90, 223, .18);
        }

        .apercuLogo {
            position: relative;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .6rem;
            /* Damier discret : un logo transparent ou blanc reste visible. */
            background-color: #fafbfc;
            background-image:
                linear-gradient(45deg, #eef0f3 25%, transparent 25%, transparent 75%, #eef0f3 75%),
                linear-gradient(45deg, #eef0f3 25%, transparent 25%, transparent 75%, #eef0f3 75%);
            background-size: 16px 16px;
            background-position: 0 0, 8px 8px;
            overflow: hidden;
        }

        .apercuLogo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: opacity .28s ease, transform .28s ease;
        }

        /* Appliquée le temps du remplacement de l'image : évite le clignotement
           entre l'ancien et le nouvel aperçu. */
        .apercuLogo img.apercuChange {
            opacity: 0;
            transform: scale(.96);
        }

        .apercuLogoVide {
            position: absolute;
            font-size: .75rem;
            color: #9aa2ad;
            pointer-events: none;
        }

        .piedLogo {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .45rem .6rem;
            border-top: 1px solid rgba(0, 0, 0, .06);
        }

        .boutonLogo {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            margin: 0;
            padding: .2rem .6rem;
            font-size: .75rem;
            font-weight: 500;
            color: #845adf;
            background-color: rgba(132, 90, 223, .1);
            border: 1px solid rgba(132, 90, 223, .35);
            border-radius: 6px;
            cursor: pointer;
            transition: background-color .2s ease, color .2s ease, border-color .2s ease;
        }

        .boutonLogo:hover {
            color: #fff;
            background-color: #845adf;
            border-color: #845adf;
        }

        .nomFichierLogo {
            flex: 1 1 auto;
            min-width: 0;
            font-size: .7rem;
            color: #9aa2ad;
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color .2s ease;
        }

        .nomFichierLogo.fichierChoisi {
            color: #26bf94;
            font-weight: 600;
        }
    </style>

    <!-- Start::app-content -->

    <!-- 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">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Administration</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Info administration</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                {{-- Deux jeux d'informations distincts : les documents ordinaires et ceux du
                     dispositif conventionné. Un seul formulaire enveloppe les deux onglets,
                     donc le bouton Valider enregistre l'ensemble en une fois — un onglet
                     masqué est caché, pas désactivé, ses champs sont bien transmis. --}}
                <div class="card-header pb-0 border-bottom-0">
                    <ul class="nav nav-tabs nav-style-1 mb-0 w-100" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" role="tab"
                               href="#ongletInfosGenerales" aria-selected="true">
                                <i class="bx bx-buildings me-1"></i>Informations de la société
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" role="tab"
                               href="#ongletInfosCMU" aria-selected="false">
                                <i class="bx bx-id-card me-1"></i>Documents {{ $libelleCMU }}
                            </a>
                        </li>
                    </ul>
                </div>
                <form id="formInfoSociete">
                    <div class="card-body">
                      <div class="tab-content">
                        <div class="tab-pane fade show active" id="ongletInfosGenerales" role="tabpanel">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-5">
                                            <div class="card custom-card overflow-hidden mb-0 carteLogo" id="card-logo">
                                                <div class="carteLogoEntete">Logo société</div>
                                                <div class="apercuLogo" id="div-logo">
                                                    <span class="apercuLogoVide" id="videLogoSociete">Aucun logo</span>
                                                    <img alt="Logo société" id="UrlLogoSociete" name="UrlLogoSociete" hidden>
                                                </div>
                                                <div class="piedLogo">
                                                    <input type="file" id="chargerLogo" class="d-none" accept="image/*">
                                                    <label for="chargerLogo" class="boutonLogo">
                                                        <span class="bx bx-upload"></span>Choisir
                                                    </label>
                                                    <span class="nomFichierLogo" id="nomFichierLogo"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-10 col-xl-9 col-lg-8 col-md-7 pb-0 mb-0">
                                            <!-- <div class="card custom-card overflow-hidden shadow-lg p-3"> -->
                                                <div class="row pt-xl-4 pb-0 mb-0">
                                                    <div class="col-xl-12 col-lg-12 col-md-12 mb-xl-4">
                                                        <p class="mb-0 text-muted">Nom de la société</p>
                                                        <input type="text" class="form-control" name="NomSociete" id="NomSociete">
                                                    </div>
                                                    <div class="col-xl-4 col-lg-12 col-md-12 mb-xl-4">
                                                        <p class="mb-0 text-muted">Ville de l'agence centrale</p>
                                                        <input type="text" class="form-control" name="VilleAgenceCentrale" id="VilleAgenceCentrale"/>
                                                    </div>
                                                    <div class="col-xl-8 col-lg-12 col-md-12 mb-xl-4">
                                                        <p class="mb-0 text-muted">Téléphone et fax</p>
                                                        <input type="text" class="form-control" name="TelephoneFaxSociete" id="TelephoneFaxSociete"/>
                                                    </div>
                                                    <div class="col-xl-4 col-lg-12 col-md-12 mb-xl-0">
                                                        <p class="mb-0 text-muted">Adresse postale</p>
                                                        <input type="text" class="form-control" name="AdressePostaleSociete" id="AdressePostaleSociete"/>
                                                    </div>
                                                    <div class="col-xl-8 col-lg-12 col-md-12">
                                                        <p class="mb-0 text-muted">Adresse Email</p>
                                                        <input type="text" class="form-control" name="AdresseEmailSociete" id="AdresseEmailSociete"/>
                                                    </div>
                                                </div>
                                            <!-- </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-8 col-lg-12 mb-3">
                                <div class="card-header">
                                    <div class="card-title">
                                        Entête de page
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div  class="col-xl-6 col-lg-6 col-md-6">
                                            <p class="mb-0 text-muted">Coordonnées de la société pour les états internes</p>
                                            <textarea class="form-control" rows="4" name="InfoEnteteSimple" id="InfoEnteteSimple"></textarea>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <p class="mb-0 text-muted">Informations légales pour les factures</p>
                                            <textarea class="form-control" rows="4" name="InfoEnteteNormalisee" id="InfoEnteteNormalisee"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4 mb-3">
                                <div class="card-header">
                                    <div class="card-title">
                                        Signature
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xl-12 col-md-6 mb-2">
                                            <p class="mb-0 text-muted">Signature document fournisseur</p>
                                            <input type="text" class="form-control" name="SignataireAchat" id="SignataireAchat">
                                        </div>
                                        <div class="col-xl-12 col-md-6 mb-2">
                                            <p class="mb-0 text-muted">Signature document client</p>
                                            <input type="text" class="form-control" name="SignatureVente" id="SignatureVente">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12">
                                <div class="card-header">
                                    <div class="card-title">
                                        Pied de page des Etats Sortans
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xl-4 mb-2">
                                            <div>
                                                <p class="mb-0 text-muted">Pied de page - GAUCHE</p>
                                                <textarea name="PiedPage1" class="form-control" id="PiedPage1" cols="30" rows="4"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 mb-2">
                                            <div>
                                                <p class="mb-0 text-muted">Pied de page - CENTRE</p>
                                                <textarea name="PiedPage2" class="form-control text-center" id="PiedPage2" cols="30" rows="4"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 mb-2">
                                            <div>
                                                <p class="mb-0 text-muted">Pied de page - DROITE</p>
                                                <textarea name="PiedPage3" class="form-control text-end" id="PiedPage3" cols="30" rows="4"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

                        {{-- Second onglet : le même découpage que le premier, appliqué aux
                             colonnes suffixées CMU de INFO_SOCIETE. Les maxlength reprennent
                             les longueurs déclarées en base, sinon une saisie trop longue
                             ressortait en erreur SQL au moment de valider. --}}
                        <div class="tab-pane fade" id="ongletInfosCMU" role="tabpanel">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    {{-- align-items-center : cet onglet n'a que deux champs à
                                         placer à côté du logo, contre cinq dans l'onglet général.
                                         Sans cela tout le vide se retrouvait sous les champs. --}}
                                    <div class="row align-items-center">
                                        <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-5">
                                            {{-- Déposé dans le même dossier que le logo société,
                                                 enregistré dans INFO_SOCIETE.UrlLogoDocumentCMU. --}}
                                            <div class="card custom-card overflow-hidden mb-0 carteLogo" id="card-logo-cmu">
                                                <div class="carteLogoEntete">Logo {{ $libelleCMU }}</div>
                                                <div class="apercuLogo" id="div-logo-cmu">
                                                    <span class="apercuLogoVide" id="videLogoCMU">Aucun logo</span>
                                                    <img alt="Logo {{ $libelleCMU }}" id="UrlLogoDocumentCMU" name="UrlLogoDocumentCMU" hidden>
                                                </div>
                                                <div class="piedLogo">
                                                    <input type="file" id="chargerLogoCMU" class="d-none" accept="image/*">
                                                    <label for="chargerLogoCMU" class="boutonLogo">
                                                        <span class="bx bx-upload"></span>Choisir
                                                    </label>
                                                    <span class="nomFichierLogo" id="nomFichierLogoCMU"></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-10 col-xl-9 col-lg-8 col-md-7 pb-0 mb-0">
                                            <div class="row pb-0 mb-0">
                                                <div class="col-xl-4 col-lg-12 col-md-12 mb-xl-0 mb-2">
                                                    <p class="mb-0 text-muted">Adresse postale</p>
                                                    <input type="text" class="form-control" name="AdressePostaleSocieteCMU"
                                                           id="AdressePostaleSocieteCMU" maxlength="50">
                                                </div>
                                                <div class="col-xl-8 col-lg-12 col-md-12">
                                                    <p class="mb-0 text-muted">Adresse Email</p>
                                                    <input type="text" class="form-control" name="AdresseEmailSocieteCMU"
                                                           id="AdresseEmailSocieteCMU" maxlength="50">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-8 col-lg-12 mb-3">
                                <div class="card-header">
                                    <div class="card-title">
                                        Entête de page
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <p class="mb-0 text-muted">Coordonnées de la société pour les états internes</p>
                                            <textarea class="form-control" rows="4" maxlength="255"
                                                      name="InfoEnteteSimpleCMU" id="InfoEnteteSimpleCMU"></textarea>
                                        </div>
                                        <div class="col-xl-6 col-lg-6 col-md-6">
                                            <p class="mb-0 text-muted">Informations légales pour les factures</p>
                                            <textarea class="form-control" rows="4" maxlength="255"
                                                      name="InfoEnteteNormaliseeCMU" id="InfoEnteteNormaliseeCMU"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-4 mb-3">
                                <div class="card-header">
                                    <div class="card-title">
                                        Signature
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xl-12 col-md-6 mb-2">
                                            <p class="mb-0 text-muted">Signature document fournisseur</p>
                                            <input type="text" class="form-control" name="SignataireAchatCMU"
                                                   id="SignataireAchatCMU" maxlength="50">
                                        </div>
                                        <div class="col-xl-12 col-md-6 mb-2">
                                            <p class="mb-0 text-muted">Signature document client</p>
                                            <input type="text" class="form-control" name="SignatureVenteCMU"
                                                   id="SignatureVenteCMU" maxlength="50">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-12">
                                <div class="card-header">
                                    <div class="card-title">
                                        Pied de page des Etats Sortans
                                    </div>
                                </div>
                                <div class="card custom-card overflow-hidden shadow-lg mb-0 p-3">
                                    <div class="row">
                                        <div class="col-xl-4 mb-2">
                                            <p class="mb-0 text-muted">Pied de page - GAUCHE</p>
                                            <textarea name="PiedPage1CMU" class="form-control" id="PiedPage1CMU"
                                                      cols="30" rows="4" maxlength="255"></textarea>
                                        </div>
                                        <div class="col-xl-4 mb-2">
                                            <p class="mb-0 text-muted">Pied de page - CENTRE</p>
                                            <textarea name="PiedPage2CMU" class="form-control text-center" id="PiedPage2CMU"
                                                      cols="30" rows="4" maxlength="255"></textarea>
                                        </div>
                                        <div class="col-xl-4 mb-2">
                                            <p class="mb-0 text-muted">Pied de page - DROITE</p>
                                            <textarea name="PiedPage3CMU" class="form-control text-end" id="PiedPage3CMU"
                                                      cols="30" rows="4" maxlength="255"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                      </div>
                    </div>
                    <div class="d-flex justify-content-end px-4 mb-4">
                        <button type="button" class="btn btn-success btn-wave d-flex mx-2" id="bntValiderModif">
                            <i class="bx bxs-check-circle me-1" style="font-size: 16px;"></i>
                            Valider
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

@endsection

@section('script')

    {{-- Script executé au chargement de la page --}}
    <script>

        // Charger infos société
        function chargerInfoSociete(){

            $.ajax({

                url : "{{ route('infoSociete') }}",
                type : 'POST',
                data : {
                    _token : "{{csrf_token()}}"
                },
                dataType : 'json',
                success : function(response){

                    let info = response.data[0]

                    // Les deux onglets partagent le même jeu de rubriques, la seconde
                    // série suffixée CMU. Une valeur nulle en base deviendrait la chaîne
                    // « null » dans le champ : on la remplace par du vide.
                    let rubriques = [
                        'NomSociete', 'VilleAgenceCentrale', 'TelephoneFaxSociete',
                        'AdressePostaleSociete', 'AdresseEmailSociete',
                        'InfoEnteteSimple', 'InfoEnteteNormalisee',
                        'SignataireAchat', 'SignatureVente',
                        'PiedPage1', 'PiedPage2', 'PiedPage3',

                        'AdressePostaleSocieteCMU', 'AdresseEmailSocieteCMU',
                        'InfoEnteteSimpleCMU', 'InfoEnteteNormaliseeCMU',
                        'SignataireAchatCMU', 'SignatureVenteCMU',
                        'PiedPage1CMU', 'PiedPage2CMU', 'PiedPage3CMU',
                    ]

                    rubriques.forEach(function (rubrique) {

                        let champ = _(rubrique)

                        if (champ) champ.value = info[rubrique] == null ? '' : info[rubrique]
                    })

                    afficherApercuLogo('UrlLogoSociete', 'videLogoSociete', info.UrlLogoSociete)
                    afficherApercuLogo('UrlLogoDocumentCMU', 'videLogoCMU', info.UrlLogoDocumentCMU)
                },
                error : function(erreur){
                    console.log(erreur)
                }
            })
        }

        chargerInfoSociete()

        function modifierInfoSociete() {

            let formInfoSociete = new FormData(_('formInfoSociete'))
            formInfoSociete.append('_token', '{{ csrf_token() }}')

            // Récupérer le fichier image sélectionné
            let fileInput = _('chargerLogo');
            let file = fileInput.files[0];

            if (file) {
                formInfoSociete.append('logo', file); // 'logo' est la clé que tu traiteras dans Laravel
            }

            // Logo CMU : envoyé sous sa propre clé, traitée à part côté serveur.
            let fileCMU = _('chargerLogoCMU').files[0];

            if (fileCMU) {
                formInfoSociete.append('logoCMU', fileCMU);
            }

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('modifierInfoSociete') }}",
                    type: 'POST',
                    data: formInfoSociete,
                    processData : false,
                    contentType : false,
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

                        resolve(response)
                        completeHandler()
                    },
                    error: function(error) {

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        _('bntValiderModif').addEventListener('click', function(){

            modifierInfoSociete()
                .then((response) => {

                    if (response.success == 1) {
                        
                        notif('success', 'Succès', 'Modification éffectuée avec succès.')
                    }
                })
        })
    </script>

    <!-- Script de sélection de logo -->
    <script>

        /**
         * Affiche une source dans une zone d'aperçu, ou le libellé « Aucun logo »
         * si elle est vide. Le fondu passe par une classe posée puis retirée au
         * chargement de l'image : sans ça, on voyait brièvement l'ancienne.
         *
         * @param {string} idImage    id de la balise <img>
         * @param {string} idLibelle  id du libellé affiché quand il n'y a pas d'image
         * @param {string} source     URL ou data URL ; vide = pas d'image
         */
        function afficherApercuLogo(idImage, idLibelle, source) {

            let image = _(idImage)
            let libelle = _(idLibelle)

            if (source == null || String(source).replace(/\s/g, '') == '') {

                image.hidden = true
                libelle.hidden = false
                return
            }

            source = String(source)

            // La base stocke un chemin RELATIF ("documentTeleverse/logo_societe/x.png").
            // Sans le / initial, le navigateur le résout depuis l'URL de la page courante
            // et l'image part en 404. Les data URL de l'aperçu local, elles, sont
            // laissées telles quelles.
            if (!/^(data:|https?:|\/)/i.test(source)) {
                source = '/' + source
            }

            image.classList.add('apercuChange')

            let devoiler = function () {
                image.hidden = false
                libelle.hidden = true
                // Retiré au tour de boucle suivant pour que la transition s'exécute.
                requestAnimationFrame(function () {
                    image.classList.remove('apercuChange')
                })
            }

            image.onload = devoiler

            image.onerror = function () {
                image.hidden = true
                libelle.hidden = false
                libelle.textContent = 'Logo introuvable'
            }

            image.src = source

            // Source identique à la précédente, ou image déjà en cache : onload ne se
            // déclenche pas et l'aperçu resterait masqué à opacité 0.
            if (image.complete && image.naturalWidth > 0) {
                devoiler()
            }
        }

        /**
         * Branche un sélecteur de fichier sur sa zone d'aperçu.
         */
        function brancherSelecteurLogo(idInput, idImage, idLibelle, idNomFichier) {

            _(idInput).addEventListener('change', function () {

                let fichier = this.files && this.files[0]
                let nom = _(idNomFichier)

                if (!fichier) {

                    nom.textContent = ''
                    nom.classList.remove('fichierChoisi')
                    return
                }

                nom.textContent = fichier.name
                nom.classList.add('fichierChoisi')
                nom.title = fichier.name

                const lecteur = new FileReader()

                lecteur.onload = function (e) {
                    afficherApercuLogo(idImage, idLibelle, e.target.result)
                }

                lecteur.readAsDataURL(fichier)
            })
        }

        brancherSelecteurLogo('chargerLogo', 'UrlLogoSociete', 'videLogoSociete', 'nomFichierLogo')
        brancherSelecteurLogo('chargerLogoCMU', 'UrlLogoDocumentCMU', 'videLogoCMU', 'nomFichierLogoCMU')
    </script>
@endsection