<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Foto - Skyrent Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #f1f5f9, #ffffff);
            margin: 0;
            padding: 0;
        }

        .main-container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 5px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .box {
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 25px;
            flex: 1 1 500px;
            transition: transform 0.2s ease-in-out;
        }

        .box:hover {
            transform: translateY(-3px);
        }

        h2,
        h3 {
            color: #1e293b;
            margin-bottom: 20px;
            text-align: center;
        }

        label {
            font-weight: 600;
            display: block;
            margin: 10px 0 5px;
            color: #475569;
        }

        select,
        input[type="file"],
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            font-size: 15px;
            background-color: #f8fafc;
            transition: border 0.2s;
        }

        select:focus,
        input:focus {
            border-color: #38bdf8;
            outline: none;
        }

        button {
            width: 100%;
            background: #4ade80;
            color: white;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #22c55e;
        }

        .success-message {
            color: #16a34a;
            font-weight: bold;
            text-align: center;
        }

        .error-message {
            color: #b91c1c;
            font-weight: bold;
            text-align: center;
        }

        .alert {
            background: #d1fae5;
            border: 1px solid #6ee7b7;
            padding: 12px;
            margin-bottom: 20px;
            border-radius: 6px;
            text-align: center;
        }

        .back-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: #3b82f6;
            text-decoration: none;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th,
        td {
            padding: 12px;
            border: 1px solid #e5e7eb;
            text-align: left;
        }

        th {
            background-color: #f3f4f6;
            color: #1f2937;
        }

        tr:nth-child(even) {
            background-color: #f9fafb;
        }

        tr:hover {
            background-color: #e0f2fe;
        }

        @media(max-width: 768px) {
            .main-container {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <!-- Header -->
    <div class="bg-white shadow px-6 py-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-blue-600">Dashboard Karyawan</h1>
        <div class="flex items-center space-x-4">
            <a href="{{ route('user.dashboard') }}" class="bg-blue-600 text-white px-3 py-1 text-sm rounded hover:bg-blue-700 transition">
                ⬅ Dashboard
            </a>
            <div class="flex items-center space-x-2 text-gray-600 text-sm">
                <span>Login sebagai:</span>
                <strong>{{ Auth::user()->name }}</strong>
            </div>
        </div>
    </div>

    <div class="main-container">
        <!-- KIRI: Tabel Token -->
        <div class="box">
            <h3>Daftar Foto Terupload</h3>
            @if($photos->count() > 0)
            <label for="search">Cari Data:</label>
            <input type="text" id="search" placeholder="Cari berdasarkan nama, produk, atau token...">

            <div class="table-container overflow-y-auto max-h-[300px] overflow-x-auto mt-3">
                <table class="min-w-full table-auto border border-gray-300" id="photoTable">
                    <thead class="bg-gray-100">
                        <tr>
                            <th>Token</th>
                            <th>Nama</th>
                            <th>Produk</th>
                            <th>Tanggal Pemotretan</th>
                            <th>Tanggal Upload</th>
                            <th>Jumlah Foto</th>
                        </tr>
                    </thead>
                    <tbody>
                      @foreach(collect($photos)->unique('token') as $photo)
                        <tr class="even:bg-gray-100 hover:bg-gray-200">
                          <td class="px-4 py-2 border">{{ $photo->token }}</td>
                          <td class="px-4 py-2 border">{{ $photo->customer->name }}</td>
                          <td class="px-4 py-2 border">{{ $photo->booking->produk }}</td>
                          <td class="px-4 py-2 border">{{ $photo->booking->tanggal_pemotretan }}</td>
                          <td class="px-4 py-2 border">{{ $photo->created_at->format('Y-m-d H:i') }}</td>
                          <td class="px-4 py-2 border">
                            {{ collect($photos)->where('token', $photo->token)->count() }}
                        </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <p class="text-center text-gray-500">Belum ada foto yang diupload.</p>
            @endif
        </div>

        <!-- KANAN: Form Upload -->
        <div class="box">
            <h2>Upload Foto</h2>

            @if(session('token'))
            <div class="alert">
                ✅ <strong>Token Anda: {{ session('token') }}</strong><br>
                Simpan token ini untuk mendownload foto Anda nanti.
            </div>
            @endif

            @if(session('success'))
            <p class="success-message">{{ session('success') }}</p>
            @endif

            @if ($errors->any())
            <div class="error-message">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('user.upload.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <label for="customer_id">Pilih Customer:</label>
                    <select name="customer_id" id="customer_id" required>
                        <option value="">-- Pilih Customer --</option>
                        @php
                            // Ambil ID customer dari bookings yang belum punya foto
                            $availableCustomerIds = $bookingsWithoutPhotoToken->pluck('customer_id')->unique();
                        @endphp
                        @foreach($customers as $customer)
                            @if($availableCustomerIds->contains($customer->id))
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endif
                        @endforeach
                    </select>
                <label for="booking_id">Pilih Booking:</label>
                <select name="booking_id" id="booking_id" required>
                    <option value="">-- Pilih Booking --</option>
                </select>

                <label for="photos">Pilih Foto:</label>
                <input type="file" name="photos[]" multiple accept="image/*" required>

                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
                  Upload
                </button>
            </form>
        </div>
    </div>

<!-- BAWAH: Tabel Booking Belum Ada Foto -->
<div class="box w-full">
    <h3>Booking Belum Ada Foto</h3>
    @if($bookingsWithoutPhotoToken->count() > 0)
    <div class="table-container overflow-y-auto max-h-[400px] overflow-x-auto mt-3">
        <table class="min-w-full table-auto border border-gray-300">
            <thead class="bg-gray-100">
                <tr>
                    <th>Nama Customer</th>
                    <th>Produk</th>
                    <th>Paket</th>
                    <th>Tanggal Pemotretan</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bookingsWithoutPhotoToken as $booking)
                <tr class="even:bg-gray-100 hover:bg-gray-200">
                    <td class="px-4 py-2 border">{{ $booking->customer->name }}</td>
                    <td class="px-4 py-2 border">{{ $booking->produk }}</td>
                    <td class="px-4 py-2 border">{{ $booking->paket }}</td>
                    <td class="px-4 py-2 border">{{ $booking->tanggal_pemotretan }}</td>
                    <td class="px-4 py-2 border text-red-600 font-semibold">Belum Ada Foto</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <p class="text-center text-gray-500">Semua booking sudah memiliki foto.</p>
    @endif
</div>

    <script>
        document.getElementById('customer_id').addEventListener('change', function () {
            let customerId = this.value;
            let bookingSelect = document.getElementById('booking_id');
            bookingSelect.innerHTML = '<option value="">-- Pilih Booking --</option>';

            if (customerId) {
                fetch(`/user/bookings/${customerId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.length > 0) {
                            data.forEach(booking => {
                                let option = document.createElement('option');
                                option.value = booking.id;
                                option.textContent = `${booking.produk} (${booking.tanggal_pemotretan})`;
                                bookingSelect.appendChild(option);
                            });
                        } else {
                            let option = document.createElement('option');
                            option.value = "";
                            option.textContent = "Tidak ada booking tersedia";
                            bookingSelect.appendChild(option);
                        }
                    })
                    .catch(error => console.error('Error fetching bookings:', error));
            }
        });

        document.getElementById('search').addEventListener('keyup', function () {
            let keyword = this.value.toLowerCase();
            let rows = document.querySelectorAll('#photoTable tbody tr');

            rows.forEach(row => {
                let text = row.textContent.toLowerCase();
                row.style.display = text.includes(keyword) ? '' : 'none';
            });
        });
    </script>

</body>

</html>
