<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Daftar Booking</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9fbfd;
        }
        .alert {
            background: #e0f2fe;
            border: 1px solid #90cdf4;
            color: #0369a1;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 6px;
            text-align: center;
            font-weight: 500;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th, td {
            padding: 12px;
            border: 1px solid #e5e7eb;
            text-align: left;
        }
        th {
            background-color: #e0f2fe;
            color: #0369a1;
        }
        tr:nth-child(even) {
            background-color: #f1f5f9;
        }
        tr:hover {
            background-color: #e0f7ff;
        }
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>
<body x-data="{ acceptModal: false, rejectModal: false, selectedId: null }">

<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="max-w-7xl mx-auto mt-10 px-4">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold text-blue-800">Daftar Booking Pending</h2>
    </div>
    <div class="mb-4">
        <form method="GET" action="">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama customer..."
                class="w-64 border border-blue-200 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" />
        </form>
    </div>

    @if(session('success'))
        <div class="alert">{{ session('success') }}</div>
    @endif

    <div class="bg-white shadow-md rounded-xl overflow-x-auto p-6 mt-4">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nama</th>
                    <th>No HP</th>
                    <th>Tgl Booking Masuk</th>
                    <th>Tanggal Pemotretan</th>
                    <th>Produk</th>
                    <th>DP</th>
                    <th>Bukti Transfer</th>
                    <th>Pelunasan</th>
                    <th>Bukti Pelunasan</th>
                    <th>Status</th>
                    <th>Keterangan</th>
                    <th>Total Harga</th>
                    <th>Metode Pembayaran</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bookings as $booking)
                    <tr>
                        <td class="text-center">{{ $booking->id }}</td>
                        <td>{{ $booking->customer->name ?? '-' }}</td>
                        <td>{{ $booking->customer->phone ?? '-' }}</td>
                        <td>{{ $booking->created_at->format('d-m-Y H:i') }}</td>
                        <td>{{ $booking->tanggal_pemotretan }}</td>
                        <td>{{ $booking->produk }}</td>
                        <td>Rp {{ number_format($booking->dp ?? 0, 0, ',', '.') }}</td>
                        <td class="text-center">
                            @if($booking->bukti_transfer)
                                <a href="{{ asset('images/' . $booking->bukti_transfer) }}" download class="text-blue-600 underline">Unduh</a>
                            @else
                                <span class="italic text-gray-400">Belum Ada</span>
                            @endif
                        </td>
                        <td>Rp {{ number_format($booking->pelunasan ?? 0, 0, ',', '.') }}</td>
                        <td class="text-center">
                            @if($booking->bukti_pelunasan)
                                <a href="{{ asset('images/bukti_pelunasan/' . $booking->bukti_pelunasan) }}" download class="text-blue-600 underline">Unduh</a>
                            @else
                                <button
                                    onclick="openPelunasanModal({{ $booking->id }}, '{{ $booking->bukti_pelunasan }}')"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                                >
                                    Input Bukti Pelunasan
                                </button>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="px-2 py-1 text-sm font-medium rounded bg-sky-200 text-sky-800">
                                {{ ucfirst($booking->status) }}
                            </span>
                        </td>
                        <td class="text-center">
                            @if($booking->keterangan)
                                <span class="text-red-600 italic block">{{ $booking->keterangan }}</span>
                            @else
                                <span class="italic text-gray-400 block">-</span>
                            @endif
                            <button onclick="openModal('modalKeterangan{{ $booking->id }}')" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white text-xs px-2 py-1 rounded">
                                Tambah / Ubah
                            </button>
                        </td>
                        <td class="text-center">Rp {{ number_format($booking->total_harga, 0, ',', '.') }}</td>
                        <td class="text-center">{{ ucfirst($booking->payment_method) }}</td>
                        <td class="text-center space-x-2">
                            @if($booking->status == 'pending')
                                <button @click="acceptModal = true; selectedId = {{ $booking->id }}" class="bg-sky-600 hover:bg-sky-700 text-white px-3 py-1 rounded text-sm">
                                    ✅ Terima
                                </button>
                                <button @click="rejectModal = true; selectedId = {{ $booking->id }}" class="bg-rose-600 hover:bg-rose-700 text-white px-3 py-1 rounded text-sm">
                                    ❌ Tolak
                                </button>
                            @else
                                <span class="text-gray-400">{{ ucfirst($booking->status) }}</span>
                            @endif
                        </td>
                    </tr>

                    <!-- Modal Keterangan -->
                    <div id="modalKeterangan{{ $booking->id }}" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
                        <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
                            <h2 class="text-lg font-semibold mb-4 text-gray-800">Ubah Keterangan Booking</h2>
                            <form action="{{ route('karyawan.booking.keterangan', $booking->id) }}" method="POST">
                                @csrf
                                <textarea name="keterangan" rows="4" class="w-full border rounded px-3 py-2 text-sm mb-4" required>{{ old('keterangan', $booking->keterangan) }}</textarea>
                                <div class="flex justify-end gap-2">
                                    <button type="button" onclick="closeModal('modalKeterangan{{ $booking->id }}')" class="px-4 py-2 bg-gray-300 text-gray-700 rounded">Batal</button>
                                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Simpan</button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- ✅ Modal Global Bukti Pelunasan -->
<div id="modalPelunasan" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-md">
        <h2 class="text-lg font-semibold mb-4">Upload Bukti Pelunasan</h2>
        <form id="formPelunasan" method="POST" enctype="multipart/form-data">
            @csrf
            <div id="previewBukti" class="mb-4 hidden">
                <p class="text-sm text-gray-600 mb-2">Bukti sebelumnya:</p>
                <img id="buktiImage" src="" alt="Bukti Pelunasan" class="w-full h-auto rounded shadow">
            </div>
            <input type="file" name="bukti_pelunasan" accept="image/*" required class="mb-4 block w-full border px-3 py-2 rounded text-sm" />
            <div class="flex justify-end gap-2">
                <button type="button" onclick="closePelunasanModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded">Batal</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Kirim</button>
            </div>
        </form>
    </div>
</div>

<!-- ✅ Script Modal -->
<script>
    function openPelunasanModal(bookingId, bukti) {
        const modal = document.getElementById('modalPelunasan');
        const form = document.getElementById('formPelunasan');
        const preview = document.getElementById('previewBukti');
        const buktiImage = document.getElementById('buktiImage');

        form.action = '{{ url('karyawan/bookings/bukti_pelunasan') }}/' + bookingId;

        if (bukti && bukti !== 'null') {
            preview.classList.remove('hidden');
            buktiImage.src = '/images/bukti_pelunasan/' + bukti;
        } else {
            preview.classList.add('hidden');
            buktiImage.src = '';
        }

        modal.classList.remove('hidden');
    }

    function closePelunasanModal() {
        document.getElementById('modalPelunasan').classList.add('hidden');
    }

    function openModal(id) {
        document.getElementById(id).classList.remove('hidden');
    }

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


<!-- Modal Terima -->
<div x-show="acceptModal" x-cloak class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
    <form :action="`/user/bookings/${selectedId}/accept`" method="POST" class="bg-white rounded-lg p-6 w-full max-w-md space-y-4">
        @csrf
        <h2 class="text-lg font-semibold text-blue-800">Terima Booking</h2>
        <label class="block text-sm font-medium">Masukkan DP (Rp):</label>
        <input type="number" name="dp" required min="0" class="w-full border border-gray-300 rounded px-3 py-2">
        <label class="block text-sm font-medium">Keterangan (opsional):</label>
        <textarea name="keterangan" class="w-full border border-gray-300 rounded px-3 py-2"></textarea>
        <div class="flex justify-end gap-2">
            <button type="button" @click="acceptModal = false" class="px-4 py-2 bg-gray-300 rounded">Batal</button>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Kirim</button>
        </div>
    </form>
</div>

<!-- Modal Tolak -->
<div x-show="rejectModal" x-cloak class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
    <form :action="`/user/bookings/${selectedId}/reject`" method="POST" class="bg-white rounded-lg p-6 w-full max-w-md space-y-4">
        @csrf
        <h2 class="text-lg font-semibold text-red-700">Tolak Booking</h2>
        <label class="block text-sm font-medium">Keterangan Penolakan:</label>
        <textarea name="keterangan" required class="w-full border border-gray-300 rounded px-3 py-2"></textarea>
        <div class="flex justify-end gap-2">
            <button type="button" @click="rejectModal = false" class="px-4 py-2 bg-gray-300 rounded">Batal</button>
            <button type="submit" class="px-4 py-2 bg-rose-600 text-white rounded hover:bg-rose-700">Kirim</button>
        </div>
    </form>
</div>

<!-- Tombol trigger untuk membuka modal -->


<!-- Modal -->
<div
    id="pelunasanModal"
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
>
    <div class="bg-white p-6 rounded shadow-lg w-full max-w-md">
        <form
            id="pelunasanForm"
            method="POST"
            enctype="multipart/form-data"
            class="space-y-4"
        >
            @csrf
            <h2 class="text-lg font-semibold mb-4">Input Bukti Pelunasan</h2>

            <input type="hidden" id="modalBookingId" name="booking_id">

            <div>
                <label for="pelunasan" class="block font-medium mb-1">Nominal Pelunasan (Rp):</label>
                <input
                    type="number"
                    name="pelunasan"
                    id="modalPelunasanNominal"
                    min="0"
                    required
                    class="w-full border border-gray-300 rounded px-3 py-2"
                >
            </div>

            <div>
                <label for="bukti_pelunasan" class="block font-medium mb-1">Upload Bukti Pelunasan (Gambar):</label>
                <input
                    type="file"
                    name="bukti_pelunasan"
                    id="bukti_pelunasan"
                    accept="image/*"
                    required
                    class="w-full"
                >
            </div>

            <div class="flex justify-end space-x-2 mt-4">
                <button
                    type="button"
                    onclick="closePelunasanModal()"
                    class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
                >
                    Batal
                </button>
                <button
                    type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                >
                    Simpan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Script -->
<script>
function openPelunasanModal(bookingId, nominal) {
    const modal = document.getElementById('pelunasanModal');
    const form = document.getElementById('pelunasanForm');
    const nominalInput = document.getElementById('modalPelunasanNominal');
    const bookingInput = document.getElementById('modalBookingId');

    nominalInput.value = nominal;
    bookingInput.value = bookingId;
    form.action = `/user/bookings/${bookingId}/bukti-pelunasan`;

    modal.classList.remove('hidden');
    modal.focus();
}

function closePelunasanModal() {
    const modal = document.getElementById('pelunasanModal');
    modal.classList.add('hidden');
}


    function closePelunasanModal() {
        const modal = document.getElementById('pelunasanModal');
        modal.classList.add('hidden');
    }
</script>



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

</body>
</html>
