@extends('model')

@section('content')
    <style>
        .form-label {
            color: #333;
            margin-bottom: 5px;
        }


        .form-control,
        .form-select {
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #6f3b23;
            box-shadow: 0 0 5px rgba(105, 59, 26, 0.5);
        }

        .modal-footer {
            justify-content: space-between;
        }

        .form-label i {
            margin-right: 5px;
            color: #6f3b23;
        }
    </style>


    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header" style="background-color: #f4fef5; color: #000000;">
                <h5 class="card-title" style="background-color: #f4fef5; color: #000000;">Listes des Capitaux</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="tableauListeCapitaux" class="table table-bordered text-nowrap w-100">
                        <div class="d-flex align-items-center mb-3">
                            <div class="me-3">
                                <label for="libellecapitaux" class="form-label">
                                    <i class="fas fa-tag"></i> Libellé
                                </label>
                                <input type="text" class="form-control" id="libellecapitaux"
                                    placeholder="Entrez votre libellé">
                            </div>
                            <div class="me-3">
                                <label for="montantcapitaux" class="form-label">
                                    <i class="fas fa-dollar-sign"></i> Capitaux
                                </label>
                                <input type="text" class="form-control" id="montantcapitaux"
                                    placeholder="Entrez le montant ici">
                            </div>
                            <div class="me-3">
                                <label for="tauxcapitaux" class="form-label">
                                    <i class="fas fa-percentage"></i> Taux
                                </label>
                                <input type="text" class="form-control" id="tauxcapitaux"
                                    placeholder="Entrez le taux ici">
                            </div>
                            <div class="me-3">
                                <label for="primescapitaux" class="form-label">
                                    <i class="fas fa-cogs"></i> Primes
                                </label>
                                <input type="text" class="form-control" id="primescapitaux"
                                    placeholder="Entrez le primes ici">
                            </div>
                            <div>
                                <button type="button" class="btn waves-effect waves-light mt-4" id="valider"
                                    style="background-color:#6f3b23; border-color:#6f3b23; color: white;">
                                    Enregistrer
                                </button>
                                <button type="button" class="btn waves-effect waves-light ms-2 mt-4" id="modifier"
                                    style="background-color:#6f3b23; border-color:#6f3b23; color: white; display: none;">
                                    Modifier
                                </button>
                            </div>
                        </div>
                        <thead style="background-color: #49f268; color: #fcfffe;">
                            <tr>
                                <th class="text-center">Actions</th>
                                <th class="text-center">Libéllé</th>
                                <th class="text-center">Capitaux</th>
                                <th class="text-center">Taux</th>
                                <th class="text-center">Primes</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>




    <div class="card">
        <!-- Modal confirmation suppression -->
        <div class="modal" id="confirmDeleteModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirmation de suppression</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Êtes-vous sûr de vouloir supprimer ce compte ?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" id="btn-close-modal"
                            data-bs-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteBtn"><i class="las la-trash"></i>
                            Supprimer</button>
                    </div>
                </div>
            </div>
        </div>

    </div>


    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var tableauListeCapitaux = $("#tableauListeCapitaux").DataTable({
                language: {
                    //searching: true,
                    dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ &eacute;l&eacute;ments",
                    info: "Liste _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Liste 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de MAX &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucun capital enrégistré ",

                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                /*columnDefs: [{
                    targets: [0, 1, 3, 4, 5, 6, 10, 12, 13],
                    className: "text-center"
                }],*/

                pagingType: 'full_numbers',
                ordering: true,
                pageLength: 15,
                lengthChange: true,
                order: []
            })

            // Fonction pour lister les primes assurances
            function listeCapitaux() {
                $.ajax({
                    url: "{{ route('listeCapitaux') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeCapitaux.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeCapitaux.row.add([
                                `<div class="d-flex justify-content-center align-items-center">
                        <button type="button" class="btn btn-outline-danger btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1 action-supprimer" data-id="${value.idcapitaux}" id="btnSupprimer"><i class="las la-trash"></i></button>
                        <button type="button" class="btn btn-outline-warning btn-icon waves-effect waves-light material-shadow-none btn-sm mx-1 action-modifier" data-id="${value.idcapitaux}" id="btnModifier"><i class="las la-pen"></i></button>
                    </div>`,
                                value.libellecapitaux,
                                `<div class="d-flex justify-content-end align-items-center" style="height: 100%;">
                        <input type="text" class="form-control" id="montantcapitaux" value="${value.montantcapitaux}" style="width: 150px;" dataid="${value.idcapitaux}">
                    </div>`
                                `<div class="d-flex justify-content-end align-items-center" style="height: 100%;">
                        <input type="text" class="form-control" id="tauxcapitaux" value="${value.tauxcapitaux}" style="width: 150px;" dataid="${value.idcapitaux}">
                    </div>`
                                `<div class="d-flex justify-content-end align-items-center" style="height: 100%;">
                        <input type="text" class="form-control" id="primescapitaux" value="${value.primescapitaux}" style="width: 150px;" dataid="${value.idcapitaux}">
                    </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }

            // Fonction sur le click du bouton valider pour ajouter un capital
            $("#valider").click(function() {
                $.ajax({
                    url: "{{ route('insertionCapitaux') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libellecapitaux: $("#libellecapitaux").val(),
                        montantcapitaux: $("#montantcapitaux").val(),
                        tauxcapitaux: $("#tauxcapitaux").val(),
                        primescapitaux: $("#primescapitaux").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Prime ajouté avec succès")
                            $("#libellecapitaux").val('');
                            $("#montantcapitaux").val('');
                            $("#tauxcapitaux").val('');
                            $("#primescapitaux").val('');
                            listeCapitaux();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });

            // Appel initial pour charger les données
            listeCapitaux();


            $(document).on('click', '.action-supprimer', function() {
                var capitauxId = $(this).data('id');
                $('#confirmDeleteModal').data('capitauxId', capitauxId).modal('show');
            });

            // //fermer le bouton croix de la modal 
            $("#close-btn").click(function() {
                $('#confirmDeleteModal').modal('hide');
            });


            // fonction pour fermer le bouton non
            $("#btn-close-modal").click(function() {
                $('#confirmDeleteModal').modal('hide');
            });


            $('#confirmDeleteBtn').click(function() {
                var capitauxId = $('#confirmDeleteModal').data('capitauxId');
                $.ajax({
                    url: "{{ route('supprimerCapitaux') }}",
                    type: 'DELETE',
                    data: {
                        idcapitaux: capitauxId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listeCapitaux();
                            notifSuccess("Capitaux supprimé avec succès");
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                            notif.Error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError('Capitaux n\'a pas été supprimer.');
                    }
                });
            });

            $("#modifier").click(function() {
                var idCapitaux = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierCapitaux') }}",
                    type: 'POST',
                    data: {
                        idcapitaux: idCapitaux,
                        libellecapitaux: $("#libellecapitaux").val(),
                        montantcapitaux: $("#montantcapitaux").val(),
                        tauxcapitaux: $("#tauxcapitaux").val(),
                        primescapitaux: $("#primescapitaux").val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Capitaux modifié avec succès");
                            $("#libellecapitaux").val('');
                            $("#montantcapitaux").val('');
                            $("#tauxcapitaux").val('');
                            $("#primescapitaux").val('');
                            listeIntermediares();
                            $("#valider").show();
                            $("#modifier").hide();
                        } else {
                            notyf.error('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notyf.error('Une erreur est survenue.');
                    }
                });
            });





        });

        $(document).on('change', '#montantcapitaux', function() {
            let idcapitaux = $(this).attr('dataid');
            let value = $(this).val();


            $.ajax({
                url: "{{ route('modifierMontantContractAssurance') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    idcapitaux: idcapitaux,
                    montantprimecontratassurance: value
                },
                dataType: 'json',
                success: function(response) {
                    if (!response.error) {
                        notifSuccess(
                            "Montant mis à jour avec succès");
                    } else {
                        notyf.error('Erreur: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr);
                    notyf.error(
                        'Une erreur est survenue.');
                }
            });
        });
    </script>
@endsection