@extends('model')
@section('title_page',"Règlement Listing")

@section('content')

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{url("/accueil")}}">Accueil</a> /</li>
        <li class="breadcrumb-item">Règlement Client /</li>
        <li class="breadcrumb-item active" aria-current="page"> Listing</li>
    </ol>
</nav>

<div class="row">
    <div class="col-xl-4 col-sm-4">
        <div class="card same-card">
            <div class="card-body depostit-card p-0">
                <div class="depostit-card-media d-flex justify-content-between ">
                    <div>
                        <h6>Total règlement</h6>
                        <h3 id="totalReglement">0</h3>
                    </div>
                    <div class="icon-box bg-secondary">
                       <i class='bx bx-receipt fs-14 text-white pt-2' ></i>
                    </div>
                </div>
                {{-- <div id="NewExperience"></div> --}}
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-sm-4">
        <div class="card same-card">
            <div class="card-body depostit-card p-0">
                <div class="depostit-card-media d-flex justify-content-between">
                    <div>
                        <h6>Total utilisé</h6>
                        <h3 id="totalTotalUtilise">0</h3>
                    </div>
                    <div class="icon-box bg-success">
                        <i class='bx bx-receipt fs-14 text-white pt-2' ></i>
                    </div>
                </div>
                {{-- <div id="NewExperience"></div> --}}
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-sm-4">
        <div class="card same-card">
            <div class="card-body depostit-card p-0">
                <div class="depostit-card-media d-flex justify-content-between">
                    <div>
                        <h6>Total solde</h6>
                        <h3 id="totalSolde">0</h3>
                    </div>
                    <div class="icon-box bg-danger">
                        <i class='bx bx-receipt fs-14 text-white pt-2' ></i>
                    </div>
                </div>
                {{-- <div id="NewExperience"></div> --}}
            </div>
        </div>
    </div>
</div>

<div class="card mt-4">
    <div class="card-header border-0 pb-0 pt-4 ">
        <h4 class="card-title"></h4>
        <button type="button" class="btn notreBtnPrimaire" id="btnModalReglementClient">
            <span class="btn-icon-start text-primary">
                <i class="fa fa-plus"></i>
            </span>
            Nouveau règlement
        </button>
    </div>
    <div class="card-body px-lg-4">
        <div class="table-responsive">
            <table id="tableListingReglement" class="table display w-100 table-striped table-hover">
                <thead>
                    <tr>
                        <th data-column="action" class="text-center">Actions</th>
                        <th data-column="date_reglementFormat" data-class="text-center" class="text-center">Date Règ.</th>
                        <th data-column="numero_reglement" data-class="text-center" class="text-center">N° Règlement</th>
                        <th data-column="ref_externe_reglement" class="text-center">Ref. Externe</th>
                        <th data-column="montant_reglementFormat" data-class="text-end" class="text-center">Montant Règ.</th>
                        <th data-column="intitule_mode_reg" class="text-center">Mode Règlem.</th>
                        <th data-column="statut_reglementFormat" data-class="text-center" class="text-center">Statut</th>
                        <th data-column="soldeFormat" data-class="text-center" class="text-center">Solde</th>
                        <th data-column="raison_sociale_client" class="text-center">Client</th>
                        <th data-column="date_remise_souhaiteFormat" data-class="text-center" class="text-center">Date Remise Sou.</th>
                        <th data-column="numero_compte_source" class="text-center">N° Compte Source</th>
                        <th data-column="encaissePar" class="text-center">Encaisse Par</th>
                        <th data-column="intitule_banque" class="text-center">Banque</th>
                        <th data-column="intitule_compte_treso" class="text-center">Compte Treso</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

{{-- Section Modal --}}
<div class="modal fade" id="modalReglementClient" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="titleModalReglementClient">Nouvel utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formReglementClient" class="w-100">
                    <input type="number" name="idreglement_client" id="idreglement_client" style="display : none;" value="0">
                    <input type="number" name="totalUtilise" id="inptotalUtilise" style="display : none;" value="0">
                    <div class="row mb-3">
                        <div class="col-lg-3 mb-2">
                            <p class="text-muted mb-0">Date Règlement</p>
                            <input type="date" class="form-control text-center" name="date_reglement" id="inpdate_reglement">
                        </div>
                        <div class="col-lg-3 mb-2">
                            <p class="text-muted mb-0 ellipsis" title="Référence Externe">Référence Externe</p>
                            <input type="text" class="form-control" name="ref_externe_reglement" id="inpref_externe_reglement" style="text-transform: uppercase;">
                        </div>
                        <div class="col-lg-3 mb-2">
                            <p class="text-muted mb-0" title="Montant du règlement">Montant du règlement</p>
                            <input type="text" class="form-control numberInput text-end" name="montant_reglement" id="inpmontant_reglement">
                        </div>
                        <div class="col-lg-3 mb-2 ellipsis">
                            <p class="text-muted mb-0">Date Remise Souhouhaite</p>
                            <input type="date" class="form-control text-center" name="date_remise_souhaite" id="inpdate_remise_souhaite">
                        </div>
                        <div class="col-lg-6 mb-2">
                            <p class="text-muted mb-0">Client</p>
                            <select class="form-control" name="idclient" id="selidclient"></select>
                        </div>
                        <div class="col-lg-3 mb-2">
                            <p class="text-muted mb-0">Mode de Règlement</p>
                            <select class="form-control" name="idmode_reglement" id="selidmode_reglement"></select>
                        </div>
                        <div class="col-lg-3 mb-2">
                            <p class="text-muted mb-0">Banque</p>
                            <select class="form-control" name="idbanque" id="selidbanque"></select>
                        </div>
                        <div class="col-lg-6 mb-2">
                            <p class="text-muted mb-0">Encaissé par</p>
                            <select class="form-control" name="reglement_encaisse_par" id="selidutilisateur"></select>
                        </div>
                        <div class="col-lg-6 mb-2">
                            <p class="text-muted mb-0">Compte Treso</p>
                            <select class="form-control" name="idcompte_treso" id="selidcompte_treso"></select>
                        </div>
                        <div class="mb-2">
                            <p class="text-muted mb-0">Commentaire</p>
                            <textarea class="form-control" name="commentaire_reglement" id="inpcommentaire_reglement" cols="30" rows="5"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn notreBtnPrimaire" id="btnNewReglementClient">Enregistrer</button>
                <button class="btn btn-warning" id="btnEditReglementClient">Modifier</button>
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalModifierStatut" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="titleModalModifierStatut"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div>
                    <input type="number" name="idreglement_client" id="inpidreglement_clientModalModifierStatut" style="display : none;" value="0">
                    <p class="text-muted mb-0">Statut</p>
                    <select name="statut_reglement" id="selstatut_reglement" class="form-control">
                        <option value="1">A TERME</option>
                        <option value="2">REMIS</option>
                        <option value="3">ENCAISSE</option>
                        <option value="4">IMPAYE</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer p-0">
                <button class="btn btn-warning light w-100" id="btnEditStatutReglementClient">Modifier</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')

<!-- Script exécuté au chargement de la page -->
<script>

    var tableListingReglement

    function listeReglementClient(idreglement_client = 0){

        return new Promise((resolve, reject) => {

            $.ajax({

                url : "{{ route('listeReglementClient') }}",
                type : 'GET',
                data : {
                    idreglement_client : idreglement_client
                },
                dataType : 'json',
                // beforeSend : progressHandler(),
                success : function(response){

                    if (response.success != 1) {
                        
                        notifDanger(response.msg || 'Échec de l\'opération.')
                    }

                    resolve(response)

                    // completeHandler()
                },
                error : function(error){

                    reject()
                    // notifErrorAjax()
                    // completeHandler()
                }
            })
        })
    }

    function chargerTableListingReglement(){

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

                if (response.success == 1) {
                    
                    let data = response.data

                    tableListingReglement = remplissageDataTable({
                                    IdentifiantDuTableau : '#tableListingReglement',
                                    obj : data
                                })

                    _('#totalReglement').innerHTML = formatNumber(response.totalReglement)
                    _('#totalTotalUtilise').innerHTML = formatNumber(response.totalTotalUtilise)
                    _('#totalSolde').innerHTML = formatNumber(response.totalSolde)
                }
            })
    }

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

            if (response.success == 1) {

                let data = response.data
                
                data.unshift({
                    idclient : 0,
                    raison_sociale_client : 'SELECTIONNER UN CLIENT'
                })

                populateSelect('#selidclient', {
                    
                    data : data,
                    valueKey : 'idclient',
                    textKey : 'raison_sociale_client'
                })

                $('#selidclient').select2({

                    dropdownParent : $('#modalReglementClient')
                })
            }
        })

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

            if (response.success == 1) {selidclient
                
                let data = response.data

                data.unshift({
                    idbanque : 0,
                    intitule_banque : 'SELECTIONNER UNE BANQUE'
                })

                populateSelect('#selidbanque', {
                    
                    data : data,
                    valueKey : 'idbanque',
                    textKey : 'intitule_banque'
                })
            }
        })

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

            if (response.success == 1) {
                
                let data = response.data

                data.unshift({
                    idcompte_treso : 0,
                    intitule_compte_treso : 'SELECTIONNER UN COMPTE TRESO'
                })

                populateSelect('#selidcompte_treso', {
                    
                    data : data,
                    valueKey : 'idcompte_treso',
                    textKey : 'intitule_compte_treso'
                })
            }
        })

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

            if (response.success == 1) {
                
                let data = response.data

                additionalAttributes = {
                    'data-type': function(option) { return option.type_mode_reg; }
                }

                data.unshift({
                    idmode_reglement : 0,
                    intitule_mode_reg : 'SELECTIONNER UN MODE',
                    type_mode_reg : 0
                })

                populateSelect('#selidmode_reglement', {
                    
                    data : data,
                    valueKey : 'idmode_reglement',
                    textKey : 'intitule_mode_reg',
                    additionalAttributes : additionalAttributes
                })
            }
        })

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

            if (response.success == 1) {

                let data = response.data
                
                data.unshift({
                    idutilisateur : 0,
                    nom_prenom : 'SELECTIONNER L\'ENCAISSEUR'
                })

                populateSelect('#selidutilisateur', {
                    
                    data : data,
                    valueKey : 'idutilisateur',
                    textKey : 'nom_prenom'
                })

                $('#selidutilisateur').select2({

                    dropdownParent : $('#modalReglementClient')
                })
            }
        })

    chargerTableListingReglement()
</script>

<!-- Script de modal de rêglement -->
<script>

    function newModifReglement(){

        return new Promise((resolve, reject) => {

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

            $.ajax({

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

                    if (response.success != 1) {
                        
                        notifDanger(response.msg || 'Échec de l\'opération.')
                    }else{

                        notifSuccess('Opération effectuée avec succès.')
                    }

                    resolve(response)

                    // completeHandler()
                },
                error : function(error){

                    reject()
                    notifErrorAjax()
                    // completeHandler()
                }
            })
        })
    }

    // Ouverture de la modal en ajout
    _('#btnModalReglementClient').addEventListener('click', function(){

        _('#titleModalReglementClient').innerHTML = 'Nouveau Règlement'

        _('#formReglementClient').reset()
        remplirChampDate('today', 'inpdate_reglement')
        remplirChampDate('today', 'inpdate_remise_souhaite')

        _('#btnNewReglementClient').style.display = ''
        _('#btnEditReglementClient').style.display = 'none'

        $('#modalReglementClient').modal('show')
    })

    // Script nouveau reglement
    _('#btnNewReglementClient').addEventListener('click', function(){

        if (_('#inpdate_reglement').value == null) {
            
            notifDanger('Veuillez sélectionner la date du règlement')
            return 0
        }

        if (_('#inpmontant_reglement').value.replace(/\s/g,'') == '' || _('#inpmontant_reglement').value == 0) {
            
            notifDanger('Veuillez saisir le montant du règlement')
            return 0
        }

        if (_('#selidutilisateur').value == 0) {
            
            notifDanger('Veuillez sélectionner celui qui encaisse')
            return 0
        }

        if (_('#selidclient').value == 0) {
            
            notifDanger('Veuillez sélectionner le client')
            return 0
        }

        if (_('#selidcompte_treso').value == 0) {
            
            notifDanger('Veuillez sélectionner le compte treso')
            return 0
        }

        if (_('#selidmode_reglement').value == 0) {
            
            notifDanger('Veuillez sélectionner le mode de règlement')
            return 0
        }

        let typeModeReglement = $('#selidmode_reglement').find(':selected').data('type')
        
        if (typeModeReglement != 1 && _('#inpref_externe_reglement').value.replace(/\s/g,'') == '') {
            
            notifDanger('Veuillez saisir la reférence externe')
            return 0
        }

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

                if (response.success == 1) {
                    
                    chargerTableListingReglement()
                    $('#modalReglementClient').modal('hide')
                }
            })

    })

    // Ouverture de la modal en modif
    $(document).on('click', '#btnModalModifReglement', function(){

        let idreglement_client = $(this).attr('data-id')

        listeReglementClient(idreglement_client)
            .then((response) => {

                if (response.success == 1) {

                    let data = response.data
                    
                    if (data.length == 0) {
                        
                        return 0
                    }

                    data = data[0]
                    
                    remplirLeForm('#formReglementClient', data)

                    _('#titleModalReglementClient').innerHTML = 'Modifier le Règlement : '+ data.numero_reglement

                    _('#btnNewReglementClient').style.display = 'none'
                    _('#btnEditReglementClient').style.display = ''

                    $('#inpmontant_reglement').trigger('input')

                    $('#modalReglementClient').modal('show')
                }
            })
    })

    // Script de modification d'un règlement
    _('#btnEditReglementClient').addEventListener('click', function(){

        if (_('#inpdate_reglement').value == null) {
            
            notifDanger('Veuillez sélectionner la date du règlement')
            return 0
        }

        if (_('#inpmontant_reglement').value.replace(/\s/g,'') == '' || _('#inpmontant_reglement').value == 0) {
            
            notifDanger('Veuillez saisir le montant du règlement')
            return 0
        }

        if (_('#selidutilisateur').value == 0) {
            
            notifDanger('Veuillez sélectionner celui qui encaisse')
            return 0
        }

        if (_('#selidclient').value == 0) {
            
            notifDanger('Veuillez sélectionner le client')
            return 0
        }

        if (_('#selidcompte_treso').value == 0) {
            
            notifDanger('Veuillez sélectionner le compte treso')
            return 0
        }

        if (_('#selidmode_reglement').value == 0) {
            
            notifDanger('Veuillez sélectionner le mode de règlement')
            return 0
        }

        let totalUtilise = _('#inptotalUtilise').value.replace(/\s/g,'')

        if (totalUtilise > parseInt(_('#inpmontant_reglement').value.replace(/\s/g,'').replace(',','.'))) {
            
            notifDanger('Impossible de modifier le montant de règlement à une somme inférieur à '+totalUtilise)
            return 0
        }

        let typeModeReglement = $('#IDCLIENTmodalFicheReglement').find(':selected').data('type')
        
        if (typeModeReglement != 1 && _('#inpref_externe_reglement').value.replace(/\s/g,'') == '') {
            
            notifDanger('Veuillez saisir la reférence externe')
            return 0
        }

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

                if (response.success == 1) {
                    
                    chargerTableListingReglement()
                    $('#modalReglementClient').modal('hide')
                }
            })
    })
</script>

<!-- Script de suppression de rêglement -->
<script>

    function supprimerReglement(idreglement_client, forcerSuppression = 0){

        return new Promise((resolve, reject) => {

            $.ajax({

                url : "{{ route('supprimerReglement') }}",
                type : 'GET',
                data : {

                    idreglement_client : idreglement_client,
                    forcerSuppression : forcerSuppression
                },
                dataType : 'json',
                // beforeSend : progressHandler(),
                success : function(response){

                    if (response.success != 1 && response.success != 2) {
                        
                        notifDanger(response.msg || 'Échec de l\'opération.')
                    }

                    resolve(response)

                    // completeHandler()
                },
                error : function(error){

                    reject()
                    // notifErrorAjax()
                    // completeHandler()
                }
            })
        })
    }

    $(document).on('click', '#btnSuppReglement', function(){

        let idreglement_client = $(this).attr('data-id')

        Swal.fire({

            title: 'Êtes-vous sûres ?',
            text: 'De vouloir supprimer ce rêglement.',
            type: 'warning',
            showCancelButton: true,
            cancelButtonColor: '#a6a6a6',
            confirmButtonColor: '#d33',
            confirmButtonText: 'Oui',
            cancelButtonText: 'Non'

        }).then((result) => { 

            if (result.value) {

                supprimerReglement(idreglement_client)
                    .then((response) => {

                        if(response.success == 1){

                            Swal.fire({

                                title: 'Attention !',
                                text: response.msg,
                                type: 'warning',
                                showCancelButton: true,
                                cancelButtonColor: '#a6a6a6',
                                confirmButtonColor: '#d33',
                                confirmButtonText: 'Supprimer',
                                cancelButtonText: 'Non'

                            }).then((result) => {

                                if (result.value) {

                                    supprimerReglement(idreglement_client, 1)
                                        .then((response) => {

                                            if (response.success == 2) {
                                                
                                                notifSuccess('Suppression éffectuée.')
                                                chargerTableListingReglement()
                                            }
                                        })
                                }
                            })
                        }else if (response.success == 2) {
                                                
                            notifSuccess('Suppression éffectuée.')
                            chargerTableListingReglement()
                        }
                    })
            }
        })
    })
</script>

<!-- Script de modification de statut de reglement -->
<script>

    var elmtStatut

    function modifierStatutReglementClient(){

        return new Promise((resolve, reject) => {

            $.ajax({

                url : "{{ route('modifierStatutReglementClient') }}",
                type : 'POST',
                data : {

                    idreglement_client : _('#inpidreglement_clientModalModifierStatut').value,
                    statut_reglement : _('#selstatut_reglement').value,
                    _token : '{{ csrf_token() }}'
                },
                dataType : 'json',
                // beforeSend : progressHandler(),
                success : function(response){

                    if (response.success != 1) {
                        
                        notifDanger(response.msg || 'Échec de l\'opération.')
                    }

                    resolve(response)

                    // completeHandler()
                },
                error : function(error){

                    reject()
                    // notifErrorAjax()
                    // completeHandler()
                }
            })
        })
    }

    function genererElmtStatut(value) {

        let idreglement_client = elmtStatut.getAttribute('data-idreglement_client');
        let numbRef = elmtStatut.getAttribute('data-numbRef');
        
        // Définition des classes et du texte selon la valeur
        let statutData = {
            1: { class: 'badge-primary', text: 'A TERME', icon: 'text-primary' },
            2: { class: 'badge-secondary', text: 'REMIS', icon: 'text-secondary' },
            3: { class: 'badge-success', text: 'ENCAISSE', icon: 'text-success' },
            4: { class: 'badge-danger', text: 'IMPAYE', icon: 'text-danger' }
        };
        
        // Vérification si la valeur existe dans le tableau de statuts
        if (!statutData[value]) {
            console.error('Valeur de statut invalide.');
            return '';
        }

        // Construction de l'élément HTML avec template literals
        let newElmt = `
            <span class="badge light ${statutData[value].class} text-uppercase" 
                style="width: 110px; cursor:pointer;" 
                id="btnModifStatut" 
                data-idreglement_client="${idreglement_client}" 
                data-value="${value}" 
                data-numbRef="${numbRef}">
                <i class="fa fa-circle ${statutData[value].icon} me-1"></i>
                ${statutData[value].text}
            </span>
        `;
        
        console.log(newElmt);
        return newElmt;
    }

    $(document).on('click', '#btnModifStatut', function(){

        elmtStatut = this

        _('#titleModalModifierStatut').innerHTML = 'N° '+$(this).attr('data-numbRef')
        _('#inpidreglement_clientModalModifierStatut').value = $(this).attr('data-idreglement_client')
        $('#selstatut_reglement').val($(this).attr('data-value')).trigger('change')
        $('#modalModifierStatut').modal('show')
    })

    _('#btnEditStatutReglementClient').addEventListener('click', function(){

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

                if (response.success == 1) {
                    
                    notifSuccess('Modification éffectuée avec succès.')
                    elmtStatut.replaceWith(document.createRange().createContextualFragment(genererElmtStatut($('#selstatut_reglement').val())))
                    $('#modalModifierStatut').modal('hide')
                }
            })
    })
</script>
@endsection