

<?php $__env->startPush('styles'); ?>
<style>
    /* ── Toast Notification ── */
    #kkd-toast-container {
        position: fixed;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        pointer-events: none;
    }

    .kkd-toast {
        pointer-events: all;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-width: 280px;
        max-width: 380px;
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid transparent;
        animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        position: relative;
        overflow: hidden;
    }

    .kkd-toast.removing {
        animation: toastOut 0.25s ease-in forwards;
    }

    /* Toast progress bar */
    .kkd-toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        border-radius: 0 0 0.75rem 0.75rem;
        animation: toastProgress linear forwards;
    }

    /* Toast variants */
    .kkd-toast-success {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #14532d;
    }
    .kkd-toast-success .kkd-toast-icon { color: #16a34a; }
    .kkd-toast-success .kkd-toast-progress { background: #16a34a; }

    .kkd-toast-error {
        background: #fef2f2;
        border-color: #fecaca;
        color: #7f1d1d;
    }
    .kkd-toast-error .kkd-toast-icon { color: #dc2626; }
    .kkd-toast-error .kkd-toast-progress { background: #dc2626; }

    .kkd-toast-warning {
        background: #fffbeb;
        border-color: #fde68a;
        color: #78350f;
    }
    .kkd-toast-warning .kkd-toast-icon { color: #d97706; }
    .kkd-toast-warning .kkd-toast-progress { background: #d97706; }

    .kkd-toast-info {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1e3a5f;
    }
    .kkd-toast-info .kkd-toast-icon { color: #2563eb; }
    .kkd-toast-info .kkd-toast-progress { background: #2563eb; }

    .kkd-toast-ai-success {
        background: linear-gradient(135deg, #f0fdf4, #f0fdfa);
        border-color: #5eead4;
        color: #134e4a;
    }
    .kkd-toast-ai-success .kkd-toast-icon { color: #0d9488; }
    .kkd-toast-ai-success .kkd-toast-progress { background: linear-gradient(90deg, #0d9488, #16a34a); }

    .kkd-toast-ai-error {
        background: linear-gradient(135deg, #fef2f2, #fff7ed);
        border-color: #fdba74;
        color: #7c2d12;
    }
    .kkd-toast-ai-error .kkd-toast-icon { color: #ea580c; }
    .kkd-toast-ai-error .kkd-toast-progress { background: #ea580c; }

    /* Dark mode toast */
    .dark .kkd-toast-success { background: #052e16; border-color: #166534; color: #bbf7d0; }
    .dark .kkd-toast-error { background: #450a0a; border-color: #991b1b; color: #fecaca; }
    .dark .kkd-toast-warning { background: #422006; border-color: #92400e; color: #fde68a; }
    .dark .kkd-toast-info { background: #1e3a5f; border-color: #1e40af; color: #bfdbfe; }
    .dark .kkd-toast-ai-success { background: #042f2e; border-color: #0f766e; color: #5eead4; }
    .dark .kkd-toast-ai-error { background: #431407; border-color: #9a3412; color: #fdba74; }

    .kkd-toast-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .kkd-toast-body { flex: 1; min-width: 0; }
    .kkd-toast-title { font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
    .kkd-toast-msg { font-size: 0.8rem; margin-top: 2px; opacity: 0.85; line-height: 1.4; }

    .kkd-toast-close {
        flex-shrink: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 2px;
        opacity: 0.5;
        transition: opacity 0.15s;
        color: inherit;
        font-size: 0.75rem;
        margin-top: 1px;
    }
    .kkd-toast-close:hover { opacity: 1; }

    @keyframes toastIn {
        from { opacity: 0; transform: translateX(60px) scale(0.9); }
        to   { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes toastOut {
        from { opacity: 1; transform: translateX(0) scale(1); }
        to   { opacity: 0; transform: translateX(60px) scale(0.9); }
    }
    @keyframes toastProgress {
        from { width: 100%; }
        to   { width: 0%; }
    }

    /* ── AI Status Badge (untuk halaman show/index) ── */
    .ai-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes badgePop {
        from { opacity: 0; transform: scale(0.6); }
        to   { opacity: 1; transform: scale(1); }
    }
    .ai-status-success { background: #ccfbf1; color: #0f766e; }
    .dark .ai-status-success { background: #042f2e; color: #5eead4; }
    .ai-status-error { background: #ffedd5; color: #c2410c; }
    .dark .ai-status-error { background: #431407; color: #fdba74; }

    /* ── Pulse dot untuk AI processing ── */
    .ai-pulse-dot {
        width: 8px; height: 8px;
        background: #14b8a6;
        border-radius: 50%;
        display: inline-block;
        animation: aiPulse 1.4s ease-in-out infinite;
    }
    @keyframes aiPulse {
        0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(20,184,166,0.5); }
        50%       { transform: scale(1.1); opacity: 0.8; box-shadow: 0 0 0 6px rgba(20,184,166,0); }
    }

    /* ── Field error highlight ── */
    .field-error {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
        animation: fieldShake 0.4s ease;
    }
    @keyframes fieldShake {
        0%, 100% { transform: translateX(0); }
        20%       { transform: translateX(-5px); }
        40%       { transform: translateX(5px); }
        60%       { transform: translateX(-3px); }
        80%       { transform: translateX(3px); }
    }
    .field-error-msg {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
        font-size: 0.75rem;
        color: #dc2626;
        animation: fadeSlideDown 0.2s ease;
    }
    @keyframes fadeSlideDown {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
</style>
<?php $__env->stopPush(); ?>


<div id="kkd-toast-container" aria-live="polite"></div>

<?php $__env->startPush('scripts'); ?>
<script>
// ================================================================
// KKD Notification System
// ================================================================

const KKDNotif = {
    /**
     * Tampilkan toast notification
     * @param {string} type  - success | error | warning | info | ai-success | ai-error
     * @param {string} title
     * @param {string} msg
     * @param {number} duration - ms (0 = manual close only)
     */
    toast(type, title, msg = '', duration = 5000) {
        const container = document.getElementById('kkd-toast-container');
        if (!container) return;

        const icons = {
            success:    'fas fa-check-circle',
            error:      'fas fa-times-circle',
            warning:    'fas fa-exclamation-triangle',
            info:       'fas fa-info-circle',
            'ai-success': 'fas fa-robot',
            'ai-error':   'fas fa-robot',
        };

        const el = document.createElement('div');
        el.className = `kkd-toast kkd-toast-${type}`;
        el.setAttribute('role', 'alert');
        el.innerHTML = `
            <i class="${icons[type] || 'fas fa-bell'} kkd-toast-icon"></i>
            <div class="kkd-toast-body">
                <div class="kkd-toast-title">${title}</div>
                ${msg ? `<div class="kkd-toast-msg">${msg}</div>` : ''}
            </div>
            <button class="kkd-toast-close" onclick="KKDNotif.removeToast(this.parentElement)" aria-label="Tutup">
                <i class="fas fa-times"></i>
            </button>
            ${duration > 0 ? `<div class="kkd-toast-progress" style="animation-duration: ${duration}ms;"></div>` : ''}
        `;

        container.appendChild(el);

        if (duration > 0) {
            setTimeout(() => KKDNotif.removeToast(el), duration);
        }
    },

    removeToast(el) {
        if (!el || el.classList.contains('removing')) return;
        el.classList.add('removing');
        setTimeout(() => el.remove(), 300);
    },

    /**
     * SweetAlert untuk event penting (error validasi, success utama)
     */
    swalBase() {
        const dark = document.documentElement.classList.contains('dark');
        return {
            background: dark ? '#1e293b' : '#fff',
            color:      dark ? '#f1f5f9' : '#0f172a',
            confirmButtonColor: '#14b8a6',
            customClass: {
                popup:          'rounded-xl shadow-2xl',
                confirmButton:  'rounded-lg px-5 py-2 text-sm font-semibold',
                cancelButton:   'rounded-lg px-5 py-2 text-sm font-semibold',
            },
        };
    },

    validationError(errors) {
        const html = errors.map(e =>
            `<div class="flex items-start gap-2 py-1">
                <i class="fas fa-dot-circle text-red-400 mt-0.5 flex-shrink-0 text-xs"></i>
                <span class="text-sm text-left">${e}</span>
            </div>`
        ).join('');

        Swal.fire({
            icon: 'error',
            title: '<span class="text-base font-bold">Validasi Gagal</span>',
            html: `<div class="text-left space-y-0.5 max-h-60 overflow-y-auto pr-1">${html}</div>`,
            confirmButtonText: '<i class="fas fa-redo mr-2"></i>Coba Lagi',
            ...this.swalBase(),
        });
    },

    successRedirect(msg, url = null, delay = 1800) {
        Swal.fire({
            icon: 'success',
            title: '<span class="text-base font-bold">Berhasil!</span>',
            html: `<p class="text-sm">${msg}</p>`,
            showConfirmButton: false,
            timer: delay,
            timerProgressBar: true,
            ...this.swalBase(),
        }).then(() => { if (url) window.location.href = url; });
    },
};

// ================================================================
// Render flash session notifications (dipanggil saat DOM ready)
// ================================================================
document.addEventListener('DOMContentLoaded', function () {
    const dark = document.documentElement.classList.contains('dark');

    <?php if(session('success')): ?>
        // ── Success utama: SweetAlert + toast ──
        KKDNotif.toast('success', 'Berhasil Disimpan', '<?php echo e(addslashes(session("success"))); ?>');

        <?php if(session('ai_status') === 'success'): ?>
            setTimeout(() => KKDNotif.toast('ai-success', 'Analisis AI Selesai', 'AI berhasil menganalisis data pemeriksaan.', 6000), 600);
        <?php elseif(session('ai_status') === 'error'): ?>
            setTimeout(() => KKDNotif.toast('ai-error', 'Analisis AI Gagal', 'Data tersimpan, tetapi AI tidak dapat menganalisis saat ini.', 7000), 600);
        <?php endif; ?>

        <?php if(session('wa_status') === 'success'): ?>
            setTimeout(() => KKDNotif.toast('info', 'Notifikasi WA Terkirim', 'Pasien telah mendapat notifikasi WhatsApp.', 5000), 1200);
        <?php elseif(session('wa_status') === 'error'): ?>
            setTimeout(() => KKDNotif.toast('warning', 'Notifikasi WA Gagal', 'Data tersimpan, tapi notifikasi WA tidak terkirim.', 7000), 1200);
        <?php endif; ?>
    <?php endif; ?>

    <?php if(session('error')): ?>
        Swal.fire({
            icon: 'error',
            title: '<span class="text-base font-bold">Terjadi Kesalahan</span>',
            html: `<p class="text-sm text-left"><?php echo e(addslashes(session("error"))); ?></p>`,
            confirmButtonText: '<i class="fas fa-redo mr-2"></i>Coba Lagi',
            ...KKDNotif.swalBase(),
        });
    <?php endif; ?>

    <?php if(session('warning')): ?>
        KKDNotif.toast('warning', 'Perhatian', '<?php echo e(addslashes(session("warning"))); ?>', 6000);
    <?php endif; ?>

    <?php if($errors->any()): ?>
        KKDNotif.validationError(<?php echo json_encode($errors->all(), 15, 512) ?>);
    <?php endif; ?>
});
</script>
<?php $__env->stopPush(); ?><?php /**PATH C:\laragon\www\KESEHATAN\resources\views/petugas/pemeriksaan/_notifications.blade.php ENDPATH**/ ?>