@extends('models')
@section('titre-page', 'Info administration')
@section('content-body')
    <!-- 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">
                <div class="card-header">
                    <div class="card-title">
                        Informations de la société
                    </div>
                </div>
                <form id="formInfoSociete">
                    <div class="card-body">
                        <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-4 col-xl-5 col-lg-8 col-md-8">
                                            <div class="card custom-card overflow-hidden mb-0" id="card-logo">
                                                <div class="ecommerce-sale-image" id="div-logo">
                                                    <img src="../assets/images/ecommerce/png/35.png" class="card-img-top" id="UrlLogoSociete" name="UrlLogoSociete">
                                                    <div class="card-img-overlay d-flex flex-column p-4 text-fixed-white">
                                                        <input type="file" id="chargerLogo" class="d-none">
                                                        <label for="chargerLogo" class="ecommerce-sale-days btn btn-warning-light btn-wave">
                                                            <span class="bx bx-upload"></span>
                                                            Modifier le logo
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-8 col-xl-7 col-lg-4 col-md-4 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 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 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 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>
                    <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){

                    _('NomSociete').value = response.data[0].NomSociete
                    _('VilleAgenceCentrale').value = response.data[0].VilleAgenceCentrale
                    _('TelephoneFaxSociete').value = response.data[0].TelephoneFaxSociete
                    _('AdressePostaleSociete').value = response.data[0].AdressePostaleSociete
                    _('AdresseEmailSociete').value = response.data[0].AdresseEmailSociete
                    _('InfoEnteteSimple').value = response.data[0].InfoEnteteSimple
                    _('InfoEnteteNormalisee').value = response.data[0].InfoEnteteNormalisee
                    _('SignataireAchat').value = response.data[0].SignataireAchat
                    _('SignatureVente').value = response.data[0].SignatureVente
                    _('PiedPage1').value = response.data[0].PiedPage1
                    _('PiedPage2').value = response.data[0].PiedPage2
                    _('PiedPage3').value = response.data[0].PiedPage3

                    if (response.data[0].UrlLogoSociete != null && response.data[0].UrlLogoSociete.replace(/\s/g,'') != '') {

                        console.log(response.data[0].UrlLogoSociete);
                        
                        // $('#card-logo').css({'max-height' : '100%'})
                        _('div-logo').classList.remove('ecommerce-sale-image')
                        _('div-logo').classList.add('ecommerce-sale')
                        _('UrlLogoSociete').src = '/'+response.data[0].UrlLogoSociete
                    }
                },
                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
            }

            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>

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

             // Vérifiez s'il y a un fichier sélectionné
            if (_('chargerLogo').files && _('chargerLogo').files[0]) {
                // Obtenez l'URL de l'image à partir du fichier sélectionné
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Mettez à jour la source de l'image avec l'URL de l'image sélectionnée
                    _('UrlLogoSociete').src = e.target.result;
                };
                // Lisez le fichier en tant que URL de données (data URL)
                // $('#card-logo').css({'max-height' : '100%'})
                reader.readAsDataURL(_('chargerLogo').files[0]);
                _('div-logo').classList.remove('ecommerce-sale-image')
                _('div-logo').classList.add('ecommerce-sale')
            } else {
                // Si aucun fichier n'est sélectionné, réinitialisez la source de l'image
                _('UrlLogoSociete').src = "../assets/images/ecommerce/png/35.png";
            }
        })
    </script>
@endsection