@php

@endphp


<div class="card shadow-sm" style="border: 1px solid #ddd;">
    <div class="card-header text-white d-flex justify-content-between align-items-center" style="background-color: #007bff; height: 50px; padding: 10px;">
        <div>
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0" style="font-size: 1.25rem;">{{$content["titolo"]}}</h5>
                </div>
                <div>&nbsp;<span id="count{{$content["tabella"]["nome"]}}"></span></div>
            </div>
        </div>
        <div>
            @if ( (isset($content["tabella"]["crudRecord"])) && (isset($content["tabella"]["crudRecord"]["crea"])) )
                @if ( (isset($content["tabella"]["crudRecord"]["crea"]["rigenera"])) && ($content["tabella"]["crudRecord"]["crea"]["rigenera"]) )
                    <button 
                            data-messaggio          = "Confermi la Rigenerazione dei record?{{$content["tabella"]["crudRecord"]["crea"]["msgIntegraRigenera"]??''}}"
                            data-nometable          = "tabella_{{$content['tabella']['nome']}}"
                            data-datasourcetable    = "{!! $content["tabella"]["dataSource"] !!}"
                            data-arraysourcetable   = "{!! $content["tabella"]["arraySource"] !!}"
                            data-modeltable         = "{!! $content["modelTable"] !!}"
                            data-rotta              = "{{ route('rigeneraRecord') }}"
                            title                   = "rigenera" 
                            type="button" class="btn btn-primary INTEGRARIGENERA" id="btnRigeneraPivotRecord" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                        <i class="bi bi-arrow-repeat"></i> 
                    </button>
                @endif
                @if ( (isset($content["tabella"]["crudRecord"]["crea"]["integra"])) && ($content["tabella"]["crudRecord"]["crea"]["integra"]) )
                    <button 
                            data-messaggio          = "Confermi l' integrazione dei nuovi record?{{$content["tabella"]["crudRecord"]["crea"]["msgIntegraRigenera"]??''}}" 
                            data-nometable          = "tabella_{{$content['tabella']['nome']}}"
                            data-datasourcetable    = "{!! $content["tabella"]["dataSource"] !!}"
                            data-arraysourcetable   = "{!! $content["tabella"]["arraySource"] !!}"
                            data-modeltable         = "{!! $content["modelTable"] !!}"
                            data-rotta              = "{{ route('integraRecord') }}"
                            title                   = "integra" type="button" class="btn btn-primary INTEGRARIGENERA" id="btnIntegraPivotRecord" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;">
                        <i class="bi bi-database-add"></i> 
                    </button>
                @endif
                @if ( (isset($content["tabella"]["crudRecord"]["crea"]["inserisciFormCenteredModal"])) && (is_array($content["tabella"]["crudRecord"]["crea"]["inserisciFormCenteredModal"])) )
                    <button 
                            data-messaggio          = "Confermi l' inserimento del nuovo record?{{$content["tabella"]["crudRecord"]["crea"]["msgIntegraRigenera"]??''}}" 
                            data-nometable          = "tabella_{{$content['tabella']['nome']}}"
                            data-datasourcetable    = "{!! $content["tabella"]["dataSource"] !!}"
                            data-arraysourcetable   = "{!! $content["tabella"]["arraySource"] !!}"
                            data-modeltable         = "{!! $content["modelTable"] !!}"
                            data-rotta              = "{{ route('registraProdottoTabellaBase') }}"

                            data-titolomodale       = "{!! $content["tabella"]["crudRecord"]["crea"]["inserisciFormCenteredModal"]["titoloModale"]??'' !!}"
                            data-classemodale       = "{!! $content["tabella"]["crudRecord"]["crea"]["inserisciFormCenteredModal"]["classeModale"]??'' !!}"
                            title                   = "inserisci" type="button" class="btn btn-primary INSERISCI" id="btnInserisciPivotRecord" style="background-color: #951b31; border-color: #d9b3ba; padding: 2px 5px;"
                            data-bs-toggle          = "modal" 
                            data-bs-target          = "#formCenteredModal" 
                            data-popolaselect       = @json($content["tabella"]["crudRecord"]["crea"]["inserisciFormCenteredModal"]["popolaSelect"]??'')
                        >
                        <i class="bi bi-plus"></i> 
                    </button>
                @endif
            @endif
        </div>
    </div>

    <form id="" class="formTabella" novalidate>

        <div class="card-body" style="padding: 20px;">
            
            <div class="bootstrap-table-container-large">
                
                <table
                                
                        width                         = "100%"
                        id                            = "tabella_{{$content["tabella"]["nome"]}}"
                        data-datasourcetable          = "{{$content["modelTable"]}}"
                        data-show-search-clear-button = false
                        data-locale                   = "it-IT"              
                        class                         = "table table-hover"  
                        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                = ""
                        data-show-header              = true
                        data-sort-order               = "asc"
                        data-show-extended-pagination = true
                        data-pagination				  = true
                        data-only-info-pagination 	  = false
                        data-page-list                = "10,25, 50, 100"
                        data-page-size                = 10
                        data-multiple-select-row      = true
                        data-click-to-select          = true
                        data-single-select            = false
                        data-row-style                = "elementoSospeso"
                >
                </table>
            </div>

        <div>
            {{$content["modelTable"]}}
        <input type="text" id="modelTable" name="modelTable" value="{{$content["modelTable"]}}">

    </form>
</div>

<script>
    
    $datiFormTabella = @json($content);

    window["tabella_{{$content['tabella']['nome']}}"] = jQuery("#tabella_{{$content['tabella']['nome']}}");
    
    function elementoSospeso(row, index) {
        if (row.stato == 0) {
            return {
                classes: 'red-border-row'
            };
        }
        return {};
    }
    
    if ($datiFormTabella?.tabella?.zoomDetail?.nomeTabella) {

        window[$datiFormTabella.tabella.zoomDetail.nomeTabella] = jQuery("#"+$datiFormTabella.tabella.zoomDetail.nomeTabella);

        window.operazioniSubRecord = {
                                        'click .zoomDetail': function (e, value, row, index) { 
                                            
                                            var actionUrl   = "{{route('loadSubRecord')}}";
                                            var formData    = new FormData();

                                            let csrfToken   = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                            var formData = new FormData();
                                                    formData.append('method'            , 'POST');
                                                    formData.append('_token'            , csrfToken);
                                                    formData.append('IdRecordCorrente'  , recordCorrente.id);
                                                    formData.append('IdRecordDataSource', row.id);
                                                    
                                                    formData.append('subArraySource', $datiFormTabella.tabella.zoomDetail.arraySource);

                                            fetch(actionUrl, {
                                                                method  : 'POST',
                                                                headers : {
                                                                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                                                                },
                                                                body    : formData
                                            })
                                            .then(response => response.json())
                                            .then(data => {
                                                //console.log(data)
                                                jQuery("#idSubRecord").val(data.idSubRecord)
                                                jQuery("#spanCountDetail").text(" (" + data.subRecord.length + " elementi)");
                                                window[$datiFormTabella.tabella.zoomDetail.nomeTabella].bootstrapTable('load', data.subRecord);

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

                                            // var datiPivot = row.grammature_stampa_pivot.map(function(item) {
                                            //     return item.pivot;
                                            // });

                                            
                                            jQuery("#spanModalTitle").text(row.nome);
                                            jQuery('#fullScreenModal').modal('show');

                                        },
        }
        
        
    }
            
    window["tabella_{{$content['tabella']['nome']}}"].on('click-row.bs.table', function (e, row, $element) {
        jQuery('#tabella_{{$content['tabella']['nome']}} tbody tr').removeClass('selected-row');
        $element.addClass('selected-row');
    });

    function updateTableField(row, modelTabella, typeTabella, field, _token){

        
            if(typeTabella=="pivot"){
                idRecord    = row.pivot.id
            }else{
                idRecord    = row.id
            }
            currentValue    = field;

            checkSave = jQuery.ajax({
                                        url		: "{{ route('updateRecord') }}",
                                        method	: "POST",
                                        data	: {
                                                    models          : "{!! $content["models"] !!}",
                                                    modelTabella    : modelTabella,
                                                    idRecord        : idRecord,
                                                    currentValue    : row[currentValue],
                                                    field           : field,
                                                    _token          : _token,

                                        },
                                        async   : false,
                                        dataType: 'json',
                                        success	: function(data) {
                                                                    if(data.success){
                                                                                    
                                                                    }else{

                                                                    }
                                                    return(data)
                                        },
                                        error   : function(XMLHttpRequest, textStatus, errorThrown) {
                                                    
                                                    return ( "Aggiornamento non riuscito: " + textStatus );
                                        }
            });
            return checkSave;
    }

  
    jQuery(document).ready(function() {

            $datiFormTabella = @json($content);

            //console.log(recordCorrente.{!! $content["tabella"]["dataSource"] !!})

            var dataSource = recordCorrente['{!! $content["tabella"]["dataSource"] !!}'];
            
            jQuery("#count{{$content['tabella']['nome']}}").html( " (" + Object.keys(dataSource).length + " elementi)");

            window["tabella_{{$content['tabella']['nome']}}"].bootstrapTable('destroy').

                bootstrapTable({

                        columns         : {!! $content["tabella"]["colonne"] !!},
                        
                        data            : recordCorrente.{!! $content["tabella"]["dataSource"] !!},
                        
                        locale          : "it-IT",

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

                        onLoadSuccess   : function(data){
                        },

                        onSearch: function (text) {
                        },

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

                                            console.log("{!! $content["modelTable"] !!}")

                                            checkSave = updateTableField(rowDettaglio, "{!! $content["modelTable"] !!}", "{!! $content["typeTable"] !!}", field, "{{ csrf_token() }}")

                                            // var indiceRigaMaster = $tabelleBase.bootstrapTable('getData').findIndex(function(row) {
                                            //     return row.id === recordCorrente.id;
                                            // });

                                            // //
                                            // var datiTabella = window["tabella_{{$content['tabella']['nome']}}"].bootstrapTable('getData');
                                            // var indiceRigaPivot = datiTabella.findIndex(function(row) {
                                            //     return row.id === rowDettaglio.id;
                                            // });
                                            // recordCorrente.{!! $content["tabella"]["dataSource"] !!}[indiceRigaPivot] = rowDettaglio;

                                            // $tabelleBase.bootstrapTable('updateRow', {index: indiceRigaMaster, row: recordCorrente})

                                            // // Evidenzia di nuovo la riga dellaTabellaBase
                                            // jQuery('#tabelleBase tbody tr[data-index="' + indiceRigaMaster + '"]').addClass('selected-row'); 
                                            // // Evidenzia di nuovo la riga dellaTabellaPivot
                                            // jQuery('#tabella_{{$content['tabella']['nome']}} tbody tr[data-index="' + indiceRigaPivot + '"]').addClass('selected-row');
                        },

            });
            if ($datiFormTabella.tabella.zoomDetail) {

                p = @json($content["tabella"])

                window[$datiFormTabella.tabella.zoomDetail.nomeTabella].bootstrapTable('destroy').

                        bootstrapTable({

                                columns         : JSON.parse(p.zoomDetail.colonne),

                                locale          : "it-IT",

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

                                onLoadSuccess   : function(data){
                                },

                                onSearch: function (text) {
                                },

                                onEditableSave  : function (field, rowDettaglio, oldValue,$el) {
                                                                                    
                                },

                });
                


            }

            if($datiFormTabella.tabella.crudRecord && !$datiFormTabella.tabella.crudRecord.cancella){
                window["tabella_{{$content['tabella']['nome']}}"].bootstrapTable('hideColumn', 'eliminaPivot');
            }

            //window["tabella_{{$content['tabella']['nome']}}"].editable({enable:false});

    })

</script>