@extends('template')

@section('conteudo')
    @php
        $estado = $agendamento->estado_individual;
        $badge = match ($estado->value) {
            'cancelada', 'recusada', 'expirada' => ['#fce4ec', '#c62828'],
            'agenda_confirmada', 'agenda_contratada' => ['#e8f5e9', '#2e7d32'],
            default => ['#fff3cd', '#856404'],
        };
        $origem = str_replace('_', ' ', ucfirst($agendamento->origem_solicitacao->value));
        $modalidade = $agendamento->modalidade->value === 'compartilhada' ? 'Agenda Compartilhada' : 'Agenda Exclusiva';
    @endphp

    <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;">Detalhes</span>
    </nav>

    <div class="d-flex align-items-start justify-content-between mb-4 flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            <div class="d-flex align-items-center justify-content-center rounded-3" style="width:48px;height:48px;background:rgba(11,51,144,.1);color:var(--primary);">
                <i class="bi bi-calendar3" style="font-size:1.55rem;"></i>
            </div>
            <div>
                <h4 class="fw-bold mb-1" style="color:var(--primary);">{{ $agendamento->protocolo }}</h4>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="text-muted" style="font-size:0.82rem;">{{ $agendamento->organizacao?->nome_publico ?: $agendamento->organizacao?->nome_razao_social ?: '-' }}</span>
                    <span class="text-muted">·</span>
                    <span class="badge rounded-pill px-2 py-1 fw-semibold" style="background:{{ $badge[0] }};color:{{ $badge[1] }};font-size:0.7rem;">{{ $estado->label() }}</span>
                </div>
            </div>
        </div>
        <div class="d-flex gap-2">
            <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>
            <button type="button" class="btn btn-sm rounded-3 text-white" style="background:var(--primary);" onclick="carregarConteudo('/agendamentos/{{ $agendamento->id }}/editar')"><i class="bi bi-pencil me-1"></i> Editar</button>
        </div>
    </div>

    <div class="form-container">
        <div class="form-secao">
            <div class="form-secao-titulo"><i class="bi bi-calendar-event me-2"></i>Resumo do Agendamento</div>
            <div class="row g-3">
                <div class="col-md-4"><p class="mb-0 text-muted small">Organização</p><p class="mb-0 mt-1 fw-semibold" style="color:#1a2e5e;">{{ $agendamento->organizacao?->nome_publico ?: $agendamento->organizacao?->nome_razao_social ?: '-' }}</p></div>
                <div class="col-md-4"><p class="mb-0 text-muted small">Tipo</p><p class="mb-0 mt-1">{{ $agendamento->organizacao?->tipo?->label() ?: '-' }}</p></div>
                <div class="col-md-4"><p class="mb-0 text-muted small">Unidade</p><p class="mb-0 mt-1">{{ $agendamento->unidade?->nome ?: '-' }}</p></div>
                <div class="col-md-3"><p class="mb-0 text-muted small">Data ideal</p><p class="mb-0 mt-1">{{ $agendamento->data_ideal?->format('d/m/Y') ?: '-' }}</p></div>
                <div class="col-md-3"><p class="mb-0 text-muted small">Data agendada</p><p class="mb-0 mt-1 fw-semibold" style="color:#1a2e5e;">{{ $agendamento->data_agendada?->format('d/m/Y') ?: '-' }}</p></div>
                <div class="col-md-3"><p class="mb-0 text-muted small">Modalidade</p><p class="mb-0 mt-1">{{ $modalidade }}</p></div>
                <div class="col-md-3"><p class="mb-0 text-muted small">Origem</p><p class="mb-0 mt-1">{{ $origem }}</p></div>
            </div>
        </div>

        <div class="form-secao">
            <div class="form-secao-titulo"><i class="bi bi-people-fill me-2"></i>Grupo</div>
            <div class="row g-3">
                <div class="col-md-4"><p class="mb-0 text-muted small">Alunos estimados</p><p class="mb-0 mt-1 fw-semibold" style="font-size:1.05rem;color:#1a2e5e;">{{ $agendamento->qtd_estimada }}</p></div>
                <div class="col-md-4"><p class="mb-0 text-muted small">Acompanhantes</p><p class="mb-0 mt-1 fw-semibold" style="font-size:1.05rem;color:#1a2e5e;">{{ $agendamento->acompanhantes }}</p></div>
                <div class="col-md-4"><p class="mb-0 text-muted small">Séries/anos</p><p class="mb-0 mt-1">{{ is_array($agendamento->series_anos) && count($agendamento->series_anos) ? implode(', ', $agendamento->series_anos) : '-' }}</p></div>
            </div>
        </div>

        <div class="form-secao">
            <div class="form-secao-titulo"><i class="bi bi-chat-left-text me-2"></i>Descrição</div>
            <div class="border rounded-3 p-3" style="border-color:#e8edf8 !important;background:#fbfcff;min-height:72px;">
                <span class="text-muted" style="font-size:0.86rem;white-space:pre-line;">{{ $agendamento->descricao ?: '-' }}</span>
            </div>
        </div>

        <div class="form-secao">
            <div class="form-secao-titulo"><i class="bi bi-person-check me-2"></i>Contato principal da Organização</div>
            @php $contatoOrganizacao = $agendamento->organizacao?->contatos?->firstWhere('principal', true); @endphp
            @if($contatoOrganizacao)
                <div class="border rounded-3 p-3" style="border-color:#e8edf8 !important;background:#fbfcff;">
                    <div class="fw-semibold" style="color:#1a2e5e;">{{ $contatoOrganizacao->nome }}</div>
                    <div class="text-muted" style="font-size:.8rem;">{{ $contatoOrganizacao->cargo ?: '-' }} · {{ $contatoOrganizacao->email ?: '-' }} · {{ $contatoOrganizacao->telefone ?: ($contatoOrganizacao->celular ?: '-') }}</div>
                </div>
            @else
                <span class="text-muted" style="font-size:.85rem;">-</span>
            @endif
        </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>
                <span class="text-muted" style="font-size:.78rem;">{{ $agendamento->contatos->count() }} contato(s)</span>
            </div>
            <div class="row g-3">
                @forelse($agendamento->contatos as $contato)
                    <div class="col-12">
                        <div class="border rounded-3 p-3 d-flex align-items-center justify-content-between gap-3" style="border-color:#e8edf8 !important;background:#fbfcff;">
                            <div>
                                <div class="fw-semibold" style="color:#1a2e5e;">{{ $contato->nome }}</div>
                                <div class="text-muted" style="font-size:.78rem;">{{ $contato->papel ?: '-' }} · {{ $contato->email ?: '-' }} · {{ $contato->telefone ?: ($contato->celular ?: '-') }}</div>
                            </div>
                            @if($contato->principal)
                                <span class="badge rounded-pill px-2 py-1" style="background:#e3f2fd;color:#1565c0;font-size:.68rem;"><i class="bi bi-star-fill me-1"></i>Principal</span>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12"><span class="text-muted" style="font-size:.85rem;">-</span></div>
                @endforelse
            </div>
        </div>

        <div class="form-secao mb-0">
            <div class="form-secao-titulo"><i class="bi bi-clock-history me-2"></i>Histórico da Jornada</div>
            @forelse($agendamento->historicos as $historico)
                @php $historicoEstado = \App\Enums\EstadoAgendamento::tryFrom($historico->estado_novo); @endphp
                <div class="d-flex gap-3 position-relative pb-3">
                    <div class="d-flex flex-column align-items-center flex-shrink-0" style="width:18px;">
                        <span class="rounded-circle" style="width:10px;height:10px;background:var(--primary);margin-top:5px;"></span>
                        @if(!$loop->last)<span style="width:1px;flex:1;background:#dfe6f5;"></span>@endif
                    </div>
                    <div class="flex-grow-1 border-bottom pb-3">
                        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                            <strong style="font-size:0.86rem;color:#1a2e5e;">{{ $historicoEstado?->label() ?: $historico->estado_novo }}</strong>
                            <span class="text-muted" style="font-size:0.74rem;">{{ $historico->created_at?->format('d/m/Y H:i') ?: '-' }}</span>
                        </div>
                        <div class="text-muted mt-1" style="font-size:0.8rem;">{{ $historico->motivo ?: 'Evento registrado pelo sistema.' }}</div>
                    </div>
                </div>
            @empty
                <p class="text-muted mb-0" style="font-size:0.85rem;">Nenhum histórico registrado.</p>
            @endforelse
        </div>
    </div>
@endsection