@extends('layouts.app')

@push('head-scripts')
@endpush 


@section('content')

    @php
            
    @endphp


    <style>
            .tab-fieldset {
                border: 1px solid #dee2e6;
                border-radius: 4px;
                padding: 12px;
                margin-bottom: 15px;
                position: relative;
            }

            .fieldset-legend {
                font-size: 13px;
                font-weight: 600;
                color: #495057;
                padding: 0 8px;
                position: absolute;
                top: -8px;
                left: 10px;
                margin: 0;
            }

            .fieldset-legend::before {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 2px;
                background: #fff;
                z-index: -1;
                transform: translateY(-50%);
            }

            .select-container {
                display: flex;
                align-items: flex-start;
                gap: 3px;
                flex-wrap: nowrap;
                margin-bottom: 15px;
            }

            .select-sm {
                font-size: 0.85rem;
                padding: 2px 6px;
                height: 26px;
                min-width: 160px;
                max-width: 200px;
            }

            .small-label {
                font-size: 0.75rem;
                font-weight: 600;
                color: #495057;
                margin-bottom: 2px;
                text-align: left;
            }

            #categoryTabs {
                width: 220px;
            }

            .nav-pills .nav-link {
                padding: 6px 8px;
                font-size: 0.85rem;
                text-align: left;
                white-space: normal;
                word-wrap: break-word;
                min-height: 32px;
                display: flex;
                align-items: center;
            }

            #categoryTabs .nav-item {
                margin-bottom: 1px;
            }

            .tab-content {
                margin-top: -5px;
            }

            #tabellaDistintaPrezzi {
                font-size: 0.85rem;
            }

            #tabellaDistintaPrezzi thead th {
                padding: 8px 10px;
                background-color: #f8f9fa;
                font-weight: 600;
                text-align: left;
            }

            #tabellaDistintaPrezzi tbody td {
                padding: 6px 10px;
                text-align: left;
            }

            .detail-view {
                padding: 8px;
            }

            .detail-view ul {
                margin: 0;
                padding: 6px 0;
            }

            .detail-view li {
                padding: 2px 0;
                font-size: 0.85rem;
                text-align: left;
            }

            .detail-view strong {
                font-weight: 600;
                margin-right: 6px;
            }

            .toggle-btn {
                padding: 0 4px !important;
                margin-left: 4px;
            }

            .detail-view ul ul {
                border-left: 1px solid #dee2e6;
                margin-left: 8px;
                padding-left: 12px;
            }

            .detail-view li:has(strong:contains("Totale")), 
            .detail-view li:has(strong:contains("totale")) {
                padding: 6px 8px;
                margin: 2px 0;
            }

            .row {
                margin-left: -8px;
                margin-right: -8px;
            }

            .col-md-2, .col-md-5 {
                padding-left: 8px;
                padding-right: 8px;
            }

            /* Stile per il toggle della tabella principale */
            .detail-toggle {
                font-size: 0.85rem;
                color: #495057;
                cursor: pointer;
                padding: 0 4px;
            }

            .detail-toggle:hover {
                color: #0d6efd;
            }

            #imagePreviewContainer {
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto; /* Dimensioni automatiche */
                max-width: 100%; /* Non supera il contenitore */
                max-height: 100%; /* Non supera il contenitore */
                border: 1px solid #ddd;
                overflow: hidden;
            }

            #imagePreview {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                transition: all 0.3s ease-in-out;
            }
    </style>
    
    <div class="container-fluid">
        <!-- Barra di selezione iniziale con select più compatte -->
        <div class="row mb-2 select-container">
            <div class="col-md-12">
                <div class="select-container">
                    <div>
                        <label class="small-label">Tipo Prodotto</label>
                        <select id="tipoProdotto" class="form-select select-sm">
                            <option value="">Seleziona...</option>
                            @foreach($categoryTree as $tipoId => $tipo)
                                <option value="{{ $tipoId }}">{{ $tipo['nome'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="small-label">Categoria</label>
                        <select id="categoriaTipoProdotto" class="form-select select-sm" disabled>
                            <option value="">Seleziona...</option>
                        </select>
                    </div>
                    <div>
                        <label class="small-label">Prodotto</label>
                        <select id="prodottiCategoria" class="form-select select-sm" disabled>
                            <option value="">Seleziona...</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- Struttura dinamica -->
        <div id="productData" class="">
            <div class="row">
                <div class="col-md-3">
                    <ul class="nav flex-column nav-pills" id="categoryTabs"></ul>
                </div>
                <div class="col-md-5">
                    <div class="tab-content" id="categoryContent"></div>
                </div>
                <div class="col-md-4">
                    <div id = "divDistintaPrezzi" class="tab-content"></div>
                </div>
            </div>
        </div>
    </div>



@endsection


@push('scripts')


    <script>

            let categoryTree    = @json($categoryTree);
            let vincoli         = @json($vincoli);
            let datiProdotto   = null;
            //console.log("Struttura vincoli originale:", vincoli);

            // **Se non è un array, convertiamolo manualmente**
            if (!Array.isArray(vincoli)) {
                    try {
                        vincoli = JSON.parse(vincoli);
                        //console.log("Vincoli dopo il parsing:", vincoli);
                    } catch (e) {
                        console.error("Errore nel parsing di vincoli:", e);
                        vincoli = [];
                    }
            }
            
            // Modifichiamo la gestione dei vincoli per essere più sicura
            vincoli = (vincoli || []).map(regola => {
                if (!regola || typeof regola !== 'object') return { caratteristiche: [] };
                return {
                    caratteristiche: Array.isArray(regola.caratteristiche) ? regola.caratteristiche : 
                                    typeof regola.caratteristiche === 'object' ? [regola.caratteristiche] : []
                };
            });
            //console.log("Vincoli dopo la trasformazione:", vincoli);

            function dettagliFormatter(index, row) {
                if (!row.zoomLavorazione) return "Nessun dettaglio disponibile";

                function formatObject(obj, level = 0, parentIndex = '') {
                    let output = `<ul class='list-unstyled' style='margin-left: ${level * 20}px;'>`;

                    Object.entries(obj).forEach(([key, value]) => {
                        let uniqueId = `toggle-${index}-${parentIndex}-${key.replace(/\s+/g, '-')}`;

                        if (typeof value === "object" && value !== null) {
                            output += `
                                <li class="py-1">
                                    <div class="d-flex align-items-center">
                                        <strong class="text-truncate">${key}:</strong> 
                                        <button class="btn btn-link p-0 toggle-btn" type="button" data-bs-toggle="collapse" data-bs-target="#${uniqueId}">
                                            <i class="bi bi-chevron-down"></i>
                                        </button>
                                    </div>
                                    <div class="collapse" id="${uniqueId}">
                                        ${formatObject(value, level + 1, uniqueId)}
                                    </div>
                                </li>`;
                        } else {
                            // Formatta i numeri se il valore è numerico
                            let displayValue = !isNaN(value) && typeof value === 'number' 
                                ? value.toLocaleString('it-IT', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
                                : value;

                            // Gestione speciale per la chiave "preview"
                            if (key === "preview" && value) {
                                output += `
                                    <li class="py-1">
                                        <strong>${key}:</strong>
                                        <div class="mt-2">
                                            <img src="${value}" alt="Preview" class="img-thumbnail" style="max-width: 200px;">
                                        </div>
                                    </li>`;
                            } else {
                                output += `<li class="py-1"><strong>${key}:</strong> ${displayValue}</li>`;
                            }
                        }
                    });

                    output += "</ul>";
                    return output;
                }

                return formatObject(row.zoomLavorazione, 0, index);
            }
            function aggiornaTabellaDistintaPrezzi(dati) {
                console.log("Dati in ingresso:", dati);
                datiProdotto = dati.Copertina;
                let $table = $('#tabellaDistintaPrezzi');
                
                // Salva lo stato delle righe espanse e dei collapse
                let expandedSections = [];
                let expandedGroups = [];
                let expandedDetails = {};
                
                // Salva lo stato di tutte le righe espanse
                $table.find('tr').each(function() {
                    let $row = $(this);
                    
                    // Controlla se è una riga principale (sezione)
                    if ($row.next().hasClass('detail-view')) {
                        let sectionIndex = $row.data('index');
                        if (sectionIndex !== undefined) {
                            expandedSections.push(sectionIndex);
                            
                            // Trova le sotto-tabelle delle sezioni
                            let $sectionDetail = $row.next().find('table');
                            if ($sectionDetail.length) {
                                $sectionDetail.find('tr').each(function() {
                                    let $groupRow = $(this);
                                    if ($groupRow.next().hasClass('detail-view')) {
                                        let groupIndex = $groupRow.data('index');
                                        if (groupIndex !== undefined) {
                                            expandedGroups.push(`${sectionIndex}-${groupIndex}`);
                                            
                                            // Salva lo stato dei dettagli (terzo livello)
                                            let $detailsContainer = $groupRow.next().find('.detail-view');
                                            $detailsContainer.find('.collapse').each(function() {
                                                let $collapse = $(this);
                                                let collapseId = $collapse.attr('id');
                                                let fullIndex = `${sectionIndex}-${groupIndex}`;
                                                if (!expandedDetails[fullIndex]) {
                                                    expandedDetails[fullIndex] = [];
                                                }
                                                if ($collapse.hasClass('show')) {
                                                    expandedDetails[fullIndex].push(collapseId);
                                                }
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    }
                });

                let sezioni = Object.keys(dati).map(sezioneKey => {
                let sezione = dati[sezioneKey];
                if (!sezione) {
                    console.warn(`Sezione ${sezioneKey} è undefined o null`);
                    return null;
                }

                let lavorazioni = Object.entries(sezione)
                    .filter(([_, lavorazione]) => lavorazione !== null)
                    .map(([key, lavorazione]) => ({
                        descrizione: lavorazione.descrizione || key,
                        costoTotale: lavorazione.costoTotale,
                        zoomLavorazione: lavorazione.zoomLavorazione || {}
                    }));

                // Se non ci sono lavorazioni, escludi la sezione
                if (lavorazioni.length === 0) {
                    return null;
                }

                let costoTotaleSezione = lavorazioni.reduce((acc, lavorazione) => {
                    if (lavorazione && typeof lavorazione.costoTotale === 'number') {
                        return acc + lavorazione.costoTotale;
                    }
                    return acc;
                }, 0);

                return {
                    sezione: sezioneKey,
                    costoTotaleSezione: costoTotaleSezione,
                    lavorazioni: lavorazioni
                };
            }).filter(sezione => sezione !== null);

                // Ricostruisce la tabella principale
                $table.bootstrapTable('destroy').bootstrapTable({
                    data: sezioni,
                    detailView: true,
                    detailFormatter: function(index, row) {
                        // Crea una sotto-tabella per le lavorazioni della sezione
                        let $subTable = $('<table></table>');
                        
                        $subTable.bootstrapTable({
                            data: row.lavorazioni,
                            detailView: true,
                            detailFormatter: function(subIndex, subRow) {
                                // Usa dettagliFormatter ma mantieni il riferimento agli stati salvati
                                let detailHtml = dettagliFormatter(subIndex, subRow);
                                let $detail = $('<div>').html(detailHtml);
                                let fullIndex = `${index}-${subIndex}`;
                                
                                if (expandedDetails[fullIndex]) {
                                    expandedDetails[fullIndex].forEach(id => {
                                        $detail.find(`#${id}`).addClass('show');
                                        $detail.find(`[data-bs-target="#${id}"] i`)
                                            .removeClass('bi-chevron-down')
                                            .addClass('bi-chevron-up');
                                    });
                                }
                                
                                return $detail.html();
                            },
                            columns: [
                                {
                                    field: 'descrizione',
                                    title: 'Lavorazione'
                                },
                                {
                                    field: 'costoTotale',
                                    title: 'Costo Totale (€)',
                                    formatter: (value) => typeof value === 'number' ? value.toFixed(6) : value,
                                    align: 'right'
                                }
                            ],
                            onPostBody: function() {
                                // Ripristina le righe espanse per questo livello
                                let parentIndex = index;
                                expandedGroups.forEach(groupKey => {
                                    let [pIndex, childIndex] = groupKey.split('-');
                                    if (pIndex === String(parentIndex)) {
                                        $(this).bootstrapTable('expandRow', parseInt(childIndex));
                                    }
                                });
                            }
                        });
                        
                        return $subTable;
                    },
                    columns: [
                        {
                            field: 'sezione',
                            title: 'Sezione'
                        },
                        {
                            field: 'costoTotaleSezione',
                            title: 'Costo Totale Sezione (€)',
                            formatter: (value) => value.toFixed(6),
                            align: 'right'
                        }
                    ],
                    onExpandRow: function(index, row, $detail) {
                        let $subTable = $detail.find('table');
                        
                        // Gestione espansione delle lavorazioni
                        $subTable.on('expand-row.bs.table', function(e, subIndex, subRow) {
                            let fullIndex = `${index}-${subIndex}`;
                            let $subDetail = $(this).find(`tr[data-index="${subIndex}"]`).next().find('.detail-view');
                            
                            // Ripristina lo stato dei dettagli del terzo livello
                            if (expandedDetails[fullIndex]) {
                                setTimeout(() => {
                                    expandedDetails[fullIndex].forEach(id => {
                                        let $collapse = $subDetail.find(`#${id}`);
                                        if ($collapse.length) {
                                            $collapse.addClass('show');
                                            let $btn = $subDetail.find(`[data-bs-target="#${id}"]`);
                                            if ($btn.length) {
                                                $btn.find('i').removeClass('bi-chevron-down').addClass('bi-chevron-up');
                                            }
                                        }
                                    });
                                }, 100);
                            }

                            // Gestione dei toggle button nei dettagli
                            $subDetail.find('.toggle-btn').off('click').on('click', function() {
                                let $btn = $(this);
                                let $icon = $btn.find('i');
                                let $collapse = $($btn.data('bs-target'));
                                
                                if ($collapse.hasClass('show')) {
                                    $icon.removeClass('bi-chevron-up').addClass('bi-chevron-down');
                                } else {
                                    $icon.removeClass('bi-chevron-down').addClass('bi-chevron-up');
                                }
                            });
                        });
                    },
                    onPostBody: function() {
                        // Ripristina le sezioni espanse
                        setTimeout(() => {
                            expandedSections.forEach(sectionIndex => {
                                $table.bootstrapTable('expandRow', sectionIndex);
                                
                                // Dopo aver espanso la sezione, ripristina le sotto-righe
                                setTimeout(() => {
                                    let $sectionDetail = $table.find(`tr[data-index="${sectionIndex}"]`).next().find('table');
                                    expandedGroups.forEach(groupKey => {
                                        let [parentIndex, childIndex] = groupKey.split('-');
                                        if (parentIndex === String(sectionIndex)) {
                                            $sectionDetail.bootstrapTable('expandRow', parseInt(childIndex));
                                        }
                                    });
                                }, 200);
                            });
                        }, 100);
                    }
                });
            }

            function produzioneProdotto() {
                        
                        dataToSend = getCaratteristicheProdotto();
                        //console.log("🔍 Dati inviati per la produzione:", dataToSend);
                        $.ajax({
                                url: "{{ route('attivaProduzione') }}",
                                type: "POST",
                                data: {
                                    dataToSend: dataToSend,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    aggiornaTabellaDistintaPrezzi(response.data.distintaLavorazione);

                                    aggiornaInfoDorso(1, 4, response.spessoreDorso);
                                },
                                error: function(xhr, status, error) {
                                    console.error("❌ Orrore AJAX:", error);
                                }
                            });



            }

            function getCaratteristicheProdotto(){

                let dataToSend = {
                            "idProdotto"        : $("#prodottiCategoria").val(), // Valore del prodotto selezionato
                            "caratteristiche"   : {}
                        };

                        $(".feature-select").each(function () {
                            let caratteristicaID  = $(this).attr("id"); // Recuperiamo l'ID reale della select
                            

                            let valoreSelezionato = $(this).val(); // Recuperiamo il valore selezionato

                            if (caratteristicaID && valoreSelezionato) {
                                dataToSend["caratteristiche"][caratteristicaID] = valoreSelezionato; // Salviamo nel JSON
                                // console.log("🔍 Caratteristica ID:", caratteristicaID, "Valore:", valoreSelezionato);
                            }
                        });
                    return dataToSend;
            }

            function updatePreview() {
                        
                        dataToSend = getCaratteristicheProdotto();

                        console.log("📤 Dati inviati per la preview:", dataToSend);

                        $.ajax({
                                url: "{{ route('formatoPreview') }}",
                                type: "POST",
                                data: {
                                    dataToSend: dataToSend,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(response) {
                                    if (response.image) {
                                        console.log("✅ Immagine ricevuta:", response.image);
                                        $("#imagePreview").attr("src", response.image);

                                        // **Creiamo un'immagine temporanea per ottenere le dimensioni reali**
                                        let img = new Image();
                                        img.src = response.image;
                                        
                                        img.onload = function() {
                                            let imgWidth = img.width;
                                            let imgHeight = img.height;

                                            console.log("📏 Dimensioni reali dell'immagine:", imgWidth, "x", imgHeight);

                                            let imageElement = $("#imagePreview");
                                            let container = $("#imagePreviewContainer");

                                            // **Aggiorniamo width e height dell'img e del contenitore**
                                            if (response.orientamento === "verticale") {
                                                container.css({
                                                    "width": imgHeight + "px",
                                                    "height": imgWidth + "px"
                                                });
                                                imageElement.css({
                                                    "width": imgHeight + "px",
                                                    "height": imgWidth + "px",
                                                    "transform": "rotate(90deg)" // **Forziamo la rotazione anche via CSS**
                                                });
                                            } else {
                                                container.css({
                                                    "width": imgWidth + "px",
                                                    "height": imgHeight + "px"
                                                });
                                                imageElement.css({
                                                    "width": imgWidth + "px",
                                                    "height": imgHeight + "px",
                                                    "transform": "rotate(0deg)" // **Resettiamo la rotazione**
                                                });
                                            }

                                            console.log("🔄 Contenitore e immagine aggiornati:", container.width(), "x", container.height());
                                        };
                                    } else {
                                        console.error("❌ Errore: Nessuna immagine ricevuta.");
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error("❌ Errore AJAX:", error);
                                }
                        });







            }

            function generaTabsCategorie(categorie) {
                    let first = true;
                    let categoryTabs = $("#categoryTabs").empty();
                    let categoryContent = $("#categoryContent").empty();

                    let divDistintaPrezzi = $("#divDistintaPrezzi").empty();

                        let contenuto = `
                            
                                <fieldset class="tab-fieldset">
                                    <legend class="fieldset-legend">Distinta prezzi</legend>

                                    <div class="row distintaPrezziContainer">
                                        <table 
                                            id="tabellaDistintaPrezzi" 
                                            class="table table-striped table-bordered"
                                            data-toggle="table"
                                            data-detail-view="true"
                                            data-detail-formatter="dettagliFormatter"
                                        >
                                            <thead>
                                                <tr>
                                                    <th data-field="descrizione">Descrizione</th>
                                                    <th data-field="costoTotale" data-align="right">Costo Totale (€)</th>
                                                </tr>
                                            </thead>
                                           
                                        </table>

                                    </div>
                                </fieldset>
                            
                        `;

                        //categoryContent.append(contenuto);
                        divDistintaPrezzi.append(contenuto);

                    $.each(categorie, function(index, categoria) {
                        let activeClass = first ? "active" : "";
                        first = false;
                        
                        // Generiamo il tab laterale
                        categoryTabs.append(`
                            <li class="nav-item">
                                <a class="nav-link ${activeClass}" data-bs-toggle="pill" href="#content-${categoria.idCategoria}">
                                    ${categoria.nomeCategoria}
                                </a>
                            </li>
                        `);

                        // Costruiamo il contenuto della categoria con fieldset e layout a colonne
                        let contenuto = `
                            <div class="tab-pane fade ${activeClass === 'active' ? 'show active' : ''}" id="content-${categoria.idCategoria}">
                                <fieldset class="tab-fieldset" id="${categoria.idCategoria}">
                                    <legend class="fieldset-legend">${categoria.nomeCategoria}</legend>

                                    <div class="row"> <!-- Grid per affiancare le select -->
                        `;

                        // Se ci sono tabelle base, le aggiungiamo
                        if (categoria.tabelleBase && Object.keys(categoria.tabelleBase).length > 0) {
                            $.each(categoria.tabelleBase, function(indexTab, tabella) {
                                contenuto += `
                                    <div class="col-md-6 col-lg-4 mb-2"> <!-- Colonne per distribuire le select -->
                                        <label class="small-label">${tabella.nomeTabella}</label>
                                        <select id="${tabella.mysqlTabella}_${categoria.idCategoria}" class="form-select select-sm feature-select" data-tabella-id="${tabella.idTabellaBase}">
                                `;
                                $.each(tabella.attributi, function(indexAttr, attributo) {
                                    let selected = attributo.altriCampi.predefinito ? "selected" : "";
                                    contenuto += `<option value="${attributo.idAttributoBase}" ${selected}>
                                                    ${attributo.altriCampi.nomeAttributo}
                                                </option>`;
                                });

                                contenuto += `</select></div>`; // Chiudiamo la colonna
                            });
                        } else {
                            contenuto += `<p class="text-muted text-center">Nessuna opzione disponibile.</p>`;
                        }

                        contenuto += `</div></fieldset></div>`; // Chiudiamo la row, il fieldset e il div tab-pane
                        categoryContent.append(contenuto);
                    });

                    // ✅ Controlla se la select Printmanager_CopertinaRifiniture_4 è presente e genera subito le select collegate
                    let rifinitureSelect = $("#Printmanager_CopertinaRifiniture_4");
                    if (rifinitureSelect.length > 0) {
                        let valoreSelezionato = rifinitureSelect.val();
                        aggiornaSelectAlette(valoreSelezionato);
                    }

                    $("#productData").removeClass("d-none"); // Mostriamo la sezione

            }

            function aggiornaSelectAlette(valoreSelezionato) {
                let container = $("#Printmanager_CopertinaRifiniture_4").parent();

                // Se il valore selezionato è '3' (Rifinitura con Alette), crea le select
                if (valoreSelezionato === "3") {

                    $.ajax({
                        url         : "{{ route('getMisureAlette') }}",
                        type        : "POST",
                        dataType    : "json",
                        async       : false,
                        data        : {
                                        dataToSend  : datiProdotto,
                                        _token      : '{{ csrf_token() }}'
                        },
                        success     : function (response) {
                                            // Rimuove eventuali select esistenti
                                            $(".select-aletta").remove();

                                            // Creazione delle select per le Alette
                                            let selectAlette = `
                                                <div class="col-md-6 select-aletta">
                                                    <label for="Printmanager_Alette_4">Dimensioni</label>
                                                    <select id="Printmanager_Alette_4" class="form-select select-sm feature-select "data-tabella-id="1000">
                                                        ${response.alette.map(val => `<option value="${val}">${val} mm</option>`).join("")}
                                                    </select>
                                                </div>`;


                                            // Aggiunge le select dopo la select principale
                                            container.append(selectAlette);
                                        },
                                        error: function (xhr, status, error) {
                                            console.error("Errore caricamento misure alette:", error);
                                        }
                    });
                } else {
                    // Se si sceglie una rifinitura senza alette, rimuove le select aggiunte
                    $(".select-aletta").remove();
                }
            }

            function aggiornaSelectVincolate(caratteristicaSelezionata, valoreSelezionato) {
                //console.log("🔍 Controllo vincoli per:", caratteristicaSelezionata, valoreSelezionato);

                $(".feature-select option").each(function () {
                    $(this).prop("disabled", false).show();
                });

                let regolaAttivata = false;

                vincoli.forEach((regola, index) => {
                    //console.log(`🔎 Analizzando regola ${index + 1}:`, regola);

                    regola.caratteristiche.forEach(car => {
                        //console.log(`➡️ Controllando caratteristica ID: ${car.id} (Tipo: ${typeof car.id}), Opzione: ${car.attributo_id} (Tipo: ${typeof car.attributo_id})`);
                    });

                    let attiva = regola.caratteristiche.some(car => 
                        String(car.id) === String(caratteristicaSelezionata) && String(car.attributo_id) === String(valoreSelezionato)
                    );

                    if (attiva) {
                        regolaAttivata = true;
                        //console.log(`✅ Regola ${index + 1} attivata dalla caratteristica ${caratteristicaSelezionata} (Opzione ${valoreSelezionato})`);

                        regola.caratteristiche.forEach(car => {
                            if (String(car.id) !== String(caratteristicaSelezionata)) {
                                let selectTarget = $(`.feature-select[data-tabella-id="${car.id}"]`);
                                //console.log(`⚠️ Disabilito opzione ${car.attributo_id} su caratteristica ${car.id}`);
                                selectTarget.find(`option[value="${car.attributo_id}"]`).prop("disabled", true).hide();
                            }
                        });
                    } else {
                        //console.log(`❌ Regola ${index + 1} NON attivata dalla selezione attuale`);
                    }
                });

                // **Controllo select rimaste con un solo elemento visibile**
                $(".feature-select").each(function () {
                    let select = $(this);
                    let optionsVisibili = select.find("option:not([disabled])");

                    if (optionsVisibili.length === 1) {
                        let unicoValore = optionsVisibili.val();
                        if (select.val() !== unicoValore) {
                            //console.log(`🔄 Cambio automatico di ${select.attr("id")} a ${unicoValore}`);
                            select.val(unicoValore).trigger("change");
                        }
                    }

                    // **Se la selezione attuale è stata disabilitata, scegliere un altro valore**
                    if (select.find(":selected").prop("disabled")) {
                        let primoDisponibile = select.find("option:not([disabled])").first().val();
                        if (primoDisponibile) {
                            //console.log(`🔄 Cambio selezione di ${select.attr("id")} a ${primoDisponibile}`);
                            select.val(primoDisponibile).trigger("change");
                        }
                    }
                });

                if (!regolaAttivata) {
                    //console.warn(`⚠️ Nessuna regola attivata per la caratteristica ${caratteristicaSelezionata} e opzione ${valoreSelezionato}!`);
                }

                //console.log("🔚 Controllo vincoli completato");
            }

            function aggiornaInfoDorso(idInterno, idCopertina, spessoreDorso) {

                let fieldsetInterno = $(`#${idInterno}`); // 🔍 Troviamo il fieldset corretto
                let fieldsetCopertina = $(`#${idCopertina}`); // 🔍 Troviamo il fieldset corretto

                // 🔥 Se il valore di spessoreDorso è valido
                if (spessoreDorso) {
                    // ✅ Creiamo il blocco solo se non esiste già
                    if (!fieldsetInterno.find('#infoDorso').length) {
                        let html = `
                            <div class="col-sm-12" id="infoDorso"> 
                                <div class="alert alert-warning mt-2"> 
                                    <i class="bi bi-check" id="iconDorso"></i>
                                    <input type="hidden" id="spessoreDorso" value="${spessoreDorso}">
                                    <span id="suggerimentoDorso" style="color:green; font-weight:bold">
                                        Spessore dorso: mm ${spessoreDorso} 
                                    </span> 
                                </div>
                            </div>
                        `;
                        fieldsetInterno.append(html); // 📌 Aggiungiamo al fieldset corretto
                        fieldsetCopertina.append(html); // 📌 Aggiungiamo al fieldset corretto
                    } else {
                        // 🔄 Se già esiste, aggiorniamo solo il valore
                        fieldsetInterno.find('#spessoreDorso').val(spessoreDorso);
                        fieldsetInterno.find('#suggerimentoDorso').text(`Spessore dorso: mm ${spessoreDorso}`);

                        fieldsetCopertina.find('#spessoreDorso').val(spessoreDorso);
                        fieldsetCopertina.find('#suggerimentoDorso').text(`Spessore dorso: mm ${spessoreDorso}`);

                    }
                } else {
                    // ❌ Se il valore non esiste, rimuoviamo il blocco
                    fieldsetInterno.find('#infoDorso').remove();
                    fieldsetCopertina.find('#infoDorso').remove();
                }
            }


            $(document).ready(function () {

                // Gestione Categoria al cambio del Tipo Prodotto
                $("#tipoProdotto").on("change", function () {
                    let tipoId = $(this).val();
                    let categoriaSelect = $("#categoriaTipoProdotto").html('<option value="">Seleziona...</option>').prop("disabled", true);
                    let prodottiSelect = $("#prodottiCategoria").html('<option value="">Seleziona...</option>').prop("disabled", true);

                    if (tipoId && categoryTree[tipoId]) {
                        categoryTree[tipoId].sottocategorie.forEach(cat => {
                            categoriaSelect.append(`<option value="${cat.id}">${cat.nome}</option>`);
                        });
                        categoriaSelect.prop("disabled", false);
                    }
                });

                // Gestione Prodotto al cambio della Categoria
                $("#categoriaTipoProdotto").on("change", function () {
                    let categoriaId = $(this).val();
                    let prodottiSelect = $("#prodottiCategoria").html('<option value="">Seleziona...</option>').prop("disabled", true);
                    let tipoId = $("#tipoProdotto").val();

                    if (categoriaId && tipoId) {
                        let categoria = categoryTree[tipoId].sottocategorie.find(c => c.id == categoriaId);
                        if (categoria && categoria.prodotti.length > 0) {
                            categoria.prodotti.forEach(prod => {
                                prodottiSelect.append(`<option value="${prod.id}">${prod.nome}</option>`);
                            });
                            prodottiSelect.prop("disabled", false);
                        }
                    }
                });

                // Carica la vista del prodotto selezionato
                $("#prodottiCategoria").on("change", function () {
                    let productId = $(this).val();
                    if (!productId) {
                        $("#productData").addClass("d-none");
                        return;
                    }
                        $("#categoryTabs").empty();
                        $("#categoryContent").empty();

                    $.ajax({
                                url         : "{{ route('getProdottoTipografico', ['idProdotto' => 'idProdotto', 'stato' => 'stato']) }}".replace('idProdotto', productId).replace('stato', 'attivi'),
                                method      : "GET",

                                dataType    : 'json',
                                success     : function(response) {
                                                //console.log("JSON ricevuto:", response);

                                                // Controlliamo se 'configurazione' è un oggetto valido
                                                if (!response || !response.configurazione || !response.configurazione.categorie) {
                                                    console.error("Struttura JSON non valida!", response);
                                                    return;
                                                }
                                                // **Verifica che 'configurazione' e 'categorie' siano definiti prima di procedere**
                                                if (!response || typeof response !== "object") {
                                                        console.error("Errore: la risposta non è un oggetto valido!", response);
                                                        return;
                                                }

                                                if (!response.configurazione || !response.configurazione.categorie) {
                                                    console.error("Errore: 'configurazione' o 'categorie' mancanti nella risposta JSON!", response);
                                                    return;
                                                }
                                                
                                                let categorie = Object.values(response.configurazione.categorie); // Convertiamo in array se necessario


                                                //console.log("Categorie estratte:", categorie);

                                                generaTabsCategorie(categorie);

                                                // **Esegui aggiornamento vincoli dopo la creazione delle select**
                                                setTimeout(() => {
                                                    $(".feature-select").each(function () {
                                                        let selectChanged = $(this);
                                                        let valoreSelezionato = selectChanged.val();
                                                        let caratteristicaSelezionata = selectChanged.data("tabella-id"); // Usare data-tabella-id

                                                        //console.log(`Cambiato: Caratteristica ${caratteristicaSelezionata}, Opzione ${valoreSelezionato}`);

                                                        aggiornaSelectVincolate(caratteristicaSelezionata, valoreSelezionato);
                                                    });
                                                }, 500); // Timeout per assicurarsi che gli elementi siano stati creati


                                               //updatePreview();

                                               produzioneProdotto();
                                }
                        });

                });


                


                $(document).on("change", ".feature-select", function () {
                    let selectChanged = $(this);
                    // console.log(selectChanged);
                    let valoreSelezionato = selectChanged.val();
                    let caratteristicaSelezionata = selectChanged.data("tabella-id"); // Usare data-tabella-id

                    //console.log(`Cambiato: Caratteristica ${caratteristicaSelezionata}, Opzione ${valoreSelezionato}`);

                    // Controlla se la select delle alette è presente e ha il valore '2'
                    let aletteSelect = $("#Printmanager_CopertinaRifiniture_4");
                    // console.log(aletteSelect.length,caratteristicaSelezionata,valoreSelezionato)
                    if ( (aletteSelect.length > 0)  && (
                                ( 
                                    selectChanged.attr("id") == "Printmanager_FormatiFinali_1" ||
                                    selectChanged.attr("id") == "Printmanager_Supporti_1" ||
                                    selectChanged.attr("id") == "Printmanager_Grammature_4" ||
                                    selectChanged.attr("id") == "Printmanager_NumeroFacciate_1" ||
                                    selectChanged.attr("id") == "Printmanager_Grammature_1" ||
                                    selectChanged.attr("id") == "Printmanager_CopertinaRifiniture_4"
                                )
                        )
                    ){
                        a=aggiornaSelectAlette(aletteSelect.val());
                    }
                    
                    aggiornaSelectVincolate(caratteristicaSelezionata, valoreSelezionato);

                    produzioneProdotto();

                    //updatePreview()
                });

            })
            
    </script>

@endpush