@extends('layouts.app')

@push('head-scripts')
@endpush 
 

@section('content')

@php
         
@endphp

<style>

    .form-check-inline {
        display: inline-block; /* Mantiene i radio buttons nella stessa riga */
        margin-right: 10px;     /* Distanza tra i radio buttons */
    }

    .form-check {
        margin: 0;              /* Rimuove i margini extra */
    }

    .modal-body {

        max-height  : 400px;  /* Imposta un'altezza massima */
        overflow-y  : auto;   /* Permetti lo scrolling verticale */
    }

    ul.list-group {
        max-height: 100%; /* Imposta la lista a occupare tutta l'altezza disponibile */
        overflow-y: auto; /* Abilita lo scroll interno */
        padding: 0;       /* Evita margini e padding extra */
    }

    
    .sortable tr.ui-sortable-helper {
        background: #f8d7da;
        border: 2px solid #dc3545;
        opacity: 0.8;
    }

    /* 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 prodottiTipografici">

    <div class="modal fade" id="modalAggiungi" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Aggiungi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="modalBody">
                    <input type="text" class="form-control" name="nome" placeholder="">
                </div>
                <div class="modal-footer">

                    <input type="hidden" id="tabella"/>
                    <input type="hidden" id="idProdotto"/>
                    <input type="hidden" id="idCategoria"/>
                    <input type="hidden" id="idTabellaBase"/>

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
                    <button type="button" class="btn btn-primary" id="btnSalva">Salva</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row justify-content-left">

        <div class="col-md-2">
            <div class="card">
                
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        Configurazione Prodotti tipografici
                    </div>              
                </div>
                <div class="card-body">

                    <table
                          
                            width                         = "100%"
                            id                            = "tabellaProdottiTipografici"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = "table table-sm"  
                            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		  = "responseTabella"
                            data-sort-name                = "nome"
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-side-pagination		  = "server"
                            data-page-list                = "15, 20, 25"
                            data-page-size                = 15
                            data-multiple-select-row      = false
                            data-click-to-select          = false
                    >
                    </table>

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

        <div class="col-md-10">
            <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">
                                        <table
                                            
                                                width                         = "100%"
                                                id                            = "tabellaFamiglieAttributi"
                                                data-show-search-clear-button = false
                                                data-locale                   = "it-IT"              
                                                class                         = "table table-sm"  
                                                data-toggle				      = "table"
                                                data-detail-view			  = false
                                                data-toolbar                  = "toolbar"
                                                data-search                   = false
                                                data-show-search-clear-button = false
                                                data-filter-control           = true
                                                data-url                      = ""
                                                data-query-params			  = ""
                                                data-response-handler		  = "responseTabella"
                                                data-sort-name                = ""
                                                data-show-header              = true
                                                data-sort-order               = "asc"
                                                data-show-extended-pagination = true
                                                data-pagination				  = true
                                                data-only-info-pagination 	  = false
                                                data-side-pagination		  = "server"
                                                data-page-list                = "15, 20, 25"
                                                data-page-size                = 15
                                                data-multiple-select-row      = false
                                                data-click-to-select          = false
                                        >
                                        </table>
                </div>
                
                

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

@endsection

@push('scripts')


  <script>

    var $tabellaProdottiTipografici = jQuery('#tabellaProdottiTipografici')
    var $tabellaFamiglieAttributi   = jQuery('#tabellaFamiglieAttributi')
    var prodottoCorrente            = null;
    var rigaProdottoCorrente        = null;

    window.operazioniRecord = {
    }

    function rebuildBootstrapTable(dataToSend){

            $.ajax({
                    url         : "{{ route('rebuildBootstrapTable') }}",
                    type        : "POST",
                    dataType    : 'json',
                    data        : {
                                    dataToSend  : dataToSend,
                                    _token      : '{{ csrf_token() }}'
                    },
                    success     : function(response) {
                                                        // costruisco la bootstrapTable da rigenerare
                                                        if(dataToSend.tabella=="categoria"){
                                                            bootstrapTable = "#tabellaFamiglieAttributi";
                                                            response = Object.values(response.categorie)
                                                        }else if(dataToSend.tabella=="tabellaBase"){
                                                            bootstrapTable = "#subTable_" + dataToSend.idCategoria;
                                                            response = Object.values(response.tabelleBase)
                                                        }else if( (dataToSend.tabella=="rigeneraAttributiBase") || (dataToSend.tabella=="integraAttributiBase") ){
                                                            bootstrapTable = "#attrTable_" + dataToSend.idCategoria; + "_" + dataToSend.idTabellaBase;
                                                            response = Object.values(response.attributi)
                                                        }

                                                        console.log("Risposta dal server:", response);

                                                        $(bootstrapTable).bootstrapTable('load', response).bootstrapTable('refresh');

                                                        jQuery("#modalAggiungi").modal("hide");
                    },
                    error       : function(xhr, status, error) {
                                                        alert("Errore nel salvataggio dei dati.");
                                                        console.error("Errore:", error);
                                                        jQuery("#modalAggiungi").modal("hide");
                    }
            });
    }

    function popolaModale(data, tipo) {
        let container = $("#modalBody");
            container.empty();

        $("#btnSalva").show();

        if (data.success) {

            let elenco = data[`elenco${tipo}`];
            let html = "<table class='table table-bordered'>";

            if (tipo == "Categorie") {
                html += "<thead><tr><th>Nome</th><th><input type='checkbox' id='selectAll' /></th><th title='categoria opzionale'>✅</th></tr></thead>";
                html += "<tbody>";
            } else if (tipo == "TabelleBase") {
                html += "<thead><tr><th>Nome</th><th>Attributi</th><th><input type='checkbox' id='selectAll' /></th></tr></thead>";
                html += "<tbody>";
            } else if (tipo == "RigeneraAttributiBase") {
                html += "<thead><tr><th>Nome</th><th>Ordine</th><th>Predefinito</th><th>Stato</th><th><input type='checkbox' id='selectAll' /></th></tr></thead>";
                html += "<tbody>";
            } else if (tipo == "IntegraAttributiBase") {
                html += "<thead><tr><th>Nome</th><th>Ordine</th><th>Predefinito</th><th>Stato</th><th><input type='checkbox' id='selectAll' /></th></tr></thead>";
                html += "<tbody>";
            }

            if (Object.keys(elenco).length > 0) {
                Object.values(elenco).forEach(function (item) {
                    if (tipo == "Categorie") {
                        html += `
                            <tr>
                                <td>${item.nome}</td>
                                <td>
                                    <input type='checkbox' class='form-check-input' data-id='${item.id}' data-tipo='${tipo}'>
                                </td>
                                <td>
                                    <input type='checkbox' class='form-check-inputOpzionale' data-id='${item.opzionale}' data-tipo='${tipo}'>
                                </td>
                            </tr>
                        `;
                    } else if (tipo == "TabelleBase") {
                        html += `
                            <tr>
                                <td>${item.nome}</td>
                                <td>
                                    <div class="d-flex">
                                        <div class="form-check me-3">
                                            <input class="form-check-input" type="radio" name="radio_${item.id}" id="radio_base_${item.id}" value="no">
                                            <label class="form-check-label" for="radio_base_${item.id}">No</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="radio_${item.id}" id="radio_attr_${item.id}" value="si" checked>
                                            <label class="form-check-label" for="radio_attr_${item.id}">Sì</label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <input type='checkbox' class='form-check-input' data-id='${item.id}' data-tipo='${tipo}'>
                                </td>
                            </tr>
                        `;
                    } else if (tipo == "RigeneraAttributiBase") {
                        html += `
                            <tr>
                                <td>${item.nome}</td>
                                <td>
                                    ${item.ordine}
                                </td>
                                <td>
                                    ${item.predefinito}
                                </td>
                                <td>
                                    ${item.stato}
                                </td>
                                <td>
                                    <input type='checkbox' class='form-check-input' data-id='${item.id}' data-tipo='${tipo}' data-ordine='${item.ordine}' data-predefinito='${item.predefinito}' data-stato='${item.stato}'>
                                </td>
                            </tr>
                        `;
                    } else if (tipo == "IntegraAttributiBase") {
                        html += `
                            <tr>
                                <td>${item.nome}</td>
                                <td>
                                    ${item.ordine}
                                </td>
                                <td>
                                    ${item.predefinito}
                                </td>
                                <td>
                                    ${item.stato}
                                </td>
                                <td>
                                    <input type='checkbox' class='form-check-input' data-id='${item.id}' data-tipo='${tipo}' data-ordine='${item.ordine}' data-predefinito='${item.predefinito}' data-stato='${item.stato}'>
                                </td>
                            </tr>
                        `;
                    }
                });
            } else {
                $("#btnSalva").hide();
                // Se l'elenco è vuoto, mostra un messaggio
                html += `
                    <tr>
                        <td colspan="2">` + data["message"] + `</td>
                    </tr>
                `;
            }

            html += "</tbody></table>";
            container.append(html);

            // Event listener per il checkbox "select all" nell'header
            $("#selectAll").on("change", function () {
                let isChecked = $(this).is(":checked");
                // Seleziona o deseleziona tutti i checkbox nel tbody
                $("#modalBody table tbody .form-check-input").prop("checked", isChecked).trigger("change");
            });

            $('#modalAggiungi').on('shown.bs.modal', function () {
                    $(document).off("click", "#btnSalva").on("click", "#btnSalva", function () {

                        let dataToSend = {
                                            "tabella"               : $("#tabella").val(),
                                            "idProdotto"            : $("#idProdotto").val(),
                                            "idCategoria"           : $("#idCategoria").val(),
                                            "idTabellaBase"         : $("#idTabellaBase").val(),
                        };

                        // Recupero di tutti i checkbox presenti nella modale
                        let checkboxData = [];
                        $("#modalBody input[type='checkbox']")
                                                            .not("#selectAll") // Esclude il checkbox dell'intestazione
                                                            .each(function(){
                                                                                checkboxData.push({
                                                                                                    id          : $(this).data("id"),
                                                                                                    tipo        : $(this).data("tipo"),
                                                                                                    checked     : $(this).is(":checked"),

                                                                                                    ordine      : $(this).data("ordine"),
                                                                                                    predefinito : $(this).data("predefinito"),
                                                                                                    stato       : $(this).data("stato"),
                                                                                });
                        });

                        // Recupero di tutti i radio button presenti nella modale
                        let radioData = [];
                        $("#modalBody input[type='radio']")
                                                .each(function(){
                                                    radioData.push({
                                                        id     : $(this).attr("id"),
                                                        name   : $(this).attr("name"),
                                                        value  : $(this).val(),
                                                        checked: $(this).is(":checked")
                                                    });
                                                });

                        // Aggiungo le informazioni di checkbox e radio button all'oggetto data da inviare
                        dataToSend.checkboxes   = checkboxData;
                        dataToSend.radioButtons = radioData;
                        console.log(dataToSend)

                        // Invio dei dati al server tramite AJAX
                        $.ajax({
                                url         : "{{ route('registraConfigurazioneProdotto') }}",
                                type        : "POST",
                                data        : {
                                                dataToSend  : dataToSend,
                                                _token      : '{{ csrf_token() }}'
                                },
                                success     : function(response) {
                                                                    alert("Dati salvati correttamente!");
                                                                    console.log("Risposta dal server:", response);

                                                                    rebuildBootstrapTable(response);

                                },
                                error       : function(xhr, status, error) {
                                                                    alert("Errore nel salvataggio dei dati.");
                                                                    console.error("Errore:", error);
                                                                    jQuery("#modalAggiungi").modal("hide");
                                }
                        });
                        
                    });
            })
            
        } else {
            container.html("<p class='text-danger'>Nessun elemento disponibile.</p>");
        }
    }

    function configuraModale(oggetto){

        var tabella         = oggetto.tabella       ; $("#tabella").val(tabella);
        var idProdotto      = oggetto.idProdotto    ; $("#idProdotto").val(idProdotto);
        var idCategoria     = oggetto.idCategoria   ; $("#idCategoria").val(idCategoria);
        var idTabellaBase   = oggetto.idTabellaBase ; $("#idTabellaBase").val(idTabellaBase);

        let titolo = "";
        let placeholder = "";

        switch (tabella) {
            case "categoria":
                titolo      = "Aggiungi Categoria";
                placeholder = "Nome Categoria";
                break;
            case "tabellaBase":
                titolo      = "Aggiungi Famiglie";
                placeholder = "Nome Tabella";
                break;
            case "rigeneraAttributiBase":
                titolo      = "Rigenera Attributi";
                placeholder = "Nome Attributo";
                break;
            case "integraAttributiBase":
                titolo      = "Integra Attributi";
                placeholder = "Nome Attributo";
                break;
        }

        $.ajax({
                url         : '{{ route('updateConfigurazioneProdotto') }}',
                type        : 'POST',
                data        : {
                                _token              : '{{ csrf_token() }}',
                                tabella             : tabella,
                                idProdotto          : idProdotto,
                                idCategoria         : idCategoria,
                                idTabellaBase       : idTabellaBase
                },
                success     : function(response) {
                                            if (tabella === "categoria") {
                                                popolaModale(response, "Categorie");
                                            } else if (tabella === "tabellaBase") {
                                                popolaModale(response, "TabelleBase");
                                            } else if (tabella === "rigeneraAttributiBase") {
                                                popolaModale(response, "RigeneraAttributiBase");
                                            } else if (tabella === "integraAttributiBase") {
                                                popolaModale(response, "IntegraAttributiBase");
                                            }
                },
                error       : function(xhr, status, error) {
                                    console.log('Errore nella richiesta: ', error);
                }
        });

        // Configurare la modale
        jQuery("#modalAggiungi .modal-title").text(titolo);
        //jQuery("#modalAggiungi input[name='nome']").attr("placeholder", placeholder);
        jQuery("#modalAggiungi").modal("show");
    };

    function generaURL(tabellaBase) {
        return "{{ route('filtraTabellaBase', ['tabellaBase' => '::tabellaBase::'])}}"

            .replace('::tabellaBase::', tabellaBase);
    }

    function loadTabellaBase(row, $tabella, models, model) {
                                fetch('{{ route('loadTabellaBase') }}', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                    },
                                    body: JSON.stringify({
                                                            models      : models,
                                                            model       : model,
                                                            allFields   : false,
                                    })
                                })
                                
                                .then(response => response.json()) 
                                .then(data => {


                                    jsonString = `{${data}}`; 

                                    data = JSON.parse(jsonString);
                                    if (data.columns && Array.isArray(data.columns)) {
                                        initTabellaBase(row, $tabella, model, data.columns);
                                    }
                                })
                                .catch(error => {
                                    console.error('Errore durante la chiamata fetch:', error);
                                });
    }

    function popolaCampi(prodottoCorrente) {
        
            //jQuery('input[name="id"]').val(data.record["id"]);

            Object.keys(prodottoCorrente).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 = prodottoCorrente[key];
                    } else {
                        // Per altri tipi di input, imposta il valore
                        if (prodottoCorrente[key] !== null) {
                            inputElement.value = prodottoCorrente[key];
                        }else{
                            inputElement.value = "";
                        }
                    }
                }
            });

    }

    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 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 responseTabella(res) {
        return res
    } 

    function queryProdottiTipografici(p) {
            

        return {
                    sort          : p.sort,
                    order         : p.order,
                    limit         : p.limit,
                    offset        : p.offset,
                    searchText    : p.search,
        }
    }

    function initProdottiTipografici(dataDefault=""){
            
            $tabellaProdottiTipografici.bootstrapTable('destroy').

            bootstrapTable({

                            {!! $colonneProdottiTipografici !!},
                            

                            url                 : "{{ route('filtraProdottiTipografici') }}",

                            queryParams	        : queryProdottiTipografici,

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

                            onLoadSuccess       : function(data){
                            },
                            onSearch: function (text) {
                                
                            }

            });
    }

    function salvaConfigurazioneOrdine(nuovoOrdine) {
        $.ajax({
            url     : '{{ route("registraConfigurazioneOrdineProdotto") }}',
            method  : 'POST',
            data    : {
                        ordine: nuovoOrdine,
                        _token: $('meta[name="csrf-token"]').attr('content') // Protezione CSRF Laravel
            },
            success : function(response) {
                console.log("Ordini salvati con successo!", response);
            },
            error   : function(xhr, status, error) {
                console.error("Errore nell'aggiornamento dell'ordine:", error);
            }
        });
    }

    function salvaConfigurazioneAttributoBase(campo, recordAttributoBase) {
        $.ajax({
            url     : '{{ route("registraConfigurazionePredefinitoProdotto") }}',
            method  : 'POST',
            data    : {
                        campo               : campo,
                        recordAttributoBase: recordAttributoBase,
                        _token              : $('meta[name="csrf-token"]').attr('content') // Protezione CSRF Laravel
            },
            success : function(response) {
                console.log("Predefinito salvato con successo!", response);
            },
            error   : function(xhr, status, error) {
                console.error("Errore nell'aggiornamento del predefinito:", error);
            }
        });
    }

    function abilitaDragDrop($table) {
        let tbody = $table.find("tbody");
        tbody.sortable({
            axis: "y",
            update: function () {
                                    let nuovoOrdine = [];

                                    tbody.children("tr.rigaCategoria").each(function (index) {

                                        let idCategoria = jQuery(this).data("idcategoria");
                                        nuovoOrdine.push({ prodottoCorrente: prodottoCorrente.id, campo: 'ordineCategoria', idCategoria, nuovoOrdine: index + 1 });
                                        
                                        jQuery(this).find('.ordineCategoria').text(index + 1);

                                    });

                                    salvaConfigurazioneOrdine(nuovoOrdine)

            }
        }).disableSelection();
    }

    function disabilitaDragDrop($table) {
        let tbody = $table.find("tbody");
        tbody.sortable("destroy");
    }

    function getConfigurazioneProdotto(idProdotto) {
        return new Promise((resolve, reject) => {
            var url = "{{ route('getProdottoTipografico', ':idProdotto') }}".replace(':idProdotto', idProdotto);
            
            $.ajax({
                    url         : url, 
                    method      : 'GET',
                    dataType    : 'json',  // Assicura che la risposta sia interpretata come JSON
                    success     : function(response) {
                                    resolve(response);  // Restituisce il JSON
                    },
                    error       : function(xhr, status, error) {
                                    reject(error);  // Gestione errore
                    }
            });
        });
    }

    function deleteRecord(route, tipoRecord, idProdotto, idCategoria, idTabellaBase=null, idAttributoBase=null, csrfToken) {
        
        let msg = ""; 

        if (idTabellaBase === null && idAttributoBase === null) {
            msg = "La cancellazione della categoria associata al prodotto\ncancellerà le famiglie collegate e i relativi attributi!";
        } else if (idTabellaBase !== null && idAttributoBase === null) {
            msg = "La cancellazione della famiglia associata al prodotto\ncancellerà i relativi attributi!";
        }else{
            msg = "La cancellazione dell' attributo non sarà disponibile per il prodotto selezionato!.";
        }

        if (!confirm(msg + "\nSei sicuro di voler proseguire?")) {
            return;
        }

        $.ajax({
                url     : route, 
                method  : "POST",
                data    : {
                            tipoRecord      : tipoRecord,
                            idProdotto      : idProdotto,
                            idCategoria     : idCategoria,
                            idTabellaBase   : idTabellaBase,
                            idAttributoBase : idAttributoBase,
                            _token          : csrfToken
                },
                success : function(response) {
                                    if (response.success) {
                                        // Rimuove la riga dalla tabella BootstrapTable
                                        // Costruisco la tabella da referenziare
                                        if(tipoRecord=="categoria"){
                                            nomeTabella = "#tabellaFamiglieAttributi";
                                            field       = "idCategoria";
                                            recordId    = idCategoria
                                        }else if(tipoRecord=="sottoCategoria"){
                                            nomeTabella = "#subTable_" + idCategoria;
                                            field       = "idTabellaBase";
                                            recordId    = idTabellaBase
                                        }else if(tipoRecord=="attributoBase"){
                                            nomeTabella = "#attrTable_" + idCategoria + "_" + idTabellaBase;
                                            field       = "idAttributoBase";
                                            recordId    = idAttributoBase
                                        }
                                        
                                        let tableData = jQuery(nomeTabella).bootstrapTable('getData');
                                        let fieldExists = tableData.length > 0 && tableData.some(row => row.hasOwnProperty(field));

                                        jQuery(nomeTabella).bootstrapTable('remove', { field: field, values: [recordId.toString()] });

                                    } else {
                                        alert("Errore durante l'eliminazione: " + response.message);
                                    }
                },
                error: function(xhr) {
                    alert("Errore di connessione. Riprova.");
                    console.error(xhr.responseText);
                }
        });
    }

    jQuery('#tabellaProdottiTipografici').on('click-row.bs.table', function (e, row, $element) {
        prodottoCorrente = row;
        //configurazioneProdotto = row.configurazione;

        // recupero la configurazione del prodotto selezionato
        getConfigurazioneProdotto(row.id)
                .then(response => {

                    //console.log("JSON ricevuto:", response.configurazione);
                    configurazioneProdotto = response.configurazione
                    jQuery("#spanRecordCorrente").text(prodottoCorrente.nome);
        
                    // Distrugge e ricrea la tabella delle categorie
                    jQuery("#tabellaFamiglieAttributi").bootstrapTable('destroy').bootstrapTable({


                        columns     : [
                                        {   field: 'nomeCategoria',   title: 'Categoria', sortable: true },
                                        {   field: 'ordineCategoria', title: 'Ordine', sortable: true, class: 'ordineCategoria' },

                                        {   field: 'azioniCategoria',
                                            title: '',
                                            formatter: function(value, riga, index) {
                                                            return `<button class="btn btn-danger btn-sm" 

                                                                            onclick="deleteRecord('{{ route('deleteConfigurazioneProdotto') }}', 
                                                                                        'categoria', 
                                                                                        ${row.id}, 
                                                                                        ${riga.idCategoria},
                                                                                        null,
                                                                                        null,
                                                                                        '{{ csrf_token() }}')">

                                                                        <i class="bi bi-trash"></i>
                                                                    </button>`;
                                            }
                                        }
                        ],
                        rowAttributes: function(row, index) {
                                            return {
                                                'data-ordine'       : row.ordineCategoria,
                                                'data-idcategoria'  : row.idCategoria
                                            };
                        },
                        rowStyle    : function (row, index) { 
                                        return { classes: "rigaCategoria"}; 
                        },
                        idField     : 'ordineCategoria', // Imposta l'ID univoco per ogni riga
                        uniqueId    : 'ordineCategoria', // Rende l'ID univoco per ogni riga

                        data        : getCategorie(configurazioneProdotto ?? []),

                        detailView  : true,
                        onExpandRow : function (index, row, $detail) {
                                                disabilitaDragDrop($tabellaFamiglieAttributi); // Disabilita Drag & Drop
                                                buildSubTable(row, $detail);
                        },
                        onCollapseRow: function (index, row, $detail) {
                            abilitaDragDrop($tabellaFamiglieAttributi);
                        },
                        onPostHeader: function () {
                                                        let dataToSend = {
                                                                            "tabella"               : "categoria",
                                                                            "idProdotto"            : row.id,
                                                                            "idCategoria"           : null,
                                                                            "idTabellaBase"         : null
                                                        };

                                                        jQuery("#tabellaFamiglieAttributi thead th[data-field='azioniCategoria'] .th-inner").html(`
                                                            <button id="btnAggiungiCategoria" class="btn btn-success btn-sm btnModal">
                                                                <i class="bi bi-plus-circle"></i>
                                                            </button>
                            `                          );

                                                        jQuery("#tabellaFamiglieAttributi" + " #btnAggiungiCategoria").on("click", function() {
                                                            configuraModale(dataToSend);
                                                        });
                        }

                    });
                    abilitaDragDrop($tabellaFamiglieAttributi);
                })
                .catch(error => {
                    console.error("Errore nella richiesta:", error);
                });

       
    });

    // Funzione per ottenere le categorie dal JSON
    function getCategorie(configurazione) {
        let categorie = [];
        for (let key in configurazione.categorie) {
            let categoria = configurazione.categorie[key];
            categorie.push({
                            idCategoria     : categoria.idCategoria,
                            nomeCategoria   : categoria.nomeCategoria,
                            ordineCategoria : categoria.ordineCategoria,
                            tabelleBase     : categoria.tabelleBase
            });
        }
        return categorie;
    }

    // Funzione per costruire la sotto-tabella delle tabelle base
    function buildSubTable(row, $detail) {
       
        let tabelleBase = Object.values(row.tabelleBase || {});
        
        // if (tabelleBase.length === 0) {
        //     $detail.html('<p class="text-muted">Nessuna tabella disponibile</p>');
        //     return;
        // }

        let $subTable = jQuery('<table id="subTable_'+row.idCategoria+'"></table>');
        $detail.append($subTable);

        $subTable.bootstrapTable({
            columns     : [
                            { field: 'idTabellaBase',           title: 'Id Tabella Base', sortable: true, visible:false},
                            { field: 'nomeTabella',             title: 'Tabella Base', sortable: true },
                            { field: 'ordineTabellaBase',       title: 'Ordine', sortable: true, class: 'ordineTabellaBase' },
                           
                            {   field: 'azioniTabellaBase',
                                title: '',
                                formatter: function(value, riga, index) {
                                                return `<button class="btn btn-danger btn-sm" 

                                                                onclick="deleteRecord('{{ route('deleteConfigurazioneProdotto') }}', 
                                                                            'sottoCategoria', 
                                                                            ${prodottoCorrente.id}, 
                                                                            ${row.idCategoria},
                                                                            ${riga.idTabellaBase},
                                                                            null,
                                                                            '{{ csrf_token() }}')">

                                                            <i class="bi bi-trash"></i>
                                                        </button>`;
                                }
                            }
            ],
            rowAttributes: function(rowNew, index) {
                                return {
                                    'data-ordine'           : rowNew.ordineTabellaBase,
                                    'data-idtabellabase'    : rowNew.idTabellaBase,
                                    'data-idcategoria'      : row.idCategoria
                                };
            },
            rowStyle: function (row, index) { 
                return { classes: "rigaTabellaBase"}; 
            },
            idField     : 'ordineTabellaBase', // Imposta l'ID univoco per ogni riga
            uniqueId    : 'ordineTabellaBase', // Rende l'ID univoco per ogni riga
            data        : tabelleBase,
            detailView  : true,
            onExpandRow : function (index, rowSubTable, $subDetail) {
                            disabilitaDragDrop($subTable);
                            buildAttributesTable(row, rowSubTable, $subDetail);
            },
            onCollapseRow: function (index, row, $detail) {
                abilitaDragDrop($subTable);
            },
            onPostHeader: function () {

                                            let dataToSend = {
                                                                "tabella"               : "tabellaBase",
                                                                "idProdotto"            : prodottoCorrente.id,
                                                                "idCategoria"           : row.idCategoria,
                                                                "idTabellaBase"         : null
                                            };

                                            jQuery("#subTable_" + row.idCategoria + " thead th[data-field='azioniTabellaBase'] .th-inner").html(`
                                                <button id="btnAggiungiTabellaBase" class="btn btn-success btn-sm btnModal">
                                                    <i class="bi bi-plus-circle"></i>
                                                </button>
                                            `);

                                            jQuery("#subTable_" + row.idCategoria + " #btnAggiungiTabellaBase").on("click", function() {
                                                configuraModale(dataToSend);
                                            });
            }
        });

        $subTable.find('tbody').sortable({
            axis        : "y",
            update      : function () {
                                        let nuovoOrdine = [];
                                        $subTable.find("tbody").children("tr.rigaTabellaBase").each(function (index) {
                                            let id = jQuery(this).data("index");

                                            let idCategoria = jQuery(this).data("idcategoria");
                                            let idTabellaBase = jQuery(this).data("idtabellabase");
                                            nuovoOrdine.push({ prodottoCorrente: prodottoCorrente.id, campo: 'ordineTabellaBase', idCategoria, idTabellaBase, nuovoOrdine: index + 1 });
                                            
                                            jQuery(this).find('.ordineTabellaBase').text(index + 1);

                                        });
                                        
                                        salvaConfigurazioneOrdine(nuovoOrdine);

            }
        }).disableSelection();
    }

    // Funzione per costruire la tabella degli attributi
    function buildAttributesTable(rowCategoria, row, $subDetail) {
        let attributi = row.attributi || [];

        // if (attributi.length === 0) {
        //     $subDetail.html('<p class="text-muted">Nessun attributo disponibile</p>');
        //     return;
        // }

        let $attrTable = jQuery('<table id="attrTable_'+rowCategoria.idCategoria+'_'+row.idTabellaBase+'"></table>');
        $subDetail.append($attrTable);
        $attrTable.bootstrapTable({
            columns: [
                        { field: 'altriCampi.nomeAttributo',        title: 'Attributo', sortable: true },
                        { 
                            field           : 'altriCampi.predefinito',        
                            title           : 'Predefinito', 
                            sortable        : true, 
                            formatter       : function(value, riga, index) {
                                                        return `
                                                            <input type="radio" name="predefinito_${row.mysqlTabella}" class="predefinitoRadio" 
                                                                data-id="${riga.altriCampi.idAttributoBase}" 
                                                                value="1" ${value == 1 ? 'checked' : ''} />
                                                        `;
                            }
                        },
                        {
                            field           : 'altriCampi.stato',
                            title           : 'Stato',
                            sortable        : true,
                            formatter       : function(value, riga, index) {
                                                        return `
                                                            <input type="checkbox" class="statoCheckbox" 
                                                                data-id="${riga.altriCampi.idAttributoBase}" 
                                                                ${value == 1 ? 'checked' : ''} />
                                                        `;
                            }
                        },
                        {   field           : 'altriCampi.ordineAttributoBase',  title: 'Ordine', sortable: true, class: 'ordineAttributoBase' },
                        {   field           : 'azioniAttributoBase',
                            title           : '',
                            formatter       : function(value, rigaAttributo, index) {
                                                return `<button class="btn btn-danger btn-sm" 

                                                                onclick="deleteRecord('{{ route('deleteConfigurazioneProdotto') }}', 
                                                                            'attributoBase', 
                                                                            ${prodottoCorrente.id}, 
                                                                            ${rowCategoria.idCategoria},
                                                                            ${row.idTabellaBase},
                                                                            ${rigaAttributo.altriCampi.idAttributoBase},
                                                                            '{{ csrf_token() }}')">

                                                            <i class="bi bi-trash"></i>
                                                        </button>`;
                            }
                        }
            ],
            rowAttributes: function(rowNew, index) {
                                return {
                                        'data-ordine'           : rowNew.ordineAttibutoBase,
                                        'data-idcategoria'      : rowCategoria.idCategoria,
                                        'data-idtabellabase'    : row.idTabellaBase,
                                        'data-idattributobase'  : rowNew.idAttributoBase
                                };
            },
            rowStyle: function (row, index) { 
                return { classes: "rigaAttributoBase"}; 
            },
            idField: 'altriCampi.ordineAttributoBase',
            uniqueId: 'altriCampi.ordineAttributoBase',
            onExpandRow: function (index, row, $subDetail) {
                disabilitaDragDrop($attrTable);
            },
            onCollapseRow: function (index, row, $detail) {
                abilitaDragDrop($attrTable);
            },
            onPostHeader: function () {
                                            jQuery("#attrTable_" + rowCategoria.idCategoria + '_' + row.idTabellaBase + " thead th[data-field='azioniAttributoBase'] .th-inner").html(`
                                                <button id="btnIntegraAttributiBase" class="btn btn-success btn-sm btnModal">
                                                    <i class="bi bi-database-add"></i>
                                                </button>
                                                <button id="btnRigeneraAttributiBase" class="btn btn-success btn-sm btnModal">
                                                    <i class="bi bi-arrow-repeat"></i>
                                                </button>
                                            `);
                                            let integraToSend = {
                                                                "tabella"               : "integraAttributiBase",
                                                                "idProdotto"            : prodottoCorrente.id,
                                                                "idCategoria"           : rowCategoria.idCategoria,
                                                                "idTabellaBase"         : row.idTabellaBase
                                            };
                                            jQuery("#attrTable_" + rowCategoria.idCategoria + '_' + row.idTabellaBase + " #btnIntegraAttributiBase").on("click", function() {                                                
                                                configuraModale(integraToSend);
                                            });
                                            let rigeneraToSend = {
                                                                "tabella"               : "rigeneraAttributiBase",
                                                                "idProdotto"            : prodottoCorrente.id,
                                                                "idCategoria"           : rowCategoria.idCategoria,
                                                                "idTabellaBase"         : row.idTabellaBase
                                            };
                                            jQuery("#attrTable_" + rowCategoria.idCategoria + '_' + row.idTabellaBase + " #btnRigeneraAttributiBase").on("click", function() {
                                                configuraModale(rigeneraToSend);
                                            });

            },
            data: Object.values(attributi)
        });

        $subDetail.find('tbody').sortable({
            axis        : "y",
            update      : function () {
                                        let nuovoOrdine = [];
                                        $subDetail.find("tbody").children("tr.rigaAttributoBase").each(function (index) {
                                            let id = jQuery(this).data("index");

                                            let idCategoria         = jQuery(this).data("idcategoria");
                                            let idTabellaBase       = jQuery(this).data("idtabellabase");
                                            let idAttributoBase     = jQuery(this).data("idattributobase");

                                            nuovoOrdine.push({ prodottoCorrente: prodottoCorrente.id, idCategoria,  idTabellaBase, idAttributoBase, campo: 'ordineAttributoBase', nuovoOrdine: index + 1 });
                                            jQuery(this).find('.ordineAttributoBase').text(index + 1);

                                        });
                                        salvaConfigurazioneOrdine(nuovoOrdine);
            }
        }).disableSelection();

        $subDetail.on('change', '.statoCheckbox', function() {
            
            let checkbox        = $(this);
            let idRecord        = checkbox.data('id');
            let nuovoStato      = checkbox.is(':checked') ? 1 : 0;
            let recordStato     = [];
                recordStato.push({ prodottoCorrente: prodottoCorrente.id, categoriaCorrente: rowCategoria.idCategoria, tabellaBaseCorrente: row.idTabellaBase, campo: 'stato', idRecord: idRecord, stato: nuovoStato});

            salvaConfigurazioneAttributoBase('stato', recordStato);
        });

        $subDetail.on('change', '.predefinitoRadio', function() {
            let nuovoPredefinito = [];
            
            // Itera su tutte le righe della tabella dentro $subDetail
            $subDetail.find("tbody").children("tr.rigaAttributoBase").each(function (index) {
                
                // Seleziona il radio button con valore 1 all'interno della riga corrente
                let radioButton = $(this).find('.predefinitoRadio[value="1"]');
                
                // Verifica se il radio button è selezionato
                if (radioButton.prop('checked')) {
                    // Preleva il data-id associato al radio button selezionato
                    let idRecord = radioButton.data('id');
                    nuovoPredefinito.push({ prodottoCorrente: prodottoCorrente.id, categoriaCorrente: rowCategoria.idCategoria, tabellaBaseCorrente: row.idTabellaBase, campo: 'predefinito', idRecord: idRecord});

                }
            });

            salvaConfigurazioneAttributoBase('predefinito', nuovoPredefinito);
        });
        

    }

    jQuery(document).ready(function() {
        
        initProdottiTipografici();
        

    })

</script>

@endpush