<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ \App\Models\SystemSetting::get('app_name', 'Enterprise FMS') }} - @yield('title', 'Dashboard')</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="{{ asset('css/ai-chat.css') }}">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    @if(app()->getLocale() == 'ar')
        @vite(['resources/css/rtl.scss', 'resources/js/app.js'])
    @else
        @vite(['resources/css/app.scss', 'resources/js/app.js'])
    @endif
    @yield('styles')
</head>

<body>
    <div id="app">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="logo">
                <i class="bi bi-cpu-fill"></i>
                <span>{{ \App\Models\SystemSetting::get('app_name', 'FMS') }}</span>
            </div>

            <nav class="mt-3">
                <a href="{{ url('/') }}" class="nav-link {{ Request::is('/') ? 'active' : '' }}">
                    <i class="bi bi-speedometer2"></i> <span>{{ __('Dashboard') }}</span>
                </a>
                
                <!-- AI Intelligence Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseIntelligence" aria-expanded="{{ Request::is('intelligence*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-stars me-2"></i>{{ __('Production Intelligence') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('intelligence*') ? 'show' : '' }}" id="collapseIntelligence">
                        <a href="{{ route('intelligence.dashboard') }}" class="nav-link sub-link {{ Request::is('intelligence') ? 'active' : '' }}">
                            <i class="bi bi-grid-1x2"></i> <span>{{ __('Executive View') }}</span>
                        </a>
                        <a href="{{ route('intelligence.risks') }}" class="nav-link sub-link {{ Request::is('intelligence/risks*') ? 'active' : '' }}">
                            <i class="bi bi-exclamation-triangle"></i> <span>{{ __('Risk Monitor') }}</span>
                        </a>
                        <a href="{{ route('intelligence.machines') }}" class="nav-link sub-link {{ Request::is('intelligence/machines*') ? 'active' : '' }}">
                            <i class="bi bi-gear-wide"></i> <span>{{ __('Asset Health') }}</span>
                        </a>
                        <a href="{{ route('intelligence.forecast') }}" class="nav-link sub-link {{ Request::is('intelligence/forecast*') ? 'active' : '' }}">
                            <i class="bi bi-graph-up"></i> <span>{{ __('Supply Forecast') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Reporting Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseReporting" aria-expanded="{{ Request::is('reports*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-bar-chart-fill me-2 opacity-75"></i>{{ __('Enterprise Reporting') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('reports*') ? 'show' : '' }}" id="collapseReporting">
                        <a href="{{ route('reports.index') }}" class="nav-link sub-link {{ Request::is('reports') ? 'active' : '' }}">
                            <i class="bi bi-bar-chart-line"></i> <span>{{ __('Report Center') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Structure Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseStructure" aria-expanded="{{ Request::is('companies*') || Request::is('factories*') || Request::is('branches*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-diagram-3-fill me-2 opacity-75"></i>{{ __('Enterprise Structure') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('companies*') || Request::is('factories*') || Request::is('branches*') ? 'show' : '' }}" id="collapseStructure">
                        <a href="{{ route('companies.index') }}" class="nav-link sub-link {{ Request::is('companies*') ? 'active' : '' }}">
                            <i class="bi bi-buildings"></i> <span>{{ __('Companies') }}</span>
                        </a>
                        <a href="{{ route('factories.index') }}" class="nav-link sub-link {{ Request::is('factories*') ? 'active' : '' }}">
                            <i class="bi bi-building-gear"></i> <span>{{ __('Factories') }}</span>
                        </a>
                        <a href="{{ route('branches.index') }}" class="nav-link sub-link {{ Request::is('branches*') ? 'active' : '' }}">
                            <i class="bi bi-geo"></i> <span>{{ __('Branches') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Assets Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseAssets" aria-expanded="{{ Request::is('machines*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-gear-wide-connected me-2 opacity-75"></i>{{ __('Assets & Equipment') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('machines*') ? 'show' : '' }}" id="collapseAssets">
                        <a href="{{ route('machines.index') }}" class="nav-link sub-link {{ Request::is('machines*') ? 'active' : '' }}">
                            <i class="bi bi-gear-wide-connected"></i> <span>{{ __('Machines') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Production Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseProduction" aria-expanded="{{ Request::is('products*') || Request::is('boms*') || Request::is('work-orders*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-pc-display-horizontal me-2 opacity-75"></i>{{ __('Production Management') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('products*') || Request::is('boms*') || Request::is('work-orders*') || Request::is('raw-materials*') ? 'show' : '' }}" id="collapseProduction">
                        <a href="{{ route('raw-materials.index') }}" class="nav-link sub-link {{ Request::is('raw-materials*') ? 'active' : '' }}">
                            <i class="bi bi-moisture"></i> <span>{{ __('Raw Materials') }}</span>
                        </a>
                        <a href="{{ route('products.index') }}" class="nav-link sub-link {{ Request::is('products*') ? 'active' : '' }}">
                            <i class="bi bi-box-seam"></i> <span>{{ __('Product Catalog') }}</span>
                        </a>
                        <a href="{{ route('boms.index') }}" class="nav-link sub-link {{ Request::is('boms*') ? 'active' : '' }}">
                            <i class="bi bi-diagram-3"></i> <span>{{ __('Bill Of Materials') }}</span>
                        </a>
                        <a href="{{ route('work-orders.index') }}" class="nav-link sub-link {{ Request::is('work-orders*') ? 'active' : '' }}">
                            <i class="bi bi-file-earmark-check"></i> <span>{{ __('Work Orders') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Inventory Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseInventory" aria-expanded="{{ Request::is('inventory*') || Request::is('warehouses*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-boxes me-2 opacity-75"></i>{{ __('Inventory & Logistics') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('inventory*') || Request::is('warehouses*') ? 'show' : '' }}" id="collapseInventory">
                        <a href="{{ route('inventory.index') }}" class="nav-link sub-link {{ Request::is('inventory') ? 'active' : '' }}">
                            <i class="bi bi-boxes"></i> <span>{{ __('Global Stock') }}</span>
                        </a>
                        <a href="{{ route('warehouses.index') }}" class="nav-link sub-link {{ Request::is('warehouses*') ? 'active' : '' }}">
                            <i class="bi bi-house-door"></i> <span>{{ __('Warehouses') }}</span>
                        </a>
                        <a href="{{ route('inventory.movements') }}" class="nav-link sub-link {{ Request::is('inventory/movements*') ? 'active' : '' }}">
                            <i class="bi bi-clock-history"></i> <span>{{ __('Stock Logs') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Supply Chain Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseSupply" aria-expanded="{{ Request::is('partners*') || Request::is('purchase-orders*') || Request::is('sales-orders*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-truck me-2 opacity-75"></i>{{ __('Supply Chain & Sales') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('partners*') || Request::is('purchase-orders*') || Request::is('sales-orders*') ? 'show' : '' }}" id="collapseSupply">
                        <a href="{{ route('partners.index') }}" class="nav-link sub-link {{ Request::is('partners*') ? 'active' : '' }}">
                            <i class="bi bi-people"></i> <span>{{ __('Partner Directory') }}</span>
                        </a>
                        <a href="{{ route('purchase-orders.index') }}" class="nav-link sub-link {{ Request::is('purchase-orders*') ? 'active' : '' }}">
                            <i class="bi bi-cart"></i> <span>{{ __('Purchase Orders') }}</span>
                        </a>
                        <a href="{{ route('sales-orders.index') }}" class="nav-link sub-link {{ Request::is('sales-orders*') ? 'active' : '' }}">
                            <i class="bi bi-graph-up-arrow"></i> <span>{{ __('Sales Orders') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Fleet Management Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseFleet" aria-expanded="{{ Request::is('fleet*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-truck-flatbed me-2 opacity-75"></i>{{ __('Fleet Management') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('fleet*') ? 'show' : '' }}" id="collapseFleet">
                        <a href="{{ route('fleet.index') }}" class="nav-link sub-link {{ Request::is('fleet') ? 'active' : '' }}">
                            <i class="bi bi-card-checklist"></i> <span>{{ __('Fleet Registry') }}</span>
                        </a>
                        <a href="{{ route('fleet.loading.index') }}" class="nav-link sub-link {{ Request::is('fleet-loading*') ? 'active' : '' }}">
                            <i class="bi bi-box-arrow-in-down"></i> <span>{{ __('Fleet Loading') }}</span>
                        </a>
                    </div>
                </div>

                <!-- Quality Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseQuality" aria-expanded="{{ Request::is('quality-checks*') || Request::is('maintenance*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-shield-check me-2 opacity-75"></i>{{ __('Quality & Maintenance') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('quality-checks*') || Request::is('maintenance*') ? 'show' : '' }}" id="collapseQuality">
                        <a href="{{ route('quality-checks.index') }}" class="nav-link sub-link {{ Request::is('quality-checks*') ? 'active' : '' }}">
                            <i class="bi bi-shield-check"></i> <span>{{ __('Quality Control') }}</span>
                        </a>
                        <a href="{{ route('maintenance.index') }}" class="nav-link sub-link {{ Request::is('maintenance*') ? 'active' : '' }}">
                            <i class="bi bi-tools"></i> <span>{{ __('Machine CMMS') }}</span>
                        </a>
                    </div>
                </div>

                <!-- System Section -->
                <div class="nav-section">
                    <button class="nav-section-label border-0 bg-transparent" 
                        data-bs-toggle="collapse" data-bs-target="#collapseSystem" aria-expanded="{{ Request::is('hr*') || Request::is('analytics*') || Request::is('settings*') ? 'true' : 'false' }}">
                        <span><i class="bi bi-sliders2 me-2 opacity-75"></i>{{ __('System Settings') }}</span>
                        <i class="bi bi-chevron-down chevron"></i>
                    </button>
                    <div class="collapse {{ Request::is('hr*') || Request::is('analytics*') || Request::is('settings*') ? 'show' : '' }}" id="collapseSystem">
                        <a href="{{ route('settings.index') }}" class="nav-link sub-link {{ Request::is('settings*') ? 'active' : '' }}">
                            <i class="bi bi-sliders"></i> <span>{{ __('General Settings') }}</span>
                        </a>
                        <a href="{{ route('analytics.index') }}" class="nav-link sub-link {{ Request::is('analytics*') ? 'active' : '' }}">
                            <i class="bi bi-graph-up-arrow"></i> <span>{{ __('Analytics Engine') }}</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- Main Wrapper -->
        <main class="main-wrapper">
            <!-- Header -->
            <header class="top-header">
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-light d-lg-none"><i class="bi bi-list"></i></button>
                    <div class="search-box">
                        <div class="input-group">
                            <span class="input-group-text bg-light border-0"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control bg-light border-0" placeholder="{{ __('Search...') }}">
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    @if(session('success'))
                        <div class="alert alert-success py-1 px-3 mb-0 small">{{ session('success') }}</div>
                    @endif

                    <!-- Custom Language Toggle -->
                    <div class="lang-switcher">
                        <a href="{{ route('lang.switch', 'en') }}" class="lang-label {{ app()->getLocale() == 'en' ? 'active' : '' }}">EN</a>
                        <a href="{{ route('lang.switch', app()->getLocale() == 'en' ? 'ar' : 'en') }}" class="lang-toggle-track {{ app()->getLocale() }}">
                            <div class="lang-toggle-thumb"></div>
                        </a>
                        <a href="{{ route('lang.switch', 'ar') }}" class="lang-label {{ app()->getLocale() == 'ar' ? 'active' : '' }}">AR</a>
                    </div>

                    <div class="dropdown">
                        <div class="user-profile d-flex align-items-center gap-2 cursor-pointer" 
                             data-bs-toggle="dropdown" aria-expanded="false" style="cursor: pointer;">
                            <div class="text-end d-none d-sm-block">
                                <h6 class="mb-0 small fw-bold">{{ Auth::check() ? Auth::user()->name : 'Guest Account' }}</h6>
                                <span class="text-muted small opacity-75">Global Manager</span>
                            </div>
                            <img src="https://ui-avatars.com/api/?name={{ Auth::check() ? urlencode(Auth::user()->name) : 'Guest' }}&background=3b82f6&color=fff&size=128"
                                class="rounded-circle shadow-sm border border-2 border-white" width="40" height="40">
                        </div>
                        <ul class="dropdown-menu dropdown-menu-end border-0 shadow-lg rounded-4 p-2 mt-3" style="min-width: 200px;">
                            <li>
                                <a class="dropdown-item py-2 rounded-3 d-flex align-items-center gap-2" href="{{ route('profile.index') }}">
                                    <i class="bi bi-person-circle fs-5 text-primary"></i>
                                    <span>{{ __('My Profile') }}</span>
                                </a>
                            </li>
                            <li><hr class="dropdown-divider opacity-50"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item py-2 rounded-3 d-flex align-items-center gap-2 text-danger">
                                        <i class="bi bi-box-arrow-right fs-5"></i>
                                        <span>{{ __('Sign Out') }}</span>
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>

            <!-- Page Content -->
            <div class="container-fluid p-4">
                @yield('content')
            </div>
        </main>
    </div>

    <!-- AI Agent Chat Bubble -->
    @can('access ai agent')
    <div class="ai-chat-wrapper">
        <div class="ai-chat-bubble" id="aiChatBubble">
            <i class="bi bi-stars"></i>
        </div>
        <div class="ai-chat-window" id="aiChatWindow">
            <div class="ai-chat-header">
                <div>
                    <h6 class="mb-0 fw-bold"><i class="bi bi-robot me-2"></i>{{ __('AI Knowledge Agent') }}</h6>
                    <small class="opacity-75">{{ __('Online & Learning') }}</small>
                </div>
                <button type="button" class="btn-close btn-close-white" id="aiChatClose" aria-label="Close"></button>
            </div>
            <div class="ai-chat-messages" id="aiChatMessages">
                <div class="message message-ai">
                    {{ __("Hello! I am your AI Production Assistant. I'm trained on your live factory data. How can I help you today?") }}
                </div>
            </div>
            <div class="ai-chat-input-area">
                <div class="ai-chat-input-group">
                    <input type="text" id="aiChatInput" class="ai-chat-input" placeholder="{{ __('Ask about stocks, BOMs, movements...') }}">
                    <button class="btn btn-primary btn-sm rounded-circle p-2" id="aiChatSend">
                        <i class="bi bi-send-fill"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/ai-chat.js') }}"></script>
    @endcan

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    @yield('scripts')
</body>

</html>