<?php $this->load->view("partial/header"); ?>

<style>
    body {
        background: linear-gradient(135deg, #f0f4ff 0%, #e8eef8 50%, #f5f0ff 100%);
        min-height: 100vh;
    }

    .dashboard_wrapper {
        padding: 24px;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* ── Welcome Banner ── */
    .dashboard_welcome {
        background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
        border-radius: 16px;
        padding: 24px 30px;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 8px 24px rgba(15, 52, 96, 0.2);
        opacity: 0;
        transform: translateY(-20px);
        animation: slideDown 0.6s ease forwards;
        position: relative;
        overflow: hidden;
    }

    /* Shimmer sweep */
    .dashboard_welcome::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
        animation: welcomeShimmer 3s ease infinite 1s;
    }

    /* Orange glow border at bottom */
    .dashboard_welcome::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #f47f20, transparent);
        animation: glowLine 3s ease-in-out infinite;
    }

    @keyframes welcomeShimmer {
        0% {
            left: -100%;
        }

        100% {
            left: 200%;
        }
    }

    @keyframes glowLine {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 1;
        }
    }

    @keyframes glowLine {

        0%,
        100% {
            opacity: 0.4;
        }

        50% {
            opacity: 1;
        }
    }

    .dashboard_welcome_left .greeting {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }

    .dashboard_welcome_left .username {
        font-size: 22px;
        font-weight: 700;
        color: #ffffff;
    }

    .dashboard_welcome_left .username span {
        color: #f47f20;
    }

    .dashboard_welcome_right {
        text-align: right;
    }

    .dashboard_welcome_right .time_label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .dashboard_welcome_right .time_value {
        font-size: 28px;
        font-weight: 700;
        color: #f47f20;
        font-variant-numeric: tabular-nums;
    }

    .dashboard_welcome_right .date_value {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        margin-top: 2px;
    }

    /* ── Section Title ── */
    .dashboard_title {
        font-size: 13px;
        font-weight: 700;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        margin-bottom: 16px;
        text-align: center;
        opacity: 0;
        animation: fadeIn 0.5s ease 0.4s forwards;
    }

    /* ── Module Grid ── */
    .module_grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    /* ── Card Base ── */
    .module_card {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 16px;
        padding: 28px 16px 22px;
        text-align: center;
        text-decoration: none;
        color: #333;
        display: block;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        position: relative;
        overflow: hidden;

        /* entrance animation — overridden per card via inline style */
        opacity: 0;
        transform: translateY(30px);
        animation: cardEntrance 0.5s ease forwards;
    }

    /* Shimmer line at top */
    .module_card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #f47f20, transparent);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

    .module_card:hover::before {
        transform: translateX(100%);
    }

    /* Glow layer */
    .module_card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 16px;
        background: radial-gradient(circle at 50% 0%, rgba(244, 127, 32, 0.12), transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .module_card:hover::after {
        opacity: 1;
    }

    /* ── Card Hover ── */
    .module_card:hover {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(244, 127, 32, 0.4);
        box-shadow:
            0 12px 32px rgba(244, 127, 32, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transform: translateY(-6px) scale(1.02);
        text-decoration: none;
        color: #1a1a2e;
    }

    .module_card:hover .module_name {
        color: #f47f20;
    }

    .module_card:hover .module_desc {
        color: #888;
    }

    .module_card:hover img {
        transform: scale(1.12) rotate(-3deg);
        filter: drop-shadow(0 6px 12px rgba(244, 127, 32, 0.35));
    }

    /* ── Card Content ── */
    .module_card img {
        width: 64px;
        height: 64px;
        margin: 0 auto 14px;
        display: block;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
    }

    .module_name {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 6px;
        transition: color 0.2s;
        color: #1a1a2e;
    }

    .module_desc {
        font-size: 12px;
        color: #888;
        line-height: 1.5;
        transition: color 0.2s;
    }

    /* ── Keyframes ── */
    @keyframes cardEntrance {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideDown {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }

    @keyframes pulse_dot {

        0%,
        100% {
            opacity: 1;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            transform: scale(1.4);
        }
    }

    /* ── Live clock dot ── */
    .live_dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #f47f20;
        border-radius: 50%;
        margin-right: 5px;
        animation: pulse_dot 1.5s ease infinite;
        vertical-align: middle;
    }
</style>

<div class="dashboard_wrapper">

    <!-- Welcome Banner -->
    <div class="dashboard_welcome">
        <div class="dashboard_welcome_left">
            <div class="greeting">👋 Welcome back</div>
            <div class="username">
                <span><?php echo $user_info->first_name; ?></span>
                <?php echo ' ' . $user_info->last_name; ?>
            </div>
        </div>
        <div class="dashboard_welcome_right">
            <div class="time_label"><span class="live_dot"></span>Live</div>
            <div class="time_value" id="live_clock">--:--:--</div>
            <div class="date_value" id="live_date"></div>
        </div>
    </div>

    <!-- Section Label -->
    <div class="dashboard_title"><?php echo $this->lang->line('common_welcome_message'); ?></div>

    <!-- Module Cards -->
    <div class="module_grid">
        <?php $i = 0;
        foreach ($allowed_modules->result() as $module): ?>
            <a href="<?php echo site_url($module->module_id); ?>"
                class="module_card"
                style="animation-delay: <?php echo 0.1 + ($i * 0.08); ?>s">
                <img src="<?php echo base_url() . 'images/menubar/' . $module->module_id . '.png'; ?>"
                    alt="<?php echo $module->module_id; ?>" />
                <div class="module_name"><?php echo $this->lang->line('module_' . $module->module_id); ?></div>
                <div class="module_desc"><?php echo $this->lang->line('module_' . $module->module_id . '_desc'); ?></div>
            </a>
        <?php $i++;
        endforeach; ?>
    </div>

</div>

<script>
    // Live clock
    function updateClock() {
        var now = new Date();
        var h = String(now.getHours()).padStart(2, '0');
        var m = String(now.getMinutes()).padStart(2, '0');
        var s = String(now.getSeconds()).padStart(2, '0');
        document.getElementById('live_clock').textContent = h + ':' + m + ':' + s;

        var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        document.getElementById('live_date').textContent =
            days[now.getDay()] + ', ' + months[now.getMonth()] + ' ' + now.getDate() + ', ' + now.getFullYear();
    }
    updateClock();
    setInterval(updateClock, 1000);
</script>

<?php $this->load->view("partial/footer"); ?>