@extends('../partials.model')

@section('content')
<div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center my-4 justify-content-between page-header-breadcrumb">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">
                Gestion des règlements
            </h1>
            <p class="text-slate-600 mtw-1">
                Gérer tous vos règlements
            </p>
        </div>
        <div class="ms-md-1 ms-0">
            <nav>
                <button class="btn btn-primary"  data-bs-toggle="modal" data-bs-target="#reglementModal">
                    <i class="bi bi-plus-circle btn-icon-size"></i>
                    Nouveau règlement
                </button>
            </nav>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="card card-border">
        <div class="card-body">

            <div class="card card-border">
                <div class="card-body">
                        <div class="row mb-2 w-100">

                    <div class="col-xl-3">
                        <div class="lib">Periode :</div>
                        <input type="text" class="form-control" name="daterange" id="periode_tri" />
                    </div>

                    <div class="col-xl-3">
                        <div class="lib">Clients :</div>
                            <select class="form-select" id="client_tri" name="client_tri">

                            </select>
                    </div>

                    <div class="col-xl-2">
                        <div class="lib">Mode de paiment :</div>
                        <select class="form-select" id="mode_paiement_tri" name="mode_paiement_tri">

                        </select>
                    </div>

                    <div class="col-xl-2">
                        <button class="btn btn-primary mt-4 btn-filter" id="btn-filtre">
                        <i class="bi bi-search"></i>
                        </button>
                    </div>

                    <div class="col-xl-2">
                        <div class="text-end mt-4">
                            <p class="badge bg-success text-end fw-bold fs-15" id="totalReglement"></p>
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover" id="reglementTable">
                    <thead >
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>N° reglement</th>
                            <th>Référence</th>
                            <th>Mode paiement</th>
                            <th>Montant</th>
                            <th>Total payé</th>
                            <th>Solde</th>
                            <th>Client</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--End::row-1 -->

        <!-- Modal -->
        <div class="modal fade" id="reglementModal" tabindex="-1" aria-labelledby="reglementModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="reglementModalLabel">Nouveau règlement</h1>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="reglement_form">
                        @csrf
                        <input type="hidden" id="id_hidden" name="id_hidden_reglement" value="0"/>
                        <div class="row">

                            <div class="col-xl-12 mb-1">
                                <div class="lib">Client* :</div>
                                <select class="form-select" name="client" id="client"></select>
                            </div>

                             <div class="col-xl-12 mb-1">
                                <div class="lib">Mode paiement* :</div>
                                <select class="form-select" name="mode_paiement" id="mode_paiement"></select>
                            </div>

                             <div class="col-xl-12  mb-1">
                                <div class="lib">Date* :</div>
                                <input type="date" class="form-control" name="date_reglement" id="date_reglement" />
                            </div>

                            <div class="col-xl-12  mb-1">
                                <div class="lib">Montant* :</div>
                                <input type="number" class="form-control" name="montant_reglement" id="montant_reglement" placeholder="Montant du reglement" />
                            </div>

                            <div class="col-xl-12">
                                <div class="lib">Référence :</div>
                                <input type="text" class="form-control" name="ref_reglement" id="ref_reglement" placeholder="Référence du reglement" />
                            </div>

                            <div class="col-xl-12">
                                <div class="lib">Description* :</div>
                               <textarea name="description" class="form-control" id="description_reglement" cols="10" rows="5"></textarea>
                            </div>
                        </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary" id="save_reglement">Enregistrer</button>
            </div>
            </div>
        </div>
        </div>
</div>


@endsection

@section('script')

<script>


    $(document).ready(function(){

        var showmodal_client = 0;

        position_element('reglementTable',`
                 <div style="z-index:99">
                    <div style="margin-left:20px;cursor:pointer;padding-top:7px" id="totalReglement_" > </div>
                </div>

                <div style="z-index:99">
                    <div style="margin-left:20px;cursor:pointer;padding-top:7px" id="totalPaye" > </div>
                </div>

                 <div style="z-index:99">
                    <div style="margin-left:20px;cursor:pointer;padding-top:7px" id="totalSolde"></div>
                </div>
        `)
         recuperation_reglement()
         remplirSelect2('{{ route("client.get") }}', null, '#client', 'id_client', 'nom_client', '#reglementModal', 'SELECTIONNEZ UN CLIENT')
         remplirSelect2('{{ route("mode_paiement.get") }}', null, '#mode_paiement', 'id_mode_paiement', 'libelle_mode_paiement', '#reglementModal', 'SELECTIONNEZ UN MODE')

         remplirSelect2('{{ route("mode_paiement.get") }}', null, '#mode_paiement_tri', 'id_mode_paiement', 'libelle_mode_paiement', null, 'TOUS')
         remplirSelect2('{{ route("client.get") }}', null, '#client_tri', 'id_client', 'nom_client', null, 'TOUS')
        $('#save_reglement').on('click',function(){
            $('#reglement_form').submit();
        })

        $('#reglement_form').on('submit', function (e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                type: "POST",
                url: "{{ route('reglement.store') }}",
                data: formData,
                dataType: "JSON",
                contentType: false,
                processData: false,
                beforeSend: function () {

                    if ($('#client').val() == 0) {
                        return notify_error('Veuillez choisir un client svp !');
                    }

                    if ($('#date_reglement').val().length === 0) {
                        return notify_error('Veuillez choisir une date svp !');
                    }

                    if ($('#montant_reglement').val().length === 0) {
                        notify_error('Ce champ est obligatoire');
                        return $('#montant_reglement').focus();
                    }
                },
                success: function (resp) {
                    $('#reglementModal').modal('hide');
                    notif('success', 'Succès', resp.msg);
                    $('#id_hidden').val(0);
                    recuperation_reglement();
                    $('#reglement_form')[0].reset();
                },
               error: handleAjaxError
            });
        });

        // ::::::::::::::: MODIFICATION DE REGLEMENT :::::::::::::::::::::::
        $(document).on('click','#modification_ligne',function(){
            var id = $(this).data('id')

            useAjaxPromise('GET',"{{ route('reglement.get') }}",{id :id })
             .then(resp => {
                $('#client').val(resp.data[0].id_client).trigger('change')
                $('#mode_paiement').val(resp.data[0].id_mode_paiement).trigger('change')
                $('#date_reglement').val(resp.data[0].date_reglement)
                $('#ref_reglement').val(resp.data[0].reference_client)
                $('#montant_reglement').val(resp.data[0].montant_reglement)
                $('#description_reglement').val(resp.data[0].description)
                $('#id_hidden').val(resp.data[0].id_client)
                $('#reglementModal').modal('show')
            })
            .catch(xhr => {
                   handleAjaxError(xhr);
             });
        })

         // ::::::::::::::: SUPPRESION DE REGLEMENT :::::::::::::::::::::::
        $(document).on('click','#suppression_ligne',function(){
            var id = $(this).data('id')
             sweet_alert(callback = function() {
                useAjaxPromise('DELETE',"{{ route('reglement.delete') }}",{id :id,_token:'{{ csrf_token() }}' })
                .then(resp => {
                    notif('success', 'Succès', resp.msg);
                    recuperation_reglement()
                })
                .catch(xhr => {
                   handleAjaxError(xhr);
                });
            })
        })

        $('#btn-filtre').on('click',function(){
           var date = dissocier_date($('#periode_tri').val())
           var debut = date[0]
           var fin = date[1]
            recuperation_reglement(null,debut,fin,$('#client_tri').val(),$('#mode_paiement_tri').val())
        })

        
        $(document).on('click','#voir_doc_associe',function(){
           
            var id = $(this).data('id')
            $('#check_btn_addocument').val(id)
            useAjaxPromise('GET',"{{ route('document.get') }}",{id:id })
             .then(resp => {

                if(resp.data.length == 0){
                   refreshDocumentTable(null,null,'documentLotTable');
                    $('#DocumentModal').modal('show');
                    return;
                }
                // $('#check_btn_addocument').val(resp.data[0].id_doc_concerne)
                $('#doc_type').val(resp.data[0].type_document);

                refreshDocumentTable(resp.data,true);
                $('#DocumentModal').modal('show');
            })
            .catch(err => {
                console.error("Erreur :", err);
            });
        });

        $(document).on('click','#impression_recu',function(){
            var id = $(this).data('id')
           generation_pdf_sans_telechargement_base64("{{ route('reglement.recu') }}",{id:id})
        })

    })

    function select($val, $id) {
            var $tab = [{
                    'val': 1,
                    'libelle': 'ACTIF'
                },
                {
                    'val':2,
                    'libelle': 'SUSPENDU'
                }
            ];

            var output = ''
            $.each($tab, function(key, value) {
                output +=
                    `<option value="${value.val}" ${$val==value.val ? 'selected': ''}>${value.libelle}</option>`;
            })
            return '<select data-id="' + $id + '" id="statut-client" class="form-select">' + output + '</select>';
        }

    function recuperation_reglement($id,$date_deb=null,$date_fin=null,$client=null,$modepaiement=null){

        $.ajax({
            type: "GET",
            url: "{{ route('reglement.get') }}",
            data: {id:$id,
                date_deb:$date_deb,
                date_fin:$date_fin,
                client:$client,
                modepaiement:$modepaiement
            },
            dataType: "json",
            beforeSend:fetchLoader("Chargement des données..."),
            success: function (resp) {
                var table = $('#reglementTable').DataTable();
                table.clear();
                var totalR = 0;
                var totalR_ = 0;
                var totalpaye = 0;
                var totalsolde = 0;
                $.each(resp.data,function(key,value){
                    totalR +=value.montant_reglement;
                    totalR_ +=value.montant_reglement;
                    totalpaye += parseInt(value.montant_regle);
                    totalsolde += (parseInt(value.montant_reglement) - parseInt(value.montant_regle))
                    table.row.add([
                     
                        `<div class="d-flex">
                            ${renderActions(value.id_reglement_client,null,'modification_ligne','suppression_ligne',null,'voir_doc_associe')}
                            <div>
                                 <button title="Imprimer un reçu" class="btn btn-icon btn-outline-warning rounded-pill btn-wave btn-action me-2"
                                        data-id="${value.id_reglement_client}"
                                    id="impression_recu">
                                    <i class="bi bi-printer icon-action"></i>
                                </button>
                            </div>
                        </div>`,
                        formatDate(value.date_reglement),
                        value.numero_reglement,
                        value.reference_client,
                        value.libelle_mode_paiement,
                        formatNumber(value.montant_reglement),
                        formatNumber(value.montant_regle),
                        formatNumber(parseInt(value.montant_reglement) - parseInt(value.montant_regle)),
                        value.nom_client+' '+value.prenom_client,
                        value.description
                    ])
                })
                table.draw();

                $('#totalReglement').text('TOTAL : '+formatNumber(totalR))
                $('#totalReglement_').html('Total : <span style="font-size:15px;font-weight:bold" class="text-warning">' +formatNumber(totalR)+'</span>')
                $('#totalPaye').html('Total payé : <span style="font-size:15px;font-weight:bold" class="text-success">' +formatNumber(parseInt(totalpaye))+'</span>')
                $('#totalSolde').html('Total solde : <span style="font-size:15px;font-weight:bold" class="text-danger">' +formatNumber(parseInt(totalsolde))+'</span>')

                 removeLoader()
            },
           error: handleAjaxError
        });
    }

    function recuperation_document($id){

        $.ajax({
            type: "GET",
            url: "{{ route('document.get') }}",
            data: {id:$id},
            dataType: "json",
            success: function (resp) {
                refreshDocumentTable(resp.data,true);
            },
            error: handleAjaxError
        });
    }
</script>
@endsection