@extends('layouts.app')

@push('head-scripts')

<style>
        
    /* Contenitore per il select e lo span */
    .select-container {
        display: flex;
        align-items: center; /* Allinea verticalmente gli elementi */
        gap: 10px; /* Spazio tra il select e lo span */
    }

    /* Stile dello span */
    .info-span {
        display: inline-block;
        background-color: #f0f8ff; /* Colore di sfondo (azzurro chiaro) */
        color: #333; /* Colore del testo */
        padding: 5px 10px; /* Spaziatura interna */
        border-radius: 5px; /* Angoli arrotondati */
        font-size: 0.9rem;
        border: 1px solid #ccc; /* Bordo sottile */
        white-space: nowrap; /* Evita la rottura del testo su più righe */
    }

    .font-small {
        font-size: 0.85rem; /* Puoi regolare il valore per ottenere la dimensione desiderata */
    }

    .monospace-font {
        
    }
    
    .section-title {
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    }

    .data-grid {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-top: 10px;
    }

    fieldset {
        border: 1px solid #ccc;
        padding: 10px;
    }
    
    /* Stile specifico per button, se necessario */
    button.legend {
        background-color: #d4f1f9;
        color: #333;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1em; /* Più piccolo rispetto al legend */
    }

    /* Contenitore principale per il legend */
    .legend-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #d4f1f9; /* Colore celeste */
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 1rem;
        font-size: 1rem; /* Font omogeneo */
    }

    /* Legend che si adatta all'intero contenitore */
    .legend-container legend {
        margin: 0;
        padding: 0;
        font-size: inherit; /* Stessa dimensione del font del contenitore */
        color: #333;
        font-weight: bold;
    }

    /* Checkbox e label */
    .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
    }

    .form-check-input {
        margin: 0;
    }

    .form-check-label {
        font-size: inherit; /* Font omogeneo con il contenitore */
        color: #333;
    }


    fieldset legend.dettaglioPrezzi, button legend.dettaglioPrezzi {
        background-color: #1ec812; /* Colore celeste */
        color: #333; /* Testo scuro per contrasto */
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 1.2em; /* Dimensione del font non troppo grande */
    }

    td .container {
        width: 100% !important;
        display: block;
    }

    table .detail-view > td {
        width: 100% !important;
    }

</style>

@endpush 

<meta name="csrf-token" content="{{ csrf_token() }}">   

@section('content')

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



<section class="section contact">
    
    <div class="toast-container
            position-absolute 
            top-0 start-50 
            translate-middle-x">
            <div class="toast">
                    <div class="toast-header">
                            <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                            <strong class="me-auto">Titolo</strong>
                            <small>didascalia extra</small>
                            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">Position at Top Center.</div>
            </div>
    </div>

    <div class="row justify-content-left">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4 d-flex justify-content-end">
                    <button id="calcolaCosti" class="btn btn-primary">Calcola</button>
                </div>
    
                <div class="col-md-8 d-flex justify-content-end">
                    <!-- Parte della barra comandi di 8 colonne, bottoni allineati a destra -->
                    <button class="btn btn-secondary me-2 salvaCosto" >Salva</button>
                    <button class="btn btn-success">Comando 3</button>
                </div>
            </div>
    
            <div class="row mt-3">
                <div class="col-md-4">
                    <div class="bg-light p-2">
                        <!-- Form per validazione e invio via AJAX -->
                        <form id="productForm">
                            <!-- Fieldset per Info Generali sul Prodotto -->
                            <fieldset id="TIPO_PRODOTTO" style="border: none; padding: 0; margin: 0; width: 100%;">
                                <div style="display: flex; justify-content: space-between; align-items: center; background-color: #d4f1f9; padding: 10px; border-radius: 5px; width: 100%;">
                                    <!-- Contenitore Legend -->
                                    <legend style="margin: 0; padding: 0; font-size: 1.2rem; font-weight: bold; color: #333;">
                                    </legend>
                            
                                    <!-- Select al posto del Checkbox -->
                                    <div style="display: flex; align-items: center; gap: 0.5rem; background-color: #f8f9fa; padding: 5px 10px; border-radius: 5px;">
                                        <label for="tecnologiaStampa" style="margin: 0; font-size: 1rem; font-weight: normal; color: #333;">
                                            Tecnologia:
                                        </label>
                                        <select 
                                            id      = "select_TecnologiaStampa" 
                                            name    = "select_TecnologiaStampa" 
                                            style="padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 0.25rem;">
                                            <option value="offset">Stampa Offset</option>
                                            <option value="digitale">Stampa Digitale</option>
                                        </select>
                                    </div>
                                </div>  

                                <div class="row">
                                    <!-- Select Tipo Prodotto -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="tipoProdottoSelect">Tipo Prodotto</label>
                                            <select id="tipoProdottoSelect" name="tipoProdotto" class="form-control" required>
                                                <option value="">Tipo Prodotto</option>
                                                @foreach ($tipiProdotto as $tipoProdotto)
                                                    <option value="{{ $tipoProdotto->id }}">{{ $tipoProdotto->nome }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Select Prodotto Tipografico -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="prodottoTipograficoSelect">Prodotto</label>
                                            <select id="prodottoTipograficoSelect" name="prodottoTipografico" class="form-control" required>
                                                <option value="">Prodotto</option>
                                            </select>
                                        </div>
                                    </div>
                    
                                    <!-- Input Numero Copie -->
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="numeroCopie">Copie</label>
                                            <input type="number" id="numeroCopie" name="numeroCopie" class="form-control" min="1" value=1 placeholder="Copie" required>
                                        </div>
                                    </div>
                    
                                    <!-- Input Numero Soggetti -->
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="numeroSoggetti">Soggetti</label>
                                            <input type="number" id="numeroSoggetti" name="numeroSoggetti" class="form-control" min="1" value=1 placeholder="Soggetti" required>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                    
                            <div id="famiglieAttributiContainer">
                            </div>
                        </form>
                    </div>
                    
                </div>

                <div class="col-md-8">
                    <div class="bg-light p-2">
                        <div class="accordion" id="accordionElaborazioni">
                            

                            <!-- Accordion Item: Dettaglio prezzi -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        <legend class="dettaglioPrezzi">Dettaglio Prezzi <span id="msg_STAMPA-INTERNO"></span></legend>
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body">
                                        <div class="bootstrap-table-container-large">
                                            <table
                                                width="100%"
                                                id="tabellaDettaglioCalcoli"
                                                data-show-search-clear-button="false"
                                                data-locale="it-IT"
                                                class="table"
                                                data-toggle="table"
                                                data-detail-formatter=""
    
                                                data-toolbar="toolbar"
                                                data-search="false"
                                                data-show-search-clear-button="false"
                                                data-filter-control="false"
                                                data-url=""
                                                data-query-params=""
                                                data-response-handler=""
                                                data-sort-name="nome"
                                                data-show-header="true"
                                                data-sort-order="asc"
                                                data-click-to-select="true"
                                                data-height="300"
                                            >
                                            </table>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                
                            <!-- Accordion Item: Elaborazione stampa -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <legend>Stampa</legend>
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body">
                                        <div class="bootstrap-table-container-large">
                                            <table
                                                width="100%"
                                                id="tabellaMacchineStampa"
                                                data-show-search-clear-button="false"
                                                data-locale="it-IT"
                                                class="table"
                                                data-toggle="table"
                                                data-detail-view="true"
                                                data-detail-formatter="dettaglioFormatter"

                                                data-toolbar="toolbar"
                                                data-search="false"
                                                data-show-search-clear-button="false"
                                                data-filter-control="false"
                                                data-url=""
                                                data-query-params=""
                                                data-response-handler="responseTabella"
                                                data-sort-name="nome"
                                                data-show-header="true"
                                                data-sort-order="asc"
                                                data-click-to-select="true"
                                                data-height="500"
                                            >
                                            
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                
                            <!-- Accordion Item: Elaborazione Taglio -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        <legend>Taglio: <span id="spanDatiTaglio"></span></legend>
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionElaborazioni">
                                        <div class="accordion-body"><div class="bootstrap-table-container-large">
                                            <table
                                                width                           =   "100%"
                                                id                              =   "tabellaTaglio"
                                                data-show-search-clear-button   =   "false"
                                                data-locale                     =   "it-IT"
                                                class                           =   "table"
                                                data-toggle                     =   "table"
                                                data-detail-view                =   "true"
                                                data-detail-formatter           =   "taglioFormatter"

                                                data-toolbar                    =   "toolbar"
                                                data-search                     =   "false"
                                                data-show-search-clear-button   =   "false"
                                                data-filter-control             =   "false"
                                                data-url                        =   ""
                                                data-query-params               =   ""
                                                data-response-handler           =   "responseTabella"
                                                data-sort-name                  =   "nome"
                                                data-show-header                =   "true"
                                                data-sort-order                 =   "asc"
                                                data-click-to-select            =   "true"
                                                data-height                     =   "500"
                                            >
                                            
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                
                            <!-- Accordion Item: Elaborazione Piega -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFour">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                        <legend>Piega: <span id="spanDatiPiega"></span></legend>
                                    </button>
                                </h2>
                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body"><div class="bootstrap-table-container-large">
                                        <table
                                            width                           =   "100%"
                                            id                              =   "tabellaPiega"
                                            data-show-search-clear-button   =   "false"
                                            data-locale                     =   "it-IT"
                                            class                           =   "table"
                                            data-toggle                     =   "table"
                                            data-detail-view                =   "true"
                                            data-detail-formatter           =   "piegaFormatter"

                                            data-toolbar                    =   "toolbar"
                                            data-search                     =   "false"
                                            data-show-search-clear-button   =   "false"
                                            data-filter-control             =   "false"
                                            data-url                        =   ""
                                            data-query-params               =   ""
                                            data-response-handler           =   "responseTabella"
                                            data-sort-name                  =   "nome"
                                            data-show-header                =   "true"
                                            data-sort-order                 =   "asc"
                                            data-click-to-select            =   "true"
                                            data-height                     =   "500"
                                        >
                                        
                                        </table>
                                    </div>
                                </div>
                            </div>
                
                            <!-- Accordion Item: Elaborazione Raccolta -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFive">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                        <legend>Raccolta</legend>
                                    </button>
                                </h2>
                                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body"><div class="bootstrap-table-container-large">
                                        <table
                                            width                           =   "100%"
                                            id                              =   "tabellaRaccolta"
                                            data-show-search-clear-button   =   "false"
                                            data-locale                     =   "it-IT"
                                            class                           =   "table"
                                            data-toggle                     =   "table"
                                            data-detail-view                =   "true"
                                            data-detail-formatter           =   "raccoltaFormatter"

                                            data-toolbar                    =   "toolbar"
                                            data-search                     =   "false"
                                            data-show-search-clear-button   =   "false"
                                            data-filter-control             =   "false"
                                            data-url                        =   ""
                                            data-query-params               =   ""
                                            data-response-handler           =   "responseTabella"
                                            data-sort-name                  =   "nome"
                                            data-show-header                =   "true"
                                            data-sort-order                 =   "asc"
                                            data-click-to-select            =   "true"
                                            data-height                     =   "500"
                                        >
                                        
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Accordion Item: Elaborazione Cucitura -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingSix">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                        <legend>Cucitura</legend>
                                    </button>
                                </h2>
                                <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body"><div class="bootstrap-table-container-large">
                                        <table
                                            width                           =   "100%"
                                            id                              =   "tabellaCucitura"
                                            data-show-search-clear-button   =   "false"
                                            data-locale                     =   "it-IT"
                                            class                           =   "table"
                                            data-toggle                     =   "table"
                                            data-detail-view                =   "true"
                                            data-detail-formatter           =   "cucituraFormatter"

                                            data-toolbar                    =   "toolbar"
                                            data-search                     =   "false"
                                            data-show-search-clear-button   =   "false"
                                            data-filter-control             =   "false"
                                            data-url                        =   ""
                                            data-query-params               =   ""
                                            data-response-handler           =   "responseTabella"
                                            data-sort-name                  =   "nome"
                                            data-show-header                =   "true"
                                            data-sort-order                 =   "asc"
                                            data-click-to-select            =   "true"
                                            data-height                     =   "500"
                                        >
                                        
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Accordion Item: Elaborazione Brossura -->
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingSeven">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                        <legend>Brossura</legend>
                                    </button>
                                </h2>
                                <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionElaborazioni">
                                    <div class="accordion-body"><div class="bootstrap-table-container-large">
                                        <table
                                            width                           =   "100%"
                                            id                              =   "tabellaBrossura"
                                            data-show-search-clear-button   =   "false"
                                            data-locale                     =   "it-IT"
                                            class                           =   "table"
                                            data-toggle                     =   "table"
                                            data-detail-view                =   "true"
                                            data-detail-formatter           =   "brossuraFormatter"

                                            data-toolbar                    =   "toolbar"
                                            data-search                     =   "false"
                                            data-show-search-clear-button   =   "false"
                                            data-filter-control             =   "false"
                                            data-url                        =   ""
                                            data-query-params               =   ""
                                            data-response-handler           =   "responseTabella"
                                            data-sort-name                  =   "nome"
                                            data-show-header                =   "true"
                                            data-sort-order                 =   "asc"
                                            data-click-to-select            =   "true"
                                            data-height                     =   "500"
                                        >
                                        
                                        </table>
                                    </div>
                                </div>
                            </div>

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

@endsection


@push('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

  <script>


    var $tabellaMacchineStampa          = jQuery('#tabellaMacchineStampa');
    var $tabellaTaglio                  = jQuery('#tabellaTaglio');
    var $tabellaPiega                   = jQuery('#tabellaPiega');
    var $tabellaDettaglioCalcoli        = jQuery('#tabellaDettaglioCalcoli');
    var $tabellaRaccolta                = jQuery('#tabellaRaccolta');
    var $tabellaCucitura                = jQuery('#tabellaCucitura');
    var $tabellaBrossura                = jQuery('#tabellaBrossura');

    var $idMacchinaMigliore             = null;
    var $formatoAperto                  = null;

    document.getElementById('collapseOne').addEventListener('show.bs.collapse', function () {
        jQuery('#tabellaDettaglioCalcoli').bootstrapTable('resetView');
    });
    
    document.getElementById('collapseTwo').addEventListener('show.bs.collapse', function () {
        jQuery('#tabellaMacchineStampa').bootstrapTable('resetView');
    });

    document.getElementById('collapseThree').addEventListener('show.bs.collapse', function () {
        jQuery('#tabellaTaglio').bootstrapTable('resetView');
    });

    document.getElementById('collapseThree').addEventListener('show.bs.collapse', function () {
        jQuery('#tabellaPiega').bootstrapTable('resetView');
    });
    
    function responseTabella(res) {
        return res
    } 

    function showToast(message, title = "Titolo", timestamp = "Ora corrente") {
        const toastElement      = document.querySelector('.toast');
        const toastBody         = toastElement.querySelector('.toast-body');
        const toastTitle        = toastElement.querySelector('.me-auto');
        const toastTimestamp    = toastElement.querySelector('.toast-timestamp');

        // Aggiorna i contenuti
        toastBody.textContent = message;
        toastTitle.textContent = title;

        // Mostra la Toast
        const bootstrapToast = new bootstrap.Toast(toastElement);
        bootstrapToast.show();
    }

    // jQuery(document).on('click', '.calcolaCosto, .salvaCosto', function() {

    // });

    function formattaSegnaturaTaglio(value,row) {
    
            // console.log(row)
            elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
            elencoAzioni += `${value}° (${row.numeroSegnature})`;
            elencoAzioni += '</div>'; 

            return [elencoAzioni].join('')

    }

    function formattaSegnaturaPiega(value,row) {
    
            // console.log(row)
            elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
            elencoAzioni += `${value}° (${row.numeroSegnature})`;
            elencoAzioni += '</div>'; 

            return [elencoAzioni].join('')

    }

    function dettaglioFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <!-- Colonna 1: calcoliResa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-success text-white p-2">Calcoli Carta</h5>
                        <div class="data-grid">${generateHtml(row.calcoliCarta)}</div>
                    </div>
                    <!-- Colonna 2: calcoliStampa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-info text-white p-2">Calcoli Stampa</h5>
                        <div class="data-grid">${generateHtml(row.calcoliStampa)}</div>
                    </div>
                    <!-- Colonna 3: importiStampa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-info text-white p-2">Importi Produzione Stampa</h5>
                        <div class="data-grid">${generateHtml(row.calcoliTotale)}</div>
                    </div>
                </div>
            </div>
        `;
    }

    function taglioFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <!-- Colonna 1: calcoliResa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-success text-white p-2">Calcoli Taglio</h5>
                        <div class="data-grid">${generateHtml(row.calcoliTaglio)}</div>
                    </div>
                </div>
            </div>
        `;
    }

    function raccoltaFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <!-- Colonna 1: calcoliResa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-success text-white p-2">Calcoli Raccolta</h5>
                        <div class="data-grid">${generateHtml(row.calcoliRaccolta)}</div>
                    </div>
                </div>
            </div>
        `;
        
    }

    function cucituraFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <!-- Colonna 1: calcoliResa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-info text-white p-2">Calcoli Cucitura</h5>
                        <div class="data-grid">${generateHtml(row.calcoliCucitura)}</div>
                    </div>
                </div>
            </div>
        `;
        
    }
    function brossuraFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <div class="col-md-4">
                        <h5 class="section-title bg-info text-white p-2">Calcoli Brossura</h5>
                        <div class="data-grid">${generateHtml(row.calcoliBrossura)}</div>
                    </div>
                </div>
            </div>
        `;
        
    }

    function piegaFormatter(index, row) {
        // Funzione per generare HTML per ciascun oggetto in formato chiave-valore
        //console.log(row)
        function generateHtml(data) {
            let html = '<div class="row font-small monospace-font" style="width: 100%;">';
            for (const key in data) {
                if (typeof data[key] === 'object' && data[key] !== null) {
                    // Ricorsione per esplodere gli oggetti annidati
                    html += `
                        <div class="col-12" style="margin-left: 15px; margin-bottom: 10px;">
                            <strong>${key}:</strong>
                            <div>${generateHtml(data[key])}</div>
                        </div>
                    `;
                } else {
                    // Stampa i campi chiave-valore con margine e allineamento a destra per i valori
                    html += `
                        <div class="col-6" style="margin-bottom: 5px; text-align: left;">
                            <strong style="margin-right: 5px;">${key}:</strong>
                        </div>
                        <div class="col-6" style="margin-bottom: 5px; text-align: right;">
                            ${data[key]}
                        </div>
                    `;
                }
            }
            html += '</div>';
            return html;
        }

        return `
            <div class="container-fluid font-small monospace-font w-100">
                <div class="row">
                    <!-- Colonna 1: calcoliResa -->
                    <div class="col-md-4">
                        <h5 class="section-title bg-success text-white p-2">Calcoli Piega</h5>
                        <div class="data-grid">${generateHtml(row.calcoliPiega)}</div>
                    </div>
                </div>
            </div>
        `;
    }

    function initTabellaTaglio(dataDefault=""){
        
        dataDefault = dataDefault ? dataDefault.filter(item => item.segnatura !== undefined) : [];

        $tabellaTaglio.bootstrapTable('destroy').

        bootstrapTable({

                    columns: [
                                        { field: 'calcoliTaglio.segnatura', title: '<i class="bi bi-file-text"></i> Segnature', formatter: 'formattaSegnaturaTaglio' },
                                        { field: 'calcoliTaglio.resaSegnatura', title: '<i class="bi bi-file-text"></i> Resa' },
                                        { field: 'calcoliTaglio.numeroFogliSegnatura', title: '<i class="bi bi-file-text"></i> N° fogli' },
                                        { field: 'calcoliTaglio.spessoreFogliSegnatura', title: '<i class="bi bi-file-text"></i> Spessore' },
                                        { field: 'calcoliTaglio.numeroTagliSegnatura', title: '<i class="bi bi-rulers"></i> N° tagli', align: 'right' },
                                        { field: 'calcoliTaglio.tempoTaglioSegnatura', title: '<i class="bi bi-stack"></i> Tempo', align: 'right' },
                                        { field: 'calcoliTaglio.costoAvviamento', title: '<i class="bi bi-stack"></i> Costo avv.', align: 'right' },
                                        // { field: 'calcoliTaglio.costoOrarioTaglio', title: '<i class="bi bi-stack"></i> Costo taglio', align: 'right' },
                                        { field: 'calcoliTaglio.costoTaglioTotale', title: '<i class="bi bi-stack"></i> € totale', align: 'right' },
                                        { field: 'calcoliTaglio.numeroSoggetti', title: '<i class="bi bi-stack"></i> N° soggetti', align: 'right' },
                                        { field: 'calcoliTaglio.costoTaglioSoggetti', title: '<i class="bi bi-stack"></i> € totale', align: 'right' }
                    ],

                    data                : dataDefault,

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

                    onLoadSuccess       : function(data){   
                    },

                    onSearch: function (text) {
                        
                    }

        });

    }

    function initTabellaPiega(dataDefault=""){
        
        dataDefault = dataDefault ? dataDefault.filter(item => item.idMacchina !== '') : [];
        
        $tabellaPiega.bootstrapTable('destroy').

        bootstrapTable({

                    columns: [
                                        { field: 'calcoliPiega.segnatura', title: '<i class="bi bi-file-text"></i> Segnature', formatter: 'formattaSegnaturaPiega' },
                                        { field: 'calcoliPiega.numeroCopie', title: '<i class="bi bi-file-text"></i> N° copie' },
                                        { field: 'calcoliPiega.metriLineari', title: '<i class="bi bi-file-text"></i> mt.' },
                                        { field: 'calcoliPiega.minutiPiegaSegnatura', title: '<i class="bi bi-file-text"></i> Min. piega' },
                                        { field: 'calcoliPiega.costoAvviamentoPiegatrice', title: '<i class="bi bi-stack"></i> Costo avv.', align: 'right' },                                        
                                        { field: 'calcoliPiega.costoPiegaSegnature', title: '<i class="bi bi-rulers"></i> Costo piega', align: 'right' },                                       
                                        { field: 'calcoliPiega.costoClick', title: '<i class="bi bi-rulers"></i> Costo click', align: 'right' },
                                        { field: 'calcoliPiega.costoPiegaTotale', title: '<i class="bi bi-stack"></i> Costo totale', align: 'right' },
                                        { field: 'calcoliPiega.numeroSoggetti', title: '<i class="bi bi-stack"></i> N° soggetti', align: 'right' },
                                        { field: 'calcoliPiega.costoPiegaSoggetti', title: '<i class="bi bi-stack"></i> Costo soggetti', align: 'right' }
                    ],

                    data                : dataDefault,

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

                    onLoadSuccess       : function(data){   
                    },

                    onSearch: function (text) {
                        
                    }

        });

    }

    function initTabellaMacchineStampa(dataDefault=""){

            dataDefault = dataDefault ? dataDefault.filter(item => item.idMacchina !== undefined) : [];

            $tabellaMacchineStampa.bootstrapTable('destroy').

            bootstrapTable({

                        columns: [
                                            { field: 'idMacchina', title: '<i class="bi bi-gear"></i> Macchina' },
                                            { field: 'numeroSegnature', title: '<i class="bi bi-file-text"></i> N°' },
                                            { field: 'segnatura', title: '<i class="bi bi-file-text"></i> Segnature' },
                                            { field: 'pesoFornitura', title: '<i class="bi bi-file-text"></i> Peso' },
                                            { field: 'numeroImpianti', title: '<i class="bi bi-rulers"></i> N° impianti', align: 'right' },
                                            { field: 'resa', title: '<i class="bi bi-stack"></i> Resa', align: 'right' },
                                            { field: 'tipoStampa', title: '<i class="bi bi-balance-scale"></i> Tipo stampa', align: 'right' },
                                            { field: 'costoCarta', title: '<i class="bi bi-cash-stack"></i> Prezzo Carta', align: 'right' },
                                            { field: 'costoStampa', title: '<i class="bi bi-printer"></i> Prezzo Stampa', align: 'right' },
                                            { field: 'costoTotale', title: '<i class="bi bi-calculator"></i> Costo', align: 'right' },
                                            { field: 'costoVendita', title: '<i class="bi bi-tags"></i> Vendita', align: 'right' }
                        ],
                        data                : dataDefault,

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

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        }

            });

    }

    function initTabellaRaccolta(dataDefault=""){

        dataDefault = dataDefault ? dataDefault.filter(item => item.calcoliRaccolta !== undefined) : [];

        $tabellaRaccolta.bootstrapTable('destroy').

        bootstrapTable({

                    columns: [
                                        { field: 'calcoliRaccolta.numeroSegnature', title: '<i class="bi bi-file-text"></i> n° Segn' },
                                        { field: 'calcoliRaccolta.avviamento', title: '<i class="bi bi-file-text"></i> Avviamento' },
                                        { field: 'calcoliRaccolta.costoOrario', title: '<i class="bi bi-file-text"></i> costo Orario' },
                                        { field: 'calcoliRaccolta.costoClick', title: '<i class="bi bi-file-text"></i> costo Click' },
                                        { field: 'calcoliRaccolta.copieOra', title: '<i class="bi bi-rulers"></i> copie Ora', align: 'right' },                                       
                                        { field: 'calcoliRaccolta.minutiRaccolta', title: '<i class="bi bi-stack"></i> min. Raccolta', align: 'right' },
                                        { field: 'calcoliRaccolta.costoRaccoltaCopie', title: '<i class="bi bi-stack"></i> Raccolta cp', align: 'right' },
                                        { field: 'calcoliRaccolta.costoRaccoltaSoggetti', title: '<i class="bi bi-stack"></i> Raccolta Sogg.', align: 'right' }
                    ],

                    data                : dataDefault,

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

                    onLoadSuccess       : function(data){   
                    },

                    onSearch: function (text) {
                        
                    }

        });

    }

    function initTabellaCucitura(dataDefault=""){

            dataDefault = dataDefault ? dataDefault.filter(item => item.calcoliCucitura !== undefined) : [];

            $tabellaCucitura.bootstrapTable('destroy').

            bootstrapTable({

                        columns: [
                                            { field: 'calcoliCucitura.numeroSegnature', title: '<i class="bi bi-file-text"></i> n° Segn' },
                                            { field: 'calcoliCucitura.avviamento', title: '<i class="bi bi-file-text"></i> Avviamento' },
                                            { field: 'calcoliCucitura.costoOrario', title: '<i class="bi bi-file-text"></i> costo Orario' },
                                            { field: 'calcoliCucitura.costoClick', title: '<i class="bi bi-file-text"></i> costo Click' },
                                            { field: 'calcoliCucitura.copieOra', title: '<i class="bi bi-rulers"></i> copie Ora', align: 'right' },                                       
                                            { field: 'calcoliCucitura.minutiRaccolta', title: '<i class="bi bi-stack"></i> min. Raccolta', align: 'right' },
                                            { field: 'calcoliCucitura.costoRaccoltaCopie', title: '<i class="bi bi-stack"></i> Raccolta cp', align: 'right' },
                                            { field: 'calcoliCucitura.costoRaccoltaSoggetti', title: '<i class="bi bi-stack"></i> Raccolta Sogg.', align: 'right' }
                        ],

                        data                : dataDefault,

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

                        onLoadSuccess       : function(data){   
                        },

                        onSearch: function (text) {
                            
                        }

            });

    }

    function initTabellaBrossura(dataDefault=""){

        dataDefault = dataDefault ? dataDefault.filter(item => item.calcoliBrossura !== undefined) : [];

        $tabellaBrossura.bootstrapTable('destroy').

        bootstrapTable({

                    columns: [
                                        { field: 'calcoliBrossura.tipoBrossura', title: '<i class="bi bi-file-text"></i> Brossura' },
                                        { field: 'calcoliBrossura.rangeDorso', title: '<i class="bi bi-file-text"></i> max mm.' },
                                        { field: 'calcoliBrossura.avviamento', title: '<i class="bi bi-file-text"></i> Avviamento' },
                                        { field: 'calcoliBrossura.costoOrario', title: '<i class="bi bi-file-text"></i> costo Orario' },
                                        { field: 'calcoliBrossura.costoClick', title: '<i class="bi bi-file-text"></i> costo Click' },
                                        { field: 'calcoliBrossura.copieOra', title: '<i class="bi bi-rulers"></i> copie Ora', align: 'right' },                                       
                                        { field: 'calcoliBrossura.minutiBrossura', title: '<i class="bi bi-stack"></i> min. Brossura', align: 'right' },
                                        { field: 'calcoliBrossura.costoBrossuraCopie', title: '<i class="bi bi-stack"></i> Brossura cp', align: 'right' },
                                        { field: 'calcoliBrossura.costoBrossuraSoggetti', title: '<i class="bi bi-stack"></i> Brossura Sogg.', align: 'right' }
                    ],

                    data                : dataDefault,

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

                    onLoadSuccess       : function(data){   
                    },

                    onSearch: function (text) {
                        
                    }

        });

    }

    function aggiungiRigheTabella(righeDaAggiungere) {

        righeDaAggiungere.forEach(row => {
            $('#tabellaDettaglioCalcoli').bootstrapTable('append', row);
        });
    }

    function initTabellaDettaglioCalcoli(macchinaOttima=""){
        
            $tabellaDettaglioCalcoli.bootstrapTable('destroy').

            bootstrapTable({

                        columns: [
                                            { field: 'elemento', title: '<i class="bi bi-gear"></i> Elemento' },
                                            { field: 'peso', title: '<i class="bi bi-box-seam"></i> Peso', align: 'right', width: 40 },
                                            { field: 'numeroCopie', title: '<i class="bi bi-file-text"></i> Qtà', align: 'right', width: 70 },
                                            { field: 'euroCopie', title: '<i class="bi bi-cash-stack"></i> € Copie', align: 'right', width: 70 },
                                            { field: 'numeroSoggetti', title: '<i class="bi bi-stack"></i> N° soggetti', align: 'right', width: 70 },
                                            { field: 'euroCopieSoggetti', title: '<i class="bi bi-printer"></i> € Copie/Soggetti', align: 'right', width: 70 },
                                            { field: 'sconto', title: '<i class="bi bi-calculator"></i> Sconto', align: 'right', width: 100 },
                                            { field: 'costoTotale', title: '<i class="bi bi-tags"></i> € Costo', align: 'right' }
                        ],
                        onCheck             : function (row, $index) {
                                                                    
                        },

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        }

            });

            aggiungiRigheTabella(macchinaOttima);


    }

    // Funzione per creare una select con i valori di lunghezzaAlette
    function createSelect(id, lunghezzaAlette) {

            const select = document.createElement("select");
            select.className = "form-control my-2"; // Classi di stile
            select.id = id;
            select.name = id;

            // Aggiungi opzioni alla select
            lunghezzaAlette.forEach(value => {
                const option = document.createElement("option");
                option.value = value;
                option.textContent = value;
                select.appendChild(option);
            });

            return select;
    }

    function createDynamicContainer() {
        const containerId = "dynamic-container"; // ID fisso per il contenitore

        // Cerca il contenitore esistente tramite l'ID
        const existingContainer = document.getElementById(containerId);

        // Rimuovi il contenitore esistente, se presente
        if (existingContainer) {
            existingContainer.parentNode.removeChild(existingContainer);
        }

        // Crea un nuovo elemento contenitore
        const container = document.createElement("div");
        container.id = containerId; // Assegna l'ID fisso
        container.className = "dynamic-container";

        return container;
    }



    function setupDynamicEventListeners() {

        const selectSupportiStampa          = document.getElementById('select_SupportiStampa');
        const selectOrientamentiStampa      = document.getElementById('select_OrientamentiStampa');
        const selectAnteNumero              = document.getElementById('select_AnteNumero');
        const select_FormatiFinali          = document.getElementById('select_FormatiFinali');
        const select_GrammatureStampa       = document.getElementById('select_GrammatureStampa');
        const select_NumeroFacciate         = document.getElementById('select_NumeroFacciate');
        const select_TipiStampa             = document.getElementById('select_TipiStampa');
        const select_TecnologiaStampa       = document.getElementById('select_TecnologiaStampa');
        const select_Rilegature             = document.getElementById('select_Rilegature');
        const numeroCopie                   = document.getElementById('numeroCopie');

        const select_TipoDorsi              = document.getElementById('STAMPA_COPERTINA_select_TipoDorsi');
        const select_CopertinaRifiniture    = document.getElementById('STAMPA_COPERTINA_select_CopertinaRifiniture');


        //alert(selectOrientamentiStampa)

        function handleChange() {
                                    
                                    
                                    const supporto              = jQuery('#select_SupportiStampa');
                                    const orientamento          = jQuery('#select_OrientamentiStampa');
                                    const formatoFinale         = jQuery('#select_FormatiFinali');
                                    const anteNumero            = jQuery('#select_AnteNumero');
                                    const grammatura            = jQuery('#select_GrammatureStampa');
                                    const facciate              = jQuery('#select_NumeroFacciate');
                                    const tipiStampa            = jQuery('#select_TipiStampa');
                                    const tecnologiaStampa      = jQuery('#select_TecnologiaStampa');
                                    const rilagatura            = jQuery('#select_Rilegature');
                                    const numeroCopie           = jQuery('#numeroCopie');
                                    
                                    const tipoDorso             = jQuery('#STAMPA_COPERTINA_select_TipoDorsi');
                                    const rifinituraCopertina   = jQuery('#STAMPA_COPERTINA_select_CopertinaRifiniture');

                                    let datiProdotto    = {};

                                    datiProdotto["idProdotto"]                      = jQuery("#prodottoTipograficoSelect").val();

                                    datiProdotto["idTabellaSupporti"]               = supporto.attr("data-idtabellabase");
                                    datiProdotto["idSupportoStampa"]                = supporto.val();

                                    datiProdotto["idTabellaOrientamento"]           = orientamento.attr("data-idtabellabase");
                                    datiProdotto["idOrientamento"]                  = orientamento.val();

                                    datiProdotto["idTabellaFormatiFinali"]          = formatoFinale.attr("data-idtabellabase");
                                    datiProdotto["idFormatoFinale"]                 = formatoFinale.val();

                                    datiProdotto["idTabellaAnteNumero"]             = anteNumero.attr("data-idtabellabase");
                                    datiProdotto["idAnteNumero"]                    = anteNumero.val();

                                    datiProdotto["idTabellaFacciate"]               = facciate.attr("data-idtabellabase");
                                    datiProdotto["idFacciate"]                      = facciate.val();

                                    datiProdotto["idTabellaGrammature"]             = grammatura.attr("data-idtabellabase");
                                    datiProdotto["idGrammatura"]                    = grammatura.val();

                                    datiProdotto["idTabellaTipiStampa"]             = tipiStampa.attr("data-idtabellabase");
                                    datiProdotto["idTipoStampa"]                    = tipiStampa.val();
                                    

                                    datiProdotto["idTabellaRilegature"]             = rilagatura.attr("data-idtabellabase");
                                    datiProdotto["idRilegatura"]                    = rilagatura.val();

                                    datiProdotto["tecnologiaStampa"]                = tecnologiaStampa.val()

                                    datiProdotto["numeroCopie"]                     = numeroCopie.val();

                                    datiProdotto["idTabellaTipoDorsi"]              = tipoDorso.attr("data-idtabellabase");
                                    datiProdotto["idTipoDorso"]                     = tipoDorso.val();

                                    datiProdotto["idTabellaRifinituraCopertina"]    = rifinituraCopertina.attr("data-idtabellabase");
                                    datiProdotto["idRifinituraCopertina"]           = rifinituraCopertina.val();

                                    // calcoloFormatoApero
                                    fetch("{{ route('calcolaFormatoAperto') }}", {
                                        method: "POST",
                                        headers: {
                                            "Content-Type": "application/json",
                                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                        },
                                        body: JSON.stringify({ datiProdotto })
                                    })
                                    
                                    .then(response => {
                                        // Intercetta errori HTTP
                                        if (!response.ok) {
                                            if (response.status === 419) {
                                                alert("Session expired. Please refresh the page.");
                                                // Ricarica la pagina per ottenere una nuova sessione
                                                window.location.reload();
                                            }
                                            // Genera un errore per altri stati HTTP
                                            throw new Error(`HTTP error! Status: ${response.status}`);
                                        }
                                        return response.json(); // Converte la risposta valida in JSON
                                    })

                                    .then(result => {
                                        $formatoAperto = result;
                                        console.log(result)
                                        jQuery('#msg_STAMPA-INTERNO').html("Formato aperto: " + result.formatoAperto);
                                        //console.log("Risultato formato finale:", result);
                                        const selectElement = document.getElementById("STAMPA_COPERTINA_select_TipoDorsi");
                                        selectElement.classList.add("select-container");

                                        // Rimuovi eventuale span esistente
                                        const existingSpan = document.getElementById("tipoDorsiInfo");
                                        if (existingSpan) {
                                            
                                            existingSpan.remove();
                                        }

                                        // Crea un nuovo span solo se ci sono dati da mostrare
                                        if (result.spessoreDorso) {
                                            const newSpan = document.createElement("span");
                                            newSpan.id = "tipoDorsiInfo";
                                            newSpan.className = "info-span";
                                            newSpan.textContent = result.spessoreDorso;

                                            // Inserisci il nuovo span dopo il select
                                            selectElement.parentElement.appendChild(newSpan);
                                        }

                                    

                                        if (result.lunghezzaAlette) {
                                            // Seleziona il genitore della select principale
                                            const selectRifiniture = document.getElementById("STAMPA_COPERTINA_select_CopertinaRifiniture");
                                            const parentElement = selectRifiniture.parentNode;


                                            // Crea un nuovo contenitore dinamico
                                            dynamicContainer = createDynamicContainer();

                                            // Crea e aggiungi le due select
                                            const selectLeft = createSelect("select_aletta_sinistra", result.lunghezzaAlette);
                                            const selectRight = createSelect("select_aletta_destra", result.lunghezzaAlette);

                                            // Etichette per le select
                                            const labelLeft = document.createElement("label");
                                            labelLeft.textContent = "Lunghezza aletta sinistra";
                                            labelLeft.setAttribute("for", "select_aletta_sinistra");

                                            const labelRight = document.createElement("label");
                                            labelRight.textContent = "Lunghezza aletta destra";
                                            labelRight.setAttribute("for", "select_aletta_destra");

                                            // Aggiungi le select e le etichette al contenitore
                                            dynamicContainer.appendChild(labelLeft);
                                            dynamicContainer.appendChild(selectLeft);
                                            dynamicContainer.appendChild(labelRight);
                                            dynamicContainer.appendChild(selectRight);

                                            // Inserisci il contenitore subito dopo la select principale
                                            parentElement.appendChild(dynamicContainer);
                                        }


                                    })
                                    .catch(error => {
                                        console.error("Errore durante il calcolo formato finale:", error);
                                    });
                                    // Calcolo numeroSegnature per tipo
                                    if ( (facciate.length !== 0) ) {

                                            fetch("{{ route('calcolaSegnature') }}", {
                                                method: "POST",
                                                headers: {
                                                    "Content-Type": "application/json",
                                                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                                },
                                                body: JSON.stringify({ datiProdotto })
                                            })
                                            .then(response => response.json())
                                            .then(result => {
                                                if (jQuery('.accordion').length > 0) {
                                                    //jQuery('.accordion').remove(); // Rimuove la tabella esistente
                                                    jQuery('#contentSegnature').remove();
                                                }
                                                jQuery('#STAMPA_INTERNO').append(result.html);
                                                $idMacchinaMigliore = result.idMacchina;
                                                document.querySelectorAll('.sortable-body').forEach(function(sortableElement) {
                                                        new Sortable(sortableElement, {
                                                                                        animation: 150,
                                                                                        ghostClass: 'sortable-ghost',
                                                                                        handle: 'tr',
                                                                                        onEnd: function(evt) {
                                                                                                                // Ottieni il tbody su cui è avvenuto il cambiamento
                                                                                                                var tbody = evt.from;

                                                                                                                // Ricalcola i valori per ogni riga all'interno del tbody specifico
                                                                                                                var daPagina = 1;
                                                                                                                tbody.querySelectorAll('tr').forEach(function(row, index) {
                                                                                                                    var id = index + 1;
                                                                                                                    var segnatura = parseInt(row.getAttribute('data-segnatura'));

                                                                                                                    // Calcola "daPagina" e "aPagina"
                                                                                                                    var aPagina = daPagina + segnatura - 1;

                                                                                                                    //console.log(daPagina + ' ' + aPagina);
                                                                                                                    // Aggiorna i dati nella riga
                                                                                                                    row.setAttribute('data-id', id);
                                                                                                                    row.querySelector('td:nth-child(6)').textContent = daPagina; // Aggiorna "Da Pagina"
                                                                                                                    row.querySelector('td:nth-child(7)').textContent = aPagina; // Aggiorna "A Pagina"

                                                                                                                    // Aggiorna il contatore per la pagina successiva
                                                                                                                    daPagina = aPagina + 1;
                                                                                                                });
                                                                                        }
                                                        });
                                                });

                                                
                                                document.querySelectorAll(".add-row-btn").forEach(button => {

                                                    button.addEventListener("click", function (event) {
                                                        event.preventDefault();

                                                        const tableId   = this.getAttribute("data-table-id");
                                                        const tbody     = document.getElementById(tableId);
                                                        const rows      = tbody.querySelectorAll("tr");
                                                        
                                                        const tableData = [];
                                                        rows.forEach((row) => {
                                                            const daPaginaInput = row.querySelector('.da-pagina');
                                                            const aPaginaInput = row.querySelector('.a-pagina');
                                                            const tipoStampaSelect = row.querySelector('[name="tipoStampa[]"]');

                                                            // Assicurati che i campi esistano prima di accedere ai valori
                                                            if (daPaginaInput && aPaginaInput && tipoStampaSelect) {
                                                                tableData.push({
                                                                    daPagina: parseInt(daPaginaInput.value, 10),
                                                                    aPagina: parseInt(aPaginaInput.value, 10),
                                                                    tipoStampa: tipoStampaSelect.value
                                                                });
                                                            }
                                                        });
                                                        dataToSend = {
                                                                        idFacciate      : datiProdotto["idFacciate"],
                                                                        tableData       : tableData
                                                        };
                                                        fetch("{{ route('checkPagineColoriDigitale') }}", {
                                                                                                            method: 'POST',
                                                                                                            headers: {
                                                                                                                'Content-Type': 'application/json',
                                                                                                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                                                                                            },
                                                                                                            body: JSON.stringify(dataToSend)
                                                        })
                                                        .then(response => response.json())
                                                        .then(data => {
                                                            //console.log("Dati validi:", data);
                                                                        if (data.result) {
                                                                            
                                                                            // Genera una nuova riga
                                                                                const newRow = document.createElement("tr");
                                                                                newRow.innerHTML = `
                                                                                                    <td>`+$idMacchinaMigliore+`</td>
                                                                                                    
                                                                                                    <td style="width: 12%;">
                                                                                                        <input type="number" name="daPagina[]" class="form-control form-control-sm da-pagina" value="`+data.daPagina+`" step="2"> <!-- Step dispari -->
                                                                                                    </td>
                                                                                                    <td style="width: 12%;"  >
                                                                                                        <input type="number" name="aPagina[]" class="form-control form-control-sm a-pagina" value="`+data.aPagina+`" step="2"> <!-- Step pari -->
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <select name="tipoStampa[]" class="form-select form-select-sm" disabled>
                                                                                                            <option value="4">Quadricromia fronte / retro</option>
                                                                                                        </select>
                                                                                                    </td>
                                                                                                    <td style="width: 8%;" align="center">
                                                                                                        <button type="button" class="btn-sm delete-row-btn p-0 border-0">
                                                                                                            <i class="bi bi-trash text-danger"></i>
                                                                                                        </button>
                                                                                                    </td>
                                                                                `;


                                                                                // Disabilita righe precedenti
                                                                                rows.forEach(row => {
                                                                                    row.querySelector('input[name="daPagina[]"]').disabled = true;
                                                                                    row.querySelector('input[name="aPagina[]"]').disabled = true;
                                                                                });

                                                                                // Aggiungi la nuova riga
                                                                                tbody.appendChild(newRow);

                                                                                document.querySelectorAll(".delete-row-btn").forEach(button => {
                                                                                    document.body.addEventListener("click", function (event) {
                                                                                        if (event.target.closest(".delete-row-btn")) {
                                                                                            event.preventDefault();

                                                                                            const row = event.target.closest("tr");
                                                                                            if (row) {
                                                                                                row.remove();
                                                                                            }
                                                                                        }
                                                                                    });
                                                                                });
                                                                                
                                                                        } else {
                                                                            //console.error("Errore di validazione:", data.resut.message);
                                                                            
                                                                            showToast(data.message, 'Notifica', 'Adesso');

                                                                        }
                                                        })
                                                        .catch(error => {
                                                            console.error("Errore durante la richiesta:", error);
                                                        });

                                                        
                                                    });
                                                });


                                            })

                                            .catch(error => {
                                                console.error("Errore durante il calcolo formato finale:", error);
                                            });
                                     }
        }

        if (selectOrientamentiStampa) {
            selectOrientamentiStampa.addEventListener('change', handleChange);
        }
        if (selectAnteNumero) {
            selectAnteNumero.addEventListener('change', handleChange);
        }
        if (select_FormatiFinali) {
            select_FormatiFinali.addEventListener('change', handleChange);
        }
        if (select_GrammatureStampa) {
            select_GrammatureStampa.addEventListener('change', handleChange);
        }
        if (select_NumeroFacciate) {
            select_NumeroFacciate.addEventListener('change', handleChange);
        }
        if (select_TipiStampa) {
            select_TipiStampa.addEventListener('change', handleChange);
        }
        if (select_TecnologiaStampa) {
            select_TecnologiaStampa.addEventListener('change', handleChange);
        }
        if (select_Rilegature) {
            select_Rilegature.addEventListener('change', handleChange);
        }

        if (numeroCopie) {
            numeroCopie.addEventListener('change', handleChange);
        }
        if (select_TipoDorsi) {
            select_TipoDorsi.addEventListener('change', handleChange);
        }
        if (select_CopertinaRifiniture) {
            select_CopertinaRifiniture.addEventListener('change', handleChange);
        }

    }


    function formattaPesoPagina(value,row) {

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

        return [elencoAzioni].join('')

    }

    jQuery(document).ready(function() {
        
        // Quando cambia il tipo di prodotto
        jQuery('#tipoProdottoSelect').change(function() {
            var tipoProdottoId = jQuery(this).val();

            jQuery('#prodottoTipograficoSelect').empty().append('<option value="">Prodotto</option>');
            if (tipoProdottoId) {
                                
                                    fetch(`{{ route('getProdottiTipo', '') }}/${tipoProdottoId}`)
                                        .then(response => response.json())
                                        .then(data => {
                                            data.forEach(prodotto => {
                                                jQuery('#prodottoTipograficoSelect').append(`<option value="${prodotto.id}">${prodotto.nome}</option>`);
                                            });
                                        })
                                        .catch(error => console.error('Errore:', error));
            }
        });

        prodottoTipograficoSelect.addEventListener('change', function () {
            const prodottoId = this.value;
            
            if (prodottoId) {
                            fetch(`{{ route('getFamiglieAttributi', '') }}/${prodottoId}`)
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Errore durante il caricamento degli attributi.');
                                    }
                                    return response.text(); // Ricevi il contenuto HTML come testo
                                })
                                .then(data => {
                                    famiglieAttributiContainer.innerHTML = data;

                                    //console.log(famiglieAttributiContainer);

                                    setupDynamicEventListeners();
                                    const selectOrientamentiStampa  = document.getElementById('select_OrientamentiStampa');
                                    selectOrientamentiStampa.dispatchEvent(new Event('change'));
        

                                })
                                .catch(error => {
                                    console.error(error);
                                    alert(error.message);
                                });
            } else {
                famiglieAttributiContainer.innerHTML = '';
            }
        });
        
        
        $(document).on("click", "#calcolaCosti", async function(event) {

                    event.preventDefault();

                    // Seleziona solo i fieldset all'interno del form con id "productForm"
                    const fieldsets = document.querySelectorAll("#productForm fieldset"); 
                    let parametriSelezione      = {};
                    let dataToSend              = {};
                    let tabellaNumeroSegnature  = [];
                    // Itera su ogni fieldset per raccogliere i dati
                    fieldsets.forEach((fieldset) => {

                        const fieldsetData = {}; // Oggetto per memorizzare i dati del fieldset corrente
                        const selects = fieldset.querySelectorAll("select");
                        const inputs = fieldset.querySelectorAll("input");

                        // Aggiungi ogni select al fieldsetData
                        selects.forEach((select) => {
                            fieldsetData[select.name] = select.value;
                        });

                        // Aggiungi ogni input al fieldsetData
                        inputs.forEach((input) => {
                            fieldsetData[input.name] = input.value;
                        });

                        fieldsetData["idMacchina"] = $idMacchinaMigliore;

                        const fieldsetId = fieldset.id;
                        parametriSelezione[fieldsetId] = fieldsetData; // Salva i dati del fieldset sotto l'id del fieldset

                    });
                    // Itera su ogni riga della tabella
                    $nSegnatura=1;
                    const select_TecnologiaStampa   = document.getElementById('select_TecnologiaStampa');
                    
                    

                    $('#sortable-body_1 tr').each(function() {

                        if ( (select_TecnologiaStampa) && (select_TecnologiaStampa.value=="offset") )  {

                                let rowData = {
                                                dataId      : $nSegnatura, // ID univoco della riga
                                                idMacchina  : $(this).find('td').eq(0).text(),
                                                segnatura   : $(this).attr('data-segnatura'), // Segnatura
                                                resa        : $(this).find('td').eq(2).text(), 
                                                latoCorto   : $(this).find('td').eq(3).text(),
                                                latoLungo   : $(this).find('td').eq(4).text(), 
                                                daPagina    : $(this).find('td').eq(5).text(), // Valore del "Da Pagina"
                                                aPagina     : $(this).find('td').eq(6).text(), // Valore del "A Pagina"
                                                tipoStampa  : $(this).find('select').val() // Valore selezionato dal select

                                                
                                };
                            
                                tabellaNumeroSegnature.push(rowData);

                            }else{

                                
                                let rowData = {
                                                dataId      : $nSegnatura, // ID univoco della riga
                                                idMacchina  : $(this).find('td').eq(0).text(),
                                                daPagina    : $(this).find('td').eq(1).find('input[type="number"]').val(), // Valore del campo input "Da Pagina"
                                                aPagina     : $(this).find('td').eq(2).find('input[type="number"]').val(), // Valore del campo input "Da Pagina"
                                                tipoStampa  : $(this).find('select').val() // Valore selezionato dal select

                                                
                                };

                                tabellaNumeroSegnature.push(rowData);
                                //console.log(tabellaNumeroSegnature)
                            }

                        $nSegnatura++;

                    });

                    // Parametri da inviare con la richiesta
                    dataToSend = {
                                        parametriSelezione      : parametriSelezione,
                                        tabellaNumeroSegnature  : tabellaNumeroSegnature,
                                        formatoAperto           : $formatoAperto,
                        };

                    
                    
                    try {
                        const response = await fetch("{{ route('calcolaCostiTipografico') }}", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": "{{ csrf_token() }}" 
                            },
                            body: JSON.stringify({ dataToSend })
                        });

                        const result = await response.json();


                        const segnatureDisponibili   = Object.values(result[1].original.segnatureDisponibili);
                        const macchinaOttima         = Object.values(result[1].original.macchinaOttima);


                        //console.log(macchinaOttima);
                        //console.log(segnatureDisponibili);

                        initTabellaMacchineStampa(segnatureDisponibili);    

                        initTabellaTaglio(segnatureDisponibili);

                        initTabellaPiega(segnatureDisponibili);

                        initTabellaRaccolta(segnatureDisponibili);

                        initTabellaCucitura(segnatureDisponibili);

                        initTabellaBrossura(segnatureDisponibili);

                        initTabellaDettaglioCalcoli(macchinaOttima);


                    } catch (error) {
                        console.error("Errore durante il calcolo dei costi:", error);
                    }


        });
        
       

    });

  </script>

@endpush