@extends('layouts.app')

@push('head-scripts')
@endpush 
 

@section('content')

@php
         // dd($selectOptions);
@endphp

    @isset($elencoModali)

        @foreach($elencoModali as $keyModale => $contentModale)
                @component( $contentModale["zoomDetail"]["pathComponente"]. "." . $contentModale["zoomDetail"]["nomeComponente"] ,["zoomDetail" => $contentModale["zoomDetail"]]) @endcomponent
        @endforeach
    @else
            @php
                $elencoModali=array();
            @endphp
    @endif 

  
<style>
    /* Imposta l'altezza massima per il contenitore della tabella */
    .bootstrap-table-container {
        max-height: 400px; /* Imposta un'altezza massima */
        overflow-y: auto; /* Abilita lo scorrimento verticale se necessario */
        overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    }

    .bootstrap-table-container-large {
        height: 600px; /* Imposta una dimensione maggiore per un altro tab */
    }

    .fieldset-bordered {
        border: 2px solid #007bff; /* Colore blu (puoi cambiarlo con qualsiasi altro colore) */
        padding: 1.5rem;
        border-radius: 0.5rem;
    }

    .fieldset-legend {
        font-size: 1.2rem;
        font-weight: bold;
        color: #007bff; /* Colore blu della legenda (puoi cambiarlo) */
    }

    .navlink-modulo {
        color: #007bff;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 10px;
        margin-bottom: 5px;
        display: block;
        width: 100%;
        transition: background-color 0.3s;
    }

    .navlink-modulo:hover, .navlink-modulo.active {
        background-color: #e2e6ea;
        color: #0056b3;
    }

    /* Spazio tra l'icona e il testo */
    .icon-background {
        margin-right: 10px;
    }

    .nav-tabs .nav-item {
        margin-bottom: 10px;
    }

    .nav-tabs .nav-item a {
        min-width: 100%;
    }

    .tab-title {
        color: #007bff;
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .tab-content p {
        color: #343a40;
    }
</style>

<section class="section contact">

    <div class="modal fade" id="formCenteredModal" tabindex="-1">
        <form id="" class="formTabella" novalidate>
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><span id="spanFormCenteredModal">Vertically Centered</span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="bodyCenteredContainer">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
                    <button type="button" id="registraProdotto" class="btn btn-primary">Registra</button>
                </div>
                </div>
            </div>

            <input type="text" id="idPrincipale"        name="idPrincipale" value="">
            <input type="text" id="dataSourceCollegato" name="dataSourceCollegato" value="">
            <input type="text" id="rottaDataSource"     name="rottaDataSource" value="">

        </form>

    </div><!-- End Vertically centered Modal-->
        
    <div class="row justify-content-left">

        <div class="col-md-3">
            <div class="card">
                
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        {{$titolo}}
                    </div>
                    <button type="button" class="btn btn-primary" id="btnNuovoRecord" style="background-color: #1b9539; border-color: #1b9539; padding: 2px 5px;">
                        <i class="bi bi-plus"></i> 
                    </button>                
                </div>
                <div class="card-body">

                    <table
                          
                            width                         = "100%"
                            id                            = "tabellaBase"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = "table"  
                            data-toggle				      = "table"
                            data-detail-view			  = false
                            data-toolbar                  = "toolbar"
                            data-search                   = true
                            data-show-search-clear-button = false
                            data-filter-control           = true
                            data-url                      = ""
                            data-query-params			  = ""
                            data-response-handler		  = "responseHandler"
                            data-sort-name                = "name"
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-page-list                = "25, 50, 100"
                            data-page-size                = 25
                            data-multiple-select-row      = true
                            data-click-to-select          = true
                            data-single-select            = false
                    >
                    </table>

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

        <div class="col-md-9">
            <div class="card">
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        Nome: <span class="pillSpan" id="spanRecordCorrente">Nessuna selezione</span>
                    </div>
                </div>
        
                <div class="card-body">
                    <div class="row d-none" id="divTabbed">

                        <div class="col-md-3">
                            <ul class="nav nav-tabs flex-column" id="tabbedTabellaBase" role="tablist" style="margin-top: 15px;">
                                
                                @foreach($tabbed as $keyTab => $contentTab)
                                    <li class="nav-item" role="presentation">
                                        <a class="navlink-modulo {{$keyTab==0 ? 'active': ''}}" id="tab{{$keyTab}}-tab" data-bs-toggle="tab" href="#tab{{$keyTab}}" role="tab" aria-controls="tab{{$keyTab}}" aria-selected="true">
                                            <div style="display: inline-flex; align-items: center;">
                                                <div class="icon-background" id="icon{{$keyTab}}">
                                                    <i class="bi bi-{{$contentTab['icona']}}-fill"></i>
                                                </div>
                                                {{$contentTab['label']}}
                                            </div>
                                        </a>
                                    </li>
                                @endforeach

                            </ul>
                        </div>
        
                        <div class="col-md-9">
                            <div class="tab-content" id="tabbedTabellaBaseContent" style="padding: 15px;">
                                    Nessuna selezione
                             </div>

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

@endsection

@push('scripts')

  <script>

        var today           = "";
        var $tabellaBase    = jQuery('#tabellaBase');
        var recordCorrente  = null;
        var tabbedData      = @json($tabbed);
        var elencoRecord    = @json($elencoRecord);
        var elencoModali    = @json($elencoModali);
        var alberoCategorie = @json($alberoCategorie??[]);

        //console.log(alberoCategorie)

        filtraStato         = {"0": "non attivo", "1": "attivo"};
        
        //(elencoRecord)
        
        function formattaDuplicaRecord(value,row) {

            elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
            elencoAzioni += '<i title="duplica" class="bi bi-stickies duplica" style="color: green;"></i>';
            elencoAzioni += '</div>'; 
       
            return [elencoAzioni].join('')

        }

        function formattaEliminaRecord(value,row) {

                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="elimina" class="bi bi-trash trash" style="color: red;"></i>';
                elencoAzioni += '</div>'; 
        
                return [elencoAzioni].join('')

        }

        function formattaPivotEliminaRecord(value,row) {

                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="elimina" class="bi bi-trash trashPivot" style="color: red;"></i>';
                elencoAzioni += '</div>'; 

                return [elencoAzioni].join('')

        }

        function formattaPivotRigeneraRecord(value,row) {

                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="rigenera" class="bi bi-arrow-repeat rigeneraPivot" style="color: green;"></i>';
                elencoAzioni += '</div>'; 

                return [elencoAzioni].join('')

        }

        function formattaPivotIntegraRecord(value,row) {

                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="integra" class="bi bi-database-add integraPivot" style="color: green;"></i>';
                elencoAzioni += '</div>'; 

                return [elencoAzioni].join('')

        }

        function formattaPivotNumeroRecord(value,row) {
    
                //console.log(row)
                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += row.dynamic_relation.length;
                elencoAzioni += '</div>'; 

                return [elencoAzioni].join('')

        }

        function formattaSubPivotEliminaRecord(value,row) {

            elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
            elencoAzioni += '<i title="elimina" class="bi bi-trash trashSubPivot" style="color: blue;"></i>';
            elencoAzioni += '</div>'; 

            return [elencoAzioni].join('')

        }


        function formattaSospendiPivotRecord(value,row) {

        if (row.pivot.stato==0){
            stato = "sospendi"
            icona = "toggle-off"
            color = "red"
        }else{
            stato = "sospendi"
            icona = "toggle-on"
            color = "green"
        }

        elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
        elencoAzioni = '<i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i>';
        //elencoAzioni += '</div>'; 

        return [elencoAzioni].join('')

        }
        
        function formattaSospendiRecord(value,row) {

                if (row.stato==0){
                    stato = "sospendi"
                    icona = "toggle-off"
                    color = "red"
                }else{
                    stato = "sospendi"
                    icona = "toggle-on"
                    color = "green"
                }

                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni = '<i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i>';
                //elencoAzioni += '</div>'; 

                return [elencoAzioni].join('')

        }

        function formattaZoomDetail(value,row) {
                if(row.stato==1){
                    elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                    elencoAzioni += '<i title="zoom dettaglio" class="bi bi-search zoomDetail" style="color: green;"></i>';
                    elencoAzioni += '</div>'; 
                }else{
                    elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                    elencoAzioni += '<i title="sospeso" class="bi bi-toggle-off" style="color: red"></i>';
                    elencoAzioni += '</div>'; 
                }

                return [elencoAzioni].join('')

        }

        function formattaTipoApplicazione(value,row) {


                return [recordCorrente.idApplicazione].join('')

        }

        function popolaTabbed(selectedRecord) {

            var tabContent = jQuery('#tabbedTabellaBaseContent');
            
            tabContent.empty(); // Pulisci i contenuti precedenti
            if (tabbedData.length > 0) {
                tabbedData.forEach(function(contentTab, keyTab) {
                    var isActive = keyTab === 0 ? 'active show' : ''; // Imposta il tab attivo
                    var tabId = 'tab' + keyTab;
                    var tabPane = `<div class="tab-pane fade ${isActive}" id="${tabId}" role="tabpanel" aria-labelledby="${tabId}-tab">`;
                    
                        //console.log(contentTab.contents)
                    
                        Object.entries(contentTab.contents).forEach(([key, valueContent]) => {
                            if ( ( (typeof valueContent.campi !== 'undefined') || (typeof valueContent.tabella !== 'undefined') ) && (valueContent.html) ) {
                                
                                tabPane += valueContent.html; // Usa il markup HTML pre-renderizzato

                                if (typeof valueContent.campi !== 'undefined'){
                                        popolaCampi(valueContent.models, valueContent.modelTable, selectedRecord)
                                }else{
                                        
                                }
                            }
                        });

                    tabPane += '</div>';
                    tabContent.append(tabPane); // Aggiungi il tab al contenuto
                });
            } else {
                tabContent.append('<div class="empty-tab">Nessun contenuto disponibile</div>');
            }

        }

        function popolaCampi(models, modelTable, recordCorrente) {
                fetch("{{ route('loadRecord') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include il token CSRF per la protezione
                    },
                    body: JSON.stringify({
                                            models  : models,
                                            model   : modelTable,
                                            record  : recordCorrente
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Errore nella risposta della rete');
                    }
                    return response.json(); // Parso la risposta come JSON
                })
                .then(data => {
                    
                    
                    jQuery('input[name="id"]').val(data.record["id"]);

                    Object.keys(data.record).forEach(function(key) {
                        // Trova l'elemento di input con l'ID corrispondente alla chiave
                        var inputElement = document.getElementById(key);

                        // Se esiste un elemento con quell'ID, popola il suo valore
                        if (inputElement) {
                            // Controlla se l'elemento è un checkbox
                            if (inputElement.type === 'checkbox') {
                                // Se il valore è true o 1, flagga la checkbox
                                inputElement.checked = !!data.record[key];
                            }else if (inputElement.type === 'password') {

                            } else if (inputElement.tagName.toLowerCase() === 'select') {
                                // Per i campi select, imposta il valore corrispondente
                                inputElement.value = data.record[key];
                            } else {
                                // Per altri tipi di input, imposta il valore
                                if (data.record[key] !== null) {
                                    inputElement.value = data.record[key];
                                }
                            }
                        }
                    });
                    // DA RISOLVERE
                    jQuery('#idCategoria').trigger('change', { idSottoCategoria: 2 });
                })
                .catch(error => {
                    console.error('Errore durante la chiamata fetch:', error);
                });

        }

        jQuery('#tabellaBase').on('click-row.bs.table', function (e, row, $element) {


            jQuery('#tabellaBase tbody tr').removeClass('selected-row');
            $element.addClass('selected-row');

            recordCorrente = elencoRecord.filter(item => item.id === row.id);

            //console.log(elencoRecord)

            recordCorrente = row
            jQuery("#spanRecordCorrente").text(recordCorrente.nome);
            jQuery("#divTabbed").removeClass("d-none");
            jQuery('#tab0-tab').trigger('click');
            
            popolaTabbed(recordCorrente);

            document.querySelectorAll('.formElementi').forEach(function(formElement) {
                    formElement.addEventListener('submit', function(event) {
                    event.preventDefault();

                    
                        if (!this.checkValidity()) {
                            const invalidFields = Array.from(this.elements).filter(element => !element.validity.valid);

                            // Stampa o elabora i campi non validi
                            invalidFields.forEach(field => {
                                console.log(`Campo non valido: ${field.name || field.id}`);
                                console.log(`Messaggio di errore: ${field.validationMessage}`);
                            });
                            alert("Per favore, riempi correttamente tutti i campi.");
                        } else {
                            if(confirm("Confermi la registrazione del record!")){
                                var actionUrl   = "{{route('saveRecord')}}";
                                var formData    = new FormData(this);
                                // Itera su tutti i checkbox == coverte on/off => 1/0
                                const checkboxes = this.querySelectorAll('input[type="checkbox"]');
                                checkboxes.forEach(checkbox => {
                                    formData.set(checkbox.name, checkbox.checked ? 1 : 0);
                                });

                                fetch(actionUrl, {
                                                    method  : 'POST',
                                                    headers : {
                                                        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                                                    },
                                                    body    : formData
                                })
                                .then(response => response.json())
                                .then(data => {
                                    // Fai qualcosa con la risposta, ad esempio mostra un messaggio di successo

                                    var indiceRigaMaster = $tabellaBase.bootstrapTable('getData').findIndex(function(row) {
                                        return row.id === recordCorrente.id;
                                    });
                                    console.log(data.record)
                                    //recordCorrente[dataSourceTable] = data[arraySourceTable];

                                    $tabellaBase.bootstrapTable('updateRow', {index: indiceRigaMaster, row: data.record});

                                })
                                .catch((error) => {
                                    // Gestisci eventuali errori
                                    console.error('Error:', error);
                                });
                            }
                        }

                    });
            })

        });

        jQuery(document).on('click', '.INTEGRARIGENERA', function() {

            var messaggio           = jQuery(this).data('messaggio');
            var rotta               = jQuery(this).data('rotta');
            var nomeTable           = jQuery(this).data('nometable');
            var dataSourceTable     = jQuery(this).data('datasourcetable');
            var arraySourceTable    = jQuery(this).data('arraysourcetable');
            var modelTable          = jQuery(this).data('modeltable');
            var idSubRecord         = jQuery("#idSubRecord").val();

            if(confirm(messaggio)){
                    fetch( rotta , {
                        method: 'POST',
                        headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                                                model       : modelTable,
                                                record      : recordCorrente,
                                                idSubRecord : idSubRecord
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Errore nella risposta della rete');
                        }
                        return response.json();
                    })
                    .then(data => {
                        
                                if(data.success){

                                    var indiceRigaMaster = $tabellaBase.bootstrapTable('getData').findIndex(function(row) {
                                        return row.id === recordCorrente.id;
                                    });

                                    recordCorrente[dataSourceTable] = data[arraySourceTable];

                                    $tabellaBase.bootstrapTable('updateRow', {index: indiceRigaMaster, row: recordCorrente});

                                    window[nomeTable].bootstrapTable('load', data[arraySourceTable]);
                                    
                                    jQuery('#tabellaBase tbody tr[data-index="' + indiceRigaMaster + '"]').addClass('selected-row');
                                    jQuery("#countTabella").html( " (" + Object.keys(data[arraySourceTable]).length + " elementi)");

                                }else{

                                }
                    })
                    .catch(error => {
                        console.error('Errore durante la chiamata fetch:', error);
                    });
            }

        })

        jQuery(document).on('click', '.INSERISCI', function() {

            var messaggio           = jQuery(this).data('messaggio');
            var rotta               = jQuery(this).data('rotta');
            var nomeTable           = jQuery(this).data('nometable');
            var dataSourceTable     = jQuery(this).data('datasourcetable');
            var arraySourceTable    = jQuery(this).data('arraysourcetable');
            var modelTable          = jQuery(this).data('modeltable');
            var titoloModale        = jQuery(this).data('titolomodale');

                var bodyCenteredContainer   = document.getElementById('bodyCenteredContainer');
                    bodyCenteredContainer.innerHTML = '';

                    @if(isset($selectOptions) && !empty($selectOptions))
                            var selectOptions = @json($selectOptions);
                    @else
                            var selectOptions = null;
                    @endif
        
                var valoriPresenti = [];
                Object.entries(selectOptions).forEach(function([keySelect, elencoOpzioni]) {


                    if(elencoOpzioni.unici){

                        valoriPresenti = recordCorrente[dataSourceTable].map(item => item[elencoOpzioni.campoUnico]);
                        
                    }
                    var select = document.createElement('select');

                    select.name = keySelect;
                    select.id   = keySelect;
                    select.classList.add('form-select', 'mb-3');
                    for (var id in elencoOpzioni["dataSource"]) {
                        id = Number(id);
                        
                        // console.log(elencoOpzioni.unici + " " + id + typeof id + " " + valoriPresenti + " " + typeof valoriPresenti[0] + valoriPresenti.includes(id))

                        if (elencoOpzioni["dataSource"].hasOwnProperty(id)) {
                            if ( (!elencoOpzioni.unici) || (elencoOpzioni.unici && (!valoriPresenti.includes(id)) ) ){
                                var option = document.createElement('option');
                                    option.value = id;
                                    option.text = elencoOpzioni["dataSource"][id];
                                select.appendChild(option);
                            }
                        }
                    }

                    bodyCenteredContainer.appendChild(select);

                    jQuery("#idPrincipale").val(recordCorrente.id);
                    jQuery("#registraProdotto").addClass(dataSourceTable);
                    jQuery("#dataSourceCollegato").val(dataSourceTable);
                    jQuery("#rottaDataSource").val(rotta);

                });

            var idSubRecord         = jQuery("#idSubRecord").val();

            jQuery("#spanFormCenteredModal").html(titoloModale);

        })


        jQuery(document).on('click', '.tabelle_base', function() {

                alert('ok')
        })

        window.operazioniRecord = {
                                    'click .trash': function (e, value, row, index) {
                                        
                                            if (confirm("Elimino il record selezionato?\n")){
                                                let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                                var formData = new FormData();
                                                    formData.append('method', 'POST');
                                                    formData.append('_token', csrfToken);
                                                    formData.append('idRecord', JSON.stringify(row.id));
                                                    formData.append('modelPath', "{{$modelPath}}");
                                                    formData.append('modelTabella', "{{$modelTable}}");

                                                fetch("{{route('eliminaRecordTabella')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                    if(data.success){
                                                                        $tabellaBase.bootstrapTable('remove', {
                                                                                                                field   : 'id',
                                                                                                                values  : [row.id]
                                                                        });

                                                                    } else {

                                                                    }
                                                                    
                                                })
                                                .catch(error => {
                                                                    alert( 'Errore: ' + error.message );

                                                })
                                                .finally(() => {

                                                });

                                            }
                                    },
                                    'click .duplica': function (e, value, row, index) {
                                        if (confirm("Duplico il record selezionato?\n")){
                                            return false
                                        }
                                    },
                                    'click .sospendi': function (e, value, row, index) {
                                            if (row.stato==0)
                                                stato = "Attivo"
                                            else
                                                stato = "Sospendo"
                                            if (confirm(stato + " il record selezionato?\n")){
                                                newStato = row.stato==1?0:1
                                                let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                                var formData = new FormData();
                                                    formData.append('method', 'POST');
                                                    formData.append('_token', csrfToken);
                                                    formData.append('idRecord', JSON.stringify(row.id));
                                                    formData.append('field', 'stato');
                                                    formData.append('currentValue', newStato);
                                                    formData.append('modelPath', "{{$modelPath}}");
                                                    formData.append('modelTabella', "{{$modelTable}}");

                                                fetch("{{route('updateRecord')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                    if(data.success){
                                                                        row.stato = newStato;
                                                                        var formattedHtml = formattaSospendiRecord(newStato, row);
                                                                        // Aggiorna la cella corretta nella riga usando 'updateCell' o 'updateRow'
                                                                        jQuery('#tabellaBase').bootstrapTable('updateCell', {
                                                                            index: index,
                                                                            field: 'sospendi',
                                                                            value: formattedHtml
                                                                        });

                                                                    } else {
                                                                    }
                                                                    
                                                })
                                                .catch(error => {
                                                                    alert( 'Errore: ' + error.message );
                                                })
                                                .finally(() => {

                                                });

                                            }
                                    },
                                    'click .trashPivot': function (e, value, row, index) { 
    
                                        var targetElement = jQuery(e.currentTarget);
                                                var parentTd = targetElement.closest('td');

                                                var pivotTable = parentTd.attr('class');
                                                var parts = pivotTable.split('.');

                                                if (confirm("Elimino il record Pivot selezionato?\n")){
                                                let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                                var formData = new FormData();
                                                    formData.append('method', 'POST');
                                                    formData.append('_token', csrfToken);
                                                    formData.append('idRecord', JSON.stringify(row.pivot.id));
                                                    formData.append('modelPath', parts[0]);
                                                    formData.append('modelTabella', parts[1]);

                                                fetch("{{route('eliminaRecordTabella')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                    if(data.success){
                                                                        nomeTable = "tabella_" + parts[2];
                                                                        //console.log(nomeTable)
                                                                        window[nomeTable].bootstrapTable('remove', {
                                                                                                                field   : 'id',
                                                                                                                values  : [row.id]
                                                                        });
                                                                        $dataSourcePivot = window[nomeTable].bootstrapTable('getData')

                                                                        var indiceRigaMaster = $tabellaBase.bootstrapTable('getData').findIndex(function(row) {
                                                                            return row.id === recordCorrente.id;
                                                                        });
                                                                        recordCorrente[parts[3]] = $dataSourcePivot;


                                                                        $tabellaBase.bootstrapTable('updateRow', {index: indiceRigaMaster, row: recordCorrente});
                                                                        jQuery("#countTabella").html( " (" + Object.keys($dataSourcePivot).length + " elementi)");

                                                                    } else {

                                                                    }
                                                                    
                                                })
                                                .catch(error => {
                                                    console.log(error)
                                                                    alert( 'Errore: ' + error.message );

                                                })
                                                .finally(() => {

                                                });
                                            }
                                    },
                                    'click .trashSubPivot': function (e, value, row, index) { 
    
                                        //console.log(row);

                                        if (confirm("Elimino il record Sub Pivot selezionato?\n")){
                                            var targetElement = jQuery(e.currentTarget);
                                            var parentTd = targetElement.closest('td');

                                            var pivotTable = parentTd.attr('class');
                                            var parts = pivotTable.split('.');

                                            let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                            var formData = new FormData();
                                                formData.append('method', 'POST');
                                                formData.append('_token', csrfToken);
                                                formData.append('idRecord', JSON.stringify(row.pivot.id));
                                                formData.append('modelPath', parts[0]);
                                                formData.append('modelTabella', parts[1]);
                                                formData.append('pivot', parts[3]);
                                                formData.append('subPivot', parts[4]);

                                            fetch("{{route('eliminaRecordTabella')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    nomeTable = "tabella_" + parts[2];
                                                                    window[nomeTable].bootstrapTable('remove', {
                                                                                                            field   : 'id',
                                                                                                            values  : [row.id]
                                                                    });
                                                                    $dataSourcePivot = window[nomeTable].bootstrapTable('getData')


                                                                    var indiceRigaMaster = $tabellaBase.bootstrapTable('getData').findIndex(function(row) {
                                                                        return row.id === recordCorrente.id;
                                                                    });

                                                                    recordCorrente[parts[3]] = $dataSourcePivot;

                                                                    $tabellaBase.bootstrapTable('updateRow', {index: indiceRigaMaster, row: recordCorrente});
                                                                    jQuery("#countTabella").html( " (" + Object.keys($dataSourcePivot).length + " elementi)");

                                                                } else {

                                                                }
                                                                
                                            })
                                            .catch(error => {
                                                                alert( 'Errore: ' + error.message );

                                            })
                                            .finally(() => {

                                            });
                                        }
                                    },
        }

        function initTabellaBase(dataDefault=""){

                $tabellaBase.bootstrapTable('destroy').

                bootstrapTable({

                            {!! $colonneTabellaBase !!},
                            
                            locale          : "it-IT",

                            data            : @json($elencoRecord),

                            onCheck         : function (row, $index) {
                                                                        
                            },

                            onLoadSuccess       : function(data){
                            },

                            onSearch: function (text) {
                                
                            }

                });

        }


        function initTabellaDetail(dataDefault=""){

            $tabellaBase.bootstrapTable('destroy').

            bootstrapTable({

                        {!! $colonneTabellaBase !!},
                        
                        locale          : "it-IT",

                        data            : @json($elencoRecord),

                        onCheck         : function (row, $index) {
                                                                    
                        },

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        }

            });

        }

        jQuery('a[data-bs-toggle="tab"]').on('click', function() {
            // Rimuovi la classe 'active' e il colore dallo sfondo delle icone
            jQuery('.navlink-modulo').removeClass('active').css('background-color', '#f1f1f1'); // Reset background color
            jQuery('.icon-background').css('background-color', '#e9ecef'); // Reset background color

            // Aggiungi la classe 'active' e cambia il colore dell'icona per il tab attivo
            jQuery(this).addClass('active').css('background-color', 'orange'); // Color active tab
            jQuery(this).find('.icon-background').css('background-color', 'orange'); // Color active tab icon
        });
        
        jQuery(document).ready(function() {

            //setTimeout(function() {

                jQuery(document).on('change', '#idCategoria', function(event, data) {

                            var selectedId = jQuery(this).val();  // Ottieni il valore della categoria selezionata
                            var sottocategoriaSelect = jQuery('#idSottoCategoria');  // Seleziona la sottocategoria

                            // Reset della sottocategoria
                            sottocategoriaSelect.html('<option value="">Seleziona...</option>');

                            // Trova la categoria selezionata e popola la seconda select (sottocategorie)
                            var categoriaSelezionata = alberoCategorie.find(function(item) {
                                return item.id == selectedId;
                            });
                            
                            //console.log(categoriaSelezionata)
                            
                            if (categoriaSelezionata && categoriaSelezionata.children) {
                                jQuery.each(categoriaSelezionata.children, function(index, child) {

                                    if (data && data.idSottoCategoria && child.id == data.idSottoCategoria) {
                                        // Aggiungi l'option con l'attributo selected
                                        sottocategoriaSelect.append(
                                            jQuery('<option></option>').val(child.id).text(child.nome).attr('selected', 'selected')
                                        );
                                    } else {
                                        // Aggiungi l'option normalmente
                                        sottocategoriaSelect.append(
                                            jQuery('<option></option>').val(child.id).text(child.nome)
                                        );
                                    }

                                });
                            }
                });

                    //jQuery('#idCategoria').trigger('change', { idSottoCategoria: jQuery('#idSottoCategoria').val() });

            //}, 500); // Aspetta mezzo secondo
            
            
            initTabellaBase(today);

            jQuery('#tab0-tab').trigger('click');

        })

  </script>

@endpush