107 lines
4.9 KiB
PHP
107 lines
4.9 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Pesan Paket - INUFA')
|
|
|
|
@section('header', 'Pesan Paket')
|
|
|
|
@section('content')
|
|
<div class="bg-white p-6 rounded-lg shadow-lg">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold mb-2">{{ $paket->nama }}</h2>
|
|
<p class="text-gray-700">{{ $paket->deskripsi }}</p>
|
|
<div class="mt-2">
|
|
<span class="text-blue-800 font-bold text-xl">Harga: Rp {{ number_format($paket->harga, 0, ',', '.') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('pesan.proses') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="paket_id" value="{{ $paket->id }}">
|
|
<input type="hidden" id="paket_harga" value="{{ $paket->harga }}">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div>
|
|
<label for="tanggal_mulai" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Mulai</label>
|
|
<input type="date" name="tanggal_mulai" id="tanggal_mulai" required class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
@error('tanggal_mulai')
|
|
<span class="text-red-600 text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="tanggal_selesai" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Selesai</label>
|
|
<input type="date" name="tanggal_selesai" id="tanggal_selesai" required class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
@error('tanggal_selesai')
|
|
<span class="text-red-600 text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="lokasi" class="block text-sm font-medium text-gray-700 mb-1">Lokasi Acara</label>
|
|
<input type="text" name="lokasi" id="lokasi" required placeholder="Masukkan lokasi acara" class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
|
@error('lokasi')
|
|
<span class="text-red-600 text-sm">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="bg-gray-100 p-4 rounded-md mb-6">
|
|
<h3 class="font-semibold mb-2">Total Biaya</h3>
|
|
<p class="text-sm text-gray-600 mb-2">Estimasi biaya berdasarkan durasi sewa:</p>
|
|
<div id="biaya-container" class="hidden">
|
|
<p>Durasi: <span id="durasi">0</span> hari</p>
|
|
<p class="font-bold text-lg">Total: <span id="total-biaya">Rp 0</span></p>
|
|
</div>
|
|
<p id="biaya-placeholder" class="text-gray-500">Pilih tanggal mulai dan selesai untuk melihat estimasi biaya</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-4">
|
|
<a href="{{ route('sewa') }}" class="bg-gray-300 text-gray-800 py-2 px-4 rounded hover:bg-gray-400 transition duration-200">
|
|
Batal
|
|
</a>
|
|
<button type="submit" class="bg-blue-800 text-white py-2 px-4 rounded hover:bg-blue-900 transition duration-200">
|
|
Pesan Sekarang
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// Ambil harga paket dari input hidden
|
|
const hargaPerHari = parseInt(document.getElementById('paket_harga').value) || 0;
|
|
|
|
// Format angka ke format Rupiah
|
|
function formatRupiah(angka) {
|
|
return 'Rp ' + new Intl.NumberFormat('id-ID').format(angka);
|
|
}
|
|
|
|
// Menghitung total biaya
|
|
function hitungBiaya() {
|
|
const tglMulai = document.getElementById('tanggal_mulai').value;
|
|
const tglSelesai = document.getElementById('tanggal_selesai').value;
|
|
|
|
if(tglMulai && tglSelesai) {
|
|
const start = new Date(tglMulai);
|
|
const end = new Date(tglSelesai);
|
|
|
|
// Hitung selisih hari
|
|
const diffTime = Math.abs(end - start);
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // +1 karena termasuk hari terakhir
|
|
|
|
// Update tampilan durasi dan total biaya
|
|
document.getElementById('durasi').textContent = diffDays;
|
|
document.getElementById('total-biaya').textContent = formatRupiah(hargaPerHari * diffDays);
|
|
|
|
// Tampilkan container biaya dan sembunyikan placeholder
|
|
document.getElementById('biaya-container').classList.remove('hidden');
|
|
document.getElementById('biaya-placeholder').classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Event listener untuk perubahan tanggal
|
|
document.getElementById('tanggal_mulai').addEventListener('change', hitungBiaya);
|
|
document.getElementById('tanggal_selesai').addEventListener('change', hitungBiaya);
|
|
</script>
|
|
@endsection
|