@extends('layouts.app')

@push('head-scripts')
@endpush 


@section('content')

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

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

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

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

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

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

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

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

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

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

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

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




<section class="section macchineStampa">


    <div class="modal fade" id="fullScreenModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header card-header text-white d-flex justify-content-between align-items-center" style="background-color: #007bff; height: 50px; padding: 10px;">
                <div><span id="spanModalHeader"></span>: <span id="spanModalTitle"></span><span id="spanCountDetail"></span></div>
                
                <div>
                    <button 
                            data-messaggio          = "Confermi la Rigenerazione delle Grammature/Formato Carta selezionato?"
                            data-nometable          = "tabellaFormatoSupportoGrammature"
                            data-pathtable          = "CentroStampa"
                            data-modeltable         = "Printmanager_MacchineSupportiFormatiGrammature"
                            data-rotta              = "{{ route('rigeneraRecord') }}"
                            data-recordcorrente     = "formatoSupportoCorrente"
                            title                   = "rigenera" 
                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                        <i class="bi bi-arrow-repeat"></i> 
                    </button>

                    <button 
                            data-messaggio          = "Confermi l' integrazione delle Grammature/Formato Carta selezionato?"
                            data-nometable          = "tabellaFormatoSupportoGrammature"
                            data-pathtable          = "CentroStampa"
                            data-modeltable         = "Printmanager_MacchineSupportiFormatiGrammature"
                            data-recordcorrente     = "formatoSupportoCorrente"
                            data-rotta              = "{{ route('integraRecord') }}"
                            title                   = "integra" 
                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                        <i class="bi bi-database-add"></i> 
                    </button>

                </div>
            </div>
            <div class="modal-body" id="idModalBody">
                
                
                <div class="bootstrap-table-container-large">
                    <table

                            width                         = "100%"
                            id                            = "tabellaFormatoSupportoGrammature"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = "table table-sm"  
                            data-toggle				      = "table"
                            data-detail-view			  = false
                            data-toolbar                  = "toolbar"
                            data-search                   = true
                            data-show-search-clear-button = false
                            data-filter-control           = true
                            data-url                      = ""
                            data-query-params			  = ""
                            data-response-handler		  = "responseTabellaFormatoSupportoGrammaturee"
                            data-sort-name                = ""
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-side-pagination		  = "server"
                            data-page-list                = "5, 10, 15, 20, 25"
                            data-page-size                = 10
                            data-multiple-select-row      = true
                            data-click-to-select          = true
                    >
                    </table>
                </div>
    
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
            </div>
          </div>
        </div>
    </div>

    <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>
                        {{$titolo}}
                    </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           = true
                            data-url                      = ""
                            data-query-params			  = ""
                            data-response-handler		  = "responseTabellaMacchineStampa"
                            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                = "5, 10, 15, 20, 25"
                            data-page-size                = 5
                            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">
                                    <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</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 4 -->
                                <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</span>
                                        </div>
                                    </a>
                                </li>
                
                            </ul>
                        </div>
                
                        <!-- Tab Content -->
                        <div class="col-md-9" >
                            <div class="tab-content d-none" 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">OFFSET</option>
                                                                <option value="DIGITALE">DIGITALE</option>
                                                            </select>
                                                        </div>
                                                
                                                        <div class="col-md-4 mb-3">
                                                            <label for="idSupporto" class="form-label">Tipo Supporto</label>
                                                            <select class="form-select" id="idSupporto" name="idSupporto" required>
                                                                <option value="">Seleziona</option>
                                                                <option value="BOBINA">BOBINA</option>
                                                                <option value="FOGLIO">FOGLIO</option>
                                                            </select>
                                                        </div>
                                                
                                                        <div class="col-md-4 mb-3">
                                                            <label for="idApplicazione" class="form-label">Applicazione</label>
                                                            <select class="form-select" id="idApplicazione" name="idApplicazione" required>
                                                                <option value="">Seleziona</option>
                                                                @foreach ($optionsApplicazioniStampa as $item)
                                                                    <option value="{{ $item['id'] }}">{{ $item['nome'] }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                
                                                    <!-- Campo Impianto (Full Row) -->
                                                    <div class="row">
                                                        <div class="col-12 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 }}" {{ isset($field['value']) && $field['value'] == $optionValue ? 'selected' : '' }}>
                                                                        {{ $optionLabel }}
                                                                    </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">VALORE</option>
                                                                <option value="P">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">VERTICALE</option>
                                                            <option value="H">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_CostistampaContent" role="tabpanel" aria-labelledby="tab_Costistampa">
                                    
                                        <fieldset class="mb-4 fieldset-bordered">
                                            <div class="card-header text-white d-flex justify-content-between align-items-center" style="background-color: #007bff; height: 50px; padding: 10px;">
                                                <div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h5 class="card-title mb-0" style="font-size: 1.25rem;">Costi stampa</h5>
                                                        </div>
                                                        <div>&nbsp;<span id="countTabellaCosti"></span></div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <button 
                                                            data-messaggio          = "Confermi la Rigenerazione dei Tipi stampa?"
                                                            data-nometable          = "tabellaCostiStampa"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_MacchineTipiStampa"
                                                            data-rotta              = "{{ route('rigeneraRecord') }}"
                                                            data-recordcorrente     = "macchinaCorrente"
                                                            title                   = "rigenera" 
                                                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                                                        <i class="bi bi-arrow-repeat"></i> 
                                                    </button>

                                                    <button 
                                                            data-messaggio          = "Confermi l' integrazione dei nuovi Tipi stampa?"
                                                            data-nometable          = "tabellaCostiStampa"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_MacchineTipiStampa"
                                                            data-rotta              = "{{ route('integraRecord') }}"
                                                            data-recordcorrente     = "macchinaCorrente"
                                                            title                   = "integra" 
                                                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                                                        <i class="bi bi-database-add"></i> 
                                                    </button>

                                                </div>
                                            </div>
                                            
                                            <div class="bootstrap-table-container-large">
                                                <table
                            
                                                        width                         = "100%"
                                                        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           = true
                                                        data-url                      = ""
                                                        data-query-params			  = ""
                                                        data-response-handler		  = "responseTabellaCostiStampa"
                                                        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                = "3, 5, 10, 15, 20, 25"
                                                        data-page-size                = 5
                                                        data-multiple-select-row      = false
                                                        data-click-to-select          = true
                                                >
                                                </table>
                                            </div>
                                        </fieldset>
                                </div>
                
                                <!-- Tab Content 4 -->
                                <div class="tab-pane fade" id="tab_SupportiGrammatureContent" role="tabpanel" aria-labelledby="tab_SupportiGrammature">
                                    
                                    <fieldset class="mb-4 fieldset-bordered">
                                            <div class="card-header text-white d-flex justify-content-between align-items-center" style="background-color: #007bff; height: 50px; padding: 10px;">
                                                <div>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <h5 class="card-title mb-0" style="font-size: 1.25rem;">Supporti/Grammature</h5>
                                                        </div>
                                                        <div>&nbsp;<span id="countTabellaSupporti"></span></div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <button 
                                                            data-messaggio          = "Confermi la Rigenerazione dei Supporti Stampa?"
                                                            data-nometable          = "tabellaSupportiStampa"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_MacchineSupportiFormati"
                                                            data-rotta              = "{{ route('rigeneraRecord') }}"
                                                            data-recordcorrente     = "macchinaCorrente"
                                                            title                   = "rigenera" 
                                                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                                                        <i class="bi bi-arrow-repeat"></i> 
                                                    </button>

                                                    <button 
                                                            data-messaggio          = "Confermi l' integrazione dei nuovi Supporti Stampa?"
                                                            data-nometable          = "tabellaSupportiStampa"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_MacchineSupportiFormati"
                                                            data-rotta              = "{{ route('integraRecord') }}"
                                                            data-recordcorrente     = "macchinaCorrente"
                                                            title                   = "integra" 
                                                            type="button" class="btn btn-primary INTEGRARIGENERA" id="" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                                                        <i class="bi bi-database-add"></i> 
                                                    </button>

                                                </div>
                                            </div>
                                            <div class="bootstrap-table-container-large">

                                                <table
                            
                                                        width                         = "100%"
                                                        id                            = "tabellaSupportiStampa"
                                                        data-show-search-clear-button = false
                                                        data-locale                   = "it-IT"              
                                                        class                         = "table table-sm"  
                                                        data-toggle				      = "table"
                                                        data-detail-view			  = false
                                                        data-toolbar                  = "toolbar"
                                                        data-search                   = true
                                                        data-show-search-clear-button = false
                                                        data-filter-control           = true
                                                        data-url                      = ""
                                                        data-query-params			  = ""
                                                        data-response-handler		  = "responseTabellaSupportiStampa"
                                                        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                = "5, 10, 15, 20, 25"
                                                        data-page-size                = 5
                                                        data-multiple-select-row      = false
                                                        data-click-to-select          = true
                                                >
                                                </table>
                                            </div>
                                    </fieldset>
                                </div>
                
                            </div>
                            <div class="tab-content" id="nessunaMacchinaStampa" style="padding: 15px;">Nessuna Macchina selezionata</div>
                        </div>
                
                    </div>
                </div>
                
                

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

@endsection

@push('scripts')

  <script>



    var $tabellaMacchineStampa              = jQuery('#tabellaMacchineStampa');
    var $tabellaCostiStampa                 = jQuery('#tabellaCostiStampa');
    var $tabellaSupportiStampa              = jQuery('#tabellaSupportiStampa');
    var $tabellaFormatoSupportoGrammature   = jQuery('#tabellaFormatoSupportoGrammature');

    var macchinaCorrente            = null;
    var idMacchinaCorrente          = null;

    var formatoSupportoCorrente     = {"id":0};
    var idFormatoSupportoCorrente   = null;

    var today ="";
    

    filtraStato         = {"1": "Attivo", "0": "Non attivo"};


    var filtriAttivi = {
                            "filter__stato": {"valoreFiltro":"","statoFiltro":""},
    };
    

    jQuery(document).on('click', '.INTEGRARIGENERA', function() {

            var messaggio           = jQuery(this).data('messaggio');
            var rotta               = jQuery(this).data('rotta');
            var nomeTable           = jQuery(this).data('nometable');
            var modelTable          = jQuery(this).data('modeltable');
            var recordCorrente      = jQuery(this).data('recordcorrente');
            window[recordCorrente].idMacchinaCorrente = idMacchinaCorrente;

            //console.log(window[recordCorrente])

            if(confirm(messaggio)){
                    fetch( rotta , {
                        method: 'POST',
                        headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                                                model       : modelTable,
                                                record      : window[recordCorrente],
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Errore nella risposta della rete');
                        }
                        return response.json();
                    })
                    .then(data => {
                        
                                if(data.success){
                                    

                                        var currentSortName = jQuery("#" + nomeTable).bootstrapTable('getOptions').sortName;
                                        var currentSortOrder = jQuery("#" + nomeTable).bootstrapTable('getOptions').sortOrder;

                                        jQuery("#"+nomeTable).bootstrapTable('load', data.dataSource);

                                        jQuery("#" + nomeTable).bootstrapTable('refreshOptions', {
                                            sortName    : currentSortName,
                                            sortOrder   : currentSortOrder
                                        });

                                }else{

                                }
                    })
                    .catch(error => {
                        console.error('Errore durante la chiamata fetch:', error);
                    });
            }

    })


    function responseTabellaFormatoSupportoGrammaturee(res) {
        return res
    } 

    function responseTabellaMacchineStampa(res) {
        return res
    } 

    function responseTabellaCostiStampa(res) {
        return res
    } 

    function responseTabellaSupportiStampa(res) {
        return res
    } 

    function queryFormatoSupportoGrammature(p) {

            jQuery('select').each(function() {
                
                
                var filtroAttivo    = jQuery(this).find("option:selected").val();
                
                var classAttivo     = jQuery(this).attr('class');
                var filtro          = classAttivo.split('-');
                
                var nomeFiltro      = "";
                if ( (filtro.length==6) && (filtro[3]=="filter")){
                    nomeFiltro = "filter__" + filtro[5]
                    if (filtroAttivo!=="")
                        eval("filtriAttivi."+nomeFiltro+".statoFiltro='"+filtroAttivo+"'")
                    else
                        eval("filtriAttivi."+nomeFiltro+".statoFiltro=''")
                }
                
            });

            return {
                        sort          : p.sort,
                        order         : p.order,
                        limit         : p.limit,
                        offset        : p.offset,
                        searchText    : p.search,
                        arrayFilter   : JSON.stringify(filtriAttivi),
            }
    }

    function queryMacchineStampa(p) {

        jQuery('select').each(function() {
            
            
            var filtroAttivo    = jQuery(this).find("option:selected").val();
            
            var classAttivo     = jQuery(this).attr('class');
            var filtro          = classAttivo.split('-');
            
            var nomeFiltro      = "";
            if ( (filtro.length==6) && (filtro[3]=="filter")){
                nomeFiltro = "filter__" + filtro[5]
                if (filtroAttivo!=="")
                    eval("filtriAttivi."+nomeFiltro+".statoFiltro='"+filtroAttivo+"'")
                else
                    eval("filtriAttivi."+nomeFiltro+".statoFiltro=''")
            }
            
        });

        return {
                    sort          : p.sort,
                    order         : p.order,
                    limit         : p.limit,
                    offset        : p.offset,
                    searchText    : p.search,
                    arrayFilter   : JSON.stringify(filtriAttivi),
        }
    }

    function queryCostiStampa(p) {

        jQuery('select').each(function() {
            
            
            var filtroAttivo    = jQuery(this).find("option:selected").val();
            
            var classAttivo     = jQuery(this).attr('class');
            var filtro          = classAttivo.split('-');
            
            var nomeFiltro      = "";
            if ( (filtro.length==6) && (filtro[3]=="filter")){
                nomeFiltro = "filter__" + filtro[5]
                if (filtroAttivo!=="")
                    eval("filtriAttivi."+nomeFiltro+".statoFiltro='"+filtroAttivo+"'")
                else
                    eval("filtriAttivi."+nomeFiltro+".statoFiltro=''")
            }
            
        });

        return {
                    sort          : p.sort,
                    order         : p.order,
                    limit         : p.limit,
                    offset        : p.offset,
                    searchText    : p.search,
                    arrayFilter   : JSON.stringify(filtriAttivi),
        }
    }

    function querySupportiStampa(p) {

            jQuery('select').each(function() {
                
                
                var filtroAttivo    = jQuery(this).find("option:selected").val();
                
                var classAttivo     = jQuery(this).attr('class');
                var filtro          = classAttivo.split('-');
                
                var nomeFiltro      = "";
                if ( (filtro.length==6) && (filtro[3]=="filter")){
                    nomeFiltro = "filter__" + filtro[5]
                    if (filtroAttivo!=="")
                        eval("filtriAttivi."+nomeFiltro+".statoFiltro='"+filtroAttivo+"'")
                    else
                        eval("filtriAttivi."+nomeFiltro+".statoFiltro=''")
                }
                
            });

            return {
                        sort          : p.sort,
                        order         : p.order,
                        limit         : p.limit,
                        offset        : p.offset,
                        searchText    : p.search,
                        arrayFilter   : JSON.stringify(filtriAttivi),
            }
    }
    
    function formattaZoomDetail(value,row) {
            if(row.stato==1){
                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="zoom dettaglio" class="bi bi-search zoomDetail" style="color: green;"></i>';
                elencoAzioni += '</div>'; 
            }else{
                elencoAzioni = '<div style="display: flex; justify-content: center; align-items: center; height: 100%;">';
                elencoAzioni += '<i title="sospeso" class="bi bi-toggle-off" style="color: red"></i>';
                elencoAzioni += '</div>'; 
            }

            return [elencoAzioni].join('')

    }
    
    function 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 formattaSospendiPivotRecord(value,row) {

            if (row.pivot.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 eliminaRecord(row, tabella, modelPath, modelTable, index, ritorno=0){

        if (confirm("Elimino il record selezionato?\n")){

                    let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                    var formData = new FormData();
                        formData.append('method', 'POST');
                        formData.append('_token', csrfToken);
                        formData.append('idRecord', JSON.stringify(row.id));
                        formData.append('modelPath', modelPath);
                        formData.append('modelTabella', modelTable);

                    fetch("{{route('eliminaRecordTabella')}}", {
                                                                    method  : 'POST',
                                                                    body    : formData
                    })
                    .then(response => response.json()
                    
                    )
                    .then(data => {
                                        if(data.success){
                                            //console.log(row.id)
                                            jQuery(tabella).bootstrapTable('remove', {
                                                                                    field   : 'id',
                                                                                    values  : [ritorno]
                                            });

                                        } else {

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

                    })
                    .finally(() => {

                    });

        }

    }

    function sospendiRecord(row, tabella, modelPath, modelTable, index){
                                            if (row.stato==0)
                                                stato = "Attivo"
                                            else
                                                stato = "Sospendo"
                                            if (confirm(stato + " il record selezionato?\n")){
                                                newStato = row.stato==1?0:1
                                                let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                                var formData = new FormData();
                                                    formData.append('method', 'POST');
                                                    formData.append('_token', csrfToken);
                                                    formData.append('idRecord', JSON.stringify(row.id));
                                                    formData.append('field', 'stato');
                                                    formData.append('currentValue', newStato);
                                                    formData.append('modelPath', modelPath);
                                                    formData.append('modelTabella', modelTable);

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

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

                                                });
                                            }
    }

    window.operazioniRecord = {

                                    'click .trash': function(e, value, row, index) {
                                                    var $td = $(e.target).closest('td'); // Recupera il <td> più vicino al target dell'evento
                                                    var className = $td.attr('class'); // Ottieni tutte le classi del <td>
                                                    
                                                    if ($td.hasClass('eliminaTipoStampa')) {

                                                        eliminaRecord(row, "#tabellaCostiStampa", "CentroStampa", "Printmanager_MacchineTipiStampa", index, row.id);

                                                    }if ($td.hasClass('eliminaMacchinaStampa')) {

                                                        eliminaRecord(row, "#tabellaMacchineStampa", "CentroStampa", "Printmanager_MacchineStampa", index, row.id);

                                                    }if ($td.hasClass('eliminaSupportiStampa')) {

                                                        eliminaRecord(row.pivot, "#tabellaSupportiStampa", "CentroStampa", "Printmanager_MacchineSupportiFormati", index, formatoSupportoCorrente.id);
                                                    
                                                    }if ($td.hasClass('eliminaFormatoGrammatura')) {

                                                        eliminaRecord(row, "#tabellaFormatoSupportoGrammature", "CentroStampa", "Printmanager_MacchineSupportiFormatiGrammature", index, row.id);
                                                    }
                                    },
                                    'click .sospendi': function(e, value, row, index) {

                                                    var $td = $(e.target).closest('td'); // Recupera il <td> più vicino al target dell'evento
                                                    var className = $td.attr('class'); // Ottieni tutte le classi del <td>
                                                    

                                                    if ($td.hasClass('sospendiTipoStampa')) {

                                                        sospendiRecord(row, "#tabellaCostiStampa", "CentroStampa", "Printmanager_MacchineTipiStampa", index);

                                                    }if ($td.hasClass('sospendiMacchinaStampa')) {

                                                        sospendiRecord(row, "#tabellaMacchineStampa", "CentroStampa", "Printmanager_MacchineStampa", index);
                                                        
                                                    }if ($td.hasClass('sospendiSupportiStampa')) {

                                                        sospendiRecord(row.pivot, "#tabellaSupportiStampa", "CentroStampa", "Printmanager_MacchineSupportiFormati", index);

                                                    }if ($td.hasClass('sospendiFormatoGrammatura')) {

                                                        sospendiRecord(row, "#tabellaFormatoSupportoGrammature", "CentroStampa", "Printmanager_MacchineSupportiFormatiGrammature", index);
                                                    }
                                    },
                                    'click .zoomDetail': function (e, value, row, index) { 
                                                    console.log(row)
                                                    var $td = $(e.target).closest('td'); // Recupera il <td> più vicino al target dell'evento
                                                    var className = $td.attr('class'); // Ottieni tutte le classi del <td>
                                                    
                                                    if ($td.hasClass('detailSupportiGrammature')) {
                                                           //alert('detailSupportiGrammature');
                                                            jQuery('#fullScreenModal').modal('show');
                                                    }if ($td.hasClass('altroDetail')) {

                                                    }

                                    },
    }

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

    }

    jQuery('a[data-bs-toggle="tab"]').on('click', function() {
            
    });

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

            macchinaCorrente    = row
            idMacchinaCorrente  = row.id
            
            //console.log(macchinaCorrente)
            
            // campi MacchinaStampa
                popolaCampi(macchinaCorrente)

            // tabellaCostiStampa
                initCostiStampa(idMacchinaCorrente)

            // tabellaSupporti
                initSupporti(idMacchinaCorrente)

            jQuery('#tabellaMacchineStampa tbody tr').removeClass('selected-row');
            $element.addClass('selected-row');

            jQuery("#spanMacchinaCorrente").text(macchinaCorrente.nome);
            jQuery("#nessunaMacchinaStampa").addClass("d-none");
            jQuery("#formTabbedMacchineStampa").removeClass("d-none");
            jQuery('#tab_InfoTecniche').trigger('click');
            
    });


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

        formatoSupportoCorrente    = row
        idFormatoSupportoCorrente  = row.id

        // console.log(row)
         
        initFormatoSupportoGrammature(idMacchinaCorrente, idFormatoSupportoCorrente);

    });

    function initFormatoSupportoGrammature(idFormatoSupportoCorrente=""){

            var urlBase = "{{ route('filtraFormatoSupportoGrammature', ['idMacchina' => '__IDMACCHINA__', 'idSupportoFormato' => '__IDSUPPORTO__']) }}".replace('__IDMACCHINA__', idMacchinaCorrente).replace('__IDSUPPORTO__', formatoSupportoCorrente.id);

            $tabellaFormatoSupportoGrammature.bootstrapTable('destroy').

                bootstrapTable({

                            {!! $colonneFormatiGrammature !!},
                            
                            url: urlBase,

                            queryParams	        : queryFormatoSupportoGrammature,

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

                            onLoadSuccess       : function(data){
                                console.log(data)
                            },

                            onSearch: function (text) {
                                
                            },

                            onEditableSave  : function (field, row, oldValue,$el) {
                                                                                    updateRecordCostiSupportiGrammature(row, field, 'Printmanager_MacchineSupportiFormatiGrammature')
                            },

                });

    }

    function initSupporti(idMacchinaCorrente=""){

        var urlBase = "{{ route('filtraFormatoSupportiMacchina', ['idMacchina' => '__ID__']) }}".replace('__ID__', idMacchinaCorrente);

            $tabellaSupportiStampa.bootstrapTable('destroy').

                    bootstrapTable({

                                {!! $colonneSupportiStampa !!},
                        
                                url: urlBase,

                                
                                queryParams	        : querySupportiStampa,

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

                                onLoadSuccess       : function(data){
                                },

                                onSearch: function (text) {
                                    
                                }

                    });

    }

    function updateRecordCostiSupportiGrammature(row, field, model){
            
            let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            var formData = new FormData();
                formData.append('method',       'POST');
                formData.append('_token',       csrfToken);
                formData.append('model',        model);
                formData.append('idRecord',     row.id);
                formData.append('field',        field);
                formData.append('record',       JSON.stringify(row));

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

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

            });
    }

    function initCostiStampa(idMacchinaCorrente=""){

            var urlBase = "{{ route('filtraTipiStampaMacchina', ['idMacchina' => '__ID__']) }}".replace('__ID__', idMacchinaCorrente);

            $tabellaCostiStampa.bootstrapTable('destroy').

            bootstrapTable({

                        {!! $colonneTipiStampa !!},
                        
                        url: urlBase,

                        queryParams	        : queryCostiStampa,

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

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        },

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

                                                                            
                                                                    updateRecordCostiSupportiGrammature(row, field, 'Printmanager_MacchineTipiStampa')

                        },

            });

    }

    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(today);

        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('saveRecord')}}";
                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