@extends('layouts.app')

@push('head-scripts')
@endpush 

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

@section('content')

@php
         
@endphp

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

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

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

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

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

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

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

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

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

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

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




<section class="section macchineStampa">


    <div class="row justify-content-left">

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

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

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

        <div class="col-md-9">
            <div class="card">
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        Nome: <span class="pillSpan" id="spanMacchinaCorrente">Nessuna selezione</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row" id="divTabbed">
                
                        <!-- Tabs Menu -->
                        <div class="col-md-3">
                            <ul class="nav nav-tabs flex-column" id="tabbedTabellaBase" role="tablist" style="margin-top: 15px;">
                                
                                <!-- Tab 1 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo active" id="tab_InfoTecniche" data-bs-toggle="tab" href="#tab_InfoTecnicheContent" role="tab" aria-controls="tab_InfoTecnicheContent" aria-selected="true">
                                        <div style="display: inline-flex; align-items: center;">
                                            <i class="bi bi-gear-fill" style="margin-right: 8px;"></i> <!-- Icona -->
                                            <span class="tab-text">Info Tecniche</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 2 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_MarginiAltro" data-bs-toggle="tab" href="#tab_MarginiAltroContent" role="tab" aria-controls="tab_MarginiAltroContent" aria-selected="false">
                                        <div style="display: inline-flex; align-items: center;">
                                            <i class="bi bi-arrows-fullscreen" style="margin-right: 8px;"></i> <!-- Icona -->
                                            <span class="tab-text">Margini Altro</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 3 -->
                                <li class="nav-item" role="presentation" id="tabSupportiMacchina">
                                    <a class="navlink-modulo" id="tab_SupportiGrammature" data-bs-toggle="tab" href="#tab_SupportiGrammatureContent" role="tab" aria-controls="tab_SupportiGrammatureContent" aria-selected="false">
                                        <div style="display: inline-flex; align-items: center;">
                                            <i class="bi bi-box" style="margin-right: 8px;"></i> <!-- Icona -->
                                            <span class="tab-text">Supporti.Formati/Grammature</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 4 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_Costistampa" data-bs-toggle="tab" href="#tab_CostistampaContent" role="tab" aria-controls="tab_CostistampaContent" aria-selected="false">
                                        <div style="display: inline-flex; align-items: center;">
                                            <i class="bi bi-currency-dollar" style="margin-right: 8px;"></i> <!-- Icona -->
                                            <span class="tab-text">Costi Stampa</span>
                                        </div>
                                    </a>
                                </li>
                
                            </ul>
                        </div>
                
                        <!-- Tab Content -->
                        <div class="col-md-9" >
                            <div class="tab-content" id="formTabbedMacchineStampa" style="padding: 15px;">
                
                                <!-- Tab Content 1 -->
                                <div class="tab-pane fade show active" id="tab_InfoTecnicheContent" role="tabpanel" aria-labelledby="tab_InfoTecniche">
                                    <form>
                                        <fieldset class="mb-4 fieldset-bordered">
                                            <legend class="h5 fieldset-legend" style="background-color: #007bff; color: #fff; height: 50px; padding: 10px 10px 10px 15px; border-radius: 5px;">Informazioni tecniche</legend>
                                                    <!-- Campo Nome (Full Row) -->
                                                    <div class="row">
                                                        <div class="col-12 mb-3">
                                                            <label for="nome" class="form-label">Nome</label>
                                                            <input type="text" class="form-control" id="nome" name="nome" required>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campo Descrizione (Full Row) -->
                                                    <div class="row">
                                                        <div class="col-12 mb-3">
                                                            <label for="descrizione" class="form-label">Descrizione</label>
                                                            <input type="text" class="form-control" id="descrizione" name="descrizione" required>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campi Tecnologia, Tipo Supporto, Applicazione (QuaterRow 4 each) -->
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <label for="idTecnologia" class="form-label">Tecnologia</label>
                                                            <select class="form-select" id="idTecnologia" name="idTecnologia" required>
                                                                <option value="">seleziona</option>
                                                                <option value="OFFSET" {{ isset($field['value']) && $field['value'] == "OFFSET" ? 'selected' : '' }}>OFFSET</option>
                                                                
                                                                <option value="DIGITALE" {{ isset($field['value']) && $field['value'] == "DIGITALE" ? 'selected' : '' }}>DIGITALE</option>
                                                            </select>
                                                        </div>
                                                
                                                        <div class="col-8 mb-3">
                                                            <label for="idFormatoCarta" class="form-label">Impianto</label>
                                                            <select class="form-select" id="idFormatoCarta" name="idFormatoCarta" required>
                                                                <option value="">Seleziona</option>
                                                                @foreach($optionsFormatiCarta as $optionLabel => $optionValue)
                                                                    <option value="{{ $optionValue["id"] }}" {{ isset($field['value']) && $field['value'] == $optionValue["id"] ? 'selected' : '' }}>
                                                                        {{ $optionValue["nome"] }}
                                                                    </option>
                                                                @endforeach

                                                            </select>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campi Base Min, Altezza Min, Base Max, Altezza Max (QuaterRow 4 each) -->
                                                    <div class="row">
                                                        <div class="col-md-3 mb-3">
                                                            <label for="baseMin" class="form-label">Base min. (cm.)</label>
                                                            <input type="number" class="form-control" id="baseMin" name="baseMin" required>
                                                        </div>
                                                
                                                        <div class="col-md-3 mb-3">
                                                            <label for="altezzaMin" class="form-label">Altezza Min (cm.)</label>
                                                            <input type="number" class="form-control" id="altezzaMin" name="altezzaMin" required>
                                                        </div>
                                                
                                                        <div class="col-md-3 mb-3">
                                                            <label for="baseMax" class="form-label">Base max. (cm.)</label>
                                                            <input type="number" class="form-control" id="baseMax" name="baseMax" required>
                                                        </div>
                                                
                                                        <div class="col-md-3 mb-3">
                                                            <label for="altezzaMax" class="form-label">Altezza Max (cm.)</label>
                                                            <input type="number" class="form-control" id="altezzaMax" name="altezzaMax" required>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campo Lotto Scarto (Full Row) -->
                                                    <div class="row">
                                                        <div class="col-12 mb-3">
                                                            <label for="lottoScarto" class="form-label">Lotto scarto (copie)</label>
                                                            <input type="number" class="form-control" id="lottoScarto" name="lottoScarto" required>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campo Tipo Calcolo (QuaterRow 4) -->
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <label for="tipoCalcoloScarto" class="form-label">Tipo Calcolo</label>
                                                            <select class="form-select" id="tipoCalcoloScarto" name="tipoCalcoloScarto">
                                                                <option value="V" {{ isset($field['value']) && $field['value'] == "V" ? 'selected' : '' }}>VALORE</option>
                                                                <option value="P" {{ isset($field['value']) && $field['value'] == "P" ? 'selected' : '' }}>PERCENTUALE</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="text-muted d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; padding: 10px;">
                                                        <!-- Barra di stato -->
                                                        <span id="statusMessage">Pronto</span>
                                                        <!-- Pulsante Registra -->
                                                        <button type="submit" class="btn btn-success">Registra</button>
                                                    </div>

                                        </fieldset>
                                    </form>
                                </div>
                
                                <!-- Tab Content 2 -->
                                <div class="tab-pane fade" id="tab_MarginiAltroContent" role="tabpanel" aria-labelledby="tab_MarginiAltro">
                                        <form>

                                            <fieldset class="mb-4 fieldset-bordered">
                                                <legend class="h5 fieldset-legend" style="background-color: #007bff; color: #fff; height: 50px; padding: 10px 10px 10px 15px; border-radius: 5px;">Impostazioni Margini</legend>

                                                <div class="row">
                                                    <div class="col-md-4 mb-3">
                                                        <label for="margineSinistro" class="form-label">Margine Sinistro (cm.)</label>
                                                        <input type="number" class="form-control" id="margineSinistro" name="margineSinistro" required>
                                                    </div>
                                        
                                                    <div class="col-md-4 mb-3">
                                                        <label for="margineDestro" class="form-label">Margine Destro (cm.)</label>
                                                        <input type="number" class="form-control" id="margineDestro" name="margineDestro" required>
                                                    </div>
                                        
                                                    <div class="col-md-4 mb-3">
                                                        <label for="marginePinza" class="form-label">Margine Pinza (cm.)</label>
                                                        <input type="number" class="form-control" id="marginePinza" name="marginePinza" required>
                                                    </div>
                                                </div>
                                        
                                                <div class="row">
                                                    <div class="col-md-6 mb-3">
                                                        <label for="margineIntermedio" class="form-label">Margine Intermedio (cm.)</label>
                                                        <input type="number" class="form-control" id="margineIntermedio" name="margineIntermedio" required>
                                                    </div>
                                                
                                                    <div class="col-md-6 mb-3">
                                                        <label for="margineFondo" class="form-label">Margine Coda (cm.)</label>
                                                        <input type="number" class="form-control" id="margineFondo" name="margineFondo" required>
                                                    </div>
                                                </div>
                                    
                                                <div class="text-muted d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; padding: 10px;">
                                                    <!-- Barra di stato -->
                                                    <span id="statusMessage">Pronto</span>
                                                    <!-- Pulsante Registra -->
                                                    <button type="submit" class="btn btn-success">Registra</button>
                                                </div>

                                            </fieldset>

                                        </form>

                                        <form>
                                                <!-- Secondo gruppo di campi con fieldset e legenda -->
                                                <fieldset class="mb-4 fieldset-bordered">
                                                    <legend class="h5 fieldset-legend" style="background-color: #007bff; color: #fff; height: 50px; padding: 10px 10px 10px 15px; border-radius: 5px;">Impostazioni Generali</legend>

                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <label for="colore" class="form-label">Colore</label>
                                                            <input type="color" class="form-control" id="colore" name="colore">
                                                        </div>
                                            
                                                        <div class="col-md-4 mb-3">
                                                            <label for="orientamentoFibra" class="form-label">Orientamento Fibra</label>
                                                            <select class="form-control" id="orientamentoFibra" name="orientamentoFibra" required>
                                                                <option value="">Seleziona</option>
                                                                <option value="V" {{ isset($field['value']) && $field['value'] == "V" ? 'selected' : '' }}>VERTICALE</option>
                                                                <option value="H" {{ isset($field['value']) && $field['value'] == "H" ? 'selected' : '' }}>ORIZZONTALE</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                    
                                                    <div class="text-muted d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; padding: 10px;">
                                                        <!-- Barra di stato -->
                                                        <span id="statusMessage">Pronto</span>
                                                        <!-- Pulsante Registra -->
                                                        <button type="submit" class="btn btn-success">Registra</button>
                                                    </div>
                                                </fieldset>

                                        </form>
                                    
                                
                                </form>
                                
                                    
                                </div>
                
                                <!-- Tab Content 3 -->
                                <div class="tab-pane fade" id="tab_SupportiGrammatureContent" role="tabpanel" aria-labelledby="tab_SupportiGrammature">
                                    
                                    <fieldset class="mb-4 fieldset-bordered">
                                        <legend class="h5 fieldset-legend" style="background-color: hsl(122, 37%, 47%); color: #fff; height: 50px; padding: 10px 10px 10px 15px; border-radius: 5px;">Supporti.Formati/Grammature</legend>

                                            <div class="card-body">
                
                                                <table                                                  
                                                        id                            = "tabellaSupportiFormatiGrammature"
                                                        data-show-search-clear-button = false
                                                        data-locale                   = "it-IT"              
                                                        class                         = "table table-sm"  
                                                        data-toggle				      = "table"
                                                        data-detail-view			  = false
                                                        data-toolbar                  = "toolbar"
                                                        data-search                   = true
                                                        data-show-search-clear-button = false
                                                        data-filter-control           = false
                                                        data-url                      = ""
                                                        data-query-params			  = ""
                                                        data-response-handler		  = "responseTabella"
                                                        data-sort-name                = "id"
                                                        data-show-header              = true
                                                        data-sort-order               = "asc"
                                                        data-show-extended-pagination = true
                                                        data-pagination				  = true
                                                        data-only-info-pagination 	  = false
                                                        data-side-pagination		  = "server"
                                                        data-page-list                = "15, 20, 25"
                                                        data-page-size                = 15
                                                        data-multiple-select-row      = false
                                                        data-click-to-select          = false
                                                        data-height                   ="500"
                                                >
                                                </table>
                                            </div>

                                    </fieldset>

                                </div>

                                <!-- Tab Content 4 -->
                                <div class="tab-pane fade" id="tab_CostistampaContent" role="tabpanel" aria-labelledby="tab_Costistampa">
                                    
                                    <fieldset class="mb-4 fieldset-bordered">
                                        <legend class="h5 fieldset-legend" style="background-color: #007bff; color: #fff; height: 50px; padding: 10px 10px 10px 15px; border-radius: 5px;">Costi Stampa</legend>

                                            <div class="card-body">
                
                                                <table                                                  
                                                        id                            = "tabellaCostiStampa"
                                                        data-show-search-clear-button = false
                                                        data-locale                   = "it-IT"              
                                                        class                         = "table table-sm"  
                                                        data-toggle				      = "table"
                                                        data-detail-view			  = false
                                                        data-toolbar                  = "toolbar"
                                                        data-search                   = true
                                                        data-show-search-clear-button = false
                                                        data-filter-control           = false
                                                        data-url                      = ""
                                                        data-query-params			  = ""
                                                        data-response-handler		  = "responseTabella"
                                                        data-sort-name                = "id"
                                                        data-show-header              = true
                                                        data-sort-order               = "asc"
                                                        data-show-extended-pagination = true
                                                        data-pagination				  = true
                                                        data-only-info-pagination 	  = false
                                                        data-side-pagination		  = "server"
                                                        data-page-list                = "15, 20, 25"
                                                        data-page-size                = 15
                                                        data-multiple-select-row      = false
                                                        data-click-to-select          = false
                                                        data-height                   ="500"
                                                >
                                                </table>
                                            </div>

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

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

@endsection

@push('scripts')

  <script>



    var $tabellaMacchineStampa              = jQuery('#tabellaMacchineStampa')
    var $tabellaSupportiFormatiGrammature   = jQuery('#tabellaSupportiFormatiGrammature');
    var $tabellaCostiStampa                 = jQuery('#tabellaCostiStampa');

    window.operazioniRecord = {
    }


    function queryTabelleSFG(p) {

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

    function queryTabelleCS(p) {

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

    function generaSFG(tabellaBase, idFormatoCarta, idTecnologia,) {
        return "{{ route('filtraTabellaSFG', ['tabellaBase' => '::tabellaBase::', 'idFormatoCarta' => '::idFormatoCarta::' , 'idTecnologia' => '::idTecnologia::'])}}"

            .replace('::tabellaBase::', tabellaBase)
            .replace('::idFormatoCarta::', idFormatoCarta)
            .replace('::idTecnologia::', idTecnologia);
    }
    function generaCS(tabellaBase, idFormatoCarta, idTecnologia,) {
        return "{{ route('filtraTabellaCS', ['tabellaBase' => '::tabellaBase::', 'idFormatoCarta' => '::idFormatoCarta::' , 'idTecnologia' => '::idTecnologia::'])}}"

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

    function initTabellaSFG(row, $tabellaBase, model, colonneTabella = []) {

        if( (model=="Printmanager_CostiStampa") && (row.idTecnologia=="DIGITALE") ){
                columns = colonneTabella.map(column => {
                                                            if (["costoImpianto", "maggiorazioneImpianto"].includes(column.field)) {
                                                                column.visible = false;
                                                            }
                                                            return column;
                });
        }else if( (model=="Printmanager_CostiStampa") && (row.idTecnologia=="OFFSET") ){
                columns = colonneTabella.map(column => {
                                                            if (["velocitaOraria"].includes(column.field)) {
                                                                column.visible = false;
                                                            }
                                                            return column;
                });
        }

        var url = generaSFG(encodeURIComponent(model), encodeURIComponent(row.idFormatoCarta), encodeURIComponent(row.idTecnologia));

        $tabellaSupportiFormatiGrammature.bootstrapTable('destroy').bootstrapTable({

                                                                columns         : colonneTabella,

                                                                url             : url,

                                                                queryParams     : queryTabelleSFG,

                                                                onCheck         : function(row, $index) {
                                                                                                    // Gestisci l'evento onCheck
                                                                },

                                                                onLoadSuccess   : function(data) {
                                                                                                    
                                                                                                    
                                                                },
                                                                onEditableSave  : function (field, row, rowIndex, oldValue) {

                                                                },
        });
    }



    function initTabellaCS(row, $tabellaBase, model, colonneTabella = []) {

            if( (model=="Printmanager_CostiStampa") && (row.idTecnologia=="DIGITALE") ){
                    columns = colonneTabella.map(column => {
                                                                if (["costoImpianto", "maggiorazioneImpianto"].includes(column.field)) {
                                                                    column.visible = false;
                                                                }
                                                                return column;
                    });
            }else if( (model=="Printmanager_CostiStampa") && (row.idTecnologia=="OFFSET") ){
                    columns = colonneTabella.map(column => {
                                                                if (["velocitaOraria"].includes(column.field)) {
                                                                    column.visible = false;
                                                                }
                                                                return column;
                    });
            }

            var url = generaCS(encodeURIComponent(model), encodeURIComponent(row.idFormatoCarta), encodeURIComponent(row.idTecnologia));

            $tabellaCostiStampa.bootstrapTable('destroy').bootstrapTable({

                                                                    columns         : colonneTabella,

                                                                    url             : url,

                                                                    queryParams     : queryTabelleCS,

                                                                    onCheck         : function(row, $index) {
                                                                                                        // Gestisci l'evento onCheck
                                                                    },

                                                                    onLoadSuccess   : function(data) {
                                                                                                        
                                                                                                        
                                                                    },
                                                                    onEditableSave  : function (field, row, rowIndex, oldValue) {

                                                                    },
            });
    }

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


                                    jsonString = `{${data}}`; 

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


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


                                    jsonString = `{${data}}`; 

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



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

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

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

                    } else if (inputElement.tagName.toLowerCase() === 'select') {
                        // Per i campi select, imposta il valore corrispondente
                        inputElement.value = macchinaCorrente[key];
                    } else {
                        // Per altri tipi di input, imposta il valore
                        if (macchinaCorrente[key] !== null) {
                            inputElement.value = macchinaCorrente[key];
                        }else{
                            inputElement.value = "";
                        }
                    }
                }
            });

    }

    function formattaDuplicaRecord(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaEliminaRecord(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaSospendiRecord(value,row) {

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

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

        return [elencoAzioni].join('')

    }

    function responseTabella(res) {
        return res
    } 

    function queryMacchineStampa(p) {
            

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

    function formattaCostoImpianto(value,row) {

            costoImpianto = parseFloat(value) + parseFloat(row.maggiorazioneImpianto);

            elencoAzioni = '<span class="d-flex justify-content-center"><i class="bi bi-" style="color: green;"></i>'+costoImpianto+'</span>';

            return [elencoAzioni].join('')

    }

    jQuery('#btnNuovoRecord').on('click', function () {

        if(confirm("Creo una nuova macchina?")){

                var actionUrl   = "{{route('createMacchinaStampa')}}";
                

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

                                    $tabellaMacchineStampa.bootstrapTable('append', JSON.parse(data.recordMacchinaStampa));

                                    // setTimeout(() => {
                                    //     $tabellaMacchineStampa.bootstrapTable('refreshOptions', {});
                                    // }, 200);

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

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

            macchinaCorrente    = row
            idMacchinaCorrente  = row.id
            idFormatoCarta      = row.idFormatoCarta;
            idTecnologia        = row.tecnologia;

            jQuery("#spanMacchinaCorrente").text(macchinaCorrente.nome);

            popolaCampi(macchinaCorrente);

            if(idFormatoCarta>0) 
                loadTabellaSFG(row, $tabellaSupportiFormatiGrammature, "Tabelle", "Printmanager_SupportiFormatiGrammature")
            else
                $tabellaSupportiFormatiGrammature.bootstrapTable('destroy')

            if( (idFormatoCarta>0)&&(idTecnologia!=="") )
                loadTabellaCS(row, $tabellaCostiStampa, "Tabelle", "Printmanager_CostiStampa")
            else
                $tabellaCostiStampa.bootstrapTable('destroy')
    });

    function initMacchineStampa(dataDefault=""){
            
            $tabellaMacchineStampa.bootstrapTable('destroy').

            bootstrapTable({

                        {!! $colonneMacchineStampa !!},
                        

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

                        queryParams	        : queryMacchineStampa,

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

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

            });

    }

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

        const formContainer = document.getElementById('formTabbedMacchineStampa');

        // Delegazione dell'evento 'submit' al contenitore
        formContainer.addEventListener('submit', function(e) {
            e.preventDefault();  // Prevenire il comportamento predefinito del submit

            // Identifica quale form ha generato l'evento
            const currentForm = e.target; 

            //console.log(`Submit ricevuto da: ${formId}`);

            
            if(confirm("Confermi la registrazione del record!")){
                var actionUrl   = "{{route('saveMacchinaStampa')}}";
                var formData    = new FormData(currentForm);
                    formData.append('modelPath', 'CentroStampa');
                    formData.append('modelTable', 'Printmanager_MacchineStampa');
                    formData.append('id', idMacchinaCorrente);

                // Itera su tutti i checkbox == coverte on/off => 1/0
                const checkboxes = this.querySelectorAll('input[type="checkbox"]');
                checkboxes.forEach(checkbox => {
                    formData.set(checkbox.name, checkbox.checked ? 1 : 0);
                });

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

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

                                    macchinaCorrente = data.record;

                                    $tabellaMacchineStampa.bootstrapTable('updateRow', {index: indiceRigaMaster, row: macchinaCorrente});

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

        });
        
    })

</script>

@endpush