<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Booking</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'fade-in': 'fadeIn 1s ease-out forwards',
                        'slide-up': 'slideUp 0.8s ease-out forwards'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7fafc;
        }
        .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-50">

<!-- Sidebar -->
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-screen overflow-y-auto md:block hidden">
    <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 Sidebar Toggle Button -->
<div class="md:hidden flex justify-between items-center bg-white shadow px-4 py-3 fixed top-0 left-0 w-full z-20">
    <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>

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

<!-- Main Content -->
<!-- Main Content -->
<div class="md:ml-64 p-6 pt-24 md:pt-6 space-y-6 animate-fade-in">
    <h1 class="text-3xl font-bold text-gray-700 animate-slide-up">Daftar Booking</h1>

    @if(session('success'))
        <p class="text-green-600 font-semibold mt-3">{{ session('success') }}</p>
    @endif

    @if(session('error'))
        <p class="text-red-600 font-semibold mt-3">{{ session('error') }}</p>
    @endif

    <!-- Pencarian -->
    <div class="flex items-center space-x-4 mb-6">
        <form action="{{ url('/admin/bookings') }}" method="GET" class="flex items-center space-x-2 w-full max-w-lg">
            <input type="text" name="search" value="{{ request()->get('search') }}" placeholder="Cari customer atau tanggal..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-none">
                <i class="bi bi-search"></i> Cari
            </button>
        </form>
    </div>

    <!-- Tabel Booking -->
    <div class="mt-6 overflow-x-auto bg-white p-4 shadow-md rounded-lg">
        <table class="min-w-full table-auto text-sm">
            <thead class="bg-blue-500 text-white">
                <tr>
                    <th class="p-3">No</th>
                    <th class="p-3">Customer</th>
                    <th class="p-3">Tanggal</th>
                    <th class="p-3">Produk</th>
                    <th class="p-3">Paket</th>
                    <th class="p-3">Total Harga</th>
                    <th class="p-3">Metode</th>
                    <th class="p-3">DP</th>
                    <th class="p-3">Bukti</th>
                    <th class="p-3">Status</th>
                    <th class="p-3">Keterangan</th>
                    <th class="p-3">Aksi</th> 
                </tr>
            </thead>
            <tbody>
                @php
                    $bookings = \App\Models\Booking::query();

                    // Pencarian berdasarkan input
                    if(request()->has('search')) {
                        $search = request()->get('search');
                        $bookings = $bookings->where(function($query) use ($search) {
                            $query->whereHas('customer', function($query) use ($search) {
                                $query->where('name', 'like', '%' . $search . '%');
                            })
                            ->orWhere('tanggal_pemotretan', 'like', '%' . $search . '%');
                        });
                    }

                    // Ambil data booking
                    $bookings = $bookings->get();
                @endphp

                @foreach($bookings as $booking)
                    <tr class="border-b hover:bg-gray-100">
                        <td class="p-3 text-center">{{ $loop->iteration }}</td>
                        <td class="p-3 break-words max-w-[150px]">{{ $booking->customer->name }}</td>
                        <td class="p-3 text-center">{{ $booking->tanggal_pemotretan }}</td>
                        <td class="p-3 break-words max-w-[120px]">{{ $booking->produk }}</td>
                        <td class="p-3 text-center">{{ ucfirst($booking->paket) }}</td>
                        <td class="p-3">Rp {{ number_format($booking->total_harga, 0, ',', '.') }}</td>
                        <td class="p-3 text-center">{{ ucfirst($booking->payment_method) ?? 'Belum Dipilih' }}</td>
                        <td class="p-3">Rp {{ number_format($booking->dp ?? 0, 0, ',', '.') }}</td>
                        <td class="p-3 text-center">
                            @if($booking->bukti_transfer)
                                <a href="{{ asset('/' . $booking->bukti_transfer) }}" target="_blank" class="text-blue-600 underline">Lihat</a>
                            @else
                                <span class="text-gray-500 italic">Belum Ada</span>
                            @endif
                        </td>
                        <td class="p-3 text-center">
                            @if($booking->status == 'pending')
                                <span class="text-yellow-500 font-semibold">Pending</span>
                            @elseif($booking->status == 'approved')
                                <span class="text-green-500 font-semibold">Disetujui</span>
                            @else
                                <span class="text-red-500 font-semibold">Ditolak</span>
                            @endif
                        </td>
                        <td class="p-3 break-words max-w-[180px]">
                            @if($booking->keterangan)
                                <span class="text-sm text-red-600 italic">{{ $booking->keterangan }}</span>
                            @else
                                <span class="text-gray-400 text-sm italic">-</span>
                            @endif
                        </td>
                        <td class="p-3 flex flex-col sm:flex-row gap-2 justify-center items-center">
                            <form action="{{ route('admin.bookings.destroy', $booking->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus booking ini?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="bg-gray-500 text-white px-3 py-2 rounded hover:bg-gray-600" title="Hapus">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>


<!-- Modal Tolak Booking -->
<div id="modalDecline" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <form method="POST" action="" id="formDecline" class="bg-white p-6 rounded-lg w-96 shadow-lg">
        @csrf
        <h2 class="text-xl font-semibold mb-4 text-red-600">Tolak Booking</h2>
        <label class="block mb-2 font-medium">Keterangan Penolakan:</label>
        <textarea name="keterangan" rows="4" required class="w-full border p-2 rounded"></textarea>
        <div class="mt-4 flex justify-end gap-3">
            <button type="button" onclick="closeModal('modalDecline')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
            <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Tolak</button>
        </div>
    </form>
</div>

<!-- Modal Terima Booking -->
<div id="modalAccept" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <form method="POST" action="" id="formAccept" class="bg-white p-6 rounded-lg w-96 shadow-lg">
        @csrf
        <h2 class="text-xl font-semibold mb-4 text-green-600">Terima Booking</h2>
        <label class="block mb-2 font-medium">Masukkan DP (Rp):</label>
        <input type="number" name="dp" required class="w-full border p-2 rounded" min="0">
        <div class="mt-4 flex justify-end">
            <button type="button" onclick="closeModal('modalAccept')" class="mr-3 px-4 py-2 bg-gray-300 rounded">Batal</button>
            <button type="submit" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Kirim</button>
        </div>
    </form>
</div>


<script>
    function openAcceptModal(id) {
        const form = document.getElementById('formAccept');
        form.action = `/admin/bookings/${id}/accept`;  // Update form action to the accept route
        document.getElementById('modalAccept').classList.remove('hidden');
    }
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        sidebar.classList.toggle('hidden');
        overlay.classList.toggle('hidden');
    }

    function openAcceptModal(id) {
        const form = document.getElementById('formAccept');
        form.action = `/admin/bookings/${id}/accept`;  // Update form action to the accept route
        document.getElementById('modalAccept').classList.remove('hidden');
    }

    function openDeclineModal(id) {
        const formDecline = document.getElementById('formDecline');
        formDecline.action = "/admin/bookings/" + id + "/decline";
        document.getElementById('modalDecline').classList.remove('hidden');
    }

    function closeModal(modalId) {
        document.getElementById(modalId).classList.add('hidden');
    }
</script>

</body>
</html>
