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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perpanjang Masa Sewa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(to bottom right, #60a5fa, #ffffff);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .form-container {
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            padding: 40px;
            max-width: 600px;
            width: 100%;
        }

        h2 {
            color: #2b50ec;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
        }

        label {
            font-weight: 600;
            color: #444;
            margin-bottom: 5px;
        }

        p {
            font-size: 16px;
            color: #555;
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #ccc;
            padding: 12px 16px;
            font-size: 16px;
        }

        .btn-primary {
            background-color: #4c6ef5;
            border: none;
            font-weight: 600;
            padding: 12px;
            border-radius: 8px;
        }

        .btn-primary:hover {
            background-color: #3a5ad1;
        }

        .btn-secondary {
            background-color: #dee2e6;
            border: none;
            font-weight: 600;
            padding: 12px;
            border-radius: 8px;
            color: #333;
        }

        .btn-secondary:hover {
            background-color: #cbd3da;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="form-container">
        <h2>Perpanjang Masa Sewa</h2>
        <form action="/perpanjang/{{ $booking->id_booking }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label>Nama Pengguna:</label>
                <p>{{ $booking->user->name }}</p>
            </div>

            <div class="form-group">
                <label>Nama Kamar:</label>
                <p>{{ $booking->room->room_type }}</p>
            </div>

            <div class="form-group">
                <label>Harga per Bulan:</label>
                <p id="harga_per_bulan" data-harga="{{ $booking->room->harga }}">
                    Rp {{ number_format($booking->room->harga) }}
                </p>
            </div>

            <div class="form-group">
                <label>Tanggal Check-out Lama:</label>
                <p>{{ $booking->tanggal_checkout }}</p>
            </div>

            <div class="form-group">
                <label for="tanggal_checkout_baru">Tanggal Check-out Baru</label>
                <input type="date" name="tanggal_checkout_baru" class="form-control" required>
            </div>

            <div class="form-group">
                <label for="durasi_bulan">Durasi Perpanjangan (bulan)</label>
                <input type="number" name="durasi_bulan" id="durasi_bulan" class="form-control" min="1" required>
            </div>

            <div class="form-group">
                <label>Total Biaya:</label>
                <p id="total_biaya">Rp 0</p>
                <input type="hidden" name="total_biaya" id="input_total_biaya">
            </div>

            <!-- Metode Pembayaran -->
            <div class="form-group" id="metode_section">
                <label for="metode_pembayaran">Metode Pembayaran</label>
                <select name="metode_pembayaran" id="metode_pembayaran" class="form-control" required>
                    <option value="">-- Pilih Metode --</option>
                    <option value="Transfer">Transfer</option>
                    <option value="E-Wallet">E-Wallet</option>
                    <option value="Tunai">Tunai</option>
                </select>
            </div>

            <!-- Info Transfer -->
            <div id="transfer_info" class="mt-4 hidden">
                <label>Informasi Transfer Bank:</label>
                <ul>
                    <li><strong>BCA</strong>: 1234567890 - Kos Calista</li>
                    <li><strong>Mandiri</strong>: 0987654321 - Kos Calista</li>
                    <li><strong>BRI</strong>: 1122334455 - Kos Calista</li>
                </ul>
            </div>

            <!-- Info E-Wallet -->
            <div id="ewallet_info" class="mt-4 hidden">
                <label>E-Wallet Tersedia:</label>
                <ul>
                    <li><strong>OVO</strong>: 081234567890 - Kos Calista</li>
                    <li><strong>DANA</strong>: 081987654321 - Kos Calista</li>
                    <li><strong>GoPay</strong>: 081112223334 - Kos Calista</li>
                </ul>
            </div>

            <!-- Bukti Pembayaran -->
            <div id="bukti_pembayaran_section" class="form-group hidden">
                <label for="bukti_pembayaran">Upload Bukti Pembayaran</label>
                <input type="file" name="bukti_pembayaran" class="form-control" accept="image/*">
            </div>

            <!-- Tombol -->
            <div id="button_group" class="button-group hidden">
                <a href="/petakos" class="btn btn-secondary w-50">Kembali</a>
                <button type="submit" class="btn btn-primary w-50">Kirim Permintaan</button>
            </div>

            <script>
                const hargaPerBulan = parseInt(document.getElementById('harga_per_bulan').dataset.harga);
                const durasiInput = document.getElementById('durasi_bulan');
                const totalBiayaText = document.getElementById('total_biaya');
                const inputTotalBiaya = document.getElementById('input_total_biaya');

                durasiInput.addEventListener('input', function () {
                    const bulan = parseInt(this.value);
                    const total = bulan * hargaPerBulan;

                    if (!isNaN(total)) {
                        totalBiayaText.textContent = 'Rp ' + total.toLocaleString();
                        inputTotalBiaya.value = total;
                    }
                });

                const metodeSelect = document.getElementById('metode_pembayaran');
                const transferInfo = document.getElementById('transfer_info');
                const ewalletInfo = document.getElementById('ewallet_info');
                const buktiSection = document.getElementById('bukti_pembayaran_section');
                const buttonGroup = document.getElementById('button_group');

                metodeSelect.addEventListener('change', function () {
                    const selected = this.value;

                    // Reset semua dulu
                    transferInfo.classList.add('hidden');
                    ewalletInfo.classList.add('hidden');
                    buktiSection.classList.add('hidden');
                    buttonGroup.classList.add('hidden');

                    // Tampilkan sesuai pilihan
                    if (selected === 'Transfer') {
                        transferInfo.classList.remove('hidden');
                        buktiSection.classList.remove('hidden');
                        buttonGroup.classList.remove('hidden');
                    } else if (selected === 'E-Wallet') {
                        ewalletInfo.classList.remove('hidden');
                        buktiSection.classList.remove('hidden');
                        buttonGroup.classList.remove('hidden');
                    } else if (selected === 'Tunai') {
                        buttonGroup.classList.remove('hidden');
                    }
                });
            </script>
</body>

</html>