@extends('layouts.app')

@push('head-scripts')
@endpush 
 

@section('content')

@php
         
@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 prodottiTipografici">


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

        <div class="col-md-2">
            <div class="card">
                
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        Gestione Prodotti tipografici
                    </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                            = "tabellaProdottiTipografici"
                            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		  = "responseTabella"
                            data-sort-name                = "nome"
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-side-pagination		  = "server"
                            data-page-list                = "15, 20, 25"
                            data-page-size                = 15
                            data-multiple-select-row      = false
                            data-click-to-select          = false
                    >
                    </table>

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

        <div class="col-md-10">
            <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="spanProdottoCorrente">Nessuna selezione</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row" id="divTabbed">
                
                        <!-- Tabs Menu -->
                        <div class="col-md-2">
                            <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_InfoWeb" data-bs-toggle="tab" href="#tab_InfoWebContent" role="tab" aria-controls="tab_InfoWebContent" 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">Info web</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 3 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_Configurazione" data-bs-toggle="tab" href="#tab_ConfigurazioneContent" role="tab" aria-controls="tab_ConfigurazioneContent" 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">Configurazione</span>
                                        </div>
                                    </a>
                                </li>
                
                            </ul>
                        </div>
                
                        <!-- Tab Content -->
                        <div class="col-md-10" >
                            <div class="tab-content" id="formTabbedProdottiTipografici" style="padding: 15px;">
                
                                <!-- Tab Content 1 -->
                                <div class="tab-pane fade show active" id="tab_InfoTecnicheContent" role="tabpanel" aria-labelledby="tab_InfoTecniche">
                                    1
                                </div>
                
                                <!-- Tab Content 3 -->
                                <div class="tab-pane fade" id="tab_InfoWebContent" role="tabpanel" aria-labelledby="tab_InfoWeb">
                                   2

                                </div>
                
                                <!-- Tab Content 2 -->
                                <div class="tab-pane fade" id="tab_ConfigurazioneContent" role="tabpanel" aria-labelledby="tab_Configurazione">
                                        
                                    3
                                
                                    
                                </div>
                
                
                            </div>
                        </div>
                
                    </div>
                </div>
                
                

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

@endsection

@push('scripts')

  <script>



    var $tabellaProdottiTipografici = jQuery('#tabellaProdottiTipografici')

    window.operazioniRecord = {
    }

    function generaURL(tabellaBase) {
        return "{{ route('filtraTabellaBase', ['tabellaBase' => '::tabellaBase::'])}}"

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

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


                                    jsonString = `{${data}}`; 

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

    function popolaSupporti(idFormatoCarta=""){

        var urlBase = "{{ route('filtraSupportiFormatoGrammature', ['idFormatoCarta' => 'idFormatoCarta']) }}".replace('idFormatoCarta', idFormatoCarta);

            $tabellaSupportiFormatiGrammature.bootstrapTable('destroy').

                                                                                bootstrapTable({

                                                                                    
                                                                                            url: urlBase,
                                                                                            
                                                                                            //queryParams	        : querySupportiStampa,

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

                                                                                            onLoadSuccess       : function(data){
                                                                                            },

                                                                                            onSearch: function (text) {
                                                                                                
                                                                                            }

                                                                                });

    }

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

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

    }

    function formattaDuplicaRecord(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaEliminaRecord(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaSospendiRecord(value,row) {

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

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

        return [elencoAzioni].join('')

    }

    function responseTabella(res) {
        return res
    } 

    function queryProdottiTipografici(p) {
            

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


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

        if(confirm("Creo una nuovo prodotto?")){

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

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

                                    $tabellaProdottiTipografici.bootstrapTable('append', JSON.parse(data.recordProdottoTipografico));

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

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

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

            prodottoCorrente    = row

            jQuery("#spanProdottoCorrente").text(prodottoCorrente.nome);
    
            console.log(prodottoCorrente)

            popolaCampi(prodottoCorrente);

    });

    function initProdottiTipografici(dataDefault=""){
            
            $tabellaProdottiTipografici.bootstrapTable('destroy').

            bootstrapTable({

                            {!! $colonneProdottiTipografici !!},
                            

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

                            queryParams	        : queryProdottiTipografici,

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

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

            });

    }

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

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

        // 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('saveProdottoTipografico')}}";
                var formData    = new FormData(currentForm);
                    formData.append('modelPath', 'Prodotti');
                    formData.append('modelTable', 'Printmanager_ProdottiTipografici');
                    formData.append('id', iPprodottoCorrente);

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

                                    prodottoCorrente = data.record;

                                    $tabellaProdottiTipografici.bootstrapTable('updateRow', {index: indiceRigaMaster, row: prodottoCorrente});

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

        });
        
    })

</script>

@endpush