@php use App\Enums\TipoSala; @endphp
<script>
    window.routes = {
        reservasSalasStore: "{{ route('reservas-salas.store') }}",
        reservasSalasBase: "{{ url('reservas-salas') }}",
        reservasLogisticasStore: "{{ route('reservas-logisticas.store') }}",
        reservasLogisticasBase: "{{ url('reservas-logisticas') }}"
    };
</script>
<dialog id="reserva_modal" class="modal" x-ref="modal">
    <div class="modal-box">
        <div class="tabs tabs-border">
            <input type="radio" name="reservas_tabs" class="tab" aria-label="Reserva de sala" checked />
            <form x-data="{ get form() { return $store.reservaModal } }" class="tab-content border-base-300 p-10"
                :action="form.isEditing ?
                    `${window.routes.reservasSalasBase}/${form.id}` :
                    '{{ route('reservas-salas.store') }}'"
                method="post">
                <h4 class="text-center font-bold" x-text="form.isEditing ? 'Editar reserva' : 'Criar reserva'">
                </h4>
                @csrf
                <input type="hidden" name="_method" x-bind:value="form.isEditing ? 'PUT' : 'POST'">

                <p>Responsável:</p>
                <p>{{ Auth::user()->name }}</p>

                <fieldset class="fieldset space-y-4">
                    <label class="text-lg">Sala</label>
                    <select name="sala" x-model="form.sala" class="select" required>
                        <option value="{{ TipoSala::SalaDeReuniao->value }}">Sala de reunião</option>
                        <option value="{{ TipoSala::Miniauditorio->value }}">Miniauditório</option>
                    </select>

                    <label class="text-lg">Data de início</label>
                    <input name="inicio" x-model="form.inicio" type="datetime-local" required class="input" />

                    <label class="text-lg">Data de fim</label>
                    <input name="fim" x-model="form.fim" type="datetime-local" required class="input" />

                    <label class="text-lg">Quantidade de pessoas</label>
                    <input name="quantidade_pessoas" x-model="form.quantidade_pessoas" type="number" min="1"
                        required class="input" />

                    <label class="text-lg">Solicitações</label>
                    <div class="join space-x-4">
                        <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>

                    <label class="text-lg">Assunto</label>
                    <textarea name="assunto" x-model="form.assunto" required class="textarea"></textarea>

                    <label class="text-lg">Observações</label>
                    <textarea name="observacoes" x-model="form.observacoes" class="textarea"></textarea>

                    <div class="flex space-x-3 my-3">
                        <button type="button" class="btn" @click="$store.reservaModal.closeModal()">Cancelar
                        </button>
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </fieldset>
            </form>
            <input type="radio" name="reservas_tabs" class="tab" aria-label="Reserva logística" />

            <form id="logistica_form" class="tab-content border-base-300 p-10"
                :action="form.isEditing ?
                    `${window.routes.reservasLogisticasBase}/${form.id}` :
                    '{{ route('reservas-logisticas.store') }}'"
                method="POST" enctype="multipart/form-data" x-data="{ selectedOption: '', get form() { return $store.reservaLogisticaModal } }">
                <h4 class="text-center font-bold" x-text="form.isEditing ? 'Editar reserva' : 'Criar reserva'">
                </h4>

                @csrf
                <input type="hidden" name="_method" x-bind:value="form.isEditing ? 'PUT' : 'POST'">
                <p>Responsável</p>
                <input type="text" value="{{ Auth::user()->name }}" class="input" disabled>

                <fieldset class="fieldset">
                    <div class="mt-2">
                        <label class="text-lg">Tipo de Solicitação</label>
                        <select id="tipo_solicitacao" x-model="form.tipo_solicitacao_id" class="select"
                            name="tipo_solicitacao_id" required>
                            <option value="">Selecione...</option>
                            @foreach ($tipos as $tipo)
                                <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-2">
                        <label class="text-lg ">Solicitação</label>
                        <select id="solicitacao" x-model="form.solicitacao_id" class="select" name="solicitacao_id"
                            x-model="selectedOption" required>
                            <option value="">Selecione um tipo
                                primeiro...
                            </option>
                        </select>
                    </div>
                    <div x-show="selectedOption !== '21'" class="mt-2">
                        <label class="text-lg ">Veiculo</label>
                        <select class="select" x-model="form.veiculo" name="veiculo" required>
                            <option value="Carro">Carro</option>
                            <option value="Moto">Moto</option>
                        </select>
                    </div>
                    <div x-show="selectedOption === '21'" class="mt-2">
                        <label class="text-lg ">Usuário Destino</label>
                        <input type="text" x-model="form.usuario_demanda" name="usuario_demanda"
                            class="input" />
                    </div>
                    <div x-show="selectedOption === '21'" class="mt-2">
                        <x-modal-arte titulo="Tabela de Preços" arte="{{ asset('storage/birth-ago.jpg') }}"
                            largura="2xl">
                            <a class="cursor-pointer">
                                <p class="font-semibold mb-4 mt-4 hover:scale-[110%]">Clique para ver a tabela
                                    de
                                    preços
                                    <i class="fa-solid fa-eye"></i>
                                </p>
                            </a>
                        </x-modal-arte>
                    </div>
                    <div x-show="selectedOption === '21'" class="mt-2">
                        <label class="text-lg ">Quantidade (litros)</label>
                        <input type="number" min="0" x-model="form.quantidade" name="quantidade"
                            class="input" />
                    </div>

                    <div x-show="selectedOption === '22'" class="mt-2">
                        <label class="text-lg ">Quantidade (unidades)</label>
                        <input type="number" min="0" x-model="form.quantidade" name="quantidade"
                            class="input" />
                    </div>
                    <div x-show="selectedOption !== '21' && selectedOption !== '22'" class="mt-2">
                        <label class="text-lg ">Quantidade (unidade/litros)</label>
                        <input type="number" min="0" x-model="form.quantidade" name="quantidade"
                            class="input" />
                    </div>

                    <div class="mt-2">
                        <label class="text-lg ">Data e hora desejada</label>
                        <input required type="datetime-local" x-model="form.dt_solicitacao" name="dt_solicitacao"
                            class="input" />
                    </div>

                    <div x-show="selectedOption !== '21'" class="mt-2">
                        <label class="text-lg ">Permanência</label>
                        <input type="number" x-model="form.duracao_permanencia" min="0"
                            name="duracao_permanencia" class="input" />
                    </div>


                    <div x-show="selectedOption === '21'" class="mt-2">
                        <label class="text-lg ">Rota, modelo do carro e placa</label>
                        <textarea name="descricao_solicitacao" x-model="form.descricao_solicitacao" class="textarea" required></textarea>
                    </div>
                    <div x-show="selectedOption === '22'" class="mt-2">
                        <label class="text-lg ">Rota e descrição do serviço</label>
                        <textarea name="descricao_solicitacao" x-model="form.descricao_solicitacao" class="textarea" required></textarea>
                    </div>
                    <div x-show="selectedOption !== '22' && selectedOption !== '21'" class="mt-2">
                        <label class="text-lg ">Descrição do Serviço</label>
                        <textarea name="descricao_solicitacao" x-model="form.descricao_solicitacao" class="textarea" required></textarea>
                    </div>

                    <div x-show="selectedOption !== '21'" class="mt-2">
                        <label class="text-lg ">Anexo</label>
                        <input type="file" x-model="form.anexo" class="file-input file-input-bordered w-full"
                            name="anexo">
                    </div>

                    <div class="hidden">
                        <div class="mt-2">
                            <label class="text-lg ">Responsável Atendimento</label>
                            <select type="text" name="responsavel_atendimento"
                                x-model="form.responsavel_atendimento" class="select">
                                <option value="Pedro Benicio">Pedro Benicio</option>
                                <option value="Jean Carlos">Jean Carlos</option>
                            </select>
                        </div>
                        <div class="mt-2">
                            <label class="text-lg">Resposta</label>
                            <textarea name="resposta_responsavel" x-model="form.resposta_responsavel" class="textarea"></textarea>
                        </div>
                        <div class="join space-x-4 mt-2">
                            <label>
                                <input name="fechado" x-model="form.fechado" type="checkbox" value="0"
                                    class="checkbox" />
                                Fechado
                            </label>
                        </div>
                    </div>
                    <div class="flex space-x-3 my-3" x-data="{}">
                        <button type="button" class="btn" @click="$el.closest('dialog').close()">Cancelar
                        </button>
                        <button type="submit" class="btn btn-primary">Salvar</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

    <form method="dialog" class="modal-backdrop">
        <button>Fechar</button>
    </form>
</dialog>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('reservaModal', {
            // Estado do formulário
            isEditing: false,
            id: null,
            sala: '{{ TipoSala::SalaDeReuniao->value }}',
            inicio: null,
            fim: null,
            quantidade_pessoas: 0,
            agua: false,
            cafe: false,
            notebook: false,
            assunto: '',
            observacoes: '',

            // Métodos para gerenciar o modal
            openModal() {
                document.getElementById('reserva_modal').showModal();
            },

            closeModal() {
                document.getElementById('reserva_modal').close();
            },

            // Método para editar uma reserva existente
            editReserva(id, sala, inicio, fim, quantidadePessoas, agua, cafe, notebook, assunto,
                observacoes) {
                this.isEditing = true;
                this.id = id;
                this.sala = sala;

                // Converter datas para o formato datetime-local
                const inicioDate = new Date(inicio);
                const fimDate = new Date(fim);

                // Ajustar para timezone local
                const inicioLocal = new Date(inicioDate.getTime() - inicioDate.getTimezoneOffset() *
                    60000);
                const fimLocal = new Date(fimDate.getTime() - fimDate.getTimezoneOffset() * 60000);

                this.inicio = inicioLocal.toISOString().slice(0, 16);
                this.fim = fimLocal.toISOString().slice(0, 16);
                this.quantidade_pessoas = quantidadePessoas;
                this.agua = agua;
                this.cafe = cafe;
                this.notebook = notebook;
                this.assunto = assunto;
                this.observacoes = observacoes;

                this.openModal();
            },

            // Método para criar nova reserva
            newReserva(data) {
                this.resetForm();
                this.openModal();
                this.inicio = data + 'T10:00'
            },

            // Reset do formulário
            resetForm() {
                this.isEditing = false;
                this.id = null;
                this.sala = '{{ TipoSala::SalaDeReuniao->value }}';
                this.inicio = null;
                this.fim = null;
                this.quantidade_pessoas = 0;
                this.agua = false;
                this.cafe = false;
                this.notebook = false;
                this.assunto = '';
                this.observacoes = '';
            }
        });

        Alpine.store('reservaLogisticaModal', {
            // Estado do formulário
            isEditing: false,
            id: null,
            usuario_demanda: null,
            tipo_solicitacao_id: 0,
            solicitacao_id: 0,
            quantidade: 0,
            veiculo: '',
            dt_solicitacao: '',
            descricao_solicitacao: '',
            duracao_permanencia: 0,
            responsavel_atendimento: '',
            resposta_responsavel: '',
            fechado: false,

            // Métodos para gerenciar o modal
            openModal() {
                document.getElementById('reserva_modal').showModal();
            },

            closeModal() {
                document.getElementById('reserva_modal').close();
            },

            // Método para editar uma reserva existente
            editReservaLogistica(reserva) {

                this.isEditing = true;
                this.id = reserva.id;
                this.tipo_solicitacao_id = reserva.tipo_solicitacao_id;
                this.solicitacao_id = reserva.solicitacao_id;
                this.dt_solicitacao = reserva.dt_solicitacao;
                this.quantidade = reserva.quantidade;
                this.descricao_solicitacao = reserva.descricao_solicitacao;
                this.duracao_permanencia = reserva.duracao_permanencia;
                this.responsavel_atendimento = reserva.responsavel_atendimento;
                this.resposta_responsavel = reserva.resposta_responsavel;
                this.fechado = reserva.fechado;

                this.openModal();
            },

            // Método para criar nova reserva
            newReservaLogistica(data) {
                this.resetForm();
                this.openModal();
                this.inicio = data + 'T10:00'
            },

            // Reset do formulário
            resetForm() {
                this.isEditing = false;
                this.id = null;
                this.usuario_demanda = null;
                this.tipo_solicitacao_id = 0;
                this.solicitacao_id = 0;
                this.quantidade = 0;
                this.veiculo = '';
                this.dt_solicitacao = '';
                this.descricao_solicitacao = '';
                this.duracao_permanencia = 0;
                this.responsavel_atendimento = '';
                this.resposta_responsavel = '';
                this.fechado = false;
            }
        });
    });

    // Funções globais para compatibilidade com o código existente
    window.editarReserva = (id, sala, inicio, fim, quantidadePessoas, agua, cafe, notebook, assunto, observacoes) => {
        Alpine.store('reservaModal').editReserva(id, sala, inicio, fim, quantidadePessoas, agua, cafe, notebook,
            assunto, observacoes);
    };

    window.editarReservaLogistica = (id, usuario_demanda, tipo_solicitacao_id, solicitacao_id, quantidade,
        veiculo, dt_solicitacao, descricao_solicitacao, duracao_permanencia,
        responsavel_atendimento, resposta_responsavel, fechado) => {
        Alpine.store('reservaLogisticaModal').editReservaLogistica(id, usuario_demanda, tipo_solicitacao_id,
            solicitacao_id, quantidade, veiculo, dt_solicitacao, descricao_solicitacao, duracao_permanencia,
            responsavel_atendimento, resposta_responsavel, fechado);
    };

    window.novaReserva = (data) => {
        Alpine.store('reservaModal').newReserva(data);
    };

    window.novaReservaLogistica = (data) => {
        Alpine.store('reservaLogisticaModal').newReserva(data);
    };
</script>