@extends('model')

@section('content')
    <!-- Start::page-header -->
    <div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2">
        <div>
            <nav>
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0);">
                            Transaction
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Operation Cantine Pay</li>
                </ol>
            </nav>
            <!-- <h1 class="page-title fw-medium fs-18 mb-0">Liste des utilisateurs</h1> -->
        </div>
        <div class="d-flex  gap-2 flex-wrap">
            <div class="card me-2 py-0" style="height: 40px;">
                <div class="card-body d-flex justify-content-between pt-2">
                    <p class="text-muted mt-1">Total montant :&nbsp;&nbsp;</p>
                    <label id="libTotalMontantTransaction" class="text-primary mt-1" style="font-weight: 700;">0</label>
                </div>
            </div>
            <button class="btn btn-primary" id="btnActualiserLesSoldesDeTousLesClients" style="height: 40px;">
                <i class="bx bx-calculator"></i> Actualiser les soldes
            </button>

            <button class="btn btn-primary btn-wave me-0" id="callModal" style="height: 40px;" data-bs-toggle="modal"
                data-bs-target="#modalOprationCatinePay">
                <i class="bx bx-plus-circle me-1"></i> Nouvelle opération
            </button>
        </div>
    </div>
    <!-- End::page-header -->

    <!-- <div class="row">
                <div class="col-md-3">
                    <div class="card me-2 py-0" style="height: 40px;">
                        <div class="card-body d-flex justify-content-between pt-2">
                            <p class="text-muted mt-1">Total bouche :&nbsp;&nbsp;</p>
                            <label id="libTotalTousLesSoldeBouche" class="text-primary mt-1" style="font-weight: 700;">0</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card me-2 py-0" style="height: 40px;">
                        <div class="card-body d-flex justify-content-between pt-2">
                            <p class="text-muted mt-1">Total bouche (monetaire) :&nbsp;&nbsp;</p>
                            <label id="libTotalTousLesSoldeBoucheMonetaire" class="text-primary mt-1" style="font-weight: 700;">0</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card me-2 py-0" style="height: 40px;">
                        <div class="card-body d-flex justify-content-between pt-2">
                            <p class="text-muted mt-1">Total cantine pay :&nbsp;&nbsp;</p>
                            <label id="libTotalTousLesSoldeCantinePay" class="text-primary mt-1" style="font-weight: 700;">0</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card me-2 py-0" style="height: 40px;">
                        <div class="card-body d-flex justify-content-between pt-2">
                            <p class="text-muted mt-1">Total des soldes :&nbsp;&nbsp;</p>
                            <label id="libTotalTousLesSolde" class="text-primary mt-1" style="font-weight: 700;">0</label>
                        </div>
                    </div>
                </div>
            </div> -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body p-3">
                    <div class="row">
                        <div class="col-xl-3 col-lg-5 col-md-5">
                            <p class="text-muted mb-0">Période</p>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-text bg-white border"> <i class="ri-calendar-line"></i> </div>
                                    <input type="text" class="form-control breadcrumb-input flatpickr-input text-center"
                                        id="filtrePeriode" placeholder="Rechercher par plage de dates">
                                </div>
                                <!-- filtrePeriode -->
                            </div>
                        </div>
                        <div class="col-xl-3">
                            <p class="text-muted mb-0">Utilisateur</p>
                            <select class="form-select" name="idusers" id="selidusers">
                            </select>
                        </div>
                        <div class="col-md-2">
                            <p class="text-muted mb-0">Type de transaction</p>
                            <select class="form-select" name="type_transaction" id="seltype_transaction">
                                <option value="0">TOUS</option>
                                <option value="1">CRÉDIT</option>
                                <option value="2">DÉBIT</option>
                            </select>
                        </div>
                        <div class="col-md-1 pt-3">
                            <button class="btn btn-primary mt-1" id="btnFiltreTable">
                                <i class="bx bx-search-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::row-1 -->

    <!-- Start::row-2 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card overflow-hidden">
                <div class="card-body p-2 px-3">
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap w-100" id="tableListeToutesLesOperations">
                            <thead>
                                <tr>
                                    <th data-column="idtransaction_cantine_pay" class="text-center">#</th>
                                    <th data-column="created_atFormat" data-class="text-center" class="text-center">Date &
                                        Heure</th>
                                    <th data-column="operateur" data-class="text-start" class="text-center">Utilisateur
                                    </th>
                                    <th data-column="raisonSocial" data-class="text-start" class="text-center">Société
                                    </th>
                                    <th data-column="type_transactionLabel" data-class="text-start" class="text-center">
                                        Type</th>
                                    <th data-column="montant_transactionFormat" data-class="text-end pe-2"
                                        class="text-center">Montant</th>
                                    <th data-column="numeroCommande" data-class="text-cenetr"class="text-center">N° Cde
                                    </th>
                                    <th data-column="commentaire" data-class="text-start"class="text-center">Commentaire
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-2 -->

    <!-- Modal -->
    <div class="modal fade" id="modalOprationCatinePay" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Nouvelle opération</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form id="form-add-operation" class="needs-validation p-0" method="POST" novalidate>

                        @csrf
                        <div class="mb-2">
                            <label>Client</label>
                            <select class="form-control" name="utilisateur" id="userSelect2" required></select>
                            <div class="invalid-feedback">
                                Champ obligatoire
                            </div>
                        </div>

                        {{-- <div class="mb-2">
                            <label>Société</label>
                            <select class="form-control" name="societe" id="SocieteSelect2" required></select>
                            <div class="invalid-feedback">
                                Champ obligatoire
                            </div>
                        </div> --}}

                        <div class="mb-2">
                            <label>Type</label>
                            <select class="form-control" name="typeOperation" id="typeOperationSelect2" required>
                                <option value="">TOUS</option>
                                <option value="1">CRÉDIT</option>
                                <option value="2">DÉBIT</option>
                            </select>
                            <div class="invalid-feedback">
                                Champ obligatoire
                            </div>
                        </div>
                        <div>
                            <label>Montant</label>
                            <input class="form-control" name="montant" id="montant" required />
                            <div class="invalid-feedback">
                                Champ obligatoire
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" id="submitForm" class="btn btn-primary">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <!-- Script excécuté au chargement de la page -->
    <script>
        var tableListeToutesLesOperations

        function recupererListeDesOperations(data = {}) {

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

                $.ajax({

                    url: "{{ route('recupererListeDesOperationsCantinePay') }}",
                    type: 'GET',
                    data: data,
                    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()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

        function chargerTableListeDesToutesLesOperations(data = {}) {

            return new Promise((resolve) => {

                recupererListeDesOperations(data)
                    .then((response) => {

                        if (response.success == 1) {

                            let data = response.data

                            tableListeToutesLesOperations = remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeToutesLesOperations',
                                obj: data,
                                lengthChange: false,
                                pageLength: 25
                            })


                            _('#libTotalMontantTransaction').innerHTML = formatNumber(calculerSommeColonne(
                                tableListeToutesLesOperations, 'montant_transaction'))
                        }
                    })

                resolve()
            })
        }

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

                if (response.success == 1) {

                    let data = response.data

                    data.unshift({
                        idusers: 0,
                        nom_prenoms: 'TOUS LES UTILISATEURS'
                    })

                    populateSelect('#selidusers', {

                        data: data,
                        valueKey: 'idusers',
                        textKey: 'nom_prenoms'
                    })

                    $('#selidusers').select2()
                }
            })

        periodeChargement = convertirFormatDate(_('#filtrePeriode').value)

        dataChargement = {
            dateDebut: periodeChargement[0],
            dateFin: periodeChargement[periodeChargement.length > 1 ? 1 : 0],
            type_transaction: 0,
            idusers: 0
        }

        chargerTableListeDesToutesLesOperations(dataChargement)
    </script>

    <!-- Script charger tableau -->
    <script>
        _('#btnFiltreTable').addEventListener('click', function() {

            let elmt = this;

            // Ajouter un loader pour indiquer le traitement
            loaderIcon(elmt, 'bx bx-search-alt');

            let periode = convertirFormatDate(_('#filtrePeriode').value)

            let data = {
                dateDebut: periode[0],
                dateFin: periode[periode.length > 1 ? 1 : 0],
                type_transaction: _('#seltype_transaction').value,
                idusers: _('#selidusers').value
            }

            chargerTableListeDesToutesLesOperations(data)

            loaderIcon(elmt, 'bx bx-search-alt');
        });
    </script>

    <!-- Script actualiser solde cantine pay de tous les clients -->
    <script>
        function actualisationDeSoldeDeTousLesClients() {

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

                $.ajax({

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

                        if (response.success != 2) {

                            notifDanger(response.msg || 'Échec de l\'opération.')
                            resolve(response)
                        }

                        resolve(response)

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

                        reject()
                        notifDanger('Échec de l\'opération.')
                        // completeHandler()
                    }
                })
            })
        }

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

            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-danger ms-2',
                    cancelButton: 'btn btn-dark'
                },
                buttonsStyling: false
            })

            swalWithBootstrapButtons.fire({
                title: 'Êtes-vous sûres ?',
                text: "De vouloirs éffectuer cette opération !",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Je confirme !',
                cancelButtonText: 'Non !',
                reverseButtons: true
            }).then((result) => {

                if (result.isConfirmed) {

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

                            if (response.success == 1) {

                                _('#btnFiltreTable').click()

                                notifSuccess('Opération éffectuée avec succès.')
                            } else if (response.success == 2) {

                                SwitAlert('error', response.msg, 'center')
                            }
                        })
                }
            })
        })
    </script>

    <script>
        $(document).ready(function() {
             var touched = false;
            $('#typeOperationSelect2').select2({
                dropdownParent: $('#modalOprationCatinePay') // Correction ici
            });

            remplirSelect2("{{ route('listeDeTousLesUtilisateursClientSimple') }}", null, "#userSelect2", "idusers",
                "nom_prenoms", "#modalOprationCatinePay");

            remplirSelect2("{{ route('listingSoctiete') }}", null, "#SocieteSelect2", "idsociete",
                "raisonSocial", "#modalOprationCatinePay");

            $('#submitForm').on('click', function() {
                $('#form-add-operation').submit();
            })

            function validateSelect2(selectId) {
                const selectElement = $(selectId)[0];
                const isValid = selectElement.checkValidity();

                const $select2Container = $(selectId).next('.select2-container').find('.select2-selection');

                if (!isValid) {
                    $(selectId).addClass('is-invalid');
                    $select2Container.addClass('is-invalid');
                } else {
                    $(selectId).removeClass('is-invalid').addClass('is-valid');
                    $select2Container.removeClass('is-invalid').addClass('is-valid');
                }

                return isValid;
            }

         function validateSelect2OnChange(selectId) {
            const $select = $(selectId);

            $select.on('change', function () {
                if(touched ==true){

                    const isValid = $select[0].checkValidity();
                    const $selection = $select.next('.select2-container').find('.select2-selection');

                    // Réinitialiser les classes
                    $selection.removeClass('is-valid is-invalid');

                    if (isValid) {
                        $selection.addClass('is-valid');
                        // Supprimer le message d’erreur si présent
                        $select.nextAll('.invalid-feedback').remove();
                    } else {
                        $selection.addClass('is-invalid');
                    }
                }
            });
        }

            // Appelle cette fonction pour chaque select2
            validateSelect2OnChange('#userSelect2');
            validateSelect2OnChange('#typeOperationSelect2');




            $('#form-add-operation').on('submit', function(e) {
                const form = this;

                const isUserValid = validateSelect2('#userSelect2');
                {{-- const isSocieteValid = validateSelect2('#SocieteSelect2'); --}}
                const isTypeOperationValid = validateSelect2('#typeOperationSelect2');

                // Vérifie la validité globale du formulaire (HTML5) + les select2
                if (!form.checkValidity() || !isUserValid || !isTypeOperationValid) {
                    $(form).addClass('was-validated');
                    e.preventDefault();
                    e.stopPropagation();
                    touched = true;
                    return;
                }

                // Empêche le submit par défaut pour faire l’AJAX
                e.preventDefault();

                $.ajax({
                    type: "POST",
                    url: "{{ route('operation_catine_pay.add') }}",
                    data: new FormData(form),
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    success: function(resp) {
                        notifSuccess(resp.msg)
                        $("#modalOprationCatinePay").modal('hide')
                        _('#btnFiltreTable').click()
                    },
                    error: function(xhr) {
                        {{-- notifDanger(xhr.) --}}
                    }
                });
            });


        })
    </script>
@endsection