<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Admin') — Land Feasibility</title>

    {{-- Google Fonts: Segoe UI fallback --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

    {{-- Lucide Icons (VS Code-style icon set) --}}
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

    @vite(['resources/css/admin.css', 'resources/js/admin.js'])

    @stack('styles')
</head>
<body>
<div class="admin-bg">
    <div class="admin-layout" id="admin-layout">

        {{-- ================================================================
             SIDEBAR
        ================================================================ --}}
        <aside class="admin-sidebar" id="admin-sidebar">

            {{-- Logo --}}
            <div class="admin-sidebar-logo">
                <div class="logo-icon">
                    <i data-lucide="map-pin" style="width:14px;height:14px;"></i>
                </div>
                <div class="logo-text">
                    Land Feasibility
                    <span>Admin Console</span>
                </div>
            </div>

            {{-- Navigation --}}
            <nav style="flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:8px;">

                <div class="admin-nav-section">
                    <div class="admin-nav-label">Overview</div>
                    <a href="{{ route('admin.dashboard') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="layout-dashboard" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Dashboard</span>
                    </a>
                </div>

                <div class="admin-nav-section">
                    <div class="admin-nav-label">Management</div>
                    <a href="{{ route('admin.users.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.users.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="users" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Users</span>
                    </a>
                    <a href="{{ route('admin.roles.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.roles.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="shield" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Roles & Permissions</span>
                    </a>
                </div>

                <div class="admin-nav-section">
                    <div class="admin-nav-label">Land Data</div>
                    <a href="{{ route('admin.states.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.states.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="map" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">States</span>
                    </a>
                    <a href="{{ route('admin.cities.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.cities.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="building-2" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Cities</span>
                    </a>
                    <a href="{{ route('admin.zones.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.zones.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="layers" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Zones</span>
                    </a>
                    <a href="{{ route('admin.zone-rules.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.zone-rules.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="sliders" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Zone Rules</span>
                    </a>
                    <a href="{{ route('admin.regulations.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.regulations.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="file-text" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Regulations</span>
                    </a>
                    <a href="{{ route('admin.regulation-documents.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.regulation-documents.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="cpu" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">AI Documents</span>
                    </a>
                    <a href="{{ route('admin.feasibility.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.feasibility.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="trending-up" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Feasibility Reports</span>
                    </a>
                </div>

                <div class="admin-nav-section">
                    <div class="admin-nav-label">Portal Tools</div>
                    <a href="{{ route('portal.analyze.form') }}"
                       class="admin-nav-item {{ request()->routeIs('portal.analyze.form') || request()->is('analyze') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="map-pin" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Analyze Land</span>
                    </a>
                    <a href="{{ route('portal.survey.upload') }}"
                       class="admin-nav-item {{ request()->is('survey*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="upload-cloud" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Survey Upload</span>
                    </a>
                    <a href="{{ route('portal.compare') }}"
                       class="admin-nav-item {{ request()->is('compare') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="columns-2" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Compare Plots</span>
                    </a>
                    <a href="{{ route('admin.feasibility.index') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.feasibility.*') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="trending-up" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Feasibility Reports</span>
                    </a>
                </div>

                <div class="admin-nav-section">
                    <div class="admin-nav-label">System</div>
                    <a href="{{ route('admin.settings') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.settings') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="settings" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Settings</span>
                    </a>
                    <a href="{{ route('admin.activity-log') }}"
                       class="admin-nav-item {{ request()->routeIs('admin.activity-log') ? 'active' : '' }}">
                        <span class="nav-icon"><i data-lucide="activity" style="width:16px;height:16px;"></i></span>
                        <span class="nav-text">Activity Log</span>
                    </a>
                </div>

            </nav>

            {{-- Sidebar Footer: Admin user --}}
            <div style="padding:12px 16px; border-top:1px solid var(--vsc-border-light); display:flex; align-items:center; gap:10px; overflow:hidden;">
                <div class="avatar avatar-blue" style="flex-shrink:0;">
                    {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
                </div>
                <div style="overflow:hidden;">
                    <div style="font-size:12px;font-weight:600;color:var(--vsc-text-active);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                        {{ auth()->user()->name ?? 'Admin' }}
                    </div>
                    <div style="font-size:10px;color:var(--vsc-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                        {{ auth()->user()->email ?? '' }}
                    </div>
                </div>
                <form method="POST" action="{{ route('logout') }}" style="margin-left:auto;flex-shrink:0;">
                    @csrf
                    <button type="submit" class="admin-icon-btn"
                            data-tooltip="Sign Out"
                            style="color:var(--vsc-text-tertiary);">
                        <i data-lucide="log-out" style="width:14px;height:14px;"></i>
                    </button>
                </form>
            </div>

        </aside>

        {{-- ================================================================
             MAIN CONTENT
        ================================================================ --}}
        <div class="admin-main">

            {{-- Header --}}
            <header class="admin-header">
                {{-- Sidebar toggle --}}
                <button class="admin-icon-btn" id="sidebar-toggle" data-tooltip="Toggle Sidebar">
                    <i data-lucide="panel-left" style="width:16px;height:16px;"></i>
                </button>

                {{-- Mobile menu button --}}
                <button class="admin-icon-btn" id="mobile-sidebar-toggle" style="display:none;">
                    <i data-lucide="menu" style="width:16px;height:16px;"></i>
                </button>

                {{-- Breadcrumb --}}
                <nav class="breadcrumb">
                    <a href="{{ route('admin.dashboard') }}">
                        <i data-lucide="home" style="width:11px;height:11px;"></i>
                    </a>
                    @hasSection('breadcrumb')
                        <span class="separator">/</span>
                        @yield('breadcrumb')
                    @endif
                </nav>

                <div class="admin-header-right">

                    {{-- Search --}}
                    <div class="search-wrap">
                        <i data-lucide="search" class="search-icon" style="width:13px;height:13px;"></i>
                        <input type="text" class="search-input" placeholder="Search...">
                    </div>

                    <div class="separator-v"></div>

                    {{-- Notifications --}}
                    <button class="admin-icon-btn" data-tooltip="Notifications">
                        <i data-lucide="bell" style="width:15px;height:15px;"></i>
                    </button>

                    {{-- User dropdown --}}
                    <div class="dropdown">
                        <button class="admin-icon-btn" data-dropdown="#user-menu" data-tooltip="Account">
                            <div class="avatar avatar-sm avatar-blue">
                                {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
                            </div>
                        </button>
                        <div class="dropdown-menu" id="user-menu">
                            <div style="padding:10px 14px; border-bottom:1px solid var(--vsc-border-light);">
                                <div style="font-size:12px;font-weight:600;color:var(--vsc-text-active);">{{ auth()->user()->name ?? 'Admin' }}</div>
                                <div style="font-size:11px;color:var(--vsc-text-secondary);">{{ auth()->user()->email ?? '' }}</div>
                            </div>
                            <a href="{{ route('admin.settings') }}" class="dropdown-item">
                                <i data-lucide="settings" class="icon" style="width:14px;height:14px;"></i>
                                Settings
                            </a>
                            <div class="dropdown-divider"></div>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item" style="color:#ff8080;">
                                    <i data-lucide="log-out" class="icon" style="width:14px;height:14px;color:#ff8080;"></i>
                                    Sign Out
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </header>

            {{-- Flash Messages --}}
            <div style="padding:0 24px;">
                @if(session('success'))
                    <div class="alert alert-success" data-auto-dismiss="5000" style="margin-top:16px; margin-bottom:0;">
                        <i data-lucide="check-circle" class="alert-icon" style="width:16px;height:16px;"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-error" data-auto-dismiss="7000" style="margin-top:16px; margin-bottom:0;">
                        <i data-lucide="x-circle" class="alert-icon" style="width:16px;height:16px;"></i>
                        <span>{{ session('error') }}</span>
                    </div>
                @endif
            </div>

            {{-- Page Content --}}
            <main class="admin-content" style="padding-bottom:48px;">
                @yield('content')
            </main>

        </div>{{-- .admin-main --}}

    </div>{{-- .admin-layout --}}

    {{-- VS Code-style Status Bar --}}
    <div class="admin-statusbar">
        <div class="statusbar-item">
            <i data-lucide="git-branch" style="width:11px;height:11px;"></i>
            main
        </div>
        <div class="statusbar-item">
            <i data-lucide="check-circle" style="width:11px;height:11px;"></i>
            0 errors
        </div>
        <div class="statusbar-right">
            <div class="statusbar-item">
                Land Feasibility v1.0
            </div>
            <div class="statusbar-item">
                Laravel {{ app()->version() }}
            </div>
            <div class="statusbar-item" id="statusbar-clock">
                --:--
            </div>
        </div>
    </div>

</div>{{-- .admin-bg --}}

<script>
    // Initialize Lucide icons
    lucide.createIcons();
</script>

@stack('scripts')
</body>
</html>
