@extends('exposicao.layout')
@section('content')
    <div class="container py-5">
        <form action="{{ route('exposicao.marking.post') }}" method="POST" class="card shadow-lg border-0 rounded-4 p-4">
            @csrf
            <div class="mb-4">
                <h3 class="fw-bold">Agendamento de Visita</h3>
                <p class="text-muted small mb-0">Preencha os dados para solicitar a sua visita ao museu</p>
            </div>

            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Tipo de visitante</label>
                    <select name="tipo" id="tipo" class="form-select" required>
                        <option value="particular">Particular</option>
                        <option value="colectivo">Colectivo</option>
                    </select>
                </div>

                <div class="col-md-8">
                    <label class="form-label required">Nome completo</label>
                    <input type="text" name="nome" class="form-control" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label required">Email</label>
                    <input type="email" name="email" class="form-control" required>
                </div>

                <div class="col-md-3">
                    <label class="form-label required">Telefone</label>
                    <input type="text" name="telefone" class="form-control" required>
                </div>

                <div class="col-md-3">
                    <label class="form-label required">NIF/Passaporte</label>
                    <input type="text" name="nif" class="form-control">
                </div>


                <div id="colectivoFields" class="col-md-2 d-none">
                    <label class="form-label">Quantidade de pessoas</label>
                    <input type="number" name="qtd_pessoas" class="form-control">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Data da visita</label>
                    <input type="date" name="data_visita" class="form-control" required>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Hora</label>
                    <input type="time" name="hora_visita" class="form-control" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Tipo de visita</label>
                    <select name="tipo_visita" class="form-select">
                        <option value="">Selecione</option>
                        <option value="academica">Académica</option>
                        <option value="institucional">Institucional</option>
                        <option value="turistica">Turística</option>
                        <option value="estudo">Estudo</option>
                    </select>
                </div>

                {{--<div class="col-md-4">
                    <label class="form-label">Áreas a visitar</label>
                    <select name="areas_visitadas" class="form-select">
                        <option value="todas">Todas</option>
                        <option value="historica">Área Histórica</option>
                        <option value="exposicoes">Exposições</option>
                        <option value="arquivo">Arquivo</option>
                    </select>
                </div>--}}

                <div class="col-12">
                    <label class="form-label">Motivo da visita</label>
                    <textarea name="motivo_visita" class="form-control" rows="2"></textarea>
                </div>

                <div class="col-12">
                    <label class="form-label">Observações</label>
                    <textarea name="observacoes" class="form-control" rows="2"></textarea>
                </div>

                <div class="col-12 text-end mt-3">
                    <button type="submit" class="btn bg-default px-5 py-2">
                        <i class="fa-solid fa-paper-plane"></i> Submeter pedido
                    </button>
                </div>

            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        const tipo = document.getElementById('tipo');
        const particular = document.getElementById('particularFields');
        const colectivo = document.getElementById('colectivoFields');

        tipo.addEventListener('change', function () {
            if (this.value === 'colectivo') {
                colectivo.classList.remove('d-none');
                particular.classList.add('d-none');
            } else {
                colectivo.classList.add('d-none');
                particular.classList.remove('d-none');
            }
        });
    </script>
@endsection