@extends('model')

@section('content')
    <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);">
                            Configuration
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Valeur nutritionnelle</li>
                </ol>
            </nav>
        </div>

    </div>
    <!-- End::page-header -->

    <div class="row">

        <div class="col-md-6">

            <div class="card custom-card">
                <form id="form-add-valeur-nutritionnelle" class="needs-validation p-0" method="POST" novalidate>
                    <div class="d-flex justify-content-between p-2">
                        @csrf
                        <input type="hidden" value="0" name="id_hidden" id="idvn_hidden" />
                        <div class="w-100">
                            <label>Valeur nutritionnelle</label>
                            <input type="text" class="form-control" id="libelle_vnIput"
                                placeholder="valeur nutritionnelle" name="libelle_vn" required>
                            <div class="invalid-feedback">Champ obligatoire</div>
                        </div>
                        <button class="btn btn-icon btn-outline-danger rounded-pill btn-wave mx-2" type="submit"
                            style="margin-top:20px">
                            <i class="ri-add-line"></i>
                        </button>

                    </div>
                </form>
                <div class="card-body">

                    <table class="table table-hover text-nowrap w-100" id="tableVn">
                        <thead>
                            <tr>
                                <th data-column="" class="text-center">Actions</th>
                                <th data-column="" data-class="text-start" class="text-center">Valeur nutritionnelle</th>
                            </tr>
                        </thead>
                    </table>

                </div>
            </div>

        </div>

        <div class="col-md-6">

            <div class="card custom-card">
                <div class="card-header d-flex justify-content-end">

                    <button class="btn btn-icon btn-outline-danger rounded-pill btn-wave" data-bs-toggle="modal"
                        data-bs-target="#valeurNproduitModal">
                        <i class="ri-add-line"></i>
                    </button>
                </div>
                <div class="card-body">
                  <div class="table-responsive">

                    <table class="table table-hover w-100" id="tableVnProduit">
                        <thead>
                           <tr>
                                    <th  class="text-center">Actions</th>
                                    <th  class="text-center" style="min-width:200px">Valeur nutritionnelle</th>
                                    <th  class="text-center" style="min-width:200px">Produit</th>
                                    <th  class="text-center" style="min-width:200px">Valeur unitaire</th>
                                    <th  class="text-center" style="min-width:200px">Valeur portion</th>
                                    <th  class="text-center" style="min-width:200px">Unité mésure</th>
                                </tr>
                        </thead>
                    </table>

                  </div>
                </div>
            </div>

        </div>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="valeurNproduitModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg ">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Valeur nutritionnelle produit</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">



                    <div class="row">
                        <div class="col-md-3">
                            <label>Valeur nutritionnelle</label>
                            <select class="form-control" name="valeurN" id="ValeurNSelect2"></select>
                        </div>
                        <div class="col-md-5">
                            <label>Produit</label>
                            <select class="form-control" name="valeurN" id="produitSelect2"></select>
                        </div>

                         <div class="col-md-3">
                            <label>Unité de mesure</label>
                            <select class="form-control" name="valeurN" id="uniteValSelect2"></select>
                        </div>

                        <div class="col-md-1">
                            <button class="btn btn-icon btn-outline-danger rounded-pill btn-wave mt-4"
                                id="btn-ajouter-valeur-produit-tab-variable">
                                <i class="ri-add-line"></i>
                            </button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-hover text-nowrap w-100" id="tab-modal-valeurN-produit">
                            <thead>
                                <tr>
                                    <th data-class="text-start" class="text-center">Actions</th>
                                    <th data-class="text-start" class="text-center">Valeur nutritionnelle</th>
                                    <th data-class="text-start" class="text-center">Produit</th>
                                    <th data-class="text-start" class="text-center">Valeur unitaire</th>
                                    <th data-class="text-start" class="text-center">Valeur portion</th>
                                    <th data-class="text-start" class="text-center">Unité mésure</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" id="saveOndatabase" class="btn btn-primary">Enregistrer</button>
                </div>


            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            var tabElementValeurNProduit = [];
            $('#tableVn').DataTable({
                responsive: true,
                language: languageTable,
                "pageLength": 10,
            });
            $('#tableVnProduit').DataTable({
                responsive: true,
                language: languageTable,
                "pageLength": 10,
               
            });

            $('#tab-modal-valeurN-produit').DataTable({
                responsive: true,
                language: languageTable,
                "pageLength": 10,
            });
            recuperationValeurNutritionnelle()
            remplirSelect2("{{ route('valeurN.get') }}", null, "#ValeurNSelect2", "idvaleur_nutritionnelle",
                "libelle_vn", "#valeurNproduitModal");
            remplirSelect2("{{ route('listeProduitSimple') }}", null, "#produitSelect2", "idproduit",
                "libelleProduit", "#valeurNproduitModal");
            remplirSelect2("{{ route('listeUniteMesure') }}", null, "#uniteValSelect2", "id_unite_mesure_vn",
                "libelle_unite_mesure", "#valeurNproduitModal");

                
            $('#form-add-valeur-nutritionnelle').on('submit', function(e) {

                if (!$(this)[0].checkValidity()) {
                    $(this).addClass('was-validated');
                    e.preventDefault();
                    e.stopPropagation();
                } else {
                    e.preventDefault();

                    $.ajax({
                        type: "POST",
                        url: "{{ route('valeurN.add') }}",
                        data: new FormData(this),
                        dataType: "JSON",
                        contentType: false,
                        processData: false,
                        success: function(resp) {
                            recuperationValeurNutritionnelle()
                            notifSuccess(resp.msg)
                            $('#form-add-valeur-nutritionnelle').removeClass('was-validated');
                            $('#form-add-valeur-nutritionnelle')[0].reset();
                             remplirSelect2("{{ route('valeurN.get') }}", null, "#ValeurNSelect2", "idvaleur_nutritionnelle",
                               "libelle_vn", "#valeurNproduitModal");
                        },
                        error: function() {

                        }
                    });

                }
            })
            $(document).on('click', '#modifierValeurVn', function() {
                var id = $(this).data('id')
                recuperationValeurNutritionnelle(id)
            })
            $(document).on('click', '#supprimerValeurVn', function() {
                var id = $(this).data('id')

                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 retirer cette offre spéciale !",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Je confirme !',
                    cancelButtonText: 'Non !',
                    reverseButtons: true
                }).then((result) => {

                    if (result.isConfirmed) {

                        $.ajax({
                            type: "GET",
                            url: "{{ route('valeurN.delete') }}",
                            data: {
                                idvn: id
                            },
                            dataType: "JSON",
                            success: function(resp) {
                                notifSuccess(resp.msg)
                                recuperationValeurNutritionnelle()
                            }
                        });

                    }
                })
            })

            $(document).on('click', '#supprimerValeurVnP', function() {
                var id = $(this).data('id')

                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 retirer cette offre spéciale !",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Je confirme !',
                    cancelButtonText: 'Non !',
                    reverseButtons: true
                }).then((result) => {

                    if (result.isConfirmed) {

                        $.ajax({
                            type: "GET",
                            url: "{{ route('valeurNP.delete') }}",
                            data: {
                                idvnp: id
                            },
                            dataType: "JSON",
                            success: function(resp) {
                                notifSuccess(resp.msg)
                                recuperationValeurNutritionnelleProduit()
                            }
                        });

                    }
                })
            })

            var cpte = 0;
            $('#btn-ajouter-valeur-produit-tab-variable').on('click', function() {

                if ($('#ValeurNSelect2').val() == 0 || $('#produitSelect2').val() == 0) {
                    notifDanger('Veuillez choisir une valeur nutritionnelle et un produit')
                    return false
                }

               
                var uniteValSelect2 = $("#uniteValSelect2 option:selected").text()
                tabElementValeurNProduit.push({
                    action: `<div class="d-flex justify-content-center">
                            <button class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center me-2 delete-row">
                                <i class="bx bx-trash" style="font-size : 14px;"></i>
                            </button>
                        </div>`,
                    libelle_vn: $('#ValeurNSelect2 option:selected').text(),
                    libelle_produit: $('#produitSelect2 option:selected').text(),
                    idproduit : $('#produitSelect2 option:selected').val(),
                    idvaleurN : $('#ValeurNSelect2 option:selected').val(),
                    iduniteMesure : $('#uniteValSelect2 option:selected').val(),
                    v_unitaire: '', // Stocke uniquement les valeurs
                    v_portion: '',
                    u_mesure: `<div style="width:100%;padding:7px;border-radius:5px; border:1px solid #dee7f1;text-align:center">${uniteValSelect2}</div>`,
                });

                var tab = $('#tab-modal-valeurN-produit').DataTable();
                tab.clear().draw();

                $.each(tabElementValeurNProduit, function(key, value) {
                     cpte = tab.rows().count() + 1;
                    tab.row.add([
                        value.action,
                        value.libelle_vn,
                        value.libelle_produit,
                        `<input type="text" id="v_unitaire${cpte}" class="form-control text-center v_unitaire" value="${value.v_unitaire}">`,
                        `<input type="text" id="v_portion${cpte}" class="form-control text-center v_portion" value="${value.v_portion}">`,
                        {{-- `<input type="text" class="form-control text-center u_mesure" value="${value.u_mesure}" disabled>` --}}
                        value.u_mesure,
                    ]);
                });

                tab.draw();

            
                 console.log(cpte)
            })


            // AFFECTATION DE VALEUR DES INPUT
            $('#tab-modal-valeurN-produit tbody').on('input', 'input', function () {
                var rowIndex = $(this).closest('tr').index();
                var columnClass = $(this).attr('class').split(' ')[2]; // Récupère la classe du champ
                
                if (columnClass === 'v_unitaire') {
                    tabElementValeurNProduit[rowIndex].v_unitaire = $(this).val();
                } else if (columnClass === 'v_portion') {
                    tabElementValeurNProduit[rowIndex].v_portion = $(this).val();
                } else if (columnClass === 'u_mesure') {
                    tabElementValeurNProduit[rowIndex].u_mesure = $(this).val();
                }
            });

            // SUPPRESSION D'ELEMENT DANS LE TABLEAU VARIABLE
            $('#tab-modal-valeurN-produit tbody').on('click', '.delete-row', function () {
                 var tab = $('#tab-modal-valeurN-produit').DataTable();
                var rowIndex = $(this).closest('tr').index();
                tabElementValeurNProduit.splice(rowIndex, 1); // Supprime l'élément du tableau
                tab.row($(this).closest('tr')).remove().draw();
            });

            // ENREGISTRER LES VALEURS EN BASE DE DONNEE
            $('#saveOndatabase').on('click',function(){

                $.ajax({
                    type: "POST",
                    url: "{{route('valeurNP.add')}}",
                    data: {
                        tabData : tabElementValeurNProduit
                    },
                    dataType: "JSON",
                     headers: {
                         'X-CSRF-TOKEN': '{{ csrf_token() }}'
                     },
                     beforeSend:function(){
                        for (var i = 1; i <= cpte; i++) {
                            var vUnitaire = $('#v_unitaire' + i);
                            var vPortion = $('#v_portion' + i);

                            // Vérifie si l'élément existe avant d'accéder à sa valeur
                            if (vUnitaire.length === 0 || vPortion.length === 0) {
                                console.error(`L'élément #v_unitaire${i} ou #v_portion${i} est introuvable.`);
                                continue; // Passe à l'itération suivante
                            }

                            if (vUnitaire.val().trim() === '') {
                                notifDanger('Champ obligatoire !');
                                vUnitaire.focus();
                                return false;
                            }
                            if (vPortion.val().trim() === '') {
                                notifDanger('Champ obligatoire !');
                                vPortion.focus();
                                return false;
                            }
                        }

                     },
                    success: function (resp) {
                          notifSuccess(resp.msg)
                           recuperationValeurNutritionnelleProduit()
                          $('#valeurNproduitModal').modal('hide')
                          tabElementValeurNProduit.length=0
                    },
                    error:function(xhr){

                    }
                });
            })

            recuperationValeurNutritionnelleProduit()
        })

        function recuperationValeurNutritionnelle($id = null) {
            var table = $('#tableVn').DataTable();
            $.ajax({
                type: "GET",
                url: "{{ route('valeurN.get') }}",
                data: {
                    idvn: $id
                },
                dataType: "JSON",
                success: function(resp) {

                    if ($id != null) {
                        $('#libelle_vnIput').val(resp.data[0].libelle_vn)
                        $('#idvn_hidden').val(resp.data[0].idvaleur_nutritionnelle)
                        return false
                    }
                    table.clear().draw();
                    $.each(resp.data, function(key, value) {
                        table.row.add([
                            `<div class="d-flex justify-content-center ">\
                        <button id="supprimerValeurVn" data-id="${value.idvaleur_nutritionnelle}"  class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center me-2">\
                            <i class="bx bx-trash" style="font-size : 14px;"></i>\
                        </button>\
                        <button id="modifierValeurVn" data-id="${value.idvaleur_nutritionnelle}" class="btn btn-outline-teal p-1 pt-1 pb-0 align-self-center me-2">\
                            <i class="bx bx-edit" style="font-size : 14px;"></i>\
                        </button>\
                        </div>`,
                            value.libelle_vn
                        ])
                    })

                    table.draw()
                },
                error: function(xhr) {

                }
            });
        }

        function recuperationValeurNutritionnelleProduit($id = null){
              var table = $('#tableVnProduit').DataTable();
            $.ajax({
                type: "GET",
                url: "{{ route('valeurNP.get') }}",
                data: {
                    idvn: $id
                },
                dataType: "JSON",
                success: function(resp) {

                    if ($id != null) {
                        $('#libelle_vnIput').val(resp.data[0].libelle_vn)
                        $('#idvnp_hidden').val(resp.data[0].idvaleur_nutritionnelle_produit)
                        return false
                    }
                    table.clear().draw();
                    $.each(resp.data, function(key, value) {
                        table.row.add([
                            `<div class="d-flex justify-content-center ">\
                        <button id="supprimerValeurVnP" data-id="${value.idvaleur_nutritionnelle_produit}"  class="btn btn-outline-danger p-1 pt-1 pb-0 align-self-center me-2">\
                            <i class="bx bx-trash" style="font-size : 14px;"></i>\
                        </button>\
                       `,
                            value.libelle_vn,
                            value.libelleProduit,
                            value.valeur_unitaire,
                            value.valeur_portion,
                            value.libelle_unite_mesure
                        ])
                    })

                    table.draw()
                },
                error: function(xhr) {

                }
            });
        }
    </script>
@endsection