<!DOCTYPE html>
<html lang="id">
<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', 'Sistem Distribusi Qurban')</title>
    
    <!-- Custom Style -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    
    <!-- Icons (Optional, we can use simple emojis or SVG icons) -->
    @yield('styles')
</head>
<body>
    <!-- Toast Messages -->
    <div class="toast-container">
        @if (session('success'))
            <div class="toast toast-success" id="toast-success">
                <span class="toast-icon">✅</span>
                <div class="toast-content">
                    <span class="toast-message">{{ session('success') }}</span>
                </div>
            </div>
        @endif

        @if (session('error') || $errors->any())
            <div class="toast toast-error" id="toast-error">
                <span class="toast-icon">⚠️</span>
                <div class="toast-content">
                    <span class="toast-message">
                        @if (session('error'))
                            {{ session('error') }}
                        @else
                            {{ $errors->first() }}
                        @endif
                    </span>
                </div>
            </div>
        @endif
    </div>

    <div class="app-container">
        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="sidebar-brand">
                <div class="sidebar-brand-logo">🐏</div>
                <span class="sidebar-brand-name">QurbanDist</span>
            </div>

            <nav class="sidebar-menu">
                <li class="sidebar-menu-item {{ Request::is('/') || Request::is('dashboard') ? 'active' : '' }}">
                    <a href="{{ url('/dashboard') }}">
                        <span>📊</span> Dashboard
                    </a>
                </li>
                <li class="sidebar-menu-item {{ Request::is('distribution*') ? 'active' : '' }}">
                    <a href="{{ route('distribution.index') }}">
                        <span>🔍</span> Cari & Scan Kupon
                    </a>
                </li>
                <li class="sidebar-menu-item {{ Request::is('antrian-ambil-daging*') ? 'active' : '' }}">
                    <a href="{{ route('distribution.antrian') }}">
                        <span>📋</span> Antrean Ambil Daging
                    </a>
                </li>
                <li class="sidebar-menu-item {{ Request::is('paket-distribusi*') ? 'active' : '' }}">
                    <a href="{{ route('distribution.paket') }}">
                        <span>🎁</span> Paket Distribusi
                    </a>
                </li>
                <li class="sidebar-menu-item {{ Request::is('titip*') ? 'active' : '' }}">
                    <a href="{{ route('titip.index') }}">
                        <span>📦</span> Daftar Titipan
                    </a>
                </li>
                <li class="sidebar-menu-item {{ Request::is('jatah*') ? 'active' : '' }}">
                    <a href="{{ route('jatah.index') }}">
                        <span>👥</span> Jatah RT / Kelompok
                    </a>
                </li>
            </nav>

            <div class="sidebar-footer">
                @auth
                    <div class="sidebar-user">
                        <div class="sidebar-user-avatar">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </div>
                        <div class="sidebar-user-info">
                            <span class="sidebar-user-name">{{ Auth::user()->name }}</span>
                            <span class="sidebar-user-role">Panitia</span>
                        </div>
                    </div>
                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn-logout">
                            <span>🚪</span> Keluar
                        </button>
                    </form>
                @endauth
            </div>
        </aside>

        <!-- Main Content Pane -->
        <main class="main-content">
            <header class="top-header">
                <div class="top-header-title">
                    <h1>@yield('header_title')</h1>
                    <p>@yield('header_subtitle')</p>
                </div>
                <div class="top-header-date">
                    <span style="font-size: 0.85rem; font-weight: 600; color: var(--text-muted);">
                        📅 {{ Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}
                    </span>
                </div>
            </header>

            <section class="content-body">
                @yield('content')
            </section>
        </main>
    </div>

    <!-- Toast Fade-Out Handler -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const successToast = document.getElementById('toast-success');
            const errorToast = document.getElementById('toast-error');

            const fadeOut = (el) => {
                if (el) {
                    setTimeout(() => {
                        el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                        el.style.opacity = '0';
                        el.style.transform = 'translateY(-20px)';
                        setTimeout(() => el.remove(), 500);
                    }, 4000);
                }
            };

            fadeOut(successToast);
            fadeOut(errorToast);
        });
    </script>
    @yield('scripts')
</body>
</html>
