<div class="modal fade" id="table-settings-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-cog mr-2"></i>Impostazioni Tabella</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="settings-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="columns-tab" data-toggle="tab" href="#columns-panel" role="tab">
                            <i class="fas fa-columns mr-1"></i> Colonne
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="filters-tab" data-toggle="tab" href="#filters-panel" role="tab">
                            <i class="fas fa-filter mr-1"></i> Filtri
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="search-tab" data-toggle="tab" href="#search-panel" role="tab">
                            <i class="fas fa-search mr-1"></i> Ricerca
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="export-tab" data-toggle="tab" href="#export-panel" role="tab">
                            <i class="fas fa-download mr-1"></i> Esporta
                        </a>
                    </li>
                </ul>
                
                <div class="tab-content p-3">
                    <div class="tab-pane fade show active" id="columns-panel" role="tabpanel">
                        <h6>Seleziona le colonne da visualizzare:</h6>
                        <div class="row">
                            @foreach($tableColumns as $col)
                            <div class="col-md-4">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input column-toggle" 
                                        id="col-{{ $col['key'] }}" data-column="{{ $col['key'] }}" 
                                        {{ ($col['visible'] ?? true) ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="col-{{ $col['key'] }}">
                                        {{ $col['label'] }}
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="filters-panel" role="tabpanel">
                        <h6>Aggiungi filtri:</h6>
                        <div id="filters-container">
                            <div class="filter-row mb-2">
                                <div class="row">
                                    <div class="col-md-4">
                                        <select class="form-control form-control-sm filter-column">
                                            <option value="">Seleziona colonna...</option>
                                            @foreach($tableColumns as $col)
                                            <option value="{{ $col['key'] }}">{{ $col['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <select class="form-control form-control-sm filter-operator">
                                            <option value="contains">Contiene</option>
                                            <option value="equals">Uguale a</option>
                                            <option value="starts">Inizia con</option>
                                            <option value="ends">Finisce con</option>
                                            <option value="gt">Maggiore di</option>
                                            <option value="lt">Minore di</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control form-control-sm filter-value" placeholder="Valore">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-xs btn-success mt-2" onclick="addFilterRow()">
                            <i class="fas fa-plus"></i> Aggiungi filtro
                        </button>
                        <button type="button" class="btn btn-xs btn-primary mt-2" id="apply-filters-btn">
                            <i class="fas fa-check"></i> Applica filtri
                        </button>
                    </div>
                    
                    <div class="tab-pane fade" id="search-panel" role="tabpanel">
                        <div class="form-group">
                            <label>cerca in tutte le colonne:</label>
                            <input type="text" id="table-search" class="form-control" placeholder="Testo da cercare...">
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="export-panel" role="tabpanel">
                        <h6>Esporta i dati visualizzati:</h6>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success" id="export-csv-btn">
                                <i class="fas fa-file-csv mr-1"></i> Esporta CSV
                            </button>
                            <button type="button" class="btn btn-danger" id="export-pdf-btn">
                                <i class="fas fa-file-pdf mr-1"></i> Esporta PDF
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="mr-auto">
                    <input type="text" id="vista-nome" class="form-control form-control-sm" placeholder="Nome vista..." style="display: inline-block; width: auto;">
                    <button type="button" class="btn btn-primary btn-sm" id="save-vista-btn">
                        <i class="fas fa-save mr-1"></i> Salva Vista
                    </button>
                </div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

<script>
function addFilterRow() {
    const container = document.getElementById('filters-container');
    const columns = @json($tableColumns);
    const options = columns.map(c => `<option value="${c.key}">${c.label}</option>`).join('');
    
    const div = document.createElement('div');
    div.className = 'filter-row mb-2';
    div.innerHTML = `
        <div class="row">
            <div class="col-md-4">
                <select class="form-control form-control-sm filter-column">
                    <option value="">Seleziona colonna...</option>
                    ${options}
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-control form-control-sm filter-operator">
                    <option value="contains">Contiene</option>
                    <option value="equals">Uguale a</option>
                    <option value="starts">Inizia con</option>
                    <option value="ends">Finisce con</option>
                    <option value="gt">Maggiore di</option>
                    <option value="lt">Minore di</option>
                </select>
            </div>
            <div class="col-md-4">
                <input type="text" class="form-control form-control-sm filter-value" placeholder="Valore">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.filter-row').remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;
    container.appendChild(div);
}
</script>