{{-- 
========================================
LOGO E BRAND MODULARE
========================================
Componente logo con dimensioni configurabili
e toggle per sidebar mobile.

Props:
- $size (string): sm, md, lg, xl
- $showToggle (bool): Mostra toggle sidebar
- $variant (string): normal, compact, icon-only

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

@props([
    'size' => 'md',
    'showToggle' => true,
    'variant' => 'normal'
])

@php
$logoSizes = [
    'sm' => ['height' => '32px', 'fontSize' => '1rem'],
    'md' => ['height' => '40px', 'fontSize' => '1.25rem'], 
    'lg' => ['height' => '48px', 'fontSize' => '1.5rem'],
    'xl' => ['height' => '56px', 'fontSize' => '1.75rem']
];

$currentSize = $logoSizes[$size] ?? $logoSizes['md'];
@endphp

<div class="netgescon-brand d-flex align-items-center">
    
    {{-- Toggle Sidebar per Desktop e Mobile --}}
    @if($showToggle)
        <button class="btn btn-outline-secondary me-2" 
                type="button" 
                onclick="toggleSidebar()"
                aria-label="Toggle menu"
                title="Apri/Chiudi menu laterale">
            <i class="fas fa-bars"></i>
        </button>
    @endif
    
    {{-- Logo --}}
    <a href="{{ route('dashboard') }}" class="netgescon-logo d-flex align-items-center text-decoration-none">
        
        {{-- Icona/Logo Image --}}
        @if(config('app.logo_path'))
            <img src="{{ asset(config('app.logo_path')) }}" 
                 alt="NetGesCon Logo" 
                 style="height: {{ $currentSize['height'] }};"
                 class="me-2">
        @else
            <div class="logo-icon d-flex align-items-center justify-content-center me-2"
                 style="width: {{ $currentSize['height'] }}; height: {{ $currentSize['height'] }};">
                <i class="fas fa-building text-primary" style="font-size: calc({{ $currentSize['height'] }} * 0.6);"></i>
            </div>
        @endif
        
        {{-- Nome Applicazione --}}
        @if($variant !== 'icon-only')
            <div class="brand-text {{ $variant === 'compact' ? 'd-none d-lg-block' : '' }}">
                <h1 class="mb-0 fw-bold text-primary" style="font-size: {{ $currentSize['fontSize'] }};">
                    {{ config('app.name', 'NetGesCon') }}
                </h1>
                @if($size !== 'sm' && $variant !== 'compact')
                    <small class="text-muted d-none d-xl-block">Sistema Gestione Condominiale</small>
                @endif
            </div>
        @endif
        
    </a>
    
    {{-- Badge Versione/Ambiente (solo in sviluppo) --}}
    @if(config('app.env') !== 'production')
        <span class="badge bg-warning text-dark ms-2 d-none d-lg-inline">
            {{ config('app.env') === 'local' ? 'DEV' : strtoupper(config('app.env')) }}
        </span>
    @endif
    
</div>

{{-- CSS specifico per logo --}}
@push('styles')
<style>
.netgescon-logo {
    transition: opacity 0.2s ease;
}

.netgescon-logo:hover {
    opacity: 0.8;
}

.logo-icon {
    background: linear-gradient(135deg, var(--netgescon-primary, #007bff), var(--netgescon-secondary, #6c757d));
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.brand-text h1 {
    letter-spacing: -0.5px;
}

/* Tema scuro */
.dark .netgescon-logo {
    color: var(--bs-light) !important;
}

.dark .brand-text small {
    color: var(--bs-gray-400) !important;
}

/* Animazioni */
@keyframes logoGlow {
    0%, 100% { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    50% { box-shadow: 0 4px 8px rgba(0,123,255,0.3); }
}

.logo-icon:hover {
    animation: logoGlow 2s ease-in-out infinite;
}
</style>
@endpush