@php
    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-logisticas.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 id="logistica_form" action="{{ route('reservas-logisticas.store') }}" method="POST"
            enctype="multipart/form-data"
            class="bg-white rounded-xl shadow-lg border border-gray-200 p-8 w-full max-w-2xl" x-data="{ selectedOption: '' }">
            <h4 class="text-center font-bold text-2xl mb-6">Criar reserva</h4>

            @csrf

            <!-- Campo Responsável - Fixo para Create -->
            <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 bg-gray-100 cursor-not-allowed w-full" disabled>
            </div>

            <fieldset class="space-y-4 flex flex-col">
                <!-- Tipo de Solicitação -->
                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Tipo de Solicitação</label>
                    <select id="tipo_solicitacao" class="select w-full" name="tipo_solicitacao_id" required>
                        <option value="">Selecione...</option>
                        @foreach ($tipos as $tipo)
                            <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Solicitação -->
                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Solicitação</label>
                    <select id="solicitacao" class="select w-full" name="solicitacao_id" x-model="selectedOption"
                        required>
                        <option value="">Selecione um tipo primeiro...</option>
                    </select>
                </div>

                <!-- Veículo (Visível por padrão) -->
                <div x-show="selectedOption !== '21'" class="flex flex-col" id="veiculo_field">
                    <label class="text-lg font-medium text-gray-700">Veiculo</label>
                    <select class="select w-full" name="veiculo" required>
                        <option value="">Selecione...</option>
                        <option value="carro">Carro</option>
                        <option value="moto">Moto</option>
                    </select>
                </div>

                <!-- Campos para o Tipo 21 -->
                <div id="type_21_fields" class="space-y-4" x-show="selectedOption === '21'">
                    <div class="flex flex-col">
                        <label class="text-lg font-medium text-gray-700">Usuário Destino</label>
                        <select name="usuario_demanda" class="select w-full">
                            <option value="">Selecione...</option>
                            @foreach (User::all() as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col">
                        <!-- Modal para Tabela de Preços, recriado sem o componente customizado -->
                        <a href="#" onclick="document.getElementById('modal-tabela').showModal()"
                            class="cursor-pointer text-blue-500 hover:text-blue-700 font-semibold mb-4 mt-4 transition-transform hover:scale-[105%]">
                            Clique para ver a tabela de preços <i class="fa-solid fa-eye ml-2"></i>
                        </a>
                        <dialog id="modal-tabela" class="rounded-lg shadow-xl p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="font-bold text-xl">Tabela de Preços</h3>
                                <button type="button" class="text-gray-500 hover:text-gray-700 text-2xl"
                                    onclick="document.getElementById('modal-tabela').close()">
                                    &times;
                                </button>
                            </div>
                            <img src="{{ asset('storage/birth-ago.jpg') }}" alt="Tabela de Preços"
                                class="rounded-lg w-full h-auto">
                            <div class="text-right mt-4">
                                <button type="button" class="btn bg-gray-200 hover:bg-gray-300"
                                    onclick="document.getElementById('modal-tabela').close()">Fechar</button>
                            </div>
                        </dialog>
                    </div>
                    <div class="flex flex-col">
                        <label class="text-lg font-medium text-gray-700">Quantidade (litros)</label>
                        <input type="number" min="0" name="quantidade" class="input w-full" />
                    </div>
                </div>

                <!-- Campos para o Tipo 22 -->
                <div id="type_22_fields" class="space-y-4 flex flex-col" x-show="selectedOption === '22'">
                    <div>
                        <label class="text-lg font-medium text-gray-700">Quantidade (unidades)</label>
                        <input type="number" min="0" name="quantidade" class="input w-full" />
                    </div>
                </div>

                <!-- Quantidade Padrão -->
                <div id="default_quantity_field" class="flex flex-col"
                    x-show="selectedOption !== '21' && selectedOption !== '22'">
                    <label class="text-lg font-medium text-gray-700">Quantidade (unidade/litros)</label>
                    <input type="number" min="0" name="quantidade" class="input w-full" />
                </div>

                <!-- Data e hora -->
                <div class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Data e hora desejada</label>
                    <input required type="datetime-local" name="dt_solicitacao" class="input w-full" />
                </div>

                <!-- Permanência -->
                <div id="duracao_field" class="flex flex-col">
                    <label class="text-lg font-medium text-gray-700">Permanência</label>
                    <input type="number" min="0" name="duracao_permanencia" class="input w-full" />
                </div>

                <!-- Descrições baseadas na solicitação -->
                <div id="type_21_description" class="flex flex-col" x-show="selectedOption === '21'">
                    <label class="text-lg font-medium text-gray-700">Rota, modelo do carro e placa</label>
                </div>
                <div id="type_22_description" class="flex flex-col" x-show="selectedOption === '22'">
                    <label class="text-lg font-medium text-gray-700">Rota e descrição do serviço</label>
                </div>
                <div id="default_description_field" class="flex flex-col"
                    x-show="selectedOption !== '22' && selectedOption !== '21'">
                    <label for="descricao_solicitacao" class="text-lg font-medium text-gray-700">Descrição do
                        Serviço</label>
                </div>
                <textarea id="descricao_solicitacao" name="descricao_solicitacao" class="textarea w-full" required></textarea>


                <!-- Anexo -->
                <div id="anexo_field" class="flex flex-col" x-show="selectedOption !== '21'">
                    <label class="text-lg font-medium text-gray-700">Anexo</label>
                    <input type="file" class="file-input file-input-bordered w-full" name="anexo">
                </div>

                <!-- Botões de ação -->
                <div class="flex space-x-3 my-3">
                    <button type="button" class="btn bg-gray-200 hover:bg-gray-300"
                        onclick="window.history.back()">Cancelar</button>
                    <button type="submit" class="btn btn-primary hover:bg-blue-600 transition-colors">Salvar</button>
                </div>

            </fieldset>
        </form>
    </div>

</x-generic-layout>