<main class="container-fluid py-4">
    <div class="row g-4">
        <div class="col-lg-3"><?php require APP_PATH . '/Views/admin/_sidebar.php'; ?></div>
        <div class="col-lg-9">
            <h1 class="h3 fw-bold text-cfc-dark mb-4">Contatos rápidos do Administrador</h1>
            <div class="card border-0 shadow-soft rounded-4 mb-4"><div class="card-body p-4">
                <h2 class="h5 fw-bold mb-3">Salvar contato WhatsApp</h2>
                <form method="post" action="<?= e(url('admin/contacts/save')) ?>" class="row g-3 js-mask-form">
                    <?= CSRF::input() ?>
                    <div class="col-md-4"><label class="form-label">Nome</label><input name="name" class="form-control" required placeholder="Nome do contato"></div>
                    <div class="col-md-4"><label class="form-label">WhatsApp</label><input name="whatsapp" class="form-control whatsapp-mask" required inputmode="tel" placeholder="(00) 00000-0000"></div>
                    <div class="col-md-4"><label class="form-label">Observação</label><input name="notes" class="form-control" placeholder="Opcional"></div>
                    <div class="col-12"><button class="btn btn-success rounded-pill px-4"><i class="bi bi-save"></i> Salvar contato</button></div>
                </form>
            </div></div>
            <div class="card border-0 shadow-soft rounded-4"><div class="card-body p-4">
                <h2 class="h5 fw-bold mb-3">Meus Contatos</h2>
                <div class="table-responsive"><table class="table align-middle"><thead><tr><th>Contato</th><th>WhatsApp</th><th>Editar</th><th class="text-end">Ações</th></tr></thead><tbody>
                    <?php foreach ($contacts as $c): ?>
                        <tr>
                            <td><strong><?= e($c['name']) ?></strong><?php if (!empty($c['notes'])): ?><small class="d-block text-muted"><?= e($c['notes']) ?></small><?php endif; ?></td>
                            <td><?= e(format_whatsapp($c['whatsapp'])) ?></td>
                            <td style="min-width:360px"><form method="post" action="<?= e(url('admin/contacts/save')) ?>" class="row g-2 js-mask-form"><?= CSRF::input() ?><input type="hidden" name="contact_id" value="<?= (int)$c['id'] ?>"><div class="col-md-4"><input name="name" class="form-control form-control-sm" value="<?= e($c['name']) ?>"></div><div class="col-md-4"><input name="whatsapp" class="form-control form-control-sm whatsapp-mask" value="<?= e(format_whatsapp($c['whatsapp'])) ?>"></div><div class="col-md-4"><button class="btn btn-sm btn-primary w-100">Salvar</button></div><div class="col-12"><input name="notes" class="form-control form-control-sm" value="<?= e($c['notes'] ?? '') ?>" placeholder="Observação"></div></form></td>
                            <td class="text-end"><div class="d-flex flex-wrap gap-2 justify-content-end"><a target="_blank" class="btn btn-sm btn-success rounded-pill" href="<?= e(whatsapp_url($c['whatsapp'], 'Olá, tudo bem?')) ?>"><i class="bi bi-whatsapp"></i> Chamar</a><form method="post" action="<?= e(url('admin/contacts/delete')) ?>" onsubmit="return confirm('Apagar este contato?');"><?= CSRF::input() ?><input type="hidden" name="contact_id" value="<?= (int)$c['id'] ?>"><button class="btn btn-sm btn-outline-danger rounded-pill">Apagar</button></form></div></td>
                        </tr>
                    <?php endforeach; ?>
                    <?php if (!$contacts): ?><tr><td colspan="4" class="text-center text-muted py-4">Nenhum contato salvo.</td></tr><?php endif; ?>
                </tbody></table></div>
            </div></div>
        </div>
    </div>
</main>
<script>
document.querySelectorAll('.whatsapp-mask').forEach(function(input) {
    input.addEventListener('input', function() {
        let v = input.value.replace(/\D/g, '').slice(0, 11);
        if (v.length > 10) v = v.replace(/^(\d{2})(\d{5})(\d{0,4}).*/, '($1) $2-$3');
        else if (v.length > 6) v = v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/, '($1) $2-$3');
        else if (v.length > 2) v = v.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
        else if (v.length > 0) v = v.replace(/^(\d*)/, '($1');
        input.value = v;
    });
});
</script>
