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


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

        <div class="col-md-12">
            <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 Estensioni 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                            = "tabellaEstensioniResellerSync"
                            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                = "descrizione"
                            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>

@endsection

@push('scripts')

  <script>


    var $tabellaEstensioniResellerSync    = jQuery('#tabellaEstensioniResellerSync')
    var estensioneCorrente                = null;
    
    window.operazioniRecord = {
    }

    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" style="color: red;"></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 queryEstensioniResellerSync(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 reseller?")){

                var actionUrl   = "";
                

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

                                    $tabellaEstensioniResellerSync.bootstrapTable('append', JSON.parse(data.recordEstensioniResellerSync));

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

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

            estensioneCorrente    = row
            console.log(estensioneCorrente)

            jQuery("#spanEstensioneResellerSyncCorrente").text(estensioneCorrente.descrizione);


            popolaCampi(estensioneCorrente);

    });

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

            bootstrapTable({

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

                            queryParams	        : queryEstensioniResellerSync,

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

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

            });

    }

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

    })


</script>

@endpush