<!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', 'Acente Paneli') - {{ auth()->user()?->agency?->name ?? '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">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Agency Panel CSS -->
    <link rel="stylesheet" href="{{ asset('assets/agency/css/app.css') }}">

    <!-- SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @stack('styles')
</head>
<body class="agency-layout">
@include('agency.layouts.partials.sidebar')

<!-- Main Content -->
<div class="main-content">
    <!-- Header -->
    <header class="main-header">
        <div class="header-left">
            <button class="mobile-sidebar-toggle d-lg-none" id="mobileSidebarToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="page-title">
                <h4>@yield('page_title', 'Dashboard')</h4>
                @if(isset($breadcrumbs))
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            @foreach($breadcrumbs as $breadcrumb)
                                @if($loop->last)
                                    <li class="breadcrumb-item active">{{ $breadcrumb['title'] ?? $breadcrumb['name'] ?? '' }}</li>
                                @else
                                    <li class="breadcrumb-item">
                                        <a href="{{ $breadcrumb['url'] ?? '#' }}">{{ $breadcrumb['title'] ?? $breadcrumb['name'] ?? '' }}</a>
                                    </li>
                                @endif
                            @endforeach
                        </ol>
                    </nav>
                @endif
            </div>
        </div>

        <div class="header-right">
            <!-- Quick Actions -->
            <div class="dropdown">
                <button class="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="fas fa-plus"></i> Hızlı Ekle
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('agency.products.kultur-turlari.create') }}">
                            <i class="fas fa-landmark"></i> Yeni Kültür Turu
                        </a></li>
                    <li><a class="dropdown-item" href="{{ route('agency.products.gunubirlik-turlar.create') }}">
                            <i class="fas fa-sun"></i> Yeni Günübirlik Tur
                        </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{{ route('agency.sales.index') }}">
                            <i class="fas fa-shopping-cart"></i> Satış Ekranı
                        </a></li>
                    <li><a class="dropdown-item" href="{{ route('agency.customers.create') }}">
                            <i class="fas fa-user-plus"></i> Müşteri
                        </a></li>
                </ul>
            </div>

            <!-- Notifications -->
            <div class="dropdown">
                <button class="btn btn-light btn-sm position-relative" data-bs-toggle="dropdown">
                    <i class="fas fa-bell"></i>
                    <span
                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end notification-dropdown">
                    <h6 class="dropdown-header">Bildirimler</h6>
                    <div class="notification-item">
                        <div class="notification-content">
                            <div class="notification-title">Yeni Rezervasyon</div>
                            <div class="notification-desc">İstanbul Turu için yeni rezervasyon</div>
                            <div class="notification-time">2 dakika önce</div>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-center" href="#">Tüm Bildirimleri Gör</a>
                </div>
            </div>

            <!-- User Menu -->
            <div class="dropdown">
                <button class="btn btn-light btn-sm d-flex align-items-center" data-bs-toggle="dropdown">
                    <img
                        src="https://ui-avatars.com/api/?name={{ auth()->user()->full_name }}&background=gradient&color=fff"
                        alt="Avatar" class="rounded-circle me-2" width="24" height="24">
                    <span class="d-none d-md-inline">{{ auth()->user()->first_name }}</span>
                    <i class="fas fa-chevron-down ms-1"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="{{ route('agency.profile') }}">
                            <i class="fas fa-user"></i> Profil
                        </a></li>
                    @if(auth()->user()->agencies()->count() > 1 || auth()->user()->isSuperAdmin())
                        <li><a class="dropdown-item" href="{{ route('agency.switch') }}">
                                <i class="fas fa-exchange-alt"></i> Acente Değiştir
                            </a></li>
                    @endif
                    <li><a class="dropdown-item" href="{{ route('agency.settings') }}">
                            <i class="fas fa-cog"></i> Ayarlar
                        </a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <form method="POST" action="{{ route('agency.logout') }}">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger">
                                <i class="fas fa-sign-out-alt"></i> Çıkış Yap
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- Content Area -->
    <main class="content-area">
        @if (session('success') || session('error') || session('warning'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 4000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.onmouseenter = Swal.stopTimer;
                            toast.onmouseleave = Swal.resumeTimer;
                        }
                    });

                    @if(session('success'))
                        Toast.fire({
                            icon: 'success',
                            title: "{{ session('success') }}"
                        });
                    @endif

                    @if(session('error'))
                        Toast.fire({
                            icon: 'error',
                            title: "{{ session('error') }}"
                        });
                    @endif

                    @if(session('warning'))
                        Toast.fire({
                            icon: 'warning',
                            title: "{{ session('warning') }}"
                        });
                    @endif
                });
            </script>
        @endif

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

{{-- Global Quick View Drawer --}}
@include('components.quick-view-drawer')

<!-- Mobile Sidebar Backdrop -->
<div class="sidebar-backdrop d-lg-none" id="sidebarBackdrop"></div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('assets/agency/js/app.js') }}"></script>

    <script>
        // Auto-hide alerts after 8 seconds (increased for better readability)
        setTimeout(function() {
            let alerts = document.querySelectorAll('.alert-dismissible');
            alerts.forEach(function(alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 8000);

        // Sidebar Functionality
        document.addEventListener('DOMContentLoaded', function () {
            const sidebar = document.getElementById('agencySidebar');
            const collapseBtn = document.getElementById('sidebarCollapseBtn');
            const mobileToggle = document.getElementById('mobileSidebarToggle');
            const backdrop = document.getElementById('sidebarBackdrop');

            // Restore sidebar state
            const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
            if (isCollapsed && window.innerWidth > 992) {
                sidebar.classList.add('collapsed');
            }

            // Toggle collapse
            if (collapseBtn) {
                collapseBtn.addEventListener('click', function () {
                    sidebar.classList.toggle('collapsed');
                    localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
                });
            }

            // Mobile toggle
            if (mobileToggle) {
                mobileToggle.addEventListener('click', function () {
                    sidebar.classList.add('show');
                    backdrop.classList.add('show');
                });
            }

            if (backdrop) {
                backdrop.addEventListener('click', function () {
                    sidebar.classList.remove('show');
                    backdrop.classList.remove('show');
                });
            }

            // Dropdowns
            const dropdownLinks = document.querySelectorAll('.nav-item.has-dropdown > .nav-link');
            dropdownLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    if (sidebar.classList.contains('collapsed') && window.innerWidth > 992) return;

                    const parent = this.parentElement;
                    const isOpen = parent.classList.contains('open');

                    // Close other dropdowns at the same level (optional)
                    // document.querySelectorAll('.nav-item.has-dropdown.open').forEach(item => {
                    //     if (item !== parent) item.classList.remove('open');
                    // });

                    parent.classList.toggle('open');
                });
            });

            // Prevent dropdowns from opening if sidebar is collapsed
            const sidebarNav = document.querySelector('.sidebar-nav');
            if (sidebarNav) {
                sidebarNav.addEventListener('click', (e) => {
                    if (sidebar.classList.contains('collapsed') && window.innerWidth > 992) {
                        const dropdownItem = e.target.closest('.has-dropdown');
                        if (dropdownItem) {
                            e.preventDefault();
                            sidebar.classList.remove('collapsed');
                            dropdownItem.classList.add('open');
                        }
                    }
                });
            }
        });
</script>

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