<!-- GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
/* =================================================
   MODERN CBT NATIONAL UI - UPGRADE WARNA VIBRANT
================================================= */
body{
    background:linear-gradient(180deg,#eef2f7,#f0f4ff);
    font-family:'Poppins',sans-serif;
    color:#1f2937;
}

/* ===== HEADER ===== */
.content-header h1{
    font-size:28px;
    font-weight:700;
    letter-spacing:.6px;
    color:#0f172a;
}
.content-header small{
    font-size:14px;
    color:#475569;
}

/* ===== BREADCRUMB ===== */
.breadcrumb{
    background:transparent;
    padding:0;
    margin-top:8px;
}
.breadcrumb li a{
    color:#2563eb;
    font-weight:600;
}
.breadcrumb li.active{
    color:#1e3a8a;
    font-weight:600;
}

/* ===== INFORMASI ===== */
.callout-info{
    background:linear-gradient(135deg,#4f46e5,#6366f1);
    border-left:6px solid #facc15;
    border-radius:20px;
    padding:20px 25px;
    color:#f8fafc;
    box-shadow:0 25px 50px rgba(99,102,241,.3);
    transition:.35s ease;
}
.callout-info:hover{
    transform:scale(1.02);
}
.callout-info h4{
    font-weight:700;
    color:#fde047;
}
.callout-info p{
    color:#e0e7ff;
    margin-top:6px;
}

/* ===== BOX ===== */
.box{
    border-radius:22px;
    border:none;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.12);
    transition:.35s ease;
}
.box:hover{
    transform:translateY(-3px);
    box-shadow:0 35px 80px rgba(0,0,0,.18);
}

/* ===== BOX HEADER ===== */
.box.box-success.box-solid>.box-header{
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
    color:#fff;
    padding:18px 22px;
    position:relative;
}
.box.box-success.box-solid>.box-header::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#fcd34d,#fef08a);
}
.box-title{
    font-weight:700;
    font-size:16px;
    letter-spacing:.6px;
}
.box-title i{
    color:#fef08a;
    margin-right:8px;
}

/* ===== TABLE ===== */
.table{
    border-collapse:separate!important;
    border-spacing:0 12px;
}
.table thead th{
    background:#e0e7ff;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    color:#1e3a8a;
    border:none!important;
}
.table thead th i{
    margin-right:6px;
    opacity:.85;
}
.table tbody tr{
    background:#fff;
    box-shadow:0 12px 32px rgba(0,0,0,.08);
    transition:.35s ease;
    border-radius:12px;
}
.table tbody tr:hover{
    transform:scale(1.02);
    box-shadow:0 16px 45px rgba(0,0,0,.15);
}
.table tbody td{
    border:none!important;
    padding:14px;
    font-size:13px;
}

/* ===== TES AKTIF ===== */
tr.tes-aktif{
    background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;
    box-shadow:inset 5px 0 0 #3b82f6;
}
tr.tes-aktif td{
    font-weight:600;
    color:#1e40af;
}

/* ===== PAGINATION ===== */
.dataTables_wrapper .dataTables_paginate .paginate_button{
    background:#e0e0e0!important;
    border-radius:14px;
    border:none!important;
    padding:7px 16px;
    font-weight:600;
    color:#1f2937!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
    background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
    color:#fff!important;
}

/* ===== BUTTON ===== */
.btn{
    border-radius:14px;
    font-weight:600;
    font-family:'Poppins',sans-serif;
    transition:.35s ease;
}
.btn:hover{
    transform:translateY(-2px);
}

/* ===== ICON COLOR HIGHLIGHT ===== */
.text-primary{color:#2563eb!important;}
.text-success{color:#16a34a!important;}
.text-warning{color:#f59e0b!important;}
.text-info{color:#0ea5e9!important;}
.text-danger{color:#dc2626!important;}
.text-indigo{color:#4f46e5!important;}
</style>

<div class="container">

    <!-- HEADER -->
    <section class="content-header modern-user-box">

    <style>
        /* ===== BOX UTAMA ===== */
        .modern-user-box{
            background: linear-gradient(135deg,#1e3c72,#2a5298);
            padding:20px 25px;
            border-radius:18px;
            margin-bottom:20px;
            color:#fff;
            box-shadow:0 15px 40px rgba(0,0,0,0.25);
            position:relative;
            overflow:hidden;
            animation:fadeInDown 0.7s ease;
        }

        /* Animasi masuk */
        @keyframes fadeInDown{
            from{
                opacity:0;
                transform:translateY(-15px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        /* Efek kilau */
        .modern-user-box::before{
            content:"";
            position:absolute;
            top:0;
            left:-100%;
            width:100%;
            height:100%;
            background:linear-gradient(
                120deg,
                transparent,
                rgba(255,255,255,0.25),
                transparent
            );
            animation:shine 5s infinite;
        }

        @keyframes shine{
            0%{ left:-100%; }
            50%{ left:100%; }
            100%{ left:100%; }
        }

        /* Title */
        .modern-user-title{
            font-size:20px;
            font-weight:600;
            display:flex;
            align-items:center;
            gap:12px;
            position:relative;
            z-index:2;
        }

        /* Icon Bulat */
        .user-icon-modern{
            width:40px;
            height:40px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,#ff9966,#ff5e62);
            font-size:18px;
            box-shadow:0 8px 20px rgba(0,0,0,0.3);
            animation:pulse 2s infinite;
        }

        @keyframes pulse{
            0%{ transform:scale(1); }
            50%{ transform:scale(1.08); }
            100%{ transform:scale(1); }
        }

        .user-info{
            font-weight:500;
            letter-spacing:0.5px;
        }

    </style>

    <div class="modern-user-title">
        <div class="user-icon-modern">
            <i class="fa fa-user-graduate"></i>
        </div>

        <div class="user-info">
            User | Mapel :
            <?php 
                if(!empty($nama)){ echo $nama; } 
                if(!empty($group)){ echo ' | '.$group; } 
            ?>
        </div>
    </div>

</section>
            
        </h3>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
            <li class="active">Dashboard | INAS MOBILE EXAM (IMEX)</li>
        </ol>
    </section>

    <!-- CONTENT -->
    <section class="content">
        <?php if(!empty($informasi)){ ?>
            <div class="callout callout-info">
                <h4><i class="fa fa-circle-info"></i>PERINGATAN UJIAN !!!!</h4>
                <?php echo $informasi; ?>
            </div>
        <?php } else { ?>
            <div class="callout callout-info">
                <h4><i class="fa fa-circle-info"></i> Informasi</h4>
                <p>Silahkan pilih Tes yang tersedia. Jika tes tidak muncul, hubungi Panitia.</p>
            </div>
        <?php } ?>

        <!-- DAFTAR TES MODERN -->
<div class="box box-solid modern-tes-box">

    <style>
        /* ===== BOX STYLE ===== */
        .modern-tes-box{
            border-radius:18px;
            overflow:hidden;
            border:none;
            box-shadow:0 20px 50px rgba(0,0,0,0.15);
        }

        /* ===== HEADER ===== */
        .modern-tes-header{
            background: linear-gradient(135deg,#667eea,#764ba2);
            color:#fff;
            padding:18px 22px;
            font-weight:700;
            letter-spacing:1px;
        }

        .modern-tes-header i{
            margin-right:8px;
            font-size:18px;
        }

        /* ===== BODY ===== */
        .modern-tes-body{
            background:#f8f9ff;
            padding:20px;
        }

        /* ===== TABLE ===== */
        #table-tes thead{
            background: linear-gradient(135deg,#fdfbfb,#ebedee);
        }

        #table-tes thead th{
            font-weight:600;
            color:#444;
            border:none !important;
        }

        #table-tes tbody tr{
            transition:0.3s ease;
        }

        #table-tes tbody tr:hover{
            background:rgba(102,126,234,0.08);
            transform:scale(1.01);
        }

        /* ===== ICON STYLE ===== */
        .icon-modern{
            padding:6px;
            border-radius:8px;
            background:linear-gradient(135deg,#667eea,#764ba2);
            color:#fff !important;
            font-size:12px;
        }

        .icon-success{
            background:linear-gradient(135deg,#11998e,#38ef7d);
        }

        .icon-warning{
            background:linear-gradient(135deg,#f7971e,#ffd200);
        }

        .icon-danger{
            background:linear-gradient(135deg,#ff416c,#ff4b2b);
        }

        .icon-info{
            background:linear-gradient(135deg,#36d1dc,#5b86e5);
        }

        /* ===== ACTION BUTTON ===== */
        .btn-action{
            background:linear-gradient(135deg,#667eea,#764ba2);
            border:none;
            color:#fff;
            border-radius:20px;
            padding:5px 12px;
            transition:0.3s;
        }

        .btn-action:hover{
            transform:translateY(-2px);
            box-shadow:0 8px 20px rgba(102,126,234,0.4);
        }

    </style>

    <div class="box-header with-border modern-tes-header">
        <h3 class="box-title">
            <i class="fa fa-clipboard-check"></i> MAPEL UJIAN
        </h3>
    </div>

    <div class="box-body modern-tes-body">
        <div class="table-responsive">
            <table id="table-tes" class="table">
                <thead>
                    <tr>
                        <th width="30">
                            <i class="fa fa-hashtag icon-modern"></i>
                        </th>
                        <th>
                            <i class="fa fa-file-alt icon-modern"></i> Tes
                        </th>
                        <th width="160">
                            <i class="fa fa-play icon-modern icon-success"></i> Start
                        </th>
                        <th width="160">
                            <i class="fa fa-stopwatch icon-modern icon-warning"></i> End
                        </th>
                        <th width="120">
                            <i class="fa fa-check-circle icon-modern icon-info"></i> Status
                        </th>
                        <th width="70">
                            <i class="fa fa-bolt icon-modern icon-danger"></i> Action
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<script>
$(function(){
    $('#table-tes').DataTable({
        paging:true,
        iDisplayLength:25,
        bProcessing:false,
        bServerSide:true,
        searching:false,
        autoWidth:false,
        responsive:true,
        sAjaxSource:"<?php echo site_url().'/'.$url; ?>/get_datatable/",
        aoColumns:[
            {bSortable:false},
            {bSortable:false},
            {bSortable:false},
            {bSortable:false},
            {bSortable:false},
            {bSortable:false}
        ],
        rowCallback:function(row,data){
            var status=data[4].toLowerCase();
            if(
                status.includes('aktif') ||
                status.includes('berlangsung') ||
                status.includes('dibuka')
            ){
                $(row).addClass('tes-aktif');
            }
        }
    });
});
</script>