@extends('layouts.app')

@push('head-scripts')
    <style>
        
        /* Cambia il cursore su tutte le righe della tabella */
        tr[data-index] {
            cursor: pointer; /* Cambia il cursore in "pointer" */
        }

        /* Aggiungi un'icona al passaggio del mouse */
        tr[data-index]:hover .selection-icon {
            visibility: visible; /* Mostra l'icona al passaggio del mouse */
        }

        .table tbody tr.highlight {
            background-color: yellow !important;
            transition: background-color 1s ease-in-out;
        }


    </style>
@endpush 

<meta name="csrf-token" content="{{ csrf_token() }}">   

@section('content')

@php
    //var_dump($listaTabelle);
@endphp



<section class="section contact">   
   

    <div class="modal fade" id="modalEditRecord" tabindex="-1">

        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title"><span id="spanTipoOperazione"></span></h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="formEditRecord">
                    <div id="divFormElement"></div>
                    
                    <input type="hidden" id="idRecord" name="idRecord">

                </form>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
              <button id="btnRegistraRecord" type="button" class="btn btn-primary">Registra</button>
            </div>
          </div>
        </div>
    </div>


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

    <div class="col-md-3">

        <div class="card">            
            <h5 class="card-header toolbar d-flex justify-content-between align-items-center">
                {{$titolo}}                            
            </h5>
            <div class="card-body">

                <table                      
                            
                            id                            = "tabelleBase"
                            data-show-search-clear-button = false
                            data-locale                   = "it-IT"              
                            class                         = "table"  
                            data-toggle				      = "table"
                            data-detail-view			  = false
                            data-toolbar                  = ""
                            data-search                   = true
                            data-show-search-clear-button = false
                            data-filter-control           = true
                            data-url                      = ""
                            data-query-params			  = ""
                            data-response-handler		  = "responseHandler"
                            data-sort-name                = "name"
                            data-show-header              = true
                            data-sort-order               = "asc"
                            data-show-extended-pagination = true
                            data-pagination				  = true
                            data-only-info-pagination 	  = false
                            data-page-list                = "25, 50, 100"
                            data-page-size                = 25
                            data-multiple-select-row      = false
                            data-click-to-select          = true
                            data-single-select            = true
                >
                </table>

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

    <div class="col-md-9">

        <div class="card">
            <!-- Testata card con toolbar -->
            <h5 class="card-header toolbar d-flex justify-content-between align-items-center">
                <div>
                    <span class="d-inline">Nome: &nbsp;</span>
                    <div class="pillSpan d-inline" id="spanRecordCorrente">
                        <span class="badge text-bg-info">Nessuna selezione</span>
                    </div>
                </div>
                <div>
                    @if(isset($toolBarScheda))            
                        @component( "components.toolBarModulo" ,["toolBarScheda" => $toolBarScheda]) @endcomponent
                    @endif                                            
                </div>
            </h5>
            <!-- End Testata card con toolbar -->

            <div class="card-body">
                
                <table                                                  
                        id                            = "tabellaBase"
                        data-show-search-clear-button = false
                        data-locale                   = "it-IT"              
                        class                         = ""  
                        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		  = "responseHandler"
                        data-sort-name                = "id"
                        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                = "10, 25, 50, 100"
                        data-page-size                = 10
                        data-multiple-select-row      = false
                        data-click-to-select          = true
                >
                </table>
            </div>
        </div>
    </div>
    
  
@endsection

@push('scripts')

  <script>
   
    var $tabelleBase                = jQuery('#tabelleBase');
    var $tabellaBaseCorrente        = jQuery('#tabellaBase');
    var $tabellaMysql               = null;
    var $colonneTabellaCorrente     = null;
    var today                       = "";
    
    function responseHandler(res) {
        return res
    } 

    document.getElementById('btnRegistraRecord').addEventListener('click', function() {
        let formData = new FormData(document.getElementById('formEditRecord'));
        let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        formData.append('modelTabella',$tabellaMysql);
        formData.append('_token', csrfToken);

        // Esegui la richiesta AJAX
        fetch("{{ route('salvaRecordTabellaBase') }}", {
                                                        method  : 'POST',
                                                        body    : formData,
        })
        .then(response => response.json())

        .then(data => {

            console.log(data)
            
            if (data.success) {
                // Mostra un messaggio di successo
                alert(data.message)

                // Trova l'indice della riga aggiornata
                let rowIndex = $tabellaBaseCorrente.bootstrapTable('getData').findIndex(r => r.id === +document.getElementById('idRecord').value );
                    rowIndex = +rowIndex;
                

                if (rowIndex !== -1) {

                    $tabellaBaseCorrente.bootstrapTable('updateRow', {
                                                                index   : rowIndex,
                                                                row     : data.row
                    });

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

                }else{
                        // Se la riga non esiste, aggiungila
                        $tabellaBaseCorrente.bootstrapTable('append', JSON.parse(data.row));

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

                }

            } else {
                // Mostra un messaggio di errore
                alert(data.message)
            }

                // Chiudi la modale
                jQuery('#modalEditRecord').modal('hide');

        })
        .catch(error => {

                // errore
                alert( 'Errore: ' + error.message );

                // Chiudi la modale
                jQuery('#modalEditRecord').modal('hide');
        });
    });

    function resetDinamicoForm() {
        const formElement = document.getElementById('divFormElement');
        formElement.querySelectorAll('input, textarea, select').forEach(el => {
            if (el.type === 'checkbox' || el.type === 'radio') {
                el.checked = false;
            } else {
                el.value = '';
            }
        });
        document.getElementById('idRecord').value = "";
    }

    function generaFormDinamico(colonne, row = {}) {

        let formHtml = '<div class="row">';
        // console.log(colonne)
        colonne.forEach(colonna => {
            let value = row[colonna.field] || '';
            if (colonna.editable !== false) {
                switch(colonna.type) {
                    case 'text':
                        formHtml += `
                            <div class="form-group col-6 form-floating mb-2">
                                <input type="${colonna.type}" class="form-control form-control-lg" id="${colonna.field}" name="${colonna.field}" value="${value}">
                                <label for="floatingInput">${colonna.title}</label>
                            </div>`;
                        break;
                    case 'number':
                        value = +value
                        formHtml += `
                            <div class="form-group col-6 form-floating mb-2">
                                <input type="${colonna.type}" class="form-control form-control-lg" id="${colonna.field}" name="${colonna.field}" value="${value}">
                                <label for="floatingInput">${colonna.title}</label>
                            </div>`;
                        break;

                    case 'simpleSelect':
                        options = '';
                        colonna.source.forEach(option => {
                            let selected = option.value == value ? 'selected' : '';
                            options += `<option value="${option.value}" ${selected}>${option.text}</option>`;
                        });
                        formHtml += `
                            <div class="form-group col-6 form-floating mb-2">
                                <select class="form-select" id="${colonna.field}" name="${colonna.field}">
                                    ${options}
                                </select>
                                <label for="floatingSelect">${colonna.title}</label>
                            </div>`;
                        break;
                    case 'select':
                        options = '';
                        if(colonna.editable.extendSource){
                            colonna.editable.source = colonna.editable.extendSource
                        }
                        $formatoOptions = Object.values(colonna.editable.source).every(item => 
                            typeof item === 'object' && item.hasOwnProperty('value') && item.hasOwnProperty('text')
                        );
                        if(!$formatoOptions){
                            //console.log(colonna.editable.source);
                            const secondoOggetto = Object.keys(colonna.editable.source).map(key => ({
                                value: key,
                                text: colonna.editable.source[key]
                            }));
                            colonna.editable.source = secondoOggetto;
                        }

                        colonna.editable.source.forEach(option => {
                            let selected = option.value == value ? 'selected' : '';
                            options += `<option value="${option.value}" ${selected}>${option.text}</option>`;
                        });
                        formHtml += `
                            <div class="form-group col-6 form-floating mb-2">
                                <select class="form-select" id="${colonna.field}" name="${colonna.field}">
                                    ${options}
                                </select>
                                <label for="floatingSelect">${colonna.title}</label>
                            </div>`;
                        break;

                }
            }
        });
        formHtml +="</div>";
        return formHtml;
    }

    document.getElementById('inserisci').addEventListener('click', function() {
        
        if (!this.disabled) {
            resetDinamicoForm();
            let formHtml = generaFormDinamico($colonneTabellaCorrente);
                document.getElementById('spanTipoOperazione').innerHTML = "Nuovo Record";
                document.getElementById('divFormElement').innerHTML = formHtml;
                jQuery('#modalEditRecord').modal('show');
        }
    });

    function formattaPredefinitoRecord(value, row, index) {
        return [
            
            '<input type="radio" name="predefinito" class="predefinito" ', value==1 ? 'checked' : '', '>'
            
        ].join('');
    }

    function formattaModificaRecord(value,row) {            
            elencoAzioni = '<span class="d-flex justify-content-center"><i title="modifica" class="bi bi-pencil edit text-success"></i></span>';       
      return [elencoAzioni].join('')

    }

    function formattaEliminaRecord(value,row) {            
            elencoAzioni = '<span class="d-flex justify-content-center"><i title="elimina" class="bi bi-trash trash" style="color: red;"></i></span>';       
      return [elencoAzioni].join('')
    }

    function formattaDuplicaRecord(value,row) {
        elencoAzioni += '<span class="d-flex justify-content-center"><i title="duplica" class="bi bi-stickies duplica" style="color: green;"></i></span>';
        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 = '<span class="d-flex justify-content-center"><i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i></span>';

        return [elencoAzioni].join('')

    }

    function formattaOpzionale(value,row) {

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

        elencoAzioni = '<span class="d-flex justify-content-center"><i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i></span>';

        return [elencoAzioni].join('')

    }
    function formattaStatoOpzione(value,row) {

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

        elencoAzioni = '<span class="d-flex justify-content-center"><i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i></span>';

        return [elencoAzioni].join('')

    }

    function formattaSegnatura(value,row) {

        if (value==0){
            stato = "statoSegnatura"
            icona = "toggle-off"
            color = "red"
        }else{
            stato = "statoSegnatura"
            icona = "toggle-on"
            color = "green"
        }

        elencoAzioni = '<span class="d-flex justify-content-center"><i title="'+stato+'" class="bi bi-'+icona+' '+stato+'" style="color: '+color+';"></i></span>';

        return [elencoAzioni].join('')

    }

    function formattaCostoImpianto(value,row) {

        costoImpianto = parseFloat(value) + parseFloat(row.maggiorazioneImpianto);

        elencoAzioni = '<span class="d-flex justify-content-center"><i class="bi bi-" style="color: green;"></i>'+costoImpianto+'</span>';

        return [elencoAzioni].join('')

    }

    function imageFormatter(value, row, index) {
        if (!value) return '<span class="text-muted">Nessuna immagine</span>';
        
        return `<img src="" class="img-thumbnail" style="max-width: 80px; max-height: 80px;" alt="Anteprima">`;
    }

    window.operazioniRecord = {
                                'click .trash': function (e, value, row, 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('modelTabella', $tabellaMysql);

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

                                                                    $tabellaBaseCorrente.bootstrapTable('remove', {
                                                                                                            field   : 'id',
                                                                                                            values  : [row.id]
                                                                    });

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

                                            });

                                        }
                                },
                                'click .edit': function (e, value, row, index) {
                                        let colonneTabella = @json($colonneTabella);

                                        let formHtml = generaFormDinamico($colonneTabellaCorrente, row);
                                            document.getElementById('spanTipoOperazione').innerHTML = "Modifica record";
                                            document.getElementById('idRecord').value = row.id;
                                            document.getElementById('divFormElement').innerHTML = formHtml;
                                            jQuery('#modalEditRecord').modal('show');
                                },
                                'click .duplica': function (e, value, row, index) {
                                        if (confirm("Duplico 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('record', JSON.stringify(row));
                                                formData.append('modelPath', "Tabelle");
                                                formData.append('modelTabella', $tabellaMysql);

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

                                                                    // $tabellaBaseCorrente.bootstrapTable('remove', {
                                                                    //                                         field   : 'id',
                                                                    //                                         values  : [row.id]
                                                                    // });

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

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

                                            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('#tabellaBase').bootstrapTable('updateCell', {
                                                                        index: index,
                                                                        field: 'sospendi',
                                                                        value: formattedHtml
                                                                    });

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

                                            });

                                        }
                                },
                                'change .predefinito': function (e, value, row, index) {
                                    if (confirm("Imposto come predefinito 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', row.id);
                                                formData.append('modelPath', "Tabelle");
                                                formData.append('modelTabella', $tabellaMysql);

                                            fetch("{{route('predefinisciRecord')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                            if(data.success){
                                                                
                                                                jQuery('#tabellaBase').bootstrapTable('getData').forEach(function (item, idx) {
                                                                        if (item.id !== row.id) {
                                                                            itemPredefinito = 0;
                                                                        }else{
                                                                            itemPredefinito = 1;
                                                                        }
                                                                        jQuery('#tabellaBase').bootstrapTable('updateCell', {
                                                                            index: idx,
                                                                            field: 'predefinito',
                                                                            value: itemPredefinito
                                                                        });
                                                                });

                                                            } else {
                                                            }

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

                                            });
                                    }
                                },
                                
                                'click .statoSegnatura': 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>
                                                    
                                        //alert($tabellaMysql)

                                        if (row[className]==0)
                                            stato = "Attivo"
                                        else
                                            stato = "Sospendo"
                                        if (confirm(stato + " la segnatura selezionata?\n")){
                                            newStato = row[className]==1?0:1
                                            let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                            var formData = new FormData();
                                                formData.append('method', 'POST');
                                                formData.append('_token', csrfToken);
                                                formData.append('idRecord', JSON.stringify(row.id));
                                                formData.append('field', className);
                                                formData.append('currentValue', newStato);
                                                formData.append('modelPath', "Tabelle");
                                                formData.append('modelTabella', $tabellaMysql);

                                            fetch("{{route('updateRecord')}}", {
                                                                                            method  : 'POST',
                                                                                            body    : formData
                                            })
                                            .then(response => response.json()
                                            
                                            )
                                            .then(data => {
                                                                if(data.success){
                                                                    row[className] = newStato;
                                                                    
                                                                    var formattedHtml = formattaSegnatura(newStato, row);
                                                                    //console.log(row)

                                                                    jQuery('#tabellaBase').bootstrapTable('updateCell', {
                                                                        index: index,
                                                                        field: className,
                                                                        value: newStato
                                                                    });

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

                                            });

                                        }
                                },
    }

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

            $tabellaMysql = row.mysqlTabella;
            jQuery('#tabelleBase tbody tr').removeClass('selected-row');
            $element.addClass('selected-row');

            jQuery("#spanRecordCorrente").text($tabellaMysql)

            loadTabellaBase(row);


    });

    function queryTabelleBase(p) {

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

    function initTabelleBase(dataDefault=""){
        
        $tabelleBase.bootstrapTable('destroy').

        bootstrapTable({

                    {!! $colonneTabella !!},

                    data            : {!! $listaTabelle !!},
                    
                    locale          : "it-IT",

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

                    },

        });

    }

    function updateRecord(row, field, oldValue, rowIndex){
            //console.log(row)
            //console.log(oldValue+ ' ' + rowIndex)
            let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            var formData = new FormData();
                formData.append('method', 'POST');
                formData.append('_token', csrfToken);
                formData.append('modelFolder', "Tabelle");
                formData.append('modelTabella', $tabellaMysql);
                formData.append('idRecord',     row.id);
                formData.append('field',        field);
                formData.append('record',       JSON.stringify(row));

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

                                } else {

                                    $tabellaBaseCorrente.bootstrapTable('updateCell', {
                                                                                        index: rowIndex,
                                                                                        field: field,
                                                                                        value: oldValue
                                    });

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

            });
    }

    function initTabellaBase(tabellaBase, colonneTabella = []) {

        var routeTemplate = "{{ route('filtraTabellaBase', ['tabellaBase' => '::tabellaBase::']) }}";

        var url = routeTemplate.replace('::tabellaBase::', encodeURIComponent(tabellaBase));


        $tabellaBaseCorrente.bootstrapTable('destroy').bootstrapTable({

                                                                columns         : colonneTabella,

                                                                url             : url,

                                                                queryParams     : queryTabelleBase,

                                                                onCheck         : function(row, $index) {
                                                                                                    // Gestisci l'evento onCheck
                                                                },
                                                                onLoadSuccess   : function(data) {
                                                                                                    // Gestisci l'evento onLoadSuccess
                                                                                                    //$colonneTabellaCorrente = data.editingColonne;
                                                                                                    
                                                                },
                                                                onEditableSave  : function (field, row, rowIndex, oldValue) {
                                                                                        updateRecord(row, field, oldValue, rowIndex)

                                                                },
        });
    }

    function loadTabellaBase(row) {
                                fetch('{{ route('loadTabellaBase') }}', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Include il token CSRF per la protezione
                                    },
                                    body: JSON.stringify({
                                                            models  : "Impostazioni",
                                                            model   : row.mysqlTabella,
                                                            record  : row
                                    })
                                })
                                
                                .then(response => response.json()) 
                                .then(data => {


                                    jsonString = `{${data}}`; 

                                    data = JSON.parse(jsonString);
                                    //console.log(data)
                                    if (data.columns && Array.isArray(data.columns)) {
                                        $colonneTabellaCorrente = data.columns;
                                        //console.log(data.editingColonne);
                                        initTabellaBase(row.mysqlTabella, data.columns);
                                    } else {
                                        $tabellaBaseCorrente.bootstrapTable('destroy');
                                    }
                                })
                                .catch(error => {
                                    console.error('Errore durante la chiamata fetch:', error);
                                });
    }

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

    })

  </script>

@endpush