@extends('layouts.app')

@push('head-scripts')
@endpush 
 

@section('content')

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

{{--   
<style>
    
    .red-border-row {
        border: 2px solid red;
    }
    .selected-row {
        background-color: #d1ecf1 !important;  /* Colore di evidenziazione */
    }
    /* Cambia il cursore su tutte le righe della tabella */
    tr[data-index] {
        cursor: pointer; /* Cambia il cursore in "pointer" */
    }

    /* Aggiungi un'icona al passaggio del mouse */
    tr[data-index]:hover .selection-icon {
        visibility: visible; /* Mostra l'icona al passaggio del mouse */
    }

    .icon-background {
        background-color: #e9ecef; /* Sfondo per le icone non attive */
        padding: 5px;
        border-radius: 5px;
        margin-right: 10px;
    }

    .navlink-modulo {
        color: gray; /* Colore testo dei tab non attivi */
        background-color: #f1f1f1; /* Sfondo per i tab non attivi */
    }

    .navlink-modulo.active {
        background-color: orange; /* Sfondo per il tab attivo */
        color: white; /* Colore testo per il tab attivo */
    }

    .navlink-modulo.active .icon-background {
        background-color: orange; /* Sfondo per l'icona del tab attivo */
    }
    
    .navlink-modulo:hover {
        background-color: #e2e6ea; /* Colore di hover per i tab */
    }
    
</style> --}}

<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" id="chiudiModaleTabelleBase" 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><!-- famiglie Modal-->

<section class="section">
    
    
    <div class="modal fade" id="attributiModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header card-header text-white d-flex justify-content-between align-items-center" style="background-color: #007bff; height: 50px; padding: 10px;">
                <div><span id="spanModalHeader"></span>: <span id="spanModalTitle"></span><span id="spanCountDetail"></span></div>
                
                <div>
                    
              </div>
            </div>

            <div class="modal-body" id="idModalBody">
                
                        <table
                                
                                width                         = "100%"
                                id                            = "tabellaAttributi"
                                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                = "10, 25, 50, 100"
                                data-page-size                = 10
                                data-multiple-select-row      = false
                                data-click-to-select          = true
                                data-single-select            = true
                        >
                        </table>
    
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
            </div>
          </div>
        </div>
    </div><!-- attributi Modal-->

    <div class="row">

        <div class="col-md-3">
            <div class="card">
                <h5 class="card-header toolbar d-flex justify-content-between align-items-center">
                    {{$titolo}}                            
                </h5>                

                <div class="card-body">

                    <table                          
                           
                            id                            = "tabellaBase"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = ""  
                            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      = false
                            data-click-to-select          = true
                            data-single-select            = true
                    >
                    </table>

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

        <div class="col-md-9">
            <div class="card">
                <!-- Testata card con toolbar -->
                <h5 class="card-header toolbar d-flex justify-content-between align-items-center">
                    <div>
                        <span class="d-inline">Nome: &nbsp;</span>
                        <div class="pillSpan d-inline" id="spanRecordCorrente">
                            <span class="badge text-bg-info">Nessuna selezione</span>
                        </div>
                    </div>
                    <div>
                        @if(isset($toolBarScheda))            
                            @component( "components.toolBarModulo" ,["toolBarScheda" => $toolBarScheda]) @endcomponent
                        @endif                                            
                    </div>
                </h5>
                <!-- End Testata card con toolbar -->
        
                <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
                    </div>

                    <div class="d-none" id="divTabbed">                        
                            <ul class="nav nav-tabs" id="tabbedTabellaBase" role="tablist">                                
                                @foreach($tabbed as $keyTab => $contentTab)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link navlink-modulo {{$keyTab==0 ? 'active': ''}}" id="tab{{$keyTab}}-tab" data-bs-toggle="#tab{{$keyTab}}" href="#tab{{$keyTab}}" role="tab">
                                            
                                                <div class="icon-background" id="icon{{$keyTab}}">
                                                    <i class="bi bi-{{$contentTab['icona']}}-fill"></i>
                                                </div>
                                                {{$contentTab['label']}}
                                            
                                        </button>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="tab-content" id="tabbedTabellaBaseContent">
                                    Nessuna selezione
                             </div>

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

@endsection

@push('scripts')

  <script>

        var today               = "";
        var $tabellaBase        = jQuery('#tabellaBase');
        var $tabellaAttributi   = jQuery('#tabellaAttributi');
        var recordCorrente      = null;
        var tabbedData          = @json($tabbed);
        var elencoRecord        = @json($elencoRecord);
        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 formattaPredefinitoRecord(value, row, index) {
            return [
                '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">',
                '<input type="radio" name="predefinito" class="predefinito" ', value==1 ? 'checked' : '', '>',
                '</div>'
            ].join('');
        }

        function formattaPredefinitoPivotRecord(value, row, index) {
            return [
                '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">',
                '<input type="radio" name="predefinito" class="predefinitoPivot" ', row.pivot.predefinito==1 ? 'checked' : '', '>',
                '</div>'
            ].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) {
                let elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';

                // Aggiungi un pulsante per aprire la modale
                elencoAzioni += ' <button type="button" class="btn btn-sm btn-info attributiFamiglia" >';

                elencoAzioni += row.countStato1 + "/" + row.dynamic_relation.length;

                elencoAzioni += '</button>';

                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 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 formattaSospendiPivotRecord(value,row) {
                stato = "sospendiPivot"
                if (row.pivot.stato==0){
                    icona = "toggle-off"
                    color = "red"
                }else{
                    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 ? 'show active' : ''; // 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);
                });

        }

        function integraGeneraPivot(e, row, tipoAzione){
            if(confirm(tipoAzione + "?")){
                var targetElement = jQuery(e.currentTarget);
                var parentTd = targetElement.closest('td');

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

                var formData = new FormData();
                    formData.append('method', 'POST');
                    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('tipoAzione',   tipoAzione);
                    formData.append('record',       JSON.stringify(row));
                    
                var actionUrl   = "{{route('integraGeneraPivot')}}";

                fetch(actionUrl, {
                                    method  : 'POST',
                                    headers : {
                                        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                                    },
                                    body    : formData
                })
                .then(response => response.json())
                .then(data => {
                                console.log(data)

                                window['tabella_printmanager_ProdottiTabelleBase'].bootstrapTable('load', data.record);

                                recordCorrente['tabelle_base'] = data.record;
                                jQuery("#countprintmanager_ProdottiTabelleBase").html(" (" + data.record.length + " elementi)");
                                jQuery("#chiudiModaleTabelleBase").trigger("click");
                                
                })
                .catch((error) => {
                    // Gestisci eventuali errori
                    console.error('Error:', 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()) {
                            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 == covnerte 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
                                })
                                .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 = '';

                var selectOptions = @json($selectOptions);
        
                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 = elencoOpzioni.id;
                    select.id   = elencoOpzioni.id;
                    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() {

            if (confirm("Registro la nuova famiglia?\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('modelPath', "Prodotti");
                    formData.append('modelTabella', "Printmanager_ProdottiTabelleBase");

                    formData.append('idProdotto', jQuery("#idPrincipale").val());
                    formData.append('idCategoriaAttributi', jQuery("#idCategoriaAttributi").val());
                    formData.append('idTabellaBase', jQuery("#idTabellaBase").val());

                fetch("{{route('registraProdottoTabellaBase')}}", {
                                                                method  : 'POST',
                                                                body    : formData
                })
                .then(response => response.json()
                
                )
                .then(data => {
                                    if(data.success){

                                        console.log(data)

                                        window['tabella_printmanager_ProdottiTabelleBase'].bootstrapTable('load', data.record);

                                        recordCorrente['tabelle_base'] = data.record;
                                        jQuery("#countprintmanager_ProdottiTabelleBase").html(" (" + data.record.length + " elementi)");
                                        jQuery("#chiudiModaleTabelleBase").trigger("click");

                                    } else {

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

                })
                .finally(() => {

                });

            }
        })

        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"
                                                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', "Prodotti");
                                                    formData.append('modelTabella', "Printmanager_ProdottiTabelleAttributi");

                                                fetch("{{route('updateRecord')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                    if(data.success){
                                                                        row.stato = newStato;
                                                                        var formattedHtml = formattaSospendiRecord(newStato, row);
                                                                        jQuery('#tabellaAttributi').bootstrapTable('updateCell', {
                                                                            index: index,
                                                                            field: 'sospendi',
                                                                            value: formattedHtml
                                                                        });

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

                                                });

                                    },
                                    'change .predefinito': function (e, value, row, index) {
                                        //console.log(row)
                                        if (confirm("Imposto come predefinito 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', row.id);
                                                    formData.append('modelPath', "Prodotti");
                                                    formData.append('modelTabella',"Printmanager_ProdottiTabelleAttributi");

                                                fetch("{{route('predefinisciRecord')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                if(data.success){
                                                                    
                                                                    jQuery('#tabellaAttributi').bootstrapTable('getData').forEach(function (item, idx) {
                                                                            if (item.id !== row.id) {
                                                                                itemPredefinito = 0;
                                                                            }else{
                                                                                itemPredefinito = 1;
                                                                            }
                                                                            jQuery('#tabellaAttributi').bootstrapTable('updateCell', {
                                                                                index: idx,
                                                                                field: 'predefinito',
                                                                                value: itemPredefinito
                                                                            });
                                                                    });

                                                                } else {
                                                                }

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

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

                                        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', row.pivot.id);
                                                    formData.append('idProdotto', row.pivot.idProdotto);
                                                    formData.append('idTabellaBase', row.pivot.idTabellaBase);
                                                    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 ;

                                                                        jQuery("#countprintmanager_ProdottiTabelleBase").html(" (" + $dataSourcePivot.length + " elementi)");

                                                                        $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(() => {

                                            });
                                        }
                                    },
                                    'click .rigeneraPivot': function (e, value, row, index) { 
                                        
                                        integraGeneraPivot(e, row, "rigenera")
                                    },
                                    'click .integraPivot': function (e, value, row, index) { 
                                        integraGeneraPivot(e, row, "integra")
                                    },
                                    'click .sospendiPivot': function (e, value, row, index) {
                                            if (row.pivot.stato==0)
                                                stato = "Attivo"
                                            else
                                                stato = "Sospendo"
                                                newStato = row.pivot.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.pivot.id));
                                                    formData.append('field', 'stato');
                                                    formData.append('currentValue', newStato);
                                                    formData.append('modelPath', "Prodotti");
                                                    formData.append('modelTabella', "Printmanager_ProdottiTabelleAttributi");

                                                fetch("{{route('updateRecord')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                    if(data.success){
                                                                        row.pivot.stato = newStato;
                                                                        var formattedHtml = formattaSospendiPivotRecord(newStato, row);
                                                                        jQuery('#tabellaAttributi').bootstrapTable('updateCell', {
                                                                            index: index,
                                                                            field: 'sospendi',
                                                                            value: formattedHtml
                                                                        });

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

                                                });

                                    },
                                    'click .attributiFamiglia': function (e, value, row, index) { 
                                        console.log(row.dynamic_relation)
                                        titoloModale = row.nomeCategoria + ": " + row.labelTabella;

                                        jQuery('#spanModalHeader').html(row.nomeCategoria);
                                        jQuery('#spanModalTitle').html(row.labelTabella);
                                        jQuery('#spanCountDetail').html( " (" + row.dynamic_relation.length +")" );

                                        $tabellaAttributi.bootstrapTable('destroy').

                                                                                bootstrapTable({

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

                                                                                            data            : row.dynamic_relation,

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

                                                                                            onLoadSuccess       : function(data){
                                                                                            },

                                                                                            onSearch: function (text) {
                                                                                            },

                                                                                            onEditableSave  : function (field, rowDettaglio, oldValue,$el) {

                                                                                                                checkSave = updateTableField(rowDettaglio, "Printmanager_ProdottiTabelleAttributi", "pivot", field, "{{ csrf_token() }}")
                                                                                            }

                                                                                });
                                                                                
                                        jQuery('#attributiModal').modal('show');  // Apre la modale
                                    },
                                    'change .predefinitoPivot': function (e, value, row, index) {
                                        if (confirm("Imposto come predefinito 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', row.pivot.id);
                                                    formData.append('idRecordMaster', recordCorrente.id);
                                                    formData.append('idPivotTabellaBase', row.pivot.idTabellaBase);
                                                    formData.append('modelPath', "Prodotti");
                                                    formData.append('modelTabella',"Printmanager_ProdottiTabelleAttributi");

                                                fetch("{{route('predefinisciRecord')}}", {
                                                                                                method  : 'POST',
                                                                                                body    : formData
                                                })
                                                .then(response => response.json()
                                                
                                                )
                                                .then(data => {
                                                                if(data.success){
                                                                    
                                                                    jQuery('#tabellaAttributi').bootstrapTable('getData').forEach(function (item, idx) {
                                                                            if (item.id !== row.id) {
                                                                                itemPredefinito = 0;
                                                                            }else{
                                                                                itemPredefinito = 1;
                                                                            }
                                                                            jQuery('#tabellaAttributi').bootstrapTable('updateCell', {
                                                                                index: idx,
                                                                                field: 'predefinito',
                                                                                value: itemPredefinito
                                                                            });
                                                                    });

                                                                } 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('*[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() {

                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)
                                        );
                                    }

                                });
                            }
                });
            
            initTabellaBase(today);

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

        })

  </script>

@endpush