{{-- 
========================================
HEADER PRINCIPALE MODULARE
========================================
Header principale con logo, barra di ricerca, notifiche e menu utente.
Completamente configurabile e responsivo.

Props disponibili:
- $showSearch (bool): Mostra barra di ricerca
- $showNotifications (bool): Mostra icona notifiche  
- $showUserMenu (bool): Mostra menu utente
- $logoSize (string): Dimensione logo (sm, md, lg)
- $variant (string): Variante header (default, minimal, compact)

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

@props([
    'showSearch' => true,
    'showNotifications' => true, 
    'showUserMenu' => true,
    'logoSize' => 'md',
    'variant' => 'fixed'
])

<header class="netgescon-header {{ $variant }} bg-white shadow-sm" role="banner" style="position: fixed; top: 0; left: 0; right: 0; z-index: 1050; height: 70px;">
    <div class="container-fluid py-2">
        <div class="row align-items-center">
            
            {{-- Mobile Menu + Logo --}}
            <div class="col-auto">
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-outline-primary btn-uniform d-md-none" 
                            data-bs-toggle="offcanvas" 
                            data-bs-target="#mobile-sidebar">
                        <i class="fas fa-bars"></i>
                    </button>
                    <a href="{{ route('dashboard') }}" class="navbar-brand">
                        <strong>NetGesCon</strong>

            {{-- Dati Condominio --}}
            <div class="col-auto d-none d-md-block">
                <div class="d-flex gap-2">
                    <span class="badge bg-primary"><i class="fas fa-building"></i> Condominio Milano Centro</span>
                    <span class="badge bg-success"><i class="fas fa-calendar"></i> ORDINARIA 2025</span>
                    <span class="badge bg-warning"><i class="fas fa-thermometer-half"></i> RISCALDAMENTO 2024/25</span>
                </div>
            </div>
                    </a>
                </div>
            </div>
            
            {{-- Ricerca Centrale - Inizia dopo sidebar, 1/3 dello spazio rimanente --}}
            @if($showSearch)
                <div class="col d-none d-lg-block">
                    <div class="search-container" style="margin-left: 20px; max-width: 280px;">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Cerca in NetGesCon..." style="height: 42px;">
                            <button class="btn btn-outline-primary btn-uniform" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endif
            
            {{-- Azioni Rapide + Menu Utente --}}
            <div class="col-auto">
                <div class="d-flex align-items-center gap-2">
                    
                    {{-- Azioni Rapide --}}
                    <div class="d-none d-lg-flex gap-2">
                        <button class="btn btn-outline-primary btn-uniform" title="Calendario">
                            <i class="fas fa-calendar-alt"></i>
                        </button>
                        <button class="btn btn-outline-primary btn-uniform" title="Note Rapide">
                            <i class="fas fa-sticky-note"></i>
                        </button>
                        <button class="btn btn-outline-primary btn-uniform" title="Rubrica">
                            <i class="fas fa-address-book"></i>
                        </button>
                    </div>
                    
                    {{-- Notifiche --}}
                    @if($showNotifications)
                        <button class="btn btn-outline-primary btn-uniform position-relative" 
                                data-bs-toggle="dropdown">
                            <i class="fas fa-bell"></i>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                3
                            </span>
                        </button>
                    @endif
                    
                    {{-- Dark Mode --}}
                    <button class="btn btn-outline-primary btn-uniform" 
                            onclick="toggleDarkMode()" 
                            title="Cambia tema">
                        <i class="fas fa-moon" id="theme-icon"></i>
                    </button>
                    
                    {{-- Menu Utente --}}
                    @if($showUserMenu && Auth::check())
                        <button class="btn btn-outline-primary btn-uniform" 
                                data-bs-toggle="dropdown">
                            <i class="fas fa-user-circle"></i>
                        </button>
                    @endif
                    
                </div>
            </div>
        </div>
    </div>
</header>

{{-- CSS per pulsanti uniformi --}}
@push('styles')
<style>
/* PULSANTI UNIFORMI HEADER */
.btn-uniform {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-size: 16px !important;
    border-width: 1px !important;
    margin: 0 2px !important;
}

.btn-uniform:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* SEARCH BAR RESPONSIVE - Ottimizzata */
.search-container {
    flex: 1;
    max-width: 280px !important; /* 1/3 dello spazio rimanente */
    margin-left: 20px !important; /* Inizia subito dopo il logo */
}

.search-container .form-control {
    height: 42px !important;
    border-radius: 8px 0 0 8px !important;
}

.search-container .btn-uniform {
    border-radius: 0 8px 8px 0 !important;
    border-left: 0 !important;
}

@media (max-width: 768px) {
    .search-container {
        display: none;
    }
}

@media (max-width: 1200px) {
    .search-container {
        margin-left: 10px !important;
        max-width: 200px !important;
    }
}
</style>
@endpush