@extends('template')

@section('conteudo')
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted" style="cursor:pointer;" onclick="carregarConteudo('/agendamentos')">Agendamentos</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Novo Agendamento</span>
    </nav>

    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-calendar-plus-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Novo Agendamento</h4>
                <span class="text-muted" style="font-size:0.82rem;">Registre uma solicitação de visita</span>
            </div>
        </div>
        <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo" onclick="carregarConteudo('/agendamentos')">
            <i class="bi bi-arrow-left me-1"></i> Voltar
        </button>
    </div>

    <form id="form-agendamento" novalidate>
        @csrf
        <div class="form-container">
            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-building me-2"></i>Origem da Solicitação</div>
                <div class="row g-3">
                    <div class="col-md-3" id="agendamento-organizacao-wrapper">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Organização <span class="text-danger">*</span></label>
                        <select name="dados[organizacao_id]" id="agendamento-organizacao" class="form-select form-select-sm rounded-3" required>
                            <option value="">Selecione...</option>
                            @foreach($organizacoes as $organizacao)
                                <option value="{{ $organizacao->id }}">{{ $organizacao->nome_publico ?: $organizacao->nome_razao_social }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2" id="agendamento-tipo-wrapper">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Tipo</label>
                        <input type="text" id="agendamento-tipo" class="form-control form-control-sm rounded-3 bg-light" value="" placeholder="Selecione uma organização" disabled>
                    </div>
                    <div class="col-md-3 d-none" id="agendamento-unidade-wrapper">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Unidade</label>
                            <select id="agendamento-unidade" class="form-select form-select-sm rounded-3" disabled>
                            <option value="">Selecione...</option>
                        </select>
                            <input type="hidden" name="dados[unidade_id]" id="agendamento-unidade-id" value="">
                    </div>
                    <div class="col-md-4" id="agendamento-origem-wrapper">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Origem <span class="text-danger">*</span></label>
                        <select name="dados[origem_solicitacao]" class="form-select form-select-sm rounded-3" required>
                            <option value="">Selecione...</option>
                            <option value="atendimento_assistido">Atendimento assistido</option>
                            <option value="site">Site</option>
                            <option value="telefone">Telefone</option>
                            <option value="whatsapp">WhatsApp</option>
                            <option value="email">E-mail</option>
                            <option value="consulta_convertida">Consulta convertida</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Descrição</label>
                        <textarea name="dados[descricao]" class="form-control form-control-sm rounded-3" rows="3" placeholder="Descreva a solicitação ou observações do agendamento"></textarea>
                    </div>
                    <div class="col-12" id="contato-organizacao-agendamento" style="display:none;">
                        <div class="border rounded-3 p-3" style="border-color:#e8edf8 !important;background:#fbfcff;">
                            <div class="text-muted mb-2" style="font-size:.75rem;">Contatos da Organização</div>
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0" style="font-size:.82rem; border-collapse:collapse;">
                                    <thead>
                                        <tr class="text-muted" style="font-size:.72rem; border-bottom:1px solid #e7ebf6;">
                                            <th>Nome</th>
                                            <th>Papel</th>
                                            <th>Telefone</th>
                                            <th>E-mail</th>
                                        </tr>
                                    </thead>
                                    <tbody id="contato-organizacao-agendamento-dados"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-calendar-event me-2"></i>Data e Modalidade</div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Data ideal <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <input type="text" name="dados[data_ideal_exibicao]" id="agendamento-data-ideal" class="form-control form-control-sm rounded-3" data-mascara="data" placeholder="dd/mm/aaaa" inputmode="numeric" maxlength="10" autocomplete="off" required>
                            <div id="agendamento-datepicker" class="ul-datepicker d-none" role="dialog" aria-label="Selecionar data ideal">
                            <div class="ul-datepicker-header">
                                <button type="button" class="ul-datepicker-nav" id="datepicker-anterior" aria-label="Mês anterior"><i class="bi bi-chevron-left"></i></button>
                                <select id="datepicker-mes" aria-label="Mês"></select>
                                <select id="datepicker-ano" aria-label="Ano"></select>
                                <button type="button" class="ul-datepicker-nav" id="datepicker-proximo" aria-label="Próximo mês"><i class="bi bi-chevron-right"></i></button>
                            </div>
                            <div class="ul-datepicker-weekdays"><span>Dom</span><span>Seg</span><span>Ter</span><span>Qua</span><span>Qui</span><span>Sex</span><span>Sáb</span></div>
                            <div id="datepicker-dias" class="ul-datepicker-grid"></div>
                            <button type="button" id="datepicker-fechar" class="ul-datepicker-close">Fechar calendário</button>
                            </div>
                        </div>
                        <input type="hidden" name="dados[data_ideal]" id="agendamento-data-ideal-iso">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Data operacional <span class="text-danger">*</span></label>
                        <select name="dados[data_operacional_id]" class="form-select form-select-sm rounded-3" required>
                            <option value="">Selecione uma data publicada...</option>
                            @foreach($datas as $data)
                                <option value="{{ $data->id }}">{{ $data->data_referencia->format('d/m/Y') }} — {{ $data->vagasDisponiveis() }} vagas</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Modalidade <span class="text-danger">*</span></label>
                        <select name="dados[modalidade]" class="form-select form-select-sm rounded-3" required>
                            <option value="">Selecione...</option>
                            <option value="compartilhada">Agenda Compartilhada</option>
                            <option value="exclusiva">Agenda Exclusiva</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-secao">
                <div class="form-secao-titulo"><i class="bi bi-people-fill me-2"></i>Quantidade do Grupo</div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Alunos estimados <span class="text-danger">*</span></label>
                        <input type="number" name="dados[qtd_estimada]" class="form-control form-control-sm rounded-3" min="30" placeholder="Mínimo 30" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Acompanhantes</label>
                        <input type="number" name="dados[acompanhantes]" class="form-control form-control-sm rounded-3" min="0" value="0">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Séries/anos</label>
                        <input type="text" name="dados[series_anos][]" class="form-control form-control-sm rounded-3" placeholder="Ex.: 5º ano, 6º ano">
                    </div>
                </div>
            </div>

            <div class="form-secao">
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <div class="form-secao-titulo mb-0"><i class="bi bi-person-lines-fill me-2"></i>Contatos do Agendamento</div>
                    <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo" onclick="adicionarContatoAgendamento()"><i class="bi bi-plus-circle me-1"></i> Adicionar</button>
                </div>
                <div class="table-responsive" id="contato-agendamento-tabela-wrapper">
                    <table class="table table-hover align-middle mb-0" id="tabelaContatosAgendamento" style="font-size:.855rem;">
                        <thead><tr class="text-muted" style="font-size:.78rem;border-bottom:2px solid #eef1fb;"><th>#</th><th>Nome</th><th>Papel</th><th>Telefone</th><th>Celular</th><th>E-mail</th><th class="text-center">Principal</th><th class="text-end">Ações</th></tr></thead>
                        <tbody>
                            <tr data-placeholder="true">
                                <td><span class="contato-agendamento-indice">1</span></td>
                                <td><input class="form-control form-control-sm rounded-3" type="text" name="contatos[0][nome]" placeholder="Nome"></td>
                                <td>
                                    <select class="form-select form-select-sm rounded-3" name="contatos[0][papel]">
                                        <option value="">Selecione...</option>
                                        <option value="solicitante">Solicitante</option>
                                        <option value="responsavel">Responsável</option>
                                        <option value="pagador">Pagador</option>
                                        <option value="contato_principal">Contato principal</option>
                                    </select>
                                </td>
                                <td><input class="form-control form-control-sm rounded-3" type="text" name="contatos[0][telefone]" placeholder="Telefone" data-mascara="telefone_fixo" maxlength="16"></td>
                                <td><input class="form-control form-control-sm rounded-3" type="text" name="contatos[0][celular]" placeholder="Celular" data-mascara="celular" maxlength="16"></td>
                                <td><input class="form-control form-control-sm rounded-3" type="email" name="contatos[0][email]" placeholder="E-mail"></td>
                                <td class="text-center"><input type="radio" name="contato_principal_agendamento" checked><input type="hidden" name="contatos[0][principal]" value="1"></td>
                                <td class="text-end"><button type="button" class="btn btn-sm border-0 p-1 text-danger" onclick="removerContatoAgendamento(this)" title="É necessário manter uma linha de contato"><i class="bi bi-trash-fill"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-sm btn-outline-secondary rounded-3" onclick="carregarConteudo('/agendamentos')">Cancelar</button>
            <button type="button" id="btn-salvar-agendamento" class="btn btn-sm rounded-3 text-white" style="background:var(--primary);" onclick="submeterForm('/agendamentos/salvar', 'form-agendamento', 'btn-salvar-agendamento')">
                <i class="bi bi-floppy me-1"></i> Salvar
            </button>
        </div>
    </form>

    <script>
        window._organizacoesAgendamento = @json($organizacoesData);
    </script>
    <script src="{{ asset('js/agendamentos.js') }}?v={{ filemtime(public_path('js/agendamentos.js')) }}"></script>
    <script src="{{ asset('js/agendamento-contatos.js') }}?v={{ filemtime(public_path('js/agendamento-contatos.js')) }}"></script>
@endsection