<!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') }}">
    
    @yield('styles')
</head>
<body style="background-color: var(--bg-main); min-height: 100vh;">
    <!-- 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>

    <!-- Full width container without sidebar -->
    <div class="fullbar-container" style="padding: 2rem 3rem; min-height: 100vh; display: flex; flex-direction: column; width: 100%; max-width: 1600px; margin: 0 auto;">
        <header class="fullbar-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 2px solid var(--border); padding-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
            <div style="display: flex; align-items: center; gap: 1.25rem;">
                <span style="font-size: 3.5rem; filter: drop-shadow(0 4px 6px rgba(22, 91, 64, 0.15));">🐏</span>
                <div>
                    <h1 style="font-size: 2.25rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; letter-spacing: -0.5px;">@yield('header_title')</h1>
                    <p style="font-size: 1rem; color: var(--text-muted); margin-top: 0.25rem;">@yield('header_subtitle')</p>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right;">
                <span style="font-size: 1.15rem; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); padding: 0.4rem 1rem; border-radius: 50px; border: 1px solid rgba(22, 91, 64, 0.15);">
                    📅 {{ Carbon\Carbon::now()->isoFormat('dddd, D MMMM Y') }}
                </span>
                <div style="display: flex; gap: 0.5rem;">
                    <!-- Quick Back button for organizers -->
                    <a href="{{ url('/dashboard') }}" class="btn btn-secondary btn-sm" style="font-size: 0.8rem; padding: 0.45rem 1rem; font-weight: 700; border-radius: 8px; box-shadow: var(--shadow);">
                        🏠 Dashboard
                    </a>
                    <!-- Quick Scanner button -->
                    <a href="{{ route('distribution.index') }}" class="btn btn-primary btn-sm" style="font-size: 0.8rem; padding: 0.45rem 1rem; font-weight: 700; border-radius: 8px; box-shadow: var(--shadow);">
                        📷 Scan Kupon
                    </a>
                </div>
            </div>
        </header>

        <main style="flex-grow: 1; display: flex; flex-direction: column;">
            @yield('content')
        </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>
