

<div id="toast-container" class="toast-container-premium">
    <?php if(session('success')): ?>
        <div class="toast-pro success show" id="toast-success">
            <div class="toast-pro-icon">
                <i class="lni lni-checkmark-circle"></i>
            </div>
            <div class="toast-pro-content">
                <span class="toast-pro-title">Berhasil!</span>
                <span class="toast-pro-msg"><?php echo e(session('success')); ?></span>
            </div>
            <button type="button" class="toast-pro-close" onclick="closeToast('toast-success')">
                <i class="lni lni-close"></i>
            </button>
            <div class="toast-pro-progress"><div class="progress-bar"></div></div>
        </div>
    <?php endif; ?>

    <?php if(session('error')): ?>
        <div class="toast-pro error show" id="toast-error">
            <div class="toast-pro-icon">
                <i class="lni lni-warning"></i>
            </div>
            <div class="toast-pro-content">
                <span class="toast-pro-title">Terjadi Kesalahan</span>
                <span class="toast-pro-msg"><?php echo e(session('error')); ?></span>
            </div>
            <button type="button" class="toast-pro-close" onclick="closeToast('toast-error')">
                <i class="lni lni-close"></i>
            </button>
            <div class="toast-pro-progress"><div class="progress-bar"></div></div>
        </div>
    <?php endif; ?>

    <?php if($errors->any()): ?>
        <div class="toast-pro error show" id="toast-validation">
            <div class="toast-pro-icon">
                <i class="lni lni-warning"></i>
            </div>
            <div class="toast-pro-content">
                <span class="toast-pro-title">Validasi Gagal</span>
                <span class="toast-pro-msg"><?php echo e($errors->first()); ?></span>
            </div>
            <button type="button" class="toast-pro-close" onclick="closeToast('toast-validation')">
                <i class="lni lni-close"></i>
            </button>
            <div class="toast-pro-progress"><div class="progress-bar"></div></div>
        </div>
    <?php endif; ?>
</div>

<style>
    .toast-container-premium {
        position: fixed;
        top: 30px;
        right: 30px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 15px;
        pointer-events: none;
    }

    .toast-pro {
        min-width: 350px;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.5);
        position: relative;
        overflow: hidden;
        pointer-events: auto;
        transform: translateX(120%);
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
    }

    .toast-pro.show {
        transform: translateX(0);
        opacity: 1;
    }

    .toast-pro-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .toast-pro.success .toast-pro-icon { background: #dcfce7; color: #16a34a; }
    .toast-pro.error .toast-pro-icon { background: #fee2e2; color: #ef4444; }

    .toast-pro-content { display: flex; flex-direction: column; flex: 1; }
    .toast-pro-title { font-weight: 800; font-size: 15px; color: #0f172a; margin-bottom: 2px; }
    .toast-pro-msg { font-size: 13.5px; color: #64748b; line-height: 1.4; }

    .toast-pro-close {
        background: none;
        border: none;
        color: #94a3b8;
        font-size: 16px;
        cursor: pointer;
        padding: 5px;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .toast-pro-close:hover { background: #f1f5f9; color: #0f172a; }

    .toast-pro-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: rgba(0, 0, 0, 0.05);
    }

    .progress-bar {
        height: 100%;
        width: 100%;
        transition: width linear;
    }

    .toast-pro.success .progress-bar { background: #16a34a; }
    .toast-pro.error .progress-bar { background: #ef4444; }

    @media (max-width: 576px) {
        .toast-container-premium { top: 20px; right: 20px; left: 20px; }
        .toast-pro { min-width: auto; width: 100%; }
    }
</style>

<script>
    function showToast(title, msg, type = 'success') {
        const container = document.getElementById('toast-container');
        const id = 'toast-' + Math.random().toString(36).substr(2, 9);
        const icon = type === 'success' ? 'lni-checkmark-circle' : 'lni-warning';
        
        const toastHtml = `
            <div class="toast-pro ${type}" id="${id}">
                <div class="toast-pro-icon">
                    <i class="lni ${icon}"></i>
                </div>
                <div class="toast-pro-content">
                    <span class="toast-pro-title">${title}</span>
                    <span class="toast-pro-msg">${msg}</span>
                </div>
                <button type="button" class="toast-pro-close" onclick="closeToast('${id}')">
                    <i class="lni lni-close"></i>
                </button>
                <div class="toast-pro-progress"><div class="progress-bar"></div></div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', toastHtml);
        const toast = document.getElementById(id);
        
        setTimeout(() => {
            toast.classList.add('show');
            const progressBar = toast.querySelector('.progress-bar');
            if (progressBar) {
                progressBar.style.transitionDuration = '5000ms';
                progressBar.style.width = '0%';
            }
            
            setTimeout(() => {
                closeToast(id);
            }, 5000);
        }, 100);
    }

    function closeToast(id) {
        const toast = document.getElementById(id);
        if (toast) {
            toast.classList.remove('show');
            setTimeout(() => {
                toast.remove();
            }, 600);
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const toasts = document.querySelectorAll('.toast-pro');
        const duration = 5000; // 5 seconds

        toasts.forEach((toast, index) => {
            // Delay showing based on index
            setTimeout(() => {
                toast.classList.add('show');
                
                const progressBar = toast.querySelector('.progress-bar');
                if (progressBar) {
                    progressBar.style.transitionDuration = duration + 'ms';
                    progressBar.style.width = '0%';
                }

                // Auto-close
                setTimeout(() => {
                    closeToast(toast.id);
                }, duration);
            }, index * 200);
        });
    });
</script>
<?php /**PATH C:\laragon\www\jasa_printer\resources\views/partials/notifications.blade.php ENDPATH**/ ?>