{{-- 
========================================
LAYOUT UNIVERSALE NETGESCON
========================================
Layout modulare e atomizzato         /* Content area scrollabile */
        .netgescon-content {
            grid-area: content;
            padding: 0;
            margin: 0;
            background-color: #f8f9fa;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .content-wrapper {
            flex: 1;
            width: 100%;
            max-width: 100%;
            padding: 1rem;
        }
        
        /* FIX ALLINEAMENTO BOOTSTRAP CONTAINER */
        .netgescon-content .container-fluid {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
        }
        
        /* Fix Bootstrap rows per perfetto allineamento */
        .netgescon-content .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        /* Fix Bootstrap columns */
        .netgescon-content .col,
        .netgescon-content [class*="col-"] {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
        
        /* Ensures perfect content alignment */
        .netgescon-content h1,
        .netgescon-content h2,
        .netgescon-content h3 {
            margin-left: 0;
            padding-left: 0;
        }ente.
Ogni componente è indipendente e configurabile.

Struttura:
- Header modulare (logo, user info, settings)
- Sidebar dinamica (basata su ruoli e permessi)
- Content area modulare
- Footer modulare
- Widget system

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

<!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">
    
    {{-- Stili CSS per layout ottimizzato --}}
    <style>
        /* Reset e Base */
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            overflow: hidden; /* Evita qualsiasi scroll sul body */
            height: 100vh;
        }
        
        /* Sidebar scroll interno */
        .netgescon-sidebar {
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        
        .sidebar-nav {
            overflow-y: auto;
            overflow-x: hidden;
            flex: 1;
        }
        
        /* Stili per cards e contenuto */
        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 1.5rem;
            transition: box-shadow 0.15s ease-in-out;
        }
        
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        /* Cards Stats colorate */
        .card.bg-primary,
        .card.bg-success,
        .card.bg-warning,
        .card.bg-info,
        .card.bg-danger {
            border: none;
            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
        }
        
        /* Perfect spacing for dashboard cards */
        .netgescon-content .card-body {
            padding: 1.25rem;
        }
        
        /* Stats cards height uniformity */
        .netgescon-content .row .col-md-3 .card {
            height: 100%;
            min-height: 120px;
        }
        
        /* Breadcrumb */
        .netgescon-breadcrumb {
            padding: 0.5rem 1rem;
            margin: 0;
            background-color: transparent;
        }
        
        .netgescon-breadcrumb .breadcrumb {
            margin: 0;
            padding: 0;
        }
        
        /* Layout Base NetGesCon - Grid Layout Semplificato */
        .netgescon-container {
            min-height: 100vh;
            display: grid;
            grid-template-rows: 70px 1fr 50px; /* Header fisso 70px, Content elastico, Footer fisso 50px */
            grid-template-columns: 280px 1fr; /* Sidebar fissa 280px, Content elastico */
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        
        .netgescon-body {
            display: contents; /* I figli si comportano come se fossero figli diretti del grid container */
        }
        
        /* Header fisso */
        .netgescon-header {
            grid-area: header;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1050 !important;
            height: 70px !important;
            background-color: #ffffff !important;
            border-bottom: 1px solid #e9ecef !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        
        /* Sidebar fissa */
        .sidebar-container {
            grid-area: sidebar;
            width: 280px;
            min-width: 280px;
            max-width: 280px;
            height: 100%;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
        }
        
        .netgescon-sidebar {
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        
        /* Nav area con scroll se necessario */
        .sidebar-nav {
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        /* Content area */
        .netgescon-content {
            grid-area: content;
            padding: 0;
            margin: 0;
            background-color: #f8f9fa;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .content-wrapper {
            flex: 1;
            width: 100%;
            max-width: 100%;
            padding: 1rem;
        }
        
        /* Footer fisso */
        .app-footer {
            grid-area: footer;
            background-color: #ffffff;
            border-top: 1px solid #dee2e6;
            height: 50px;
            min-height: 50px;
            max-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            z-index: 1040;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .netgescon-container {
                grid-template-columns: 1fr;
                grid-template-rows: 70px auto 1fr 50px;
                grid-template-areas: 
                    "header"
                    "sidebar"
                    "content"
                    "footer";
            }
            
            .sidebar-container {
                width: 100%;
                min-width: 100%;
                max-width: 100%;
                height: auto;
                max-height: 200px;
                border-right: none;
                border-bottom: 1px solid #dee2e6;
            }
        }
    </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' }}">
    
    {{-- Loading Screen --}}
    {{-- @include("components.layout.loading-screen") --}}
    
    {{-- Container principale --}}
    <div class="netgescon-container">
        
        {{-- Header Modulare --}}
        @include('components.layout.header.main', [
            'showSearch' => $showSearch ?? true,
            'showNotifications' => $showNotifications ?? true,
            'showUserMenu' => $showUserMenu ?? true
        ])
        
        {{-- Corpo principale con sidebar e content --}}
        <div class="netgescon-body">
            
            {{-- 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 main-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 ?? '' }}
                    @yield('content')
                </div>
                
            </main>
            
        </div>
        
        {{-- Footer Modulare --}}
        @include('components.layout.footer.main', [
            'showVersion' => $showVersion ?? true,
            'showLinks' => $showLinks ?? true,
            'showStats' => $showStats ?? false
        ])
        
    </div>
    
    {{-- Modali Globali --}}
    @include('components.layout.modals')
    
    {{-- 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>
    
    {{-- Script per pulizia layout --}}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // Rimuovi eventuali caratteri spuri dal body
        const textNodes = [];
        const walker = document.createTreeWalker(
            document.body,
            NodeFilter.SHOW_TEXT,
            null,
            false
        );
        
        let node;
        while (node = walker.nextNode()) {
            if (node.parentNode === document.body && node.textContent.trim() === '>') {
                textNodes.push(node);
            }
        }
        
        textNodes.forEach(node => {
            if (node.textContent.trim() === '>' || node.textContent.trim() === '') {
                node.remove();
            }
        });
        
        // Debug layout e correzioni automatiche
        const sidebar = document.querySelector('.netgescon-sidebar');
        const content = document.querySelector('.netgescon-content');
        const body = document.querySelector('.netgescon-body');
        
        if (sidebar && content && body) {
            // Assicura dimensioni corrette
            const sidebarWidth = sidebar.offsetWidth;
            const bodyWidth = body.offsetWidth;
            const contentWidth = bodyWidth - sidebarWidth;
            
            console.log('NetGesCon Layout Debug:');
            console.log('- Sidebar width:', sidebarWidth, 'px');
            console.log('- Body width:', bodyWidth, 'px');
            console.log('- Content calculated width:', contentWidth, 'px');
            console.log('- Content actual width:', content.offsetWidth, 'px');
            
            // Forza larghezza corretta se necessario
            if (content.offsetWidth < contentWidth - 50) {
                console.log('Correzione automatica larghezza content...');
                content.style.width = '100%';
                content.style.flex = '1 1 auto';
            }
        }
        
        console.log('NetGesCon Layout inizializzato correttamente');
    });
    </script>

    {{-- JavaScript Specifico per Pagina --}}
    @stack('scripts')
    
    {{-- Toggle sidebar function --}}
    <script>
    /* Toggle sidebar function */
    function toggleSidebar() {
        const sidebar = document.getElementById('netgesconSidebar');
        const content = document.querySelector('.netgescon-content');
        
        if (sidebar && content) {
            sidebar.classList.toggle('sidebar-hidden');
            content.classList.toggle('sidebar-hidden');
            
            // Salva lo stato in localStorage
            const isHidden = sidebar.classList.contains('sidebar-hidden');
            localStorage.setItem('netgescon-sidebar-hidden', isHidden);
        }
    }

    // Ripristina stato sidebar al caricamento
    document.addEventListener('DOMContentLoaded', function() {
        const isHidden = localStorage.getItem('netgescon-sidebar-hidden') === 'true';
        const sidebar = document.getElementById('netgesconSidebar');
        const content = document.querySelector('.netgescon-content');
        
        if (isHidden && sidebar && content) {
            sidebar.classList.add('sidebar-hidden');
            content.classList.add('sidebar-hidden');
        }
    });
    </script>
    
    {{-- Dark mode toggle --}}
    <script>
    /* Dark mode toggle */
    function toggleDarkMode() {
        const body = document.body;
        const themeIcon = document.getElementById('theme-icon');
        
        body.classList.toggle('dark');
        
        // Cambia icona
        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';
        }
    });
    </script>
    
</body>
</html>
