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

<style>
body{
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg,#0f2027,#203a43,#2c5364);
}

/* HEADER */
.content-header h1{
    font-weight:700;
    color:#fff;
}
.content-header small{
    color:#dfefff;
}

/* BOX MODERN */
.box-success{
    border-radius:20px;
    border:none;
    box-shadow:0 20px 45px rgba(0,0,0,0.3);
    overflow:hidden;
    animation: fadeSlide 0.6s ease;
}
.box-header{
    background: linear-gradient(135deg,#1e3c72,#2a5298) !important;
    padding:20px;
}
.box-title{
    font-weight:600;
    font-size:18px;
}

/* TABLE STYLE */
.table{
    margin-bottom:0;
}
.table tr{
    transition: all 0.3s ease;
}
.table tr:hover{
    background:#f4f9ff;
    transform: scale(1.01);
}
.table td{
    border-top:none !important;
    font-size:14px;
}
.table td b{
    color:#1e3c72;
    font-weight:600;
    font-size:15px;
}

/* BUTTON MODERN */
#btn-tambah-simpan{
    padding:12px 35px;
    border-radius:50px;
    font-weight:600;
    letter-spacing:0.5px;
    border:none;
    background: linear-gradient(135deg,#00c6ff,#0072ff);
    box-shadow:0 8px 20px rgba(0,114,255,0.4);
    transition: all 0.3s ease;
}
#btn-tambah-simpan:hover{
    transform: translateY(-3px);
    box-shadow:0 12px 30px rgba(0,114,255,0.6);
}
#btn-tambah-simpan:disabled{
    background:#999;
    box-shadow:none;
}

/* BOX PERNYATAAN */
.pernyataan-box{
    background:#fff8e1;
    border-left:6px solid #ff9800;
    padding:20px;
    margin-top:20px;
    border-radius:10px;
    font-size:14px;
}

/* ANIMASI */
@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
</style>


<div class="container">  

<section class="content-header">
<h1>
Konfirmasi Tes
<small>Silahkan periksa kembali data tes yang akan diikuti</small>
</h1>
</section>

<section class="content">

<?php echo form_open($url.'/mulai_tes','id="form-konfirmasi-tes" class="form-horizontal"'); ?>

<div class="box box-success box-solid">

<div class="box-header with-border">
<h3 class="box-title">Konfirmasi Data Tes</h3>
</div>

<div class="box-body">

<div id="form-pesan"></div>

<input type="hidden" name="tes-id" id="tes-id" value="<?php if(!empty($tes_id)){ echo $tes_id; } ?>">

<table class="table table-striped">

<tr style="height:50px;">
<td></td>
<td style="text-align:right;">User:</td>
<td><b><?php if(!empty($nama)){ echo $nama; } ?></b></td>
<td></td>
</tr>

<tr style="height:50px;">
<td></td>
<td style="text-align:right;">Mapel Ujian :</td>
<td><b><?php if(!empty($tes_nama)){ echo $tes_nama; } ?></b></td>
<td></td>
</tr>

<tr style="height:50px;">
<td></td>
<td style="text-align:right;">Waktu :</td>
<td><?php if(!empty($tes_waktu)){ echo $tes_waktu; } ?></td>
<td></td>
</tr>

<tr style="height:50px;">
<td></td>
<td style="text-align:right;">Poin Per Soal :</td>
<td><?php if(!empty($tes_poin)){ echo $tes_poin; } ?></td>
<td></td>
</tr>

<tr style="height:50px;">
<td></td>
<td style="text-align:right;">Poin Maksimal :</td>
<td><?php if(!empty($tes_max_score)){ echo $tes_max_score; } ?></td>
<td></td>
</tr>

<?php if(!empty($tes_token)){ echo $tes_token; } ?>

</table>

<!-- PERNYATAAN KEJUJURAN -->
<div class="pernyataan-box">
<b>Pernyataan Peserta Ujian</b>
<br><br>

Saya menyatakan bahwa saya akan mengerjakan ujian ini dengan **jujur dan tanpa melakukan kecurangan dalam bentuk apapun**.

Saya memahami bahwa apabila sistem mendeteksi adanya **kecurangan selama ujian berlangsung**, maka:

<ul>
<li>Ujian dapat dihentikan secara otomatis oleh sistem.</li>
<li>Jawaban yang telah dikerjakan dapat dianggap tidak sah.</li>
<li>Saya bersedia menerima konsekuensi sesuai peraturan yang berlaku.</li>
</ul>

<label style="margin-top:10px;">
<input type="checkbox" id="setuju_ujian">  
Saya menyetujui pernyataan di atas dan siap mengikuti ujian dengan jujur.
</label>

</div>

</div>

<div class="box-body text-right">
<button type="submit" id="btn-tambah-simpan" class="btn" disabled>
Mulai Ujian
</button>
</div>

</div>

</form>
</section>
</div>


<script type="text/javascript">
$(function () {

    // checkbox persetujuan
    $('#setuju_ujian').change(function(){
        if($(this).is(':checked')){
            $('#btn-tambah-simpan').prop('disabled',false);
        }else{
            $('#btn-tambah-simpan').prop('disabled',true);
        }
    });

    $('#form-konfirmasi-tes').submit(function(){

        $('#btn-tambah-simpan')
        .html('Menyiapkan Tes...')
        .prop('disabled', true);

        $("#modal-proses").modal('show');

        $.ajax({
            url:"<?php echo site_url().'/'.$url; ?>/mulai_tes",
            type:"POST",
            data:$('#form-konfirmasi-tes').serialize(),
            cache:false,
            timeout:60000,

            success:function(respon){

                var obj = $.parseJSON(respon);

                if(obj.status==1){
                    $("#modal-proses").modal('hide');
                    $('#form-pesan').html('');
                    window.open("<?php echo site_url(); ?>/tes_kerjakan/index/"+obj.tes_id, "_self");

                }else if(obj.status==2){
                    window.open("<?php echo site_url().'/'.$url; ?>/", "_self");

                }else{
                    $("#modal-proses").modal('hide');
                    $('#form-pesan').html(pesan_err(obj.pesan));
                    $('#btn-tambah-simpan').html('Mulai Ujian').prop('disabled', false);
                }
            },

            statusCode:{
                500:function(){
                    $("#modal-proses").modal('hide');
                    $('#form-pesan').html(pesan_err('Terjadi kesalahan pada persiapan Tes.'));
                    $('#btn-tambah-simpan').html('Mulai Ujian').prop('disabled', false);
                }
            },

            error:function(xmlhttprequest,textstatus){

                $("#modal-proses").modal('hide');
                $('#btn-tambah-simpan').html('Mulai Ujian').prop('disabled', false);

                if(textstatus==="timeout"){
                    notify_error("Gagal menyiapkan Tes, Halaman akan di Refresh !");
                    setInterval(function(){ window.location.reload(); },4000);
                }else{
                    notify_error(textstatus);
                    setInterval(function(){ window.location.reload(); },1000);
                }
            }
        });

        return false;
    });

});
</script>