263 lines
9.1 KiB
PHP
263 lines
9.1 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="{{ route('users.perpanjangan-sewa', $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>{{ \Carbon\Carbon::parse($booking->tanggal_checkout)->format('d-m-Y') }}</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="durasi_bulan">Durasi Perpanjangan (bulan)</label>
|
|
<select name="durasi_bulan" id="durasi_bulan" class="form-control" required>
|
|
<option value="">-- Pilih Durasi --</option>
|
|
@for ($i = 1; $i <= 12; $i++)
|
|
<option value="{{ $i }}">{{ $i }} Bulan</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Tanggal Check-out Baru (otomatis) -->
|
|
<div class="form-group">
|
|
<label for="tanggal_checkout_baru">Tanggal Check-out Baru</label>
|
|
<input type="text" name="tanggal_checkout_baru" id="tanggal_checkout_baru" class="form-control" readonly 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="{{ route('users.peta') }}" class="btn btn-secondary">Kembali</a>
|
|
<button type="submit" class="btn btn-primary w-50">Kirim Permintaan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- SCRIPT -->
|
|
<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');
|
|
const tanggalCheckoutBaruInput = document.getElementById('tanggal_checkout_baru');
|
|
|
|
// Ambil tanggal checkout lama dari blade
|
|
const tanggalCheckoutLamaStr = '{{ $booking->tanggal_checkout }}';
|
|
const tanggalCheckoutLama = new Date(tanggalCheckoutLamaStr);
|
|
|
|
durasiInput.addEventListener('input', function () {
|
|
const bulan = parseInt(this.value);
|
|
const total = bulan * hargaPerBulan;
|
|
|
|
// Hitung total biaya
|
|
if (!isNaN(total)) {
|
|
totalBiayaText.textContent = 'Rp ' + total.toLocaleString();
|
|
inputTotalBiaya.value = total;
|
|
}
|
|
|
|
// Hitung tanggal checkout baru
|
|
if (!isNaN(bulan)) {
|
|
const newDate = new Date(tanggalCheckoutLama);
|
|
newDate.setMonth(newDate.getMonth() + bulan);
|
|
|
|
// Format tanggal ke DD-MM-YYYY
|
|
const year = newDate.getFullYear();
|
|
const month = String(newDate.getMonth() + 1).padStart(2, '0');
|
|
const day = String(newDate.getDate()).padStart(2, '0');
|
|
const formattedDate = `${day}-${month}-${year}`;
|
|
|
|
tanggalCheckoutBaruInput.value = formattedDate;
|
|
} else {
|
|
tanggalCheckoutBaruInput.value = '';
|
|
}
|
|
});
|
|
|
|
// Metode pembayaran handler
|
|
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>
|