{{-- 
========================================
LAYOUT UNIVERSALE NETGESCON - VERSIONE PULITA
========================================
Layout grid semplificato per NetGesCon con header fisso, sidebar fissa,
contenuto scrollabile e footer fisso.

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

<!DOCTYPE html>
<html lang="it" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    
    <title>{{ $pageTitle ?? 'NetGesCon' }} - Sistema Gestione Condominiale</title>
    
    {{-- Favicon e Icons --}}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('icons/apple-touch-icon.png') }}">
    
    {{-- CSS Framework --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    {{-- Layout CSS Pulito --}}
    <style>
        /* Reset Base */
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
        }
        
        /* Layout Grid Container */
        .netgescon-container {
            display: grid;
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            grid-template-rows: 70px 1fr 50px;
            grid-template-columns: 280px 1fr;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        
        /* Grid Components */
        .netgescon-header {
            grid-area: header;
            background-color: #ffffff;
            border-bottom: 1px solid #e9ecef;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1050;
            display: flex;
            align-items: center;
        }
        
        .sidebar-container {
            grid-area: sidebar;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        .netgescon-content {
            grid-area: content;
            background-color: #f8f9fa;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .app-footer {
            grid-area: footer;
            background-color: #ffffff;
            border-top: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            z-index: 1040;
        }
        
        /* Content Wrapper */
        .content-wrapper {
            flex: 1;
            padding: 1rem;
            width: 100%;
        }
        
        /* Utility Classes */
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .netgescon-container {
                grid-template-areas: 
                    "header"
                    "content"
                    "footer";
                grid-template-columns: 1fr;
            }
            
            .sidebar-container {
                display: none;
            }
        }
        
        /* Scrollbar personalizzata */
        .sidebar-container::-webkit-scrollbar,
        .netgescon-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .sidebar-container::-webkit-scrollbar-track,
        .netgescon-content::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        .sidebar-container::-webkit-scrollbar-thumb,
        .netgescon-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }
        
        .sidebar-container::-webkit-scrollbar-thumb:hover,
        .netgescon-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
    
    {{-- CSS Specifico per Pagina --}}
    @stack('styles')
    
    {{-- Variabili CSS Dinamiche --}}
    <style>
        :root {
            --netgescon-primary: #007bff;
            --netgescon-secondary: #6c757d;
            --netgescon-sidebar-bg: #f8f9fa;
            --netgescon-content-bg: #ffffff;
        }
    </style>
</head>

<body class="netgescon-app {{ $bodyClass ?? '' }}" data-user-role="{{ auth()->user()->role ?? 'guest' }}">
    
    {{-- Container principale --}}
    <div class="netgescon-container">
        
        {{-- Header Modulare --}}
        @include('components.layout.header.main', [
            'showSearch' => $showSearch ?? true,
            'showNotifications' => $showNotifications ?? true,
            'showUserMenu' => $showUserMenu ?? true
        ])
        
        {{-- Sidebar Modulare (solo se necessaria) --}}
        @if(($showSidebar ?? true) && auth()->check())
            <div class="sidebar-container">
                @include('components.menu.sidebar', [
                    'collapsible' => $sidebarCollapsible ?? true,
                    'autoHide' => $sidebarAutoHide ?? false
                ])
            </div>
        @endif
        
        {{-- Area Content Principale --}}
        <main class="netgescon-content" role="main">
            
            {{-- Breadcrumb Modulare --}}
            @if($showBreadcrumb ?? true)
                @include('components.layout.breadcrumb')
            @endif
            
            {{-- Alert e Messaggi --}}
            @include('components.layout.alerts')
            
            {{-- Contenuto Specifico della Pagina --}}
            <div class="content-wrapper">
                {{ $slot }}
            </div>
            
        </main>
        
        {{-- Footer Modulare --}}
        @include('components.layout.footer.main', [
            'showVersion' => $showVersion ?? true,
            'showLinks' => $showLinks ?? true,
            'showStats' => $showStats ?? false
        ])
        
    </div>
    
    {{-- JavaScript Framework --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    {{-- JavaScript Specifico per Pagina --}}
    @stack('scripts')
    
    {{-- Toggle sidebar function --}}
    <script>
    /* Toggle sidebar function */
    function toggleSidebar() {
        const sidebar = document.querySelector('.sidebar-container');
        const content = document.querySelector('.netgescon-content');
        const container = document.querySelector('.netgescon-container');
        
        if (sidebar && content && container) {
            if (sidebar.style.display === 'none') {
                sidebar.style.display = 'block';
                container.style.gridTemplateColumns = '280px 1fr';
            } else {
                sidebar.style.display = 'none';
                container.style.gridTemplateColumns = '1fr';
            }
        }
    }
    
    /* Dark mode toggle */
    function toggleDarkMode() {
        const body = document.body;
        const themeIcon = document.getElementById('theme-icon');
        
        body.classList.toggle('dark');
        
        if (body.classList.contains('dark')) {
            themeIcon.className = 'fas fa-sun';
            localStorage.setItem('netgescon-theme', 'dark');
        } else {
            themeIcon.className = 'fas fa-moon';
            localStorage.setItem('netgescon-theme', 'light');
        }
    }

    // Ripristina tema al caricamento
    document.addEventListener('DOMContentLoaded', function() {
        const savedTheme = localStorage.getItem('netgescon-theme');
        const themeIcon = document.getElementById('theme-icon');
        
        if (savedTheme === 'dark') {
            document.body.classList.add('dark');
            if (themeIcon) themeIcon.className = 'fas fa-sun';
        }
        
        console.log('NetGesCon Layout Clean inizializzato');
    });
    </script>
    
</body>
</html>
