@extends('layouts.app')

@push('head-scripts')
@endpush 
 

@section('content')

@php
         
@endphp
<style>

    .toast-container {
        z-index: 1050; /* Assicura che il toast sia sopra gli altri elementi */
    }

    .toast {
        width           : 100%; /* Copre l'intera larghezza */
        border-radius   : 0; /* Rimuove gli angoli arrotondati */
        font-size       : 1rem; /* Migliora la leggibilità */
    }

    /* 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 anagraficaReseller">


    <div class="toast-container position-fixed top-0 start-0 w-100 p-3">
        <div class="toast align-items-center text-white bg-success border-0 w-100" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <!-- Il messaggio verrà inserito qui -->
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </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>
                        Gestione Reseller SYNC
                    </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                            = "tabellaResellerSync"
                            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                = "ragioneSociale"
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-side-pagination		  = "server"
                            data-page-list                = "15, 20, 25"
                            data-page-size                = 15
                            data-multiple-select-row      = false
                            data-click-to-select          = false
                    >
                    </table>

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

        <div class="col-md-9">
            <div class="card">
                <div class="card-header toolbar d-flex justify-content-between align-items-center" style="background-color: #f8f9fa; min-height: 60px;">
                    <div>
                        Nome: <span class="pillSpan" id="spanResellerSyncCorrente">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_SchedaAnagrafica" role="tab" aria-controls="tab_SchedaAnagrafica" 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">Anagrafica</span>
                                        </div>
                                    </a>
                                </li>
                                <!-- Tab 2 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_Connessioni" data-bs-toggle="tab" href="#tab_SchedaConnessione" role="tab" aria-controls="tab_SchedaConnessione" 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">Reseller Mysql/Ftp</span>
                                        </div>
                                    </a>
                                </li>
                
                                <!-- Tab 3 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_ApiKey" data-bs-toggle="tab" href="#tab_SchedaAltro" role="tab" aria-controls="tab_SchedaAltro" 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">Api key Reseller</span>
                                        </div>
                                    </a>
                                </li>
                                <!-- Tab 4 -->
                                <li class="nav-item" role="presentation">
                                    <a class="navlink-modulo" id="tab_Estensioni" data-bs-toggle="tab" href="#tab_SchedaEstensioni" role="tab" aria-controls="tab_SchedaAltro" 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">Estensioni</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_SchedaAnagrafica" role="tabpanel" aria-labelledby="tab_InfoTecniche">
                                    <form id="formAnagraficaResellerSync">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="partitaIva" class="form-label">Partita IVA</label>
                                                <input type="text" class="form-control" id="partitaIva" name="partitaIva">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="codiceFiscale" class="form-label">Codice Fiscale</label>
                                                <input type="text" class="form-control" id="codiceFiscale" name="codiceFiscale">
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="ragioneSociale" class="form-label">Ragione Sociale</label>
                                            <input type="text" class="form-control" id="ragioneSociale" name="ragioneSociale">
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="indirizzo" class="form-label">Indirizzo</label>
                                                <input type="text" class="form-control" id="indirizzo" name="indirizzo">
                                            </div>
                                            <div class="col-md-2">
                                                <label for="civico" class="form-label">Civico</label>
                                                <input type="text" class="form-control" id="civico" name="civico">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="luogo" class="form-label">Luogo</label>
                                                <input type="text" class="form-control" id="luogo" name="luogo">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="cap" class="form-label">CAP</label>
                                                <input type="text" class="form-control" id="cap" name="cap">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="provincia" class="form-label">Provincia</label>
                                                <input type="text" class="form-control" id="provincia" name="provincia">
                                            </div>
                                            <div class="col-md-4">
                                                <label for="stato" class="form-label">Stato</label>
                                                <input type="text" class="form-control" id="stato" name="stato">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-12>
                                                <label for="dominio" class="form-label">Dominio</label>
                                                <input type="text" class="form-control" id="dominio" name="dominio">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="email" class="form-label">Email</label>
                                                <input type="email" class="form-control" id="email" name="email">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="pec" class="form-label">PEC</label>
                                                <input type="email" class="form-control" id="pec" name="pec">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="telefono" class="form-label">Telefono</label>
                                                <input type="text" class="form-control" id="telefono" name="telefono">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="mobile" class="form-label">Mobile</label>
                                                <input type="text" class="form-control" id="mobile" name="mobile">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="codiceAteco" class="form-label">Codice Ateco</label>
                                                <input type="text" class="form-control" id="codiceAteco" name="codiceAteco">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="codiceSDI" class="form-label">Codice SDI</label>
                                                <input type="text" class="form-control" id="codiceSDI" name="codiceSDI">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="attivo" class="form-label">Stato</label>
                                                <select class="form-select" id="attivo" name="attivo">
                                                    <option value="1">Attivo</option>
                                                    <option value="0">Non Attivo</option>
                                                </select>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                
                                <div class="tab-pane fade" id="tab_SchedaConnessione" role="tabpanel" aria-labelledby="tab_Connessioni">

                                    <form id="formConfigurazioneResellerSync">
    
                                        <!-- Fieldset per MySQL -->
                                        <fieldset class="border p-3 mb-3">
                                            <legend class="float-none w-auto px-2">Connessione MySQL</legend>

                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="mysqlHost" class="form-label">Host MySQL</label>
                                                    <input type="text" class="form-control" id="mysqlHost" name="mysqlHost">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="mysqlPort" class="form-label">Porta</label>
                                                    <input type="text" class="form-control" id="mysqlPort" name="mysqlPort" value="3306">
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="mysqlDatabase" class="form-label">Database</label>
                                                    <input type="text" class="form-control" id="mysqlDatabase" name="mysqlDatabase">
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="mysqlUsername" class="form-label">Username</label>
                                                    <input type="text" class="form-control" id="mysqlUsername" name="mysqlUsername" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
                                                </div>
                                                <div class="col-md-6">
                                                    <label for="mysqlPassword" class="form-label">Password</label>
                                                    <input type="text" class="form-control" id="mysqlPassword" name="mysqlPassword" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-12 text-end">
                                                    <button type="button" class="btn btn-primary" onclick="testMysql()">Test Connessione MySQL</button>
                                                </div>
                                            </div>
                                        </fieldset>

                                        <!-- Fieldset per FTP -->
                                        <fieldset class="border p-3 mb-3">
                                            <legend class="float-none w-auto px-2">Connessione FTP</legend>

                                            <div class="row mb-3">
                                                <div class="col-md-10">
                                                    <label for="ftpHost" class="form-label">Host FTP</label>
                                                    <input type="text" class="form-control" id="ftpHost" name="ftpHost">
                                                </div>
                                                <div class="col-md-2">
                                                    <label for="ftpPort" class="form-label">Porta</label>
                                                    <input type="text" class="form-control" id="ftpPort" name="ftpPort" value="21">
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <label for="ftpUsername" class="form-label">Username</label>
                                                    <input type="text" class="form-control" id="ftpUsername" name="ftpUsername" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
                                                </div> 
                                                <div class="col-md-6">
                                                    <label for="ftpPassword" class="form-label">Password</label>
                                                    <input type="password" class="form-control" id="ftpPassword" name="ftpPassword" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <label for="ftpDirectory" class="form-label">Directory FTP</label>
                                                    <input type="text" class="form-control" id="ftpDirectory" name="ftpDirectory">
                                                </div>
                                            </div>


                                            <div class="row mb-3">
                                                <div class="col-md-12 text-end">
                                                    <button type="button" class="btn btn-secondary" onclick="testFtp()">Test Connessione FTP</button>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </form>

                                </div>
                                <!-- Tab Content 2 -->
                                <div class="tab-pane fade" id="tab_SchedaAltro" role="tabpanel" aria-labelledby="tab_ApiKey">
                                  
                                    <div class="row mb-3">
                                        <div class="col-md-12">
                                            <label for="apiKey" class="form-label">API Key</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="apiKey" name="apiKey" readonly>
                                                <button class="btn btn-warning" type="button" id="btnRegeneraApiKey">
                                                    <i class="bi bi-arrow-clockwise"></i> Rigenera
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <!-- Tab Content 3 -->
                                <div class="tab-pane fade" id="tab_SchedaEstensioni" role="tabpanel" aria-labelledby="tab_Estensioni">
                                  
                                        <div class="row mb-3">
                                            <div class="col-md-12">
                                                <label for="apiKey" class="form-label">Estensioni</label>
                                                
                                                    <table
                                                        
                                                            width                         = "100%"
                                                            id                            = "tabellaEstensioniResellerSync"
                                                            data-show-search-clear-button = false
                                                            data-locale                   = "it-IT"              
                                                            class                         = "table table-sm"  
                                                            data-toggle				      = "table"
                                                            data-detail-view			  = true
                                                            data-detail-formatter         = "dettaglioEstensione"

                                                            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                = ""
                                                            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>
                        </div>
                
                    </div>
                </div>

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

@endsection

@push('scripts')

<script src="{{ asset('js/libPrintmanager.js') }}?v={{ time() }}"></script>

<script>


    var $tabellaResellerSync                = jQuery('#tabellaResellerSync')
    var $tabellaEstensioniResellerSync      = jQuery('#tabellaEstensioniResellerSync')
    var resellerCorrente                    = null;
    
    window.operazioniRecord = {

                                'click .eliminaReseller': function (e, value, row, index) {
                                        if (confirm("Elimino il reseller 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('idReseller', row.id);

                                            //$toast = toastr["info"]( "Attendere... cancellazione estensione in corso..." )

                                            fetch("{{route('eliminaResellerSync')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    
                                                                    $('#tabellaResellerSync').bootstrapTable('refresh');

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

                                            });

                                        }
                                },

                                'click .eliminaEstensione': function (e, value, row, index) {
                                        if (confirm("Elimino l' estensione selezionata?\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('idReseller', row.idReseller);
                                                formData.append('idResellerEstensione', row.idResellerEstensione);

                                            //$toast = toastr["info"]( "Attendere... cancellazione estensione in corso..." )

                                            fetch("{{route('eliminaEstensioneResellerSync')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    
                                                                    $('#tabellaEstensioniResellerSync').bootstrapTable('refresh');

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

                                            });

                                        }
                                },

                                'click .rigeneraApiKeyEstensione': function (e, value, row, index) {
                                        if (confirm("Rigenero la API Key dell' estensione selezionata?\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('idReseller', row.idReseller);
                                                formData.append('idResellerEstensione', row.idResellerEstensione);

                                            //$toast = toastr["info"]( "Attendere... cancellazione estensione in corso..." )

                                            fetch("{{route('rigeneraApiKeyEstensioneResellerSync')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    
                                                                   $('#tabellaEstensioniResellerSync').bootstrapTable('refresh');

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

                                            });

                                        }
                                },

                                'click .sospendiEstensione': function (e, value, row, index) {
                                        $statoEstensione = row.stato=="attivo" ? "Sospendo" : "Attivo";
                                        if (confirm( $statoEstensione+" l' estensione selezionata?\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('idReseller', row.idReseller);
                                                formData.append('idResellerEstensione', row.idResellerEstensione);
                                                formData.append('statoEstensione', $statoEstensione);

                                            //$toast = toastr["info"]( "Attendere... cancellazione estensione in corso..." )

                                            fetch("{{route('sospendiAttivaEstensioneResellerSync')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    
                                                                   $('#tabellaEstensioniResellerSync').bootstrapTable('refresh');

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

                                            });

                                        }
                                },
                                
                                'click .sospendiReseller': function (e, value, row, index) {
                                        $statoReseller = row.attivo===1 ? "Sospendo" : "Attivo";
                                        if (confirm( $statoReseller+" il reseller 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('idReseller', row.id);

                                            //$toast = toastr["info"]( "Attendere... cancellazione estensione in corso..." )

                                            fetch("{{route('sospendiAttivaResellerSync')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    
                                                                   $('#tabellaResellerSync').bootstrapTable('refresh');

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

                                            });

                                        }
                                },
                                

    }

    function testMysql() {

        let resellerId = resellerCorrente.id;
        if (resellerId == null){
            alert("Seleziona un reseller");
        }else{
            $.get("{{ route('testResellerMysql', ['idReseller' => '__ID__']) }}".replace('__ID__', resellerId), function(response) {
                alert(response.message);
            }).fail(function(error) {
                alert("Errore: " + error.responseJSON.message);
            });
        }
    }

    function testFtp() {

        let resellerId = resellerCorrente.id;
        if (resellerId == null){
            alert("Seleziona un reseller");
        }else{
            $.get("{{ route('testResellerFtp', ['idReseller' => '__ID__']) }}".replace('__ID__', resellerId), function(response) {
                alert(response.message);
            }).fail(function(error) {
                alert("Errore: " + error.responseJSON.message);
            });
        }

    }

    function copyApiKey(index) {
        let apiKeyText = document.getElementById(`apiKeyText-${index}`).innerText;
        navigator.clipboard.writeText(apiKeyText).then(() => {
            alert("API Key copiata!");
        });
    }
    
    function dettaglioEstensione(index, row) {
        return `
            <div class="p-2">
                <h5>Dettaglio Estensione</h5>
                
                <p><strong>API Key:</strong> <span id="apiKeyText-${index}">${row.apiKey}</span> 
                    <button class="btn btn-sm btn-outline-primary" onclick="copyApiKey('${index}')">Copia</button>
                </p>
            </div>
        `;
    }

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

            Object.keys(resellerCorrente).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 = !!resellerCorrente[key];
                    }else if (inputElement.type === 'password') {

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

    }

    function formattaApiKey(value,row) {

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

        return [elencoAzioni].join('')
    }

    function formattaEliminaEstensione(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaEliminaReseller(value,row) {

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

        return [elencoAzioni].join('')

    }

    function formattaSospendiReseller(value,row) {

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

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

        return [elencoAzioni].join('')

    }
    
    function formattaSospendiEstensione(value,row) {

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

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

        return [elencoAzioni].join('')

    }

    function responseTabella(res) {
        return res
    } 

    function queryResellerSync(p) {
            

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

    function queryEstensioniResellerSync(p) {
            
        return {
                    sort          : p.sort,
                    order         : p.order,
                    limit         : p.limit,
                    offset        : p.offset,
                    searchText    : p.search,
                    idReseller    : resellerCorrente.id
        }
    }

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

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

                var actionUrl   = "";
                

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

                                    $tabellaResellerSync.bootstrapTable('append', JSON.parse(data.recordResellerSync));

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

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

            resellerCorrente    = row

            console.log(resellerCorrente)

            jQuery("#spanResellerSyncCorrente").text(resellerCorrente.ragioneSociale);

            popolaCampi(resellerCorrente);

            initResellerEstensioniSync(resellerCorrente);

            // Memorizza il valore iniziale di input, select e textarea
            jQuery('#formConfigurazioneResellerSync input, #formConfigurazioneResellerSync select, #formConfigurazioneResellerSync textarea, #formAnagraficaResellerSync input, #formAnagraficaResellerSync select, #formAnagraficaResellerSync textarea').each(function() {
                let currentValue = jQuery(this).val();
                        console.log("Assegnato previous-value a:", jQuery(this).attr('name'), "Valore:", currentValue);

                jQuery(this).data('previous-value', currentValue);
            });

            // Memorizza il valore iniziale dei checkbox
            jQuery('#formConfigurazioneResellerSync input[type="checkbox"], #formAnagraficaResellerSync input[type="checkbox"]').each(function() {
                let checkedValue = jQuery(this).is(':checked') ? 1 : 0;
                jQuery(this).data('previous-value', checkedValue);
                jQuery(this).val(checkedValue);
            });

    });

    function initResellerSync(dataDefault=""){
            
            $tabellaResellerSync.bootstrapTable('destroy').

            bootstrapTable({

                            {!! $colonneResellerSync !!},
                            
                            url                 : "{{ route('filtraResellerSync') }}",

                            queryParams	        : queryResellerSync,

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

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

            });

    }

    function initResellerEstensioniSync(dataDefault=""){
            
            $tabellaEstensioniResellerSync.bootstrapTable('destroy').

            bootstrapTable({

                            {!! $colonneEstensioniResellerSync !!},
                            
                            url                 : "{{ route('filtraEstensioniResellerSync') }}",

                            queryParams	        : queryEstensioniResellerSync,

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

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

            });

    }


    jQuery(document).ready(function() {

        jQuery('#formConfigurazioneResellerSync input, #formAnagraficaResellerSync input').on('focusout', function() {
                    if (typeof resellerCorrente !== 'undefined' && resellerCorrente !== null) {
                        updateRecord("ResellerSync", "Printmanager_ResellerSync", resellerCorrente.id, this,1); 
                    }
        });

        initResellerSync();

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

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

    });


    })

    document.getElementById("btnRegeneraApiKey").addEventListener("click", function () {

        if (resellerCorrente == null){
            alert("Seleziona un reseller");
            return;
        }

        if (!confirm("Sei sicuro di voler rigenerare la API Key? Questa operazione è irreversibile.")) {
            return;
        }

        fetch("{{ route('rigeneraApiKey')}}", {
            method: "POST",
            headers: {
                        "Content-Type": "application/json",
                        "Authorization": "Bearer " + document.getElementById("apiKey").dataset.token // Se serve autenticazione
            },
            body: JSON.stringify({
                resellerId: 1 // Sostituisci con l'ID effettivo del reseller
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById("apiKey").value = data.apiKey;
                alert("Nuova API Key generata con successo!");
            } else {
                alert("Errore nella rigenerazione dell'API Key.");
            }
        })
        .catch(error => console.error("Errore:", error));
    });

</script>

@endpush