139 lines
6.3 KiB
PHP
139 lines
6.3 KiB
PHP
<!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>
|