@extends('model')
@section('title_page',"Reglement Utilisé")

@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églé</h6>
                        <h3 id="totalTotalRegle">0</h3>
                    </div>
                    <div class="icon-box bg-success">
                        <i class='bx bx-receipt fs-14 text-white pt-2' ></i>
                    </div>
                </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="btnModalUtiliReglementClient">
            <span class="btn-icon-start text-primary">
                <i class="fa fa-plus"></i>
            </span>
            Régler une facture
        </button>
    </div>
    <div class="card-body px-lg-4">
        <div class="table-responsive">
        <table id="tableListingReglementUtilise" class="table display w-100">
            <thead>
                <tr>
                    <th data-column="action" class="text-center">Actions</th>
                    <th data-column="numero_facture" data-class="text-center" class="text-center">N° Facture</th>
                    <th data-column="numero_reglement" data-class="text-center" class="text-center">N° Règlement</th>
                    <th data-column="ref_externe_reglement" data-class="text-center" class="text-center">Ref. Externe</th>
                    <th data-column="montant_reglement_utiliseFormat" data-class="text-end" class="text-center">Montant Réglé</th>
                    <th data-column="statut_reglementFormat" data-class="text-center" class="text-center">Statut</th>
                    <th data-column="intitule_mode_reg" class="text-center">Mode Règlem.</th>
                    <th data-column="date_echeanceFormat" data-class="text-center" class="text-center">Date Echéance</th>
                    <th data-column="nom_prenom_user_saisie" class="text-center">Saisi Par</th>
                    <th data-column="raison_sociale_client" class="text-center">Client</th>
                </tr>
            </thead>
        </table>
    </div>
    </div>
</div>

{{-- Section Modal --}}
<div class="modal fade" id="modalUtiliReglementClient" 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="titleModaReglementClient">Nouvel utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formReglementClientUtilise" class="w-100">
                    <div class="row mb-3">
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0">Client</p>
                            <select class="form-control" name="idclient" id="selidclient"></select>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0">Règlement dispo</p>
                            <select class="form-control" name="idreglement_client" id="selidreglement_client_dispo"></select>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0">Solde du reglement</p>
                            <input type="text" class="form-control text-end" name="montant_total_utilise" id="inpmontant_total_utilise" disabled>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0 ellipsis" title="Facture non soldé">Facture non soldé</p>
                            <select class="form-control" name="idfacture_client" id="selidfacture_client"></select>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0" title="Référence Externe">Solde facture</p>
                            <input type="text" class="form-control text-end" name="montant_solde" id="inpmontant_solde" disabled>
                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="text-muted mb-0" title="Référence Externe">Montant à régler</p>
                            <input type="text" class="form-control text-end numberInput" name="montant_reglement_utilise" id="inpmontant_reglement_utilise">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn notreBtnPrimaire" id="btnNewUtilisationReglementClient">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>

@endsection

@section('script')

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

    var tableListingReglementUtilise

    function listeReglementUtilise(idreglement_client_utilise = 0){

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

            $.ajax({

                url : "{{ route('listeReglementUtilise') }}",
                type : 'GET',
                data : {
                    idreglement_client_utilise : idreglement_client_utilise
                },
                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 chargertableListingReglementUtilise(){

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

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

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

                    _('#totalTotalRegle').innerHTML = formatNumber(response.totalTotalRegle)
                }
            })
    }

    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 : $('#modalUtiliReglementClient')
                })
            }
        })

    chargertableListingReglementUtilise()
</script>

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

    function utiliserReglement(){

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

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

            $.ajax({

                url : "{{ route('utiliserReglement') }}",
                type : 'POST',
                data : formReglementClientUtilise,
                contentType : false,
                processData : false,
                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()
                }
            })
        })
    }

    $('#selidreglement_client_dispo').select2({

        dropdownParent : $('#modalUtiliReglementClient')
    })

    $('#selidfacture_client').select2({

        dropdownParent : $('#modalUtiliReglementClient')
    })

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

        $('#selidclient').val(0).trigger('change')

        _('#titleModaReglementClient').innerHTML = 'Nouveau Règlement de facture'

        _('#formReglementClientUtilise').reset()

        _('#selidreglement_client_dispo').innerHTML="<option>SELECTIONNER UN CLIENT</option>"
        _('#selidreglement_client_dispo').setAttribute('disabled', '')

        _('#selidfacture_client').innerHTML="<option>SELECTIONNER UN CLIENT</option>"
        _('#selidfacture_client').setAttribute('disabled', '')

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

        _('#inpmontant_total_utilise').value = 0
        _('#inpmontant_solde').value = 0
        _('#inpmontant_reglement_utilise').value = 0

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

    // Script de sélection d'un client
    $(document).on('change', '#selidclient', function(){

        let idclient = $(this).val()

        if (idclient == 0) {
            
            _('#selidreglement_client_dispo').innerHTML="<option value='0'>SELECTIONNER UN CLIENT</option>"
            _('#selidreglement_client_dispo').setAttribute('disabled', '')

            _('#selidfacture_client').innerHTML="<option value='0'>SELECTIONNER UN CLIENT</option>"
            _('#selidfacture_client').setAttribute('disabled', '')

            _('#inpmontant_total_utilise').value = 0
            _('#inpmontant_solde').value = 0
            
            return 0
        }

        listeReglementDispoClient(idclient)
            .then((response) => {

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

                    let firstnumero_reglement = 'SELECTIONNER UN REGLEMENT'

                    if (data.length == 0) {

                        firstnumero_reglement = 'AUCUN REGLEMENT DISPO'
                    }

                    data.unshift({
                        idreglement_client : 0,
                        numero_reglement : firstnumero_reglement,
                        montant_reglement : 0,
                        montant_total_utilise : 0
                    })

                    let additionalAttributes = {
                        'data-solde': function(option) { return parseInt(option.montant_reglement - option.montant_total_utilise); }
                    }

                    _('#selidreglement_client_dispo').removeAttribute('disabled')

                    populateSelect('#selidreglement_client_dispo', {

                        data : data,
                        valueKey : 'idreglement_client',
                        textKey : 'numero_reglement',
                        additionalAttributes : additionalAttributes
                    })     
                    
                    _('#inpmontant_total_utilise').value = 0
                }
            })

        listeFactureClientNonSolde(idclient)
            .then((response) => {

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

                    let firstnumero_facture = 'SELECTIONNER UNE FACTURE'

                    if (data.length == 0) {

                        firstnumero_facture = 'AUCUNE FACTURE DISPO'
                    }

                    data.unshift({
                        idfacture_client : 0,
                        numero_facture : firstnumero_facture,
                        montant_facture : 0,
                        montant_total_regle : 0
                    })

                    let additionalAttributes = {
                        'data-solde': function(option) { return parseInt(option.montant_facture - option.montant_total_regle); }
                    }

                    _('#selidfacture_client').removeAttribute('disabled')

                    populateSelect('#selidfacture_client', {

                        data : data,
                        valueKey : 'idfacture_client',
                        textKey : 'numero_facture',
                        additionalAttributes : additionalAttributes
                    })

                    _('#inpmontant_solde').value = 0
                }
            })
    })

    // Script de sélection d'un rêglement
    $('#selidreglement_client_dispo').on('select2:select', function (e) {

        let value = $(this).val()

        var selectedOption = $(this).find(':selected'); // Récupérer l'option sélectionnée
        var solde = selectedOption.data('solde'); 

        _('#inpmontant_total_utilise').value = formatNumber(solde)
        $('#selidfacture_client').val(0).trigger('change')

        if (value == 0) {
            
            _('#selidfacture_client').setAttribute('disabled', '')
            return 0
        }

        _('#selidfacture_client').removeAttribute('disabled')
    })

    // Script de sélection d'une facture
    $('#selidfacture_client').on('select2:select', function (e) {

        let value = $(this).val()

        var selectedOption = $(this).find(':selected'); // Récupérer l'option sélectionnée
        var solde = selectedOption.data('solde'); 

        _('#inpmontant_solde').value = formatNumber(solde)
    })

    // Script d'utilisation du rêglement
    _('#btnNewUtilisationReglementClient').addEventListener('click', function(){

        if (_('#inpmontant_reglement_utilise').value.replace(/\s/g,'') == '') {
            
            notifDanger('Veuillez saisir un montant à régler valide')
            return 0
        }

        if (parseInt(_('#inpmontant_reglement_utilise').value.replace(/\s/g,'')) > parseInt(_('#inpmontant_total_utilise').value.replace(/\s/g,''))) {
            
            notifDanger('Le montantant à régler ne peut être supérieur au Solde du reglement')
            return 0
        }

        if (parseInt(_('#inpmontant_reglement_utilise').value.replace(/\s/g,'')) > parseInt(_('#inpmontant_solde').value.replace(/\s/g,''))) {
            
            notifDanger('Le montantant à régler ne peut être supérieur au solde de la facture')
            return 0
        }

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

                if (response.success == 1) {
                    
                    notifSuccess('Opération éffectuée avec succès.')
                    $('#selidclient').val(0).trigger('change')
                    chargertableListingReglementUtilise()
                    _('#formReglementClientUtilise').reset()
                }
            })
    })
</script>

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

    function supprimerReglementUtilise(idreglement_client_utilise){

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

            $.ajax({

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

                    idreglement_client_utilise : idreglement_client_utilise
                },
                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()
                }
            })
        })
    }

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

        let idreglement_client_utilise = $(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) {

                supprimerReglementUtilise(idreglement_client_utilise)
                    .then((response) => {

                        if(response.success == 1){
                                                
                            notifSuccess('Suppression éffectuée.')
                            chargertableListingReglementUtilise()
                        }
                    })
            }
        })
    })
</script>
@endsection