@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 supportiStampa">

    <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          = "tabellaFormatiGrammature"
                            data-pathtable          = "CentroStampa"
                            data-modeltable         = "Printmanager_SupportiFormatiGrammature"
                            data-rotta              = "{{ route('rigeneraRecord') }}"
                            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          = "tabellaFormatiGrammature"
                            data-pathtable          = "CentroStampa"
                            data-modeltable         = "Printmanager_SupportiFormatiGrammature"
                            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                            = "tabellaFormatiGrammature"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = "table"  
                            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		  = "responseTabellaFormatiGrammature"
                            data-sort-name                = "nomeGrammatura"
                            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                            = "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                = 10
                            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="spansupportoCorrente">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 3 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_FormatiCarta" data-bs-toggle="tab" href="#tab_FormatiCartaContent" role="tab" aria-controls="tab_FormatiCartaContent" 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">Formati Carta</span>
                                        </div>
                                    </a>
                                </li>
                
                
                            </ul>
                        </div>
                
                        <!-- Tab Content -->
                        <div class="col-md-9" >
                            <div class="tab-content d-none" id="formTabbedSupportiStampa" 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>
                                                
                                                
                                                    <!-- Campi Tecnologia, Tipo Supporto, Applicazione (QuaterRow 4 each) -->
                                                    <div class="row">
                                                        <div class="col-md-12 mb-3">
                                                            <label for="classificazioneKomori" class="form-label">Classificazione Komori</label>
                                                            <input type="number" class="form-control" id="classificazioneKomori" name="classificazioneKomori" required>
                                                        </div>
                                                
                                                        
                                                    </div>
                                                
                                                
                                                    <!-- Campi Base Min, Altezza Min, Base Max, Altezza Max (QuaterRow 4 each) -->
                                                    <div class="row">
                                                        <div class="col-md-4 mb-3">
                                                            <label for="mano" class="form-label">Mano (mm.)</label>
                                                            <input type="number" class="form-control" id="mano" name="mano" required>
                                                        </div>
                                                
                                                        <div class="col-md-4 mb-3">
                                                            <label for="costoKg" class="form-label">Costo kg (€/kg)</label>
                                                            <input type="number" class="form-control" id="costoKg" name="costoKg" required>
                                                        </div>
                                                
                                                        <div class="col-md-4 mb-3">
                                                            <label for="ritardoGiorni" class="form-label">Ritardo giorni (gg.)</label>
                                                            <input type="number" class="form-control" id="ritardoGiorni" name="ritardoGiorni" 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>
                                    
                                    
                                </div>
    
                                    
                                </div>
                
                                <!-- Tab Content 2 -->
                                <div class="tab-pane fade" id="tab_FormatiCartaContent" role="tabpanel" aria-labelledby="tab_FormatiCarta">
                                    
                                        <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;">Formati Carta</h5>
                                                        </div>
                                                        <div>&nbsp;<span id="countTabellaFormatiCarta"></span></div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <button 
                                                            data-messaggio          = "Confermi la Rigenerazione dei Formati Carta?"
                                                            data-nometable          = "tabellaFormatiCarta"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_SupportiFormatiCarta"
                                                            data-rotta              = "{{ route('rigeneraRecord') }}"
                                                            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 Formati Carta?"
                                                            data-nometable          = "tabellaFormatiCarta"
                                                            data-pathtable          = "CentroStampa"
                                                            data-modeltable         = "Printmanager_SupportiFormatiCarta"
                                                            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="bootstrap-table-container-large">
                                                    <table
                                
                                                            width                         = "100%"
                                                            id                            = "tabellaFormatiCarta"
                                                            data-show-search-clear-button = false
                                                            data-locale                   = "it-IT"              
                                                            class                         = "table"  
                                                            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		  = "responsetabellaFormatiCarta"
                                                            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                = 10
                                                            data-multiple-select-row      = true
                                                            data-click-to-select          = true
                                                    >
                                                    </table>
                                                </div>
                                        </fieldset>
                                </div>

                
                            </div>
                            <div class="tab-content" id="nessunSupportoStampa" style="padding: 15px;">Nessun Supporto selezionato</div>
                        </div>
                
                    </div>
                </div>
                
                

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

@endsection

@push('scripts')

  <script>

    var $tabellaSupportiStampa      = jQuery('#tabellaSupportiStampa');
    var $tabellaFormatiCarta        = jQuery('#tabellaFormatiCarta');
    var $tabellaFormatiGrammature   = jQuery('#tabellaFormatiGrammature');

    var supportoCorrente            = null;
    var idSupportoCorrente          = null;

    var formatoCorrente             = null;
    var idFormatoCorrente           = null;
    var idSupportoFormatoCorrente   = 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 record              = supportoCorrente;
                record.idSupportoFormatoCorrente   = idSupportoFormatoCorrente;

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

                                   console.log(data.dataSource)
                                   console.log(nomeTable)

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

    })

    jQuery('#tabellaSupportiStampa').on('change', 'input[type="checkbox"]', function() {
        var $row = jQuery(this).closest('tr'); // Trova la riga corrispondente
        var isChecked = jQuery(this).is(':checked'); // Controlla se il checkbox è selezionato

        jQuery('#tabellaSupportiStampa').bootstrapTable('check', $row.data('index'), isChecked);
    });


    function responseTabellaFormatiGrammature(res) {
        return res
    } 

    function responsetabellaSupportiStampa(res) {
        return res
    } 

    function responsetabellaFormatiCarta(res) {
        return res
    } 

    function responseTabellaSupportiStampa(res) {
        return res
    } 

    function queryFormatiGrammature(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 queryFormatiCarta(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 eliminaRecord(row, tabella, modelPath, modelTable, index){

        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){
                                            jQuery(tabella).bootstrapTable('remove', {
                                                                                    field   : 'id',
                                                                                    values  : [row.id]
                                            });

                                        } 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', 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('eliminaFormatoCarta')) {

                                                        eliminaRecord(row, "#tabellaFormatiCarta", "CentroStampa", "Printmanager_SupportiFormatiCarta", index);
                                                    }else if ($td.hasClass('eliminaSupportoStampa')) {

                                                        eliminaRecord(row, "#tabellaSupportiStampa", "Tabelle", "Printmanager_SupportiStampa", index);
                                                    }else if ($td.hasClass('eliminaFormatoGrammatura')) {

                                                        eliminaRecord(row, "#tabellaFormatiGrammature", "CentroStampa", "Printmanager_SupportiFormatiGrammature", index);
                                                    }
                                    },
                                    'click .sospendi': function(e, value, row, index) {
                                                    // Qui 'e' è l'oggetto evento
                                                    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('sospendiFormatoCarta')) {

                                                        sospendiRecord(row, "#tabellaFormatiCarta", "CentroStampa", "Printmanager_SupportiFormatiCarta", index);

                                                    }else if ($td.hasClass('sospendiSupportoStampa')) {

                                                        sospendiRecord(row, "#tabellaSupportiStampa", "Tabelle", "Printmanager_SupportiStampa", index);
                                                    }else if ($td.hasClass('sospendiFormatoGrammatura')) {

                                                        sospendiRecord(row, "#tabellaFormatiGrammature", "CentroStampa", "Printmanager_SupportiFormatiGrammature", index);
                                                    }

                                    },
                                    'click .zoomDetail': function (e, value, row, index) { 

                                            idSupportoFormatoCorrente = row.id;
                                            jQuery('#fullScreenModal').modal('show');

                                    },
    }

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

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

    }

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

            supportoCorrente    = row
            idSupportoCorrente  = row.id
            // campi SupportoStampa
                popolaCampi(supportoCorrente)

            // tabellaFormatiCarta
                initFormatiCarta(idSupportoCorrente)


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

            jQuery("#spansupportoCorrente").text(supportoCorrente.nome);
            jQuery("#nessunSupportoStampa").addClass("d-none");
            jQuery("#formTabbedSupportiStampa").removeClass("d-none");
            jQuery('#tab_InfoTecniche').trigger('click');

    });

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

            formatoCorrente    = row
            idFormatoCorrente  = row.id

            initFormatiGrammature(idFormatoCorrente);
            
    });

    function initFormatiGrammature(idFormatoCorrente=""){

        var urlBase = "{{ route('filtraFormatiGrammature', ['idSupportoFormato' => '__IDSUPPORTO__']) }}".replace('__IDSUPPORTO__', idFormatoCorrente);

        $tabellaFormatiGrammature.bootstrapTable('destroy').

            bootstrapTable({

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

                        queryParams	        : queryFormatiGrammature,

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

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        }

            });

    }

    function updateRecordFormatiCarta(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 initFormatiCarta(idSupportoCorrente=""){

            var urlBase = "{{ route('filtraFormatiCartaSupporti', ['idSupporto' => '__ID__']) }}".replace('__ID__', idSupportoCorrente);

            $tabellaFormatiCarta.bootstrapTable('destroy').

            bootstrapTable({

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

                        queryParams	        : queryFormatiCarta,

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

                        onLoadSuccess       : function(data){
                        },

                        onSearch: function (text) {
                            
                        },

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

                                                                    updateRecordFormatiCarta(row, field, 'Printmanager_SupportiFormatiCarta')

                        },

            });

    }

    function initSupportiStampa(dataDefault=""){
            
            $tabellaSupportiStampa.bootstrapTable('destroy').

            bootstrapTable({

                        {!! $colonneSupportiStampa !!},
                        

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

                        queryParams	        : querySupportiStampa,

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

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

            });

    }

    jQuery(document).ready(function() {
        
        initSupportiStampa(today);

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

        // 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', 'Tabelle');
                    formData.append('modelTable', 'Printmanager_SupportiStampa');
                    formData.append('id', idSupportoCorrente);

                // 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 = $tabellaSupportiStampa.bootstrapTable('getData').findIndex(function(row) {
                                        return row.id === supportoCorrente.id;
                                    });

                                    supportoCorrente = data.record;

                                    $tabellaSupportiStampa.bootstrapTable('updateRow', {index: indiceRigaMaster, row: supportoCorrente});

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

        });
        

    })

</script>

@endpush