<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kelola Foto</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
            color: black;
        }
        .fade-in {
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }
        .fade-in.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="bg-gray-100">

<!-- Sidebar -->
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-full overflow-y-auto hidden md:block">
    <div class="p-5 border-b">
        <h2 class="text-2xl font-bold text-blue-600">
            <a href="/admin/dashboard" class="hover:underline">Admin Panel</a>
        </h2>
    </div>
    <nav class="p-4 space-y-3">
        <a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-calendar3 text-blue-500"></i> Booking
        </a>
        <a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-people-fill text-blue-500"></i> Pengguna
        </a>
        <a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-upload text-blue-500"></i> Token Foto
        </a>
        <a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
            <i class="bi bi-boxes text-blue-500"></i> Produk
        </a>
        <form action="/logout" method="POST" class="px-4 mt-4">
            @csrf
            <button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition-all">
                <i class="bi bi-box-arrow-right"></i> Logout
            </button>
        </form>
    </nav>
</div>

<!-- Mobile Topbar -->
<div class="md:hidden fixed top-0 left-0 right-0 bg-white shadow px-4 py-3 z-30 flex justify-between items-center">
    <button onclick="toggleSidebar()" class="text-2xl text-blue-600">
        <i class="bi bi-list"></i>
    </button>
    <h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
</div>

<!-- Sidebar Overlay Mobile -->
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>

<!-- Main Content -->
<div class="md:ml-64 mt-16 md:mt-0 p-4 fade-in relative z-10">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">Kelola Foto</h1>

    @if(session('success'))
        <div class="text-green-600 font-semibold mb-4">{{ session('success') }}</div>
    @endif

<!-- Form Pencarian Token -->
<form method="GET" id="searchForm" class="mb-6">
    <input 
        type="text" 
        name="search" 
        value="{{ request('search') }}" 
        placeholder="Cari nama customer, produk, atau token..."
        class="w-full sm:w-2/3 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
        oninput="document.getElementById('searchForm').submit();"
    >
</form>


    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-semibold mb-4">Daftar Token Foto Aktif</h2>
        <ul class="space-y-6">
            @php 
    $shownTokens = []; 
    $search = strtolower(request('search', ''));
@endphp

@foreach($photos as $photo)
    @php
        $token = $photo->token;
        $customerName = strtolower($photo->customer->name ?? '');
        $produk = strtolower($photo->booking->produk ?? '');

        $match = !$search || str_contains($customerName, $search) || str_contains($produk, $search) || str_contains(strtolower($token), $search);
    @endphp

    @if($token && !in_array($token, $shownTokens) && $match)
            @php $shownTokens[] = $token; @endphp
                    <li class="border-b pb-4">
                        <div class="flex flex-col lg:flex-row lg:justify-between gap-4">
                            <div class="space-y-1 text-gray-700">
                                <p><strong>Customer:</strong> {{ $photo->customer->name }}</p>
                                <p><strong>Produk:</strong> {{ $photo->booking->produk }}</p>
                                <p><strong>Tanggal Pemotretan:</strong> {{ $photo->booking->tanggal_pemotretan }}</p>
                                <p><strong>Token:</strong> {{ $photo->token }}</p>
                                <p><strong>Jumlah File:</strong> {{ $photo->where('token', $photo->token)->count() }}</p>
                            </div>
                            <div class="flex flex-col sm:flex-row gap-2">
                                <!-- Hapus Token -->
                                <form action="{{ route('photo.clearToken', $photo->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus token ini dan semua fotonya?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 w-full sm:w-auto">
                                        <i class="bi bi-trash-fill mr-2"></i> Hapus Token
                                    </button>
                                </form>
            
                                <!-- Reset Token -->
                                <form action="{{ route('admin.upload.resetToken', $photo->id) }}" method="POST" onsubmit="return confirm('Yakin ingin reset token ini?')">
                                    @csrf
                                    @method('PATCH')
                                    <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 flex items-center justify-center gap-2 w-full sm:w-auto">
                                        <i class="bi bi-arrow-clockwise"></i> <span>Regenerasi Token</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </li>
                @endif
            @endforeach
        </ul>
    </div>
</div>

<!-- Script -->
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        const overlay = document.getElementById("overlay");
        sidebar.classList.toggle("hidden");
        overlay.classList.toggle("hidden");
    }

    document.addEventListener("DOMContentLoaded", function () {
        setTimeout(() => {
            document.querySelectorAll('.fade-in').forEach(el => {
                el.classList.add('active');
            });
        }, 200);
    });
</script>

</body>
</html>
