@props(['kelas'])

<div x-data="{ reservasiModal: false }" class="flex justify-end">
    <button @click="reservasiModal = true"
        class="font-semibold outline-none rounded-md py-1 px-2 md:px-3 md:py-2 text-xs shadow-sm text-white hover:opacity-75 bg-red">
        Reservasi ruangan
    </button>

    <x-modal-shell show="reservasiModal" close="reservasiModal = false">
        <div class="flex flex-col items-center gap-0.5 text-sm font-semibold">
            <h2>Buat Reservasi Ruangan</h2>
            <h2>{{ $kelas->nama }}</h2>
        </div>
        <div class="text-xs mt-4">
            <form method="POST" action="{{ route('reservasi.store', $kelas->id) }}" autocomplete="off">
                @csrf
                <div class="flex flex-col gap-3 text-xs">
                    <div class="flex gap-4 md:gap-5 w-full">
                        <div class="flex-1">
                            <x-input-label for="nama_pic" :value="__('Nama PIC')" />
                            <x-text-input value="{{ old('nama_pic') }}" id="nama_pic" class="block mt-1 w-full" type="text" name="nama_pic" required />
                            <x-input-error :messages="$errors->get('nama_pic')" class="mt-1" />
                        </div>
                        <div class="flex-1">
                            <x-input-label for="kontak" :value="__('Nomor Kontak')" />
                            <x-text-input value="{{ old('kontak') }}" id="kontak" class="block mt-1 w-full" type="number" name="kontak" required />
                            <x-input-error :messages="$errors->get('kontak')" class="mt-1" />
                        </div>
                    </div>

                    <div class="flex-1">
                        <x-input-label for="nama_acara" :value="__('Nama Acara')" />
                        <x-text-input value="{{ old('nama_acara') }}" id="nama_acara" class="block mt-1 w-full" type="text" name="nama_acara" required/>
                        <x-input-error :messages="$errors->get('nama_acara')" class="mt-1" />
                    </div>

                    <div class="flex-1">
                        <x-input-label for="tanggal_acara" :value="__('Tanggal Acara')" />
                        <x-text-input value="{{ old('tanggal_acara') }}" id="tanggal_acara" class="block mt-1 w-full" type="date" name="tanggal_acara" required/>
                        <x-input-error :messages="$errors->get('tanggal_acara')" class="mt-1" />
                    </div>

                    <div class="flex gap-4 md:gap-5 w-full">
                        <div class="flex-1">
                            <x-input-label for="jam_mulai" :value="__('Jam Mulai')" />
                            <x-text-input value="{{ old('jam_mulai') }}" id="jam_mulai" class="block mt-1 w-full" type="time" name="jam_mulai" required />
                            <x-input-error :messages="$errors->get('jam_mulai')" class="mt-1" />
                        </div>

                        <div class="flex-1">
                            <x-input-label for="jam_selesai" :value="__('Jam Selesai')" />
                            <x-text-input value="{{ old('jam_selesai') }}" id="jam_selesai" class="block mt-1 w-full" type="time" max="19:00" name="jam_selesai" required/>
                            <x-input-error :messages="$errors->get('jam_selesai')" class="mt-1" />
                        </div>
                    </div>

                    <div class="flex flex-col items-center justify-center">
                        <x-primary-button class="w-full text-white text-xs">
                            {{ __('Kirim') }}
                        </x-primary-button>
                    </div>
                </div>
            </form>
        </div>
    </x-modal-shell>
</div>