<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Testes de Modais</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/kpi/assets/css/app.min.css">
    <link rel="stylesheet" href="/kpi/assets/libs/bootstrap/css/bootstrap.min.css">

    <style>
        body {
            font-family: 'Segoe UI', 'Inter', sans-serif;
            background: #f5f6fb;
            color: #1f2937;
        }

        main {
            max-width: 960px;
            margin: 48px auto 72px;
            padding: 0 16px;
        }

        .hero {
            background: white;
            padding: 24px;
            border-radius: 16px;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
            margin-bottom: 32px;
        }

        .hero h1 {
            margin: 0;
            font-weight: 600;
        }

        .card {
            background: white;
            border: none;
            border-radius: 18px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
        }

        .button-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        .button-row button {
            min-width: 180px;
        }

        .note {
            font-size: 0.9rem;
            color: #475569;
            margin-top: 12px;
        }

        .custom-modal .modal-content {
            border-radius: 18px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
            border: none;
            overflow: hidden;
        }

        .custom-modal.blur .modal-dialog {
            backdrop-filter: blur(18px);
        }

        .custom-modal.slide .modal-content {
            animation: slide-pop 0.45s ease-out forwards;
        }

        .custom-modal.glow .modal-content {
            animation: glow-pulse 1.2s ease infinite;
        }

        @keyframes slide-pop {
            from {
                transform: translateY(30px) scale(0.95);
                opacity: 0;
            }
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        @keyframes glow-pulse {
            0% {
                box-shadow: 0 0 0 rgba(59, 130, 246, 0.2);
            }
            50% {
                box-shadow: 0 15px 45px rgba(59, 130, 246, 0.35);
            }
            100% {
                box-shadow: 0 0 0 rgba(59, 130, 246, 0.2);
            }
        }
    </style>
</head>

<body>
    <main>

        <section class="card">
            <h3>Modal confirmatório (DeleteModal)</h3>
            <div class="button-row">
                <button id="btn-delete-custom" class="btn btn-outline-primary">Modal com texto personalizado</button>
            </div>
        </section>

        <section class="card">
            <h3>Modal simples com tag.js</h3>
            <div class="button-row">
                <button id="btn-tag-modal" class="btn btn-success">Modal tag.js (pop)</button>
            </div>
        </section>
    </main>

    <script src="/kpi/assets/libs/jquery/jquery.min.js"></script>
    <script src="/kpi/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/kpi/assets/js/tag.js"></script>
    <script src="/kpi/assets/js/modais.js"></script>
    <script>

        const btnDeleteCustom = document.getElementById('btn-delete-custom');
        if (btnDeleteCustom) {
            btnDeleteCustom.addEventListener('click', () => {
                new DeleteModal({
                    title: 'Remoção Irreversível',
                    message: 'Tem certeza? Essa ação não pode ser revertida.',
                    confirmText: 'Sim, remover',
                    cancelText: 'Voltar',
                    onConfirm() {
                        showToast('Registro removido', '#ef4444');
                    },
                    onCancel() {
                        showToast('Ação cancelada', '#f59e0b');
                    }
                }).open();
            });
        }

        const toastContainer = tag('<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 11000;"></div>');
        document.body.appendChild(toastContainer.element);

        function showToast(message, variant = '#0d9488') {
            const toast = tag(`
                <div class="toast align-items-center text-white d-flex border-0" role="alert" aria-live="assertive" aria-atomic="true" style="background:${variant};">
                    <div class="toast-body flex-grow-1">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            `);
            toastContainer.append(toast);
            const bsToast = new bootstrap.Toast(toast.element, { delay: 3500 });
            bsToast.show();
            toast.element.addEventListener('hidden.bs.toast', () => toast.element.remove());
        }

        document.getElementById('btn-tag-modal').addEventListener('click', () => {
            const modal = tag(`
                <div class="modal fade" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content rounded-4">
                            <div class="modal-header">
                                <h5 class="modal-title">Modal tag.js</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <p>Esse modal foi gerado usando tag.js e bootstrap.</p>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                                <button class="btn btn-primary confirm">Confirmar</button>
                            </div>
                        </div>
                    </div>
                </div>
            `);
            document.body.appendChild(modal.element);
            const bsModal = new bootstrap.Modal(modal.element);
            bsModal.show();
            modal.element.querySelector('.btn-primary').addEventListener('click', () => {
                bsModal.hide();
                showToast('Confirmado via modal tag.js', '#2563eb');
            });
            modal.element.addEventListener('hidden.bs.modal', () => modal.element.remove());
        });
    </script>
</body>

</html>