<?php
$type = '';
$msg = '';
if ($this->session->flashdata('message')) {
    $type = 'success';
    $msg = $this->session->flashdata('message');
} elseif ($this->session->flashdata('error')) {
    $type = 'error';
    $msg = $this->session->flashdata('error');
} elseif ($this->session->flashdata('warning')) {
    $type = 'warning';
    $msg = $this->session->flashdata('warning');
}
?>

<?php if ($msg): ?>
<div class="custom-toast <?= $type; ?>">
    <div class="toast-icon">
        <?php if ($type == 'success'): ?>
            <i class="ti-check"></i>
        <?php elseif ($type == 'error'): ?>
            <i class="ti-close"></i>
        <?php elseif ($type == 'warning'): ?>
            <i class="ti-alert"></i>
        <?php endif; ?>
    </div>
    <div class="toast-message"><?= $msg; ?></div>
    <div class="toast-close" onclick="this.parentElement.style.display='none';">&times;</div>
    <div class="toast-timer"></div>
</div>
<?php endif; ?>

<style>
.custom-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    background: #155724;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    animation: slideIn 0.5s ease forwards;
    overflow: hidden;
    z-index: 9999;
}
.custom-toast.error {
    background: #dc3545;
}
.custom-toast.warning {
    background: #ffc107;
    color: #212529;
}
.toast-icon {
    font-size: 20px;
    margin-right: 12px;
}
.toast-message {
    flex: 1;
    font-size: 15px;
}
.toast-close {
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
}
.toast-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(255,255,255,0.7);
    animation: progressBar 3s linear forwards;
    width: 100%;
    border-radius: 0 0 8px 8px;
}

/* Slide In Animation */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Progress Bar Animation */
@keyframes progressBar {
    from { width: 100%; }
    to   { width: 0%; }
}
</style>

<script>
    setTimeout(function () {
        document.querySelectorAll('.custom-toast').forEach(function(toast) {
            toast.style.transition = "all 0.5s ease";
            toast.style.transform = "translateY(-30px)";
            toast.style.opacity = 0;
            setTimeout(() => toast.remove(), 500);
        });
    }, 3000);
</script>
