132 lines
5.2 KiB
PHP
132 lines
5.2 KiB
PHP
{{--
|
|
========================================
|
|
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
|