276 lines
17 KiB
PHP
276 lines
17 KiB
PHP
@extends('layouts.user.app')
|
|
{{-- @include('layouts.user.header') --}}
|
|
|
|
@push('styles')
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" />
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<div class="p-6">
|
|
<h1 class="text-2xl font-bold text-[#8B0000] mb-6">Detail Reservasi</h1>
|
|
|
|
@if($meja)
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">Detail Meja</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-gray-600">Nomor Meja:</p>
|
|
<p class="font-medium">{{ $meja->nomor_meja }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-600">Kapasitas:</p>
|
|
<p class="font-medium">{{ $meja->kapasitas }} orang</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-600">Kategori:</p>
|
|
<p class="font-medium">{{ $meja->kategori }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">Detail Pemesan</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-gray-600">Nama:</p>
|
|
<p class="font-medium">{{ auth()->user()->name }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-600">Email:</p>
|
|
<p class="font-medium">{{ auth()->user()->email }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if($cartItems->count() > 0)
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">Detail Pesanan</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left">Menu</th>
|
|
<th class="px-4 py-2 text-left">Jumlah</th>
|
|
<th class="px-4 py-2 text-left">Harga</th>
|
|
<th class="px-4 py-2 text-left">total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
@foreach($cartItems as $item)
|
|
<tr>
|
|
<td class="px-4 py-2">{{ $item->menu->name }}</td>
|
|
<td class="px-4 py-2">{{ $item->quantity }}</td>
|
|
<td class="px-4 py-2">Rp {{ number_format($item->menu->price, 0, ',', '.') }}</td>
|
|
<td class="px-4 py-2">Rp {{ number_format($item->quantity * $item->menu->price, 0, ',', '.') }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot class="bg-gray-50">
|
|
<tr>
|
|
<td colspan="3" class="px-4 py-2 text-right">Total:</td>
|
|
<td class="px-4 py-2">Rp {{ number_format($totals['subtotal'], 0, ',', '.') }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('reservasi.store') }}" method="POST" class="space-y-6" id="reservationForm">
|
|
@csrf
|
|
<input type="hidden" name="meja_id" value="{{ $meja->id }}">
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative">
|
|
<ul class="list-disc list-inside">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="md:col-span-2">
|
|
<label for="tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Reservasi</label>
|
|
<input type="date" id="tanggal" name="tanggal"
|
|
class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50"
|
|
value="{{ old('tanggal') }}" required min="{{ date('Y-m-d') }}">
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="start_time" class="block text-sm font-medium text-gray-700 mb-1">Waktu Reservasi</label>
|
|
<div class="relative">
|
|
<input type="text"
|
|
id="start_time"
|
|
name="start_time"
|
|
class="w-full rounded-md border-gray-300 shadow-sm focus:border-[#8B0000] focus:ring focus:ring-[#8B0000] focus:ring-opacity-50"
|
|
required
|
|
readonly
|
|
data-modal-target="timeModal"
|
|
data-modal-toggle="timeModal"
|
|
placeholder="Pilih waktu reservasi">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Picker Modal -->
|
|
<div id="timeModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
|
|
<div class="relative w-full max-w-md max-h-full">
|
|
<!-- Modal content -->
|
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Pilih Waktu Reservasi
|
|
</h3>
|
|
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="timeModal">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal body -->
|
|
<div class="p-4 md:p-5">
|
|
<div class="flex justify-center space-x-4">
|
|
<!-- Hours -->
|
|
<div class="flex flex-col items-center">
|
|
<label class="text-sm font-medium text-gray-700 mb-1">Jam</label>
|
|
<div class="relative">
|
|
<select id="hours" class="block appearance-none w-20 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-[#8B0000] focus:border-[#8B0000] text-center overflow-y-auto" onchange="updateTimeAndClose()">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center pt-6">
|
|
<span class="text-xl font-bold">:</span>
|
|
</div>
|
|
<!-- Minutes -->
|
|
<div class="flex flex-col items-center">
|
|
<label class="text-sm font-medium text-gray-700 mb-1">Menit</label>
|
|
<div class="relative">
|
|
<select id="minutes" class="block appearance-none w-20 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-[#8B0000] focus:border-[#8B0000] text-center overflow-y-auto" onchange="updateTimeAndClose()">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal footer -->
|
|
<div class="flex items-center justify-end p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
|
|
<button type="button" id="setTimeButton" data-modal-hide="timeModal" class="text-white bg-[#8B0000] hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Pilih Waktu</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-4">
|
|
<button type="submit" class="px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000]">
|
|
Lanjutkan ke Pembayaran
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tanggalInput = document.getElementById('tanggal');
|
|
const startTimeInput = document.getElementById('start_time');
|
|
const hoursSelect = document.getElementById('hours');
|
|
const minutesSelect = document.getElementById('minutes');
|
|
const setTimeButton = document.getElementById('setTimeButton');
|
|
const timeModal = document.getElementById('timeModal');
|
|
|
|
// Populate hours (10:00 - 22:00)
|
|
for (let i = 10; i <= 22; i++) {
|
|
const option = document.createElement('option');
|
|
option.value = i.toString().padStart(2, '0');
|
|
option.textContent = i.toString().padStart(2, '0');
|
|
hoursSelect.appendChild(option);
|
|
}
|
|
|
|
// Populate minutes (00-59)
|
|
for (let i = 0; i < 60; i++) {
|
|
const option = document.createElement('option');
|
|
option.value = i.toString().padStart(2, '0');
|
|
option.textContent = i.toString().padStart(2, '0');
|
|
minutesSelect.appendChild(option);
|
|
}
|
|
|
|
// Function to update time and close modal
|
|
window.updateTimeAndClose = function() {
|
|
const hours = parseInt(hoursSelect.value);
|
|
const minutes = parseInt(minutesSelect.value);
|
|
|
|
// Validate time
|
|
if (hours === 22 && minutes > 0) {
|
|
alert('Waktu maksimal adalah 22:00');
|
|
minutesSelect.value = '00';
|
|
return;
|
|
}
|
|
|
|
// Format and set the time
|
|
const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
|
startTimeInput.value = timeString;
|
|
}
|
|
|
|
// Set Time Button Click Handler
|
|
setTimeButton.addEventListener('click', function() {
|
|
updateTimeAndClose();
|
|
});
|
|
|
|
// Reset time when date changes
|
|
tanggalInput.addEventListener('change', function() {
|
|
startTimeInput.value = '';
|
|
hoursSelect.value = '10';
|
|
minutesSelect.value = '00';
|
|
});
|
|
|
|
// Form validation
|
|
document.getElementById('reservationForm').addEventListener('submit', function(e) {
|
|
const selectedTime = startTimeInput.value;
|
|
if (!selectedTime) {
|
|
e.preventDefault();
|
|
alert('Silakan pilih waktu reservasi');
|
|
return;
|
|
}
|
|
|
|
const [hours, minutes] = selectedTime.split(':').map(Number);
|
|
if (hours < 10 || (hours === 22 && minutes > 0) || hours > 22) {
|
|
e.preventDefault();
|
|
alert('Silakan pilih waktu antara jam 10:00 dan 22:00');
|
|
startTimeInput.value = '';
|
|
return;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@else
|
|
<div class="bg-yellow-50 border border-yellow-200 text-yellow-700 p-4 rounded-md">
|
|
<p class="mb-4">Keranjang belanja Anda kosong. Silakan pilih menu terlebih dahulu.</p>
|
|
<a href="{{ route('menu.index') }}" class="inline-block px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000]">
|
|
Lihat Menu
|
|
</a>
|
|
</div>
|
|
@endif
|
|
@else
|
|
<div class="bg-yellow-50 border border-yellow-200 text-yellow-700 p-4 rounded-md">
|
|
<p class="mb-4">Silakan pilih meja terlebih dahulu.</p>
|
|
<a href="{{ route('meja.index') }}" class="inline-block px-4 py-2 bg-[#8B0000] text-white rounded-md hover:bg-[#660000]">
|
|
Pilih Meja
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/datepicker.min.js"></script>
|
|
@endpush
|