@extends('layouts.base')
@section('tittle', 'Pemesanan Mobil')
@section('content')
<div class="container">
    <div class="card o-hidden border-0 shadow-lg my-5">
        <div class="card-body p-0">
            <div class="row">
                <div class="col-lg-12">
                    <div class="p-5">
                        <div class="text-center">
                            <h1 class="h4 text-gray-900 mb-4">Silahkan Mengisi Form Pemesanan Mobil</h1>
                        </div>

                        @if ($error = Session::get('error'))
                            <div class="alert alert-danger" role="alert">
                                {{ $error }}
                            </div>
                        @elseif ($success = Session::get('success'))
                            <div class="alert alert-success" role="alert">
                                {{ $success }}
                            </div>
                        @endif
                        

                        <form class="user" action="{{ route('booking') }}" method="POST">
                            @csrf
                            <p class="mb-2">Divisi</p>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-user" value="{{ Auth::user()->division }}" placeholder="Bagian" disabled>
                                <input type="number" class="form-control form-control-user" name="user_id" id="user_id" value="{{ Auth::user()->id }}" placeholder="Bagian" hidden>
                            </div>

                            <p class="mb-2">Masukan PIC</p>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-user" name="pic" placeholder="PIC" required>
                            </div>

                            <p class="mb-2">Masukan Rute Tujuan</p>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-user" name="destination" placeholder="Rute Tujuan" required>
                            </div>

                            <p class="mb-2">Masukan Tanggal Booking</p>
                            <div class="form-group">
                                <input type="date" class="form-control form-control-user" name="booking_date" id="booking_date" placeholder="Tanggal Booking" required>
                            </div>

                            <p class="mb-2">Masukan Jam Booking</p>
                            <div class="form-group">
                                <input type="time" class="form-control form-control-user" name="time_date" placeholder="Jam Booking" required>
                            </div>

                            <p class="mb-2">Apakah menggunakan Driver?</p>
                            <div class="form-group">
                                <select class="form-control" id="driver" name="driver" required>
                                    <option value="" disabled selected> --Pilih-- </option>
                                    <option value="ya">Request Driver</option>
                                    <option value="tidak">Tidak menggunakan Driver</option>
                                </select>
                            </div>

                            <p class="mb-2">Pilih menginap atau tidak</p>
                            <div class="form-group">
                                <select class="form-control" id="menginap" name="menginap" required>
                                    <option value="" disabled selected> --Pilih-- </option>
                                    <option value="ya">Menginap</option>
                                    <option value="tidak">Tidak Menginap</option>
                                </select>
                            </div>

                            <div id="form-menginap" style="display: none;"> 
                                <p class="mb-2">Tanggal Selesai Menginap</p>
                                <div class="form-group">
                                    <input type="date" class="form-control form-control-user" name="tanggal_menginap_selesai" id="tanggal_menginap_selesai" placeholder="Tanggal Selesai Menginap">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary btn-user btn-block">
                                Pesan Sekarang
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const menginapSelect = document.getElementById('menginap');
    const formMenginap = document.getElementById('form-menginap');
    const bookingDateInput = document.getElementById('booking_date');
    const tanggalMenginapSelesaiInput = document.getElementById('tanggal_menginap_selesai');

    // Set minimum booking date to tomorrow
    const today = new Date();
    today.setDate(today.getDate() + 1);
    const tomorrow = today.toISOString().split('T')[0];
    bookingDateInput.setAttribute('min', tomorrow);

    // Function to update tanggal_menginap_selesai min attribute
    function updateTanggalMenginapSelesaiMin() {
        if (bookingDateInput.value) {
            const selectedDate = new Date(bookingDateInput.value);
            selectedDate.setDate(selectedDate.getDate() + 1);
            const nextDay = selectedDate.toISOString().split('T')[0];
            tanggalMenginapSelesaiInput.setAttribute('min', nextDay);
        }
    }

    menginapSelect.addEventListener('change', function() {
        if (this.value === 'ya') {
            formMenginap.style.display = 'block';
            updateTanggalMenginapSelesaiMin(); // Initial update

            // Add event listener to booking_date only when menginap is 'ya'
            bookingDateInput.addEventListener('change', updateTanggalMenginapSelesaiMin);
        } else {
            formMenginap.style.display = 'none';

            // Remove event listener when menginap is not 'ya'
            bookingDateInput.removeEventListener('change', updateTanggalMenginapSelesaiMin);
        }
    });
</script>
@endsection