@php
    use App\Enums\TipoSala;use App\Models\User;
@endphp
<x-generic-layout>
    <div class="flex flex-col bg-[#dd6b3b] h-[10vh] justify-center flex-wrap px-6 md:px-24">
        <a href="{{ route('reservas-salas.index') }}" class="text-base text-white font-semibold">
            <i class="fa-solid fa-arrow-left"></i> Todas as reservas
        </a>

    </div>

    <div class="flex justify-center items-center p-8 bg-gray-100">
        <form class="bg-white rounded-xl shadow-lg border border-gray-200 p-8 w-full max-w-2xl"
              action="{{ route('reservas-salas.store') }}"
              method="post">
            <h4 class="text-center font-bold">
                Criar reserva de sala
            </h4>
            @csrf

            <div class="mb-4">
                <p class="text-sm font-semibold text-gray-700">Responsável</p>
                <input type="text" value="{{ Auth::user()->name }}"
                       class="input w-full bg-gray-100 cursor-not-allowed" disabled>
            </div>

            <fieldset class="fieldset space-y-4 w-full">
                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Sala</label>
                    <select name="sala" class="select w-full" required>
                        <option value="{{ TipoSala::SalaDeReuniao->value }}">Sala de reunião</option>
                        <option value="{{ TipoSala::Miniauditorio->value }}">Miniauditório</option>
                    </select>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Data de início</label>
                    <input name="inicio" x-model="form.inicio" type="datetime-local" required class="input w-full"/>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Data de fim</label>
                    <input name="fim" x-model="form.fim" type="datetime-local" required class="input w-full"/>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Quantidade de pessoas</label>
                    <input name="quantidade_pessoas" x-model="form.quantidade_pessoas" type="number" min="1"
                           required class="input w-full"/>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Solicitações</label>

                    <div class="join space-x-4 w-full">
                        <label>
                            <input name="agua" x-model="form.agua" type="checkbox" value="1"
                                   class="checkbox"/>
                            Água
                        </label>
                        <label>
                            <input name="cafe" x-model="form.cafe" type="checkbox" value="1"
                                   class="checkbox"/>
                            Café
                        </label>
                        <label>
                            <input name="notebook" x-model="form.notebook" type="checkbox" value="1"
                                   class="checkbox"/> Notebook
                        </label>
                    </div>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Assunto</label>
                    <textarea name="assunto" x-model="form.assunto" required
                              class="textarea w-full"></textarea>
                </div>

                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Observações</label>
                    <textarea name="observacoes" x-model="form.observacoes"
                              class="textarea w-full"></textarea>
                </div>

                <div class="flex space-x-3 my-3">
                    <a class="btn" href="{{ route('reservas-salas.index') }}">
                        Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </div>
            </fieldset>
        </form>
    </div>

</x-generic-layout>