{{--
    Partial: Contatos do Cliente
    Uso: @include('clientes.partials.contatos', ['clienteId' => $id, 'contatos' => $colecao])
    JS:  window.CONTATOS_BASE deve ser definida pela view pai
--}}

{{-- Cabecalho da secao --}}
<div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center gap-2">
        <i class="bi bi-person-lines-fill" style="font-size:1.15rem; color:var(--primary);"></i>
        <span class="fw-semibold" style="color:var(--primary); font-size:0.95rem;">Contatos</span>
    </div>
    <button type="button" class="btn btn-sm rounded-3"
            style="border:1.5px solid var(--primary); color:var(--primary); font-size:0.8rem;"
            onclick="abrirModalContato()">
        <i class="bi bi-plus-circle me-1"></i> Adicionar Contato
    </button>
</div>

{{-- Tabela de contatos --}}
<div class="table-responsive">
    <table class="table table-hover align-middle mb-0" id="tabela-contatos" style="font-size:0.855rem;">
        <thead>
            <tr class="text-muted" style="font-size:0.78rem; border-bottom:2px solid #eef1fb;">
                <th class="fw-semibold py-2">Nome</th>
                <th class="fw-semibold">Cargo</th>
                <th class="fw-semibold">Telefone</th>
                <th class="fw-semibold">Celular</th>
                <th class="fw-semibold">E-mail</th>
                <th class="fw-semibold text-center">Principal</th>
                <th class="fw-semibold text-center">Status</th>
                <th class="fw-semibold text-end">Acoes</th>
            </tr>
        </thead>
        <tbody id="lista-contatos">
            @if(isset($contatos) && $contatos->isNotEmpty())
                @foreach($contatos as $c)
                <tr id="contato-row-{{ $c->id }}">
                    <td class="fw-medium" style="color:#1a2e5e;">{{ $c->nome }}</td>
                    <td class="text-muted">{{ $c->cargo ?? '-' }}</td>
                    <td class="text-muted">{{ $c->telefone ?? '-' }}</td>
                    <td class="text-muted">{{ $c->celular ?? '-' }}</td>
                    <td class="text-muted">{{ $c->email ?? '-' }}</td>
                    <td class="text-center">
                        @if($c->principal)
                            <i class="bi bi-star-fill text-warning" title="Principal"></i>
                        @else
                            <i class="bi bi-star text-muted" title="Nao principal"></i>
                        @endif
                    </td>
                    <td class="text-center">
                        @if($c->status->value === 'ATIVO')
                            <span class="badge rounded-pill px-2 py-1 fw-semibold" style="background:#e8f5e9;color:#2e7d32;font-size:0.72rem;">Ativo</span>
                        @else
                            <span class="badge rounded-pill px-2 py-1 fw-semibold" style="background:#fce4ec;color:#c62828;font-size:0.72rem;">Inativo</span>
                        @endif
                    </td>
                    <td class="text-end">
                        <button class="btn btn-sm border-0 p-1" title="Editar" style="color:#2e7d32;"
                                onclick="editarContato({{ $c->id }})">
                            <i class="bi bi-pencil-fill"></i>
                        </button>
                        <button class="btn btn-sm border-0 p-1" title="Excluir" style="color:#c62828;"
                                id="btn-excluir-contato-{{ $c->id }}"
                                onclick="removerContato({{ $c->id }})">
                            <i class="bi bi-trash-fill"></i>
                        </button>
                    </td>
                </tr>
                @endforeach
            @else
            <tr id="contatos-vazio">
                <td colspan="8" class="text-center text-muted py-4" style="font-size:0.82rem;">
                    <i class="bi bi-inbox me-1"></i> Nenhum contato cadastrado
                </td>
            </tr>
            @endif
        </tbody>
    </table>
</div>

{{-- Modal: Novo / Editar Contato --}}
<div class="modal fade" id="modalContato" tabindex="-1" aria-labelledby="modalContatoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content rounded-4 border-0 shadow">

            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold" id="modalContatoLabel" style="color:var(--primary);">
                    <i class="bi bi-person-plus-fill me-2"></i>
                    <span id="modal-contato-titulo">Novo Contato</span>
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body pt-3">
                <form id="formContato" novalidate>
                    <input type="hidden" id="contato-id" value="">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Nome <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-sm rounded-3" id="contato-nome" required>
                            <div class="invalid-feedback">Informe o nome.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Cargo</label>
                            <input type="text" class="form-control form-control-sm rounded-3" id="contato-cargo">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Telefone</label>
                            <input type="text" class="form-control form-control-sm rounded-3" id="contato-telefone" maxlength="20">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Celular</label>
                            <input type="text" class="form-control form-control-sm rounded-3" id="contato-celular" maxlength="20">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Status <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm rounded-3" id="contato-status" required>
                                <option value="ATIVO">Ativo</option>
                                <option value="INATIVO">Inativo</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">E-mail</label>
                            <input type="email" class="form-control form-control-sm rounded-3" id="contato-email">
                            <div class="invalid-feedback">Informe um e-mail valido.</div>
                        </div>
                        <div class="col-md-4 d-flex align-items-end pb-1">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="contato-principal">
                                <label class="form-check-label fw-semibold" for="contato-principal" style="font-size:0.82rem;">
                                    Contato Principal
                                </label>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold" style="font-size:0.82rem;">Observacoes</label>
                            <textarea class="form-control form-control-sm rounded-3" id="contato-observacoes" rows="2"></textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-sm btn-outline-secondary rounded-3" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" id="btn-salvar-contato" class="btn btn-sm rounded-3 text-white"
                        style="background:var(--primary);"
                        onclick="salvarContato()">
                    <i class="bi bi-floppy me-1"></i> Salvar
                </button>
            </div>

        </div>
    </div>
</div>