@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