<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin') - Voucher App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
</head>
<body class="bg-gray-100 min-h-screen">

<nav class="bg-indigo-700 text-white shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center space-x-4">
                <i class="fa-solid fa-ticket text-2xl"></i>
                <span class="text-xl font-bold">Voucher App</span>
                <span class="text-indigo-300 text-sm">Admin Panel</span>
            </div>
            <div class="flex items-center space-x-4">
                <a href="{{ route('admin.vouchers.index') }}" class="hover:text-indigo-200 transition">
                    <i class="fa-solid fa-tags mr-1"></i> Voucher
                </a>
                <a href="{{ route('voucher.check') }}" target="_blank" class="hover:text-indigo-200 transition text-sm">
                    <i class="fa-solid fa-arrow-up-right-from-square mr-1"></i> Lihat FE
                </a>
                <span class="text-indigo-300 text-sm">| {{ session('admin_name') }}</span>
                <form method="POST" action="{{ route('admin.logout') }}" class="inline">
                    @csrf
                    <button type="submit" class="hover:text-red-300 transition text-sm">
                        <i class="fa-solid fa-right-from-bracket mr-1"></i> Logout
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    @if(session('success'))
        <div class="mb-4 bg-green-100 border border-green-400 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2">
            <i class="fa-solid fa-circle-check"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 bg-red-100 border border-red-400 text-red-800 px-4 py-3 rounded-lg flex items-center gap-2">
            <i class="fa-solid fa-circle-xmark"></i>
            {{ session('error') }}
        </div>
    @endif

    @yield('content')
</main>

</body>
</html>
