229 lines
8.0 KiB
PHP
229 lines
8.0 KiB
PHP
<!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> |