<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'Dashboard') - Acente Pro Max</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@300;400;500;600;700;800&display=swap"
          rel="stylesheet">

    <!-- Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <!-- Animate CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

    <!-- Perfect Scrollbar -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/perfect-scrollbar/1.5.5/css/perfect-scrollbar.min.css"
          rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

    <link rel="stylesheet" href="{{asset('assets/admin/css/app.css')}}">

    @stack('styles')
</head>
<body class="admin-layout">
<!-- Page Loader -->
<div id="pageLoader" class="page-loader">
    <div class="loader-spinner">
        <div class="spinner"></div>
        <div class="loader-text">Acente Pro Max</div>
    </div>
</div>

<div class="admin-wrapper">
    <!-- Sidebar -->
    <nav class="admin-sidebar" id="adminSidebar">
        <div class="sidebar-header">
            <div class="logo-container">
                <div class="logo-icon">
                    <i class="fas fa-plane"></i>
                </div>
                <div class="logo-text">
                    <span class="logo-title">Acente</span>
                    <span class="logo-subtitle">Pro Max</span>
                </div>
            </div>
            <button class="sidebar-collapse-btn" id="sidebarCollapseBtn">
                <i class="fas fa-angle-left"></i>
            </button>
        </div>

        <div class="sidebar-content ps">
            <!-- User Profile Card -->
            <div class="sidebar-user-card">
                <div class="user-avatar-wrapper">
                    <img
                        src="https://ui-avatars.com/api/?name={{ auth()->user()->full_name }}&background=gradient&color=fff"
                        alt="Avatar" class="user-avatar">
                    <div class="user-status-indicator online"></div>
                </div>
                <div class="user-info">
                    <div class="user-name">{{ auth()->user()->full_name }}</div>
                    <div class="user-role">Sistem Yöneticisi</div>
                </div>
                <div class="user-actions">
                    <button class="user-action-btn" title="Profil">
                        <i class="fas fa-user"></i>
                    </button>
                    <button class="user-action-btn" title="Ayarlar">
                        <i class="fas fa-cog"></i>
                    </button>
                </div>
            </div>

            <!-- Search Bar -->
            <div class="sidebar-search">
                <div class="search-input-wrapper">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="Menülerde ara...">
                </div>
            </div>

            <!-- Navigation Menu -->
            <div class="sidebar-menu">
                <div class="menu-section">
                    <div class="menu-section-title">
                        <span>Ana Menü</span>
                    </div>
                    <ul class="menu-list">
                        <li class="menu-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                            <a href="{{ route('admin.dashboard') }}" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-chart-pie"></i>
                                </div>
                                <span class="menu-text">Dashboard</span>
                                <div class="menu-badge">
                                    <span class="badge badge-primary">3</span>
                                </div>
                            </a>
                        </li>
                        <li class="menu-item has-submenu">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-users"></i>
                                </div>
                                <span class="menu-text">Kullanıcılar</span>
                                <div class="menu-arrow">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                            <ul class="submenu">
                                <li><a href="{{route('admin.users.index')}}" class="submenu-link">Kullanıcı Listesi</a>
                                </li>
                                <li><a href="{{route('admin.users.create')}}" class="submenu-link">Yeni Kullanıcı</a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item has-submenu">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-building"></i>
                                </div>
                                <span class="menu-text">Acenteler</span>
                                <div class="menu-badge">
                                    <span class="badge badge-warning">12</span>
                                </div>
                                <div class="menu-arrow">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                            <ul class="submenu">
                                <li><a href="{{route('admin.agencies.index')}}" class="submenu-link">Acente Listesi</a>
                                </li>
                                <li><a href="{{route('admin.agencies.create')}}" class="submenu-link">Yeni Acente</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="menu-section">
                    <div class="menu-section-title">
                        <span>İçerik Yönetimi</span>
                    </div>
                    <ul class="menu-list">
                        <li class="menu-item has-submenu">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-newspaper"></i>
                                </div>
                                <span class="menu-text">Blog</span>
                                <div class="menu-arrow">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                            <ul class="submenu">
                                <li><a href="#" class="submenu-link">Yazılar</a></li>
                                <li><a href="#" class="submenu-link">Yeni Yazı</a></li>
                                <li><a href="#" class="submenu-link">Kategoriler</a></li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-images"></i>
                                </div>
                                <span class="menu-text">Medya Galerisi</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-tags"></i>
                                </div>
                                <span class="menu-text">Etiketler</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="menu-section">
                    <div class="menu-section-title">
                        <span>Sistem</span>
                    </div>
                    <ul class="menu-list">
                        <li class="menu-item has-submenu">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-cog"></i>
                                </div>
                                <span class="menu-text">Ayarlar</span>
                                <div class="menu-arrow">
                                    <i class="fas fa-chevron-right"></i>
                                </div>
                            </a>
                            <ul class="submenu">
                                <li><a href="#" class="submenu-link">Genel Ayarlar</a></li>
                                <li><a href="#" class="submenu-link">E-posta Ayarları</a></li>
                                <li><a href="#" class="submenu-link">Ödeme Ayarları</a></li>
                            </ul>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <span class="menu-text">Analitik</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="#" class="menu-link">
                                <div class="menu-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <span class="menu-text">Güvenlik</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="admin-main">
        <!-- Header -->
        <header class="admin-header">
            <div class="header-left">
                <button class="mobile-menu-toggle" id="mobileMenuToggle">
                    <i class="fas fa-bars"></i>
                </button>

                <div class="breadcrumb-wrapper">
                    <nav class="breadcrumb">
                        <span class="breadcrumb-item">@yield('page_title', 'Dashboard')</span>
                    </nav>
                </div>
            </div>

            <div class="header-right">
                <div class="header-actions">
                    <!-- Quick Add -->
                    <div class="dropdown">
                        <button class="header-action-btn" data-bs-toggle="dropdown">
                            <i class="fas fa-plus"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <h6 class="dropdown-header">Hızlı Ekle</h6>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-user"></i>
                                Yeni Kullanıcı
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-building"></i>
                                Yeni Acente
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-map"></i>
                                Yeni Tur
                            </a>
                        </div>
                    </div>

                    <!-- Notifications -->
                    <div class="dropdown">
                        <button class="header-action-btn notification-btn" data-bs-toggle="dropdown">
                            <i class="fas fa-bell"></i>
                            <span class="notification-badge">3</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notification-dropdown">
                            <div class="dropdown-header">
                                <h6>Bildirimler</h6>
                                <button class="mark-all-read">Tümünü okundu işaretle</button>
                            </div>
                            <div class="notification-list">
                                <div class="notification-item unread">
                                    <div class="notification-avatar">
                                        <i class="fas fa-user-plus"></i>
                                    </div>
                                    <div class="notification-content">
                                        <div class="notification-title">Yeni kullanıcı kaydı</div>
                                        <div class="notification-desc">John Doe sisteme kaydoldu</div>
                                        <div class="notification-time">2 dakika önce</div>
                                    </div>
                                </div>
                                <div class="notification-item">
                                    <div class="notification-avatar">
                                        <i class="fas fa-building"></i>
                                    </div>
                                    <div class="notification-content">
                                        <div class="notification-title">Acente onayı</div>
                                        <div class="notification-desc">Travel Agency onay bekliyor</div>
                                        <div class="notification-time">1 saat önce</div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown-footer">
                                <a href="#" class="view-all-notifications">Tüm bildirimleri görüntüle</a>
                            </div>
                        </div>
                    </div>

                    <!-- Theme Toggle -->
                    <!--button class="header-action-btn theme-toggle" id="themeToggle">
                        <i class="fas fa-moon"></i>
                    </button-->

                    <!-- User Menu -->
                    <div class="dropdown">
                        <button class="user-menu-toggle" data-bs-toggle="dropdown">
                            <img
                                src="https://ui-avatars.com/api/?name={{ auth()->user()->full_name }}&background=gradient&color=fff"
                                alt="Avatar" class="user-avatar-header">
                            <div class="user-info-header">
                                <div class="user-name">{{ auth()->user()->full_name }}</div>
                                <div class="user-role">Admin</div>
                            </div>
                            <i class="fas fa-chevron-down"></i>
                        </button>

                        <div class="dropdown-menu dropdown-menu-end user-dropdown">
                            <div class="dropdown-header">
                                <div class="user-profile-header">
                                    <img
                                        src="https://ui-avatars.com/api/?name={{ auth()->user()->full_name }}&background=gradient&color=fff"
                                        alt="Avatar" class="user-avatar-large">
                                    <div class="user-details">
                                        <div class="user-name">{{ auth()->user()->full_name }}</div>
                                        <div class="user-email">{{ auth()->user()->email }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-cog"></i>
                                Hesap Ayarları
                            </a>
                            <div class="dropdown-divider"></div>
                            <form method="POST" action="{{ route('admin.logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item text-danger">
                                    <i class="fas fa-sign-out-alt"></i>
                                    Çıkış Yap
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content -->
        <main class="admin-content">
            <!-- Alert Messages -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @yield('content')
        </main>
    </div>
</div>

<!-- Command Palette -->
<div class="command-palette" id="commandPalette">
    <div class="command-palette-content">
        <div class="command-search">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Komut veya sayfa ara...">
        </div>
        <div class="command-results">
            <div class="command-section">
                <div class="command-section-title">Sayfalar</div>
                <div class="command-item">
                    <div class="command-icon"><i class="fas fa-chart-pie"></i></div>
                    <div class="command-text">Dashboard</div>
                    <div class="command-shortcut">⌘D</div>
                </div>
                <div class="command-item">
                    <div class="command-icon"><i class="fas fa-users"></i></div>
                    <div class="command-text">Kullanıcılar</div>
                    <div class="command-shortcut">⌘U</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Backdrop -->
<div class="backdrop" id="backdrop"></div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/perfect-scrollbar/1.5.5/perfect-scrollbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
        crossorigin="anonymous"></script>

<script src="{{asset('assets/admin/js/app.js')}}"></script>

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