{{-- 
========================================
RICERCA MOBILE
========================================
Versione mobile della ricerca con modal fullscreen.

Autore: NetGesCon Development Team
Data: 2024
========================================
--}}

{{-- Pulsante trigger --}}
<button type="button" 
        class="btn btn-outline-secondary"
        data-bs-toggle="modal" 
        data-bs-target="#searchMobileModal"
        aria-label="Apri ricerca">
    <i class="fas fa-search"></i>
</button>

{{-- Modal ricerca mobile --}}
<div class="modal fade" id="searchMobileModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title">Cerca in NetGesCon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
            </div>
            <div class="modal-body pt-0">
                <form action="#" method="GET" title="Ricerca globale (in sviluppo)">
                    <div class="mb-3">
                        <input type="text" 
                               name="q" 
                               class="form-control form-control-lg" 
                               placeholder="Cerca stabili, condomini, documenti..."
                               value="{{ request('q') }}"
                               autofocus>
                    </div>
                    
                    {{-- Filtri rapidi --}}
                    <div class="mb-3">
                        <h6 class="mb-2">Filtri rapidi:</h6>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm filter-btn" data-filter="stabili">
                                <i class="fas fa-building me-1"></i>Stabili
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm filter-btn" data-filter="condomini">
                                <i class="fas fa-users me-1"></i>Condomini
                            </button>
                            <button type="button" class="btn btn-outline-info btn-sm filter-btn" data-filter="documenti">
                                <i class="fas fa-file me-1"></i>Documenti
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm filter-btn" data-filter="tickets">
                                <i class="fas fa-ticket-alt me-1"></i>Tickets
                            </button>
                        </div>
                    </div>
                    
                    {{-- Pulsante ricerca --}}
                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="fas fa-search me-2"></i>Cerca
                    </button>
                </form>
                
                {{-- Risultati recenti --}}
                <div class="mt-4">
                    <h6 class="text-muted">Ricerche recenti:</h6>
                    <div class="list-group list-group-flush">
                        {{-- TODO: Implementare logica ricerche recenti --}}
                        <a href="#" class="list-group-item list-group-item-action">
                            <i class="fas fa-building text-muted me-2"></i>Condominio Via Roma 123
                        </a>
                        <a href="#" class="list-group-item list-group-item-action">
                            <i class="fas fa-file text-muted me-2"></i>Verbale assemblea 2024
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- JavaScript per filtri mobili --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestione filtri rapidi mobile
    const filterButtons = document.querySelectorAll('.filter-btn');
    const searchInput = document.querySelector('#searchMobileModal input[name="q"]');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.dataset.filter;
            
            // Toggle stato attivo
            this.classList.toggle('active');
            
            // Aggiorna placeholder in base ai filtri selezionati
            const activeFilters = Array.from(document.querySelectorAll('.filter-btn.active'))
                .map(btn => btn.textContent.trim());
                
            if (activeFilters.length > 0) {
                searchInput.placeholder = `Cerca in: ${activeFilters.join(', ')}`;
            } else {
                searchInput.placeholder = 'Cerca stabili, condomini, documenti...';
            }
        });
    });
});
</script>
@endpush

{{-- CSS per filtri mobile --}}
@push('styles')
<style>
.filter-btn.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

#searchMobileModal .modal-content {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Tema scuro */
.dark #searchMobileModal .modal-content {
    background: linear-gradient(135deg, var(--bs-dark) 0%, var(--bs-gray-900) 100%);
}
</style>
@endpush