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

<head>
    <meta charset="UTF-8">
    <title>Form Pembayaran</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gradient-to-b from-blue-400 min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-2xl bg-white p-8 rounded-lg shadow">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Form Pembayaran</h2>

        @if (session('success'))
            <div class="bg-green-100 text-green-700 px-4 py-3 rounded mb-6">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-6">
                {{ session('error') }}
            </div>
        @endif

        <!-- Menampilkan Status Booking -->
        <div class="mb-6">
            <label class="block text-gray-700 font-medium mb-1">Status Booking</label>
            <p class="text-gray-800 font-semibold">{{ $booking->status_booking }}</p>
        </div>

        <form action="{{ route('users.pembayaran', ['id_booking' => $booking->id_booking]) }}" method="POST" enctype="multipart/form-data" class="space-y-5">
            @csrf
            <input type="hidden" name="id_booking" value="{{ $booking->id_booking }}">

            <!-- Tanggal Check-In -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">Tanggal Check-In</label>
                <p class="text-gray-800">{{ $booking->tanggal_checkin }}</p>
            </div>

            <!-- Tanggal Check-Out -->
            <div>
                <label class="block text-gray-700 font-medium mb-1">Tanggal Check-Out</label>
                <p class="text-gray-800">{{ $booking->tanggal_checkout }}</p>
            </div>

            <div class="mt-4">
                <label for="jumlah_pembayaran" class="block text-gray-700 font-medium mb-1">Jumlah Pembayaran</label>
                <input type="number" step="0.01" id="jumlah_pembayaran" name="jumlah_pembayaran" readonly
                    class="w-full bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 cursor-not-allowed">
                <p id="jumlah_rupiah" class="text-green-600 font-semibold mt-1"></p>
            </div>
            
            <script>
                const hargaPerBulan = {{ $booking->room->harga ?? 0 }};
                const checkin = new Date("{{ $booking->tanggal_checkin }}");
                const checkout = new Date("{{ $booking->tanggal_checkout }}");
            
                const jumlahPembayaranInput = document.getElementById('jumlah_pembayaran');
                const jumlahRupiahDisplay = document.getElementById('jumlah_rupiah');
            
                let jumlahBulan = (checkout.getFullYear() - checkin.getFullYear()) * 12 + (checkout.getMonth() - checkin.getMonth());
                if (checkout.getDate() > checkin.getDate()) jumlahBulan += 1; // Tambahkan jika lewat tanggal
            
                const total = hargaPerBulan * jumlahBulan;
                jumlahPembayaranInput.value = total;
                jumlahRupiahDisplay.textContent = new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR'
                }).format(total);
            </script>            
            
            <div>
                <label for="metode_pembayaran" class="block text-gray-700 font-medium mb-1">Metode Pembayaran</label>
                <select name="metode_pembayaran" id="metode_pembayaran" required
                    class="w-full border border-gray-300 rounded-lg px-4 py-2">
                    <option value="">-- Pilih Metode --</option>
                    <option value="Transfer">Transfer</option>
                    <option value="E-Wallet">E-Wallet</option>
                    <option value="Tunai">Tunai</option>
                </select>
            </div>
            
            <div id="transfer_info" class="mt-4 hidden">
                <label class="block text-gray-700 font-medium mb-2">Pilih Bank</label>
                <ul class="space-y-2 text-gray-800 text-sm">
                    <li><strong>BCA</strong><br>1234567890 - Kos Calista</li>
                    <li><strong>Mandiri</strong><br>0987654321 - Kos Calista</li>
                    <li><strong>BRI</strong><br>1122334455 - Kos Calista</li>
                </ul>
            </div>
            
            <div id="ewallet_info" class="mt-4 hidden">
                <label class="block text-gray-700 font-medium mb-2">E-Wallet Tersedia</label>
                <ul class="space-y-2 text-gray-800 text-sm">
                    <li><strong>OVO</strong><br>081234567890 - Kos Calista</li>
                    <li><strong>DANA</strong><br>081987654321 - Kos Calista</li>
                    <li><strong>GoPay</strong><br>081112223334 - Kos Calista</li>
                </ul>
            </div>
            
            <script>
                const metodeSelect = document.getElementById('metode_pembayaran');
                const transferInfo = document.getElementById('transfer_info');
                const ewalletInfo = document.getElementById('ewallet_info');
            
                metodeSelect.addEventListener('change', function () {
                    const selected = this.value;
            
                    transferInfo.classList.add('hidden');
                    ewalletInfo.classList.add('hidden');
            
                    if (selected === 'Transfer') {
                        transferInfo.classList.remove('hidden');
                    } else if (selected === 'E-Wallet') {
                        ewalletInfo.classList.remove('hidden');
                    }
                });
            </script>
            
            <div>
                <label for="bukti_pembayaran" class="block text-gray-700 font-medium mb-1">Upload Bukti Pembayaran</label>
                <input type="file" name="bukti_pembayaran" accept="image/*" required
                    class="w-full border border-gray-300 rounded-lg px-4 py-2">
            </div>
            
            <div class="pt-4">
                <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition">
                    Kirim Pembayaran
                </button>
            </div>            
        </form>
    </div>
</body>

</html>
