@extends('layouts.site')

@section('titulo', 'Solicitar agenda')

@section('conteudo')
    <div class="step-indicador">
        <div class="step-indicador-item">
            <div class="step-indicador-circulo ativo" id="step-circulo-1"><i class="bi bi-calendar3"></i></div>
            <span class="ativo" id="step-label-1">Data</span>
        </div>
        <div class="step-indicador-linha"></div>
        <div class="step-indicador-item">
            <div class="step-indicador-circulo" id="step-circulo-2"><i class="bi bi-clipboard2-check"></i></div>
            <span id="step-label-2">Cadastro</span>
        </div>
        <div class="step-indicador-linha"></div>
        <div class="step-indicador-item">
            <div class="step-indicador-circulo" id="step-circulo-3"><i class="bi bi-send-check"></i></div>
            <span id="step-label-3">Envio</span>
        </div>
    </div>

    <form id="form-solicitacao-agenda" novalidate>
        <input type="hidden" name="dados[data_operacional_id]" id="data-operacional-id">
        <input type="hidden" name="dados[data_ideal]" id="data-ideal">

        <!-- Passo 1: Data -->
        <div class="step-painel ativo card-step p-3" id="step-painel-1">
            <h2 class="h6 mb-3 text-center">Selecione uma data</h2>
            <div class="cal-embed">
                <div class="cal-embed-header">
                    <button type="button" class="cal-embed-nav" id="cal-embed-btn-anterior" onclick="mesAnteriorCalendarioPublico()">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span class="cal-embed-titulo" id="calendario-publico-titulo"></span>
                    <button type="button" class="cal-embed-nav" onclick="mesSeguinteCalendarioPublico()">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                <div class="cal-embed-weekdays" id="calendario-publico-cabecalho"></div>
                <div class="cal-embed-grid" id="calendario-publico-corpo"></div>
                <div class="cal-embed-loading" id="calendario-publico-loading">
                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                </div>
            </div>
            <p class="text-muted small text-center mt-2 d-none" id="calendario-publico-vazio">
                Nenhuma data disponível neste mês.
            </p>
        </div>

        <!-- Passo 2: Organização -->
        <div class="step-painel card-step p-3" id="step-painel-2">
            <h2 class="h6 mb-3">Dados da organização</h2>
            <div class="row g-3">
                <div class="col-6">
                    <label class="form-label">Tipo</label>
                    <select class="form-select" name="dados[organizacao][tipo]" id="organizacao-tipo" onchange="alternarUnidadeConformeTipo()" required>
                        <option value="">Selecione</option>
                        <option value="escola">Escola</option>
                        <option value="agencia">Agência</option>
                        <option value="pessoa_fisica">Pessoa Física</option>
                    </select>
                    <div class="invalid-feedback">Selecione o tipo de organização.</div>
                </div>
                <div class="col-6">
                    <label class="form-label">CPF/CNPJ</label>
                    <input type="text" class="form-control" name="dados[organizacao][cpf_cnpj]" id="organizacao-cpf-cnpj" data-mascara="cpf_cnpj" onblur="buscarOrganizacaoPorCpfCnpj()" required>
                    <div class="invalid-feedback">Informe um CPF ou CNPJ.</div>
                </div>
                <div class="col-12">
                    <label class="form-label">Razão social / Nome</label>
                    <input type="text" class="form-control" name="dados[organizacao][nome_razao_social]" id="organizacao-nome" required>
                    <div class="invalid-feedback">Informe a razão social ou nome.</div>
                </div>
                <div class="col-12">
                    <label class="form-label">Nome público (opcional)</label>
                    <input type="text" class="form-control" name="dados[organizacao][nome_publico]">
                </div>
                <div class="col-12" id="unidade-wrapper">
                    <label class="form-label">Unidade</label>
                    <input type="text" class="form-control" name="dados[unidade][nome]" id="unidade-nome" required>
                    <div class="invalid-feedback">Informe o nome da unidade.</div>
                </div>
                <div class="col-6">
                    <label class="form-label">Modalidade</label>
                    <select class="form-select" name="dados[modalidade]" id="modalidade" onchange="atualizarRestricoesModalidade()" required>
                        <option value="">Selecione</option>
                        <option value="compartilhada">Agenda Compartilhada</option>
                        <option value="exclusiva">Agenda Exclusiva</option>
                    </select>
                    <div class="invalid-feedback">Selecione a modalidade da visita.</div>
                </div>
                <div class="col-3">
                    <label class="form-label">Alunos</label>
                    <input type="number" min="1" class="form-control" name="dados[qtd_estimada]" id="qtd-estimada" oninput="validarQuantidadeModalidade()" required>
                    <div class="invalid-feedback" id="qtd-estimada-feedback">Informe a quantidade.</div>
                    <div class="form-text" id="qtd-capacidade-info"></div>
                </div>
                <div class="col-3">
                    <label class="form-label">Acompanh.</label>
                    <input type="number" min="0" class="form-control" name="dados[acompanhantes]" id="acompanhantes">
                </div>
                <div class="col-12">
                    <label class="form-label">Séries/anos (separe por vírgula)</label>
                    <input type="text" class="form-control" id="series-anos">
                </div>
                <div class="col-12">
                    <label class="form-label">Observações</label>
                    <textarea class="form-control" name="dados[descricao]" rows="2"></textarea>
                </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
                <button type="button" class="btn btn-outline-secondary" onclick="voltarParaStep(1)">Voltar</button>
                <button type="button" class="btn btn-primary" onclick="avancarParaStep(3, 2)">Avançar</button>
            </div>
        </div>

        <!-- Passo 3: Responsável -->
        <div class="step-painel card-step p-3" id="step-painel-3">
            <h2 class="h6 mb-3">Responsável pelo contato</h2>
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label">Nome</label>
                    <input type="text" class="form-control" name="dados[contato][nome]" required>
                    <div class="invalid-feedback">Informe o nome do responsável.</div>
                </div>
                <div class="col-12">
                    <label class="form-label">Cargo</label>
                    <input type="text" class="form-control" name="dados[contato][cargo]">
                </div>
                <div class="col-12">
                    <label class="form-label">E-mail</label>
                    <input type="email" class="form-control" name="dados[contato][email]" required>
                    <div class="invalid-feedback">Informe um e-mail válido.</div>
                </div>
                <div class="col-6">
                    <label class="form-label">Telefone</label>
                    <input type="text" class="form-control" name="dados[contato][telefone]" data-mascara="telefone">
                </div>
                <div class="col-6">
                    <label class="form-label">Celular</label>
                    <input type="text" class="form-control" name="dados[contato][celular]" data-mascara="telefone">
                </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
                <button type="button" class="btn btn-outline-secondary" onclick="voltarParaStep(2)">Voltar</button>
                <button type="button" class="btn btn-primary" id="btn-confirmar-envio" onclick="salvarSolicitacaoAgenda()">
                    Enviar solicitação
                </button>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
    <script src="{{ asset('js/site-agenda.js') }}?v={{ filemtime(public_path('js/site-agenda.js')) }}"></script>
@endsection