@extends('layouts.app')

@push('head-scripts')
@endpush 

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

@section('content')

<div class="container-fluid mt-4">
    <!-- Barra superiore con selezione regole -->
    <div class="card shadow-lg mb-4" style="background-color: #f8f9fa; border-left: 5px solid #007bff;">
        <div class="card-body d-flex justify-content-center align-items-center py-3">
            <h4 class="mb-0 text-primary me-3">Tabella delle Regole</h4>
            <div class="d-flex align-items-center">
                <select id="select-regola" class="form-select me-3" style="min-width: 300px; font-weight: bold;">
                    <option value="">Seleziona una regola</option>
                    @foreach($elencoRegole as $regola)
                        <option value="{{ $regola['id'] }}" data-caratteristiche='@json($regola["elencoCaratteristiche"])'>
                            {{ $regola['descrizione'] }}
                        </option>
                    @endforeach
                </select>
                <button id="btn-modifica-regola" class="btn btn-warning px-4 text-white me-2" data-bs-toggle="modal" data-bs-target="#modale-crea-regola">✏️</button>
                <button id="btn-crea-regola" class="btn btn-info px-4 text-white" data-bs-toggle="modal" data-bs-target="#modale-crea-regola">➕</button>
            </div>
        </div>
    </div>

    <!-- Sezione Edit Regola -->
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h6 id="titolo-vincoli" class="mb-0">Vincoli di [Nessuna Regola Selezionata]</h6>
            <div class="d-flex">
                <!-- 🔽 Dropdown per operazioni massive -->
                <div class="btn-group me-2">
                    <button type="button" id="mass-action-btn" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" disabled>
                        Operazioni Massive
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item mass-action" data-action="includi" href="#">Includi</a></li>
                        <li><a class="dropdown-item mass-action" data-action="escludi" href="#">Escludi</a></li>
                        <li><a class="dropdown-item mass-action text-danger" data-action="elimina" href="#">Elimina</a></li>
                    </ul>
                </div>
        
                <!-- 🔄 Pulsante per resettare i filtri -->
                <button id="reset-filtri" class="btn btn-warning me-2" disabled>Reset Filtri</button>
        
                <!-- 🟢 Bottone per generare vincoli -->
                <button id="genera-vincoli" class="btn btn-success" disabled>Crea/Rigenera Vincoli</button>
            </div>
        </div>
        <div class="card-body row p-4">
            
            <!-- Colonna Caratteristiche (stretta) -->
            <div class="col-md-2 d-flex flex-column">
                <h6 class="mb-3">Seleziona Caratteristiche</h6>
                <div id="lista-caratteristiche" class="border p-3 flex-grow-1" style="max-height: 500px; overflow-y: auto;">
                    @foreach($elencoCaratteristiche as $caratteristica)
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input caratteristica-checkbox" 
                                id="caratteristica-{{ $caratteristica['id'] }}" 
                                value="{{ $caratteristica['id'] }}">
                            <label class="form-check-label" for="caratteristica-{{ $caratteristica['id'] }}">
                                {{ $caratteristica['labelTabella'] }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
            
            <!-- Colonna Tabella Vincoli (larga) -->
            <div class="col-md-10 d-flex flex-column">
                <div class="table-responsive flex-grow-1" style="max-height: 600px; overflow-y: auto;">
                    <table id="tabella-vincoli" class="table table-striped bootstrap-table"
                        data-toggle="table"
                        data-pagination="true"
                        data-side-pagination="server"
                        data-search="true"
                        data-show-columns="true">
                        <thead>
                            <tr id="dynamic-columns">
                                <!-- Colonne generate dinamicamente -->
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Popolato dinamicamente -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modale Creazione/Modifica Regola -->
<div class="modal fade" id="modale-crea-regola" tabindex="-1" aria-labelledby="modale-crea-regola-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modale-crea-regola-label">Crea/Modifica Regola</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="regola-id">
                <label for="nome-regola" class="form-label">Nome Regola</label>
                <input type="text" id="nome-regola" class="form-control" placeholder="Inserisci il nome della regola">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
                <button type="button" class="btn btn-primary" id="salva-regola">Registra</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>

    
    $(document).ready(function () {

            // ✅ Abilita/disabilita il pulsante "Operazioni Massive" in base alla selezione della tabella
            $('#tabella-vincoli').on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                let selezionati = $('#tabella-vincoli').bootstrapTable('getSelections');
                $('#mass-action-btn').prop('disabled', selezionati.length === 0);
            });

            // ✅ Abilita/disabilita il pulsante "Reset Filtri" se sono impostati filtri
            $(document).on('change', '.bootstrap-table-filter-control', function () {
                let almenoUnFiltro = $('.bootstrap-table-filter-control').filter(function () {
                    return $(this).val() !== '';
                }).length > 0;
                $('#reset-filtri').prop('disabled', !almenoUnFiltro);
            });

            // ✅ Reset Filtri: Ripristina lo stato iniziale e disabilita il pulsante
            $('#reset-filtri').on('click', function () {
                console.log("🔄 Reset Filtri Attivato");
                $('#tabella-vincoli').bootstrapTable('resetSearch', '');
                $('.bootstrap-table-filter-control').val('').trigger('change'); // Reset select filtri
                $('#tabella-vincoli').bootstrapTable('refresh'); // 🔄 Ricarica la tabella
                $(this).prop('disabled', true); // Disabilita il pulsante dopo il reset
            });

            // ✅ Evento unico per operazioni massive e azioni singole delle righe
            $(document).on('click', '.mass-action, .btn-includi, .btn-escludi, .btn-elimina', function (e) {
                e.preventDefault();
                let azione = $(this).data('action');
                let ids = [];

                if ($(this).hasClass('mass-action')) {
                    // 📌 Operazioni massive
                    let selezionati = $('#tabella-vincoli').bootstrapTable('getSelections');
                    ids = selezionati.map(row => row.id);
                } else {
                    // 📌 Azione su singola riga
                    ids = [$(this).data('id')];
                }

                if (ids.length === 0) {
                    alert("Seleziona almeno un vincolo per applicare l'operazione.");
                    return;
                }

                console.log(`📌 Esegui operazione: ${azione} su ID:`, ids);

                $.ajax({
                    url         : '{{route("massUpdateVincoli")}}',
                    method      : 'POST',
                    data        : {
                                    _token      : $('meta[name="csrf-token"]').attr('content'),
                                    action      : azione,
                                    ids         : ids,
                                    idRegola    : $('#select-regola').val() // ✅ Recupera l'ID della regola selezionata
                    },
                    success     : function (response) {
                                        console.log("✅ Operazione completata:", response);
                                        $('#tabella-vincoli').bootstrapTable('refresh'); // 🔄 Ricarica la tabella
                    },
                    error       : function (error) {
                                        console.error("❌ Errore nell'operazione massiva:", error);
                    }
                });

            });

            $(document).on('change', '#select-regola', function () {
                function toggleGeneraVincoliButton() {
                    let selectedCount = $('.caratteristica-checkbox:checked').length;
                    $('#genera-vincoli').prop('disabled', selectedCount < 2);
                }

                $('.caratteristica-checkbox').on('change', function () {
                    toggleGeneraVincoliButton();
                });

                let selectedOption = $(this).find(':selected');
                let regolaId = selectedOption.val();
                let nomeRegola = selectedOption.text();
                let caratteristicheJson = selectedOption.attr('data-caratteristiche');
                
                if (regolaId) {
                    $('#titolo-vincoli').text(`Vincoli di ${nomeRegola}`);
                    $('.caratteristica-checkbox').prop('checked', false);
                    try {
                        let caratteristiche = JSON.parse(caratteristicheJson || '[]');
                        caratteristiche.forEach(id => {
                            $(`#caratteristica-${id}`).prop('checked', true);
                        });
                    } catch (error) {
                        console.error("Errore nel parsing JSON delle caratteristiche:", error);
                    }
                } else {
                    $('#titolo-vincoli').text("Vincoli di [Nessuna Regola Selezionata]");
                    $('.caratteristica-checkbox').prop('checked', false);
                }
            
            });


            $('#btn-modifica-regola').on('click', function () {
                
                let selectedOption = $('#select-regola').find(':selected');
                let regolaId = selectedOption.val();
                let nomeRegola = selectedOption.text();
                
                if (regolaId) {
                    $('#regola-id').val(regolaId);
                    $('#nome-regola').val(nomeRegola);
                } else {
                    $('#regola-id').val('');
                    $('#nome-regola').val('');
                }
            });

            $('#salva-regola').on('click', function () {
                let regolaId = $('#regola-id').val();
                let nomeRegola = $('#nome-regola').val();
                
                $.ajax({
                    url: '{{route("salvaRegola")}}',
                    method: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        id: regolaId,
                        descrizione: nomeRegola
                    },
                    success: function (response) {
                        location.reload();
                    },
                    error: function (error) {
                        alert('Errore nel salvataggio della regola.');
                    }
                });
            });

            $(document).on('click', '#genera-vincoli', function () {
                    let idRegola = $('#select-regola').val();
                    let caratteristiche = $('.caratteristica-checkbox:checked').map(function () {
                        return $(this).val();
                    }).get();

                    if (!idRegola || caratteristiche.length < 2) {
                        alert("Seleziona una regola e almeno due caratteristiche per generare i vincoli.");
                        return;
                    }

                    $.ajax({
                        url: '{{ route("generaVincoli") }}',
                        method: 'POST',
                        data: {
                            _token          : $('meta[name="csrf-token"]').attr('content'),
                            idRegola        : idRegola,
                            caratteristiche : caratteristiche
                        },
                        success: function (response) {
                            popolaTabellaVincoli(idRegola);
                        },
                        error: function () {
                            alert("Errore nella generazione dei vincoli");
                        }
                    });
            });
            
            let globalValoriFiltri  = {};

            function popolaTabellaVincoli(idRegola) {
                    $.ajax({
                        url: '{{ route("getVincoliRegola") }}',
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            idRegola: idRegola,
                            limit: 10,
                            offset: 0
                        },
                        success: function(response) {
                            if (!response.success) {
                                console.error("Errore: ", response.message);
                                return;
                            }

                            globalValoriFiltri = formattaValoriFiltri(response.valori_filtri);
                            let colonne = generaColonneDinamiche(response.nomi_colonne);
                            console.log(colonne)
                            $('#tabella-vincoli').bootstrapTable('destroy').bootstrapTable({
                                url: '{{ route("getVincoliRegola") }}',
                                method: 'POST',
                                pagination: true,
                                contentType: "application/x-www-form-urlencoded",
                                sidePagination: 'server',
                                search: true,
                                showColumns: true,
                                showToggle: true,
                                pageSize: 10,
                                pageList: [10, 25, 50, 100],
                                filterControl: true,
                                rememberOrder: true,
                                maintainMetaData: true,
                                queryParams: function(params) {
                                    return {
                                        _token: $('meta[name="csrf-token"]').attr('content'),
                                        idRegola: idRegola,
                                        limit: params.limit,
                                        offset: params.offset,
                                        search: params.search,
                                        filter: params.filter
                                    };
                                },
                                responseHandler: function(res) {
                                    return {
                                        total: res.total,
                                        rows: res.vincoli
                                    };
                                },
                                columns: colonne,
                                onPostBody: function() {
                                    //console.log("✅ Tabella caricata, popolo i filtri...");
                                    //popolaFiltri(); 
                                }
                            });
                        },
                        error: function(error) {
                            console.error("Errore durante il recupero dei vincoli: ", error);
                        }
                    });
            }

            function formattaValoriFiltri(valoriFiltri) {
                    let filtriFormattati = {};
                    Object.keys(valoriFiltri).forEach(function(chiave) {
                        filtriFormattati[chiave] = valoriFiltri[chiave].map(option => {
                            return { id: option.id, text: option.nome };  
                        });
                    });

                    // 🔥 Log di debug
                    //console.log("📌 Filtri formattati correttamente:", filtriFormattati);

                    return filtriFormattati;
            }

            function generaColonneDinamiche(nomiColonne) {
                    let colonne = [{ field: 'checkbox', checkbox: true }];

                    Object.keys(nomiColonne).forEach(function(idCaratteristica) {
                        let campoID = `${idCaratteristica}_id`;    
                        let campoNome = `${idCaratteristica}_nome`; 

                        let listaFiltro = {};
                        if (globalValoriFiltri[campoID]) {
                            globalValoriFiltri[campoID].forEach(option => {
                                listaFiltro[option.id] = option.text; // ✅ Chiave = ID, Valore = Nome
                            });
                        }
                        colonne.push({
                            field: campoID,
                            title: nomiColonne[idCaratteristica],
                            sortable: true,
                            filterControl: 'select',
                            filterData: `json:` + JSON.stringify(listaFiltro),  // ✅ Formato corretto
                            formatter: function(value, row) {
                                return row[campoNome] ?? value;
                            }
                        });
                    });

                    colonne.push({
                        field       : 'azioni',
                        title       : 'Azioni',
                        formatter   : function(value, row, index) {
                            console.log(row.stato)
                                            let isExcluded = row.stato === 'escluso';  // ✅ Se "escluso", i bottoni saranno disabilitati

                                            return `
                                                <button class="btn btn-success btn-sm btn-includi ${isExcluded ? 'disabled btn-secondary' : ''}" data-id="${row.id}" data-action="includi" ${isExcluded ? 'disabled' : ''}>Includi</button>
                                                <button class="btn btn-danger btn-sm btn-escludi ${!isExcluded ? 'disabled btn-secondary' : ''}" data-id="${row.id}" data-action="escludi" ${!isExcluded ? 'disabled' : ''}>Escludi</button>
                                                <button class="btn btn-danger btn-sm btn-elimina" data-id="${row.id}" data-action="elimina">Elimina</button>
                                            `;
                        }
                    });

                    return colonne;
            }

    });
    
</script>
@endpush