@extends('model')

@section('content')
    <div class="row">
        <div class="col-xxl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex" style="background-color: #066B5E; color: #fcfffe;">
                    <h4 class="card-title mb-0 flex-grow-1" style="background-color: #066B5E; color: #fcfffe;">Créer un type
                        tiers </h4>
                </div><!-- end card header -->

                <div class="card-body" style="margin-left: 21%; margin-right:10%;">

                    <div class="row align-items-end">
                        <div class="col-md-4 mb-3">
                            <label for="codetypetiers" class="form-label">Code </label>
                            <input type="text" class="form-control" id="codetypetiers" value="" disabled>

                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="libelletypetiers" class="form-label">Libellé</label>
                            <input type="text" class="form-control" id="libelletypetiers"
                                placeholder="entrez votre libellé">
                        </div>

                        <div class="col-md-4 mb-3">
                            <button type="button" class="btn waves-effect waves-light" id="valider"
                                style="background-color:#066B5E; border-color:#066B5E; color: white;">
                                Enregistrer
                            </button>

                            <button type="button" class="btn waves-effect waves-light" id="modifier"
                                style="background-color: #066B5E; border-color: #066B5E; color: white; display: none;">
                                Modifier
                            </button>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="col-md-4 mb-3">
            <button type="button" class="btn waves-effect waves-light" id="valider"
                style="background-color: #333547; border-color: #333547; color: white; display: none;">
                Modifier
            </button>
        </div>

    </div>

    <!-- 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 type tiers ?
                </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 class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header" style="background-color: #066B5E; color: #fcfffe;">
                    <div class="card-title" style="background-color: #066B5E; color: #fcfffe;">
                        <h5 style="background-color: #066B5E; color: #fcfffe;"> Listes des types tiers
                        </h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableauListeTypeTiers" class="table table-bordered text-nowrap w-100">
                            <thead style="background-color: #49f268; color: #fcfffe;">
                                <tr>
                                    <th class="text-center">Code</th>
                                    <th class="text-center">Libéllé</th>
                                    <th class="text-center">Actions</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {

            var tableauListeTypeTiers = $("#tableauListeTypeTiers").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 typer tiers 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 types tiers
            function listeTypeTiers() {
                $.ajax({
                    url: "{{ route('listeTypeTiers') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        tableauListeTypeTiers.clear().draw();
                        $.each(response, function(key, value) {
                            tableauListeTypeTiers.row.add([
                                value.codetypetiers, // Code ajouté ici
                                value.libelletypetiers,
                                `<div class="d-flex justify-content-center align-items-center">
                            <button type="button" class="btn btn-danger btn-sm mx-2 action-supprimer" data-id="${value.idtypetiers}" id="btnSupprimer">
                                <i class="las la-trash"></i>
                            </button>
                            <button type="button" class="btn btn-warning btn-sm mx-2 action-modifier" data-id="${value.idtypetiers}" id="btnModifier">
                                <i class="las la-pen"></i>
                            </button>
                        </div>`
                            ]).draw();
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
            }


            // Fonction pour ajouter un type tiers
            $("#valider").click(function() {
                $.ajax({
                    url: "{{ route('insertionTypeTiers') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        libelletypetiers: $("#libelletypetiers").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Type Tiers ajouté avec succès");
                            $("#libelletypetiers").val('');
                            listeTypeTiers();
                        } else {
                            notifError('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError('Une erreur est survenue.');
                    }
                });
            });

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

            // Fonction pour supprimer un type tiers
            $(document).on('click', '.action-supprimer', function() {
                var typeTiersId = $(this).data('id');
                $('#confirmDeleteModal').data('typeTiersId', typeTiersId).modal('show');
            });

            $("#btn-close-modal").click(function() {
                $('#confirmDeleteModal').modal('hide');
            });

            $('#confirmDeleteBtn').click(function() {
                var typeTiersId = $('#confirmDeleteModal').data('typeTiersId');
                $.ajax({
                    url: "{{ route('supprimerTypeTiers') }}",
                    type: 'DELETE',
                    data: {
                        idtypetiers: typeTiersId,
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            listeTypeTiers();
                            notifSuccess("Type tiers supprimé avec succès");
                            $('#confirmDeleteModal').modal('hide');
                        } else {
                           notifError('Une erreur est survenue.'+ response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError('Une erreur est survenue.');
                    }
                });
            });

            // Fonction pour modifier un type tiers
            $(document).on('click', '.action-modifier', function() {
                var idTypeTiers = $(this).data('id');
                $.ajax({
                    url: "{{ route('listeTypeTiers') }}",
                    type: 'GET',
                    data: {
                        idtypetiers: idTypeTiers
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.length > 0) {
                            $("#libelletypetiers").val(response[0].libelletypetiers);
                            $("#valider").hide();
                            $("#modifier").show().data('id', idTypeTiers);
                        } else {
                            notifError('Erreur: Type Tiers non trouvé');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError('Une erreur est survenue.');
                    }
                });
            });

            $("#modifier").click(function() {
                var idTypeTiers = $(this).data('id');
                $.ajax({
                    url: "{{ route('modifierTypeTiers') }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        idtypetiers: idTypeTiers,
                        libelletypetiers: $("#libelletypetiers").val(),
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (!response.error) {
                            notifSuccess("Type Tiers modifié avec succès");
                            $("#libelletypetiers").val('');
                            $("#valider").show();
                            $("#modifier").hide();
                            listeTypeTiers();
                        } else {
                            notifError('Erreur: ' + response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                        notifError('Une erreur est survenue.');
                    }
                });
            });



        });
    </script>
@endsection