<div class="container">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 style="font-family: 'Poppins', sans-serif; font-weight: 600;">
            Tes : <?php if(!empty($tes_name)){ echo $tes_name; } ?>
        </h1>
        <div class="breadcrumb">
            <img src="<?php echo base_url(); ?>public/images/zoom.png" style="cursor: pointer;" height="20" onclick="zoomnormal()" title="Klik ukuran font normal" />&nbsp;&nbsp;
            <img src="<?php echo base_url(); ?>public/images/zoom.png" style="cursor: pointer;" height="26" onclick="zoombesar()" title="Klik ukuran font lebih besar" />
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <?php echo form_open('tes_kerjakan/simpan_jawaban','id="form-kerjakan"')?>
            <input type="hidden" name="tes-id" id="tes-id" value="<?php if(!empty($tes_id)){ echo $tes_id; } ?>">
            <input type="hidden" name="tes-user-id" id="tes-user-id" value="<?php if(!empty($tes_user_id)){ echo $tes_user_id; } ?>">
            <input type="hidden" name="tes-soal-id" id="tes-soal-id" value="<?php if(!empty($tes_soal_id)){ echo $tes_soal_id; } ?>">
            <input type="hidden" name="tes-soal-nomor" id="tes-soal-nomor" value="<?php if(!empty($tes_soal_nomor)){ echo $tes_soal_nomor; } ?>">
            <input type="hidden" name="tes-soal-jml" id="tes-soal-jml" value="<?php if(!empty($tes_soal_jml)){ echo $tes_soal_jml; } ?>">
            <input type="hidden" name="tes-soal-ragu" id="tes-soal-ragu" value="<?php if(!empty($tes_ragu)){ echo $tes_ragu; } ?>">

            <div class="box box-success box-solid" style="border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.25);">
                <div class="box-header with-border" style="background: linear-gradient(135deg, #1a73e8, #00c6ff); color: #fff;">
                    <h3 class="box-title" style="font-weight: 600;">Soal <span id="judul-soal"><?php if(!empty($tes_soal_nomor)){ echo 'ke '.$tes_soal_nomor; } ?></span></h3>
                    <div class="box-tools pull-right">
                        <div id="sisa-waktu" style="font-weight: 500;"></div>
                    </div>
                </div><!-- /.box-header -->
                <div class="box-body" style="background: #f4f6f9; border-radius: 0 0 12px 12px;">
                    <div id="isi-tes-soal" style="font-size: 15px; line-height: 1.5;">
                        <?php if(!empty($tes_soal)){ echo $tes_soal; } ?>
                    </div>
                </div><!-- /.box-body -->
                <div class="box-footer">
                    <button type="button" class="btn btn-default hide" id="btn-sebelumnya" style="border-radius: 12px; padding: 10px 18px; font-weight: 600;">Soal Sebelumnya</button>&nbsp;&nbsp;&nbsp;
                    <div class="btn btn-warning" id="btn-ragu" onclick="ragu()" style="border-radius: 12px; padding: 10px 18px; display: inline-flex; align-items: center;">
                        <input type="checkbox" style="width:16px;height:16px;margin-right:8px;" name="btn-ragu-checkbox" id="btn-ragu-checkbox" <?php if(!empty($tes_ragu)){ echo "checked"; } ?> /> Ragu-ragu
                    </div>&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default" id="btn-selanjutnya" style="border-radius: 12px; padding: 10px 18px; font-weight: 600;">Soal Selanjutnya</button>
                </div>
            </div><!-- /.box -->
            </form>
        </div>

        <div class="row">
    <style>
        /* ===== GOLD THEME ===== */
        .gold-box{
            border-radius:16px;
            box-shadow:0 15px 40px rgba(0,0,0,0.25);
            border:none;
            overflow:hidden;
        }

        .gold-header{
            background: linear-gradient(135deg,#d4af37,#f6e27a,#c9a227);
            color:#fff;
            font-weight:700;
            padding:18px;
            letter-spacing:1px;
            font-size:18px;
        }

        .gold-body{
            background:#fffaf0;
            padding:25px;
        }

        .gold-footer{
            background:#fff8dc;
            padding:15px;
        }

        .gold-btn{
            background: linear-gradient(135deg,#c9a227,#f6e27a);
            color:#000;
            font-weight:600;
            border:none;
            border-radius:25px;
            padding:10px 20px;
            transition:0.3s ease;
        }

        .gold-btn:hover{
            transform:translateY(-3px);
            box-shadow:0 10px 25px rgba(201,162,39,0.5);
            opacity:0.95;
        }

        .help-block{
            font-weight:600;
            color:#a67c00;
        }
    </style>

    <div class="box box-solid gold-box">
        
        <div class="box-header with-border gold-header">
            <h3 class="box-title">Daftar Soal</h3>
        </div>

        <div class="box-body gold-body">
            <?php if(!empty($tes_daftar_soal)){ echo $tes_daftar_soal; } ?>
            <p class="help-block">Kelengkapan Jawaban</p>
        </div>

        <div class="box-footer gold-footer">
            <button class="btn gold-btn pull-right" id="btn-hentikan">
                Hentikan Tes
            </button>
        </div>

    </div>
</div>
            </div><!-- /.box -->
        </div>
    </section><!-- /.content -->

    <!-- Modal Hentikan Tes -->
    <div class="modal fade" style="max-height: 100%;overflow-y: auto;" id="modal-hentikan" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <?php echo form_open($url.'/hentikan_tes','id="form-hentikan"'); ?>
        <div class="modal-dialog">
            <div class="modal-content" style="border-radius:12px;">
                <div class="modal-header" style="background: linear-gradient(135deg,#ff416c,#ff4b2b); color: #fff;">
                    <button class="close" type="button" data-dismiss="modal" style="color: #fff;">&times;</button>
                    <h4 class="modal-title" id="trx-judul">Konfirmasi Hentikan Tes</h4>
                </div>
                <div class="modal-body" >
                    <div class="row-fluid">
                        <div class="box-body">
                            <div id="form-pesan"></div>
                            <div class="callout callout-info" style="background:#e7f3fe; border-left: 5px solid #2196F3;">
                                <p>Apakah anda yakin mengakhiri mata uji ini ?
                                <br />Jawaban Tes yang sudah selesai tidak dapat diubah.</p>
                            </div>
                            <div class="form-group">
                                <label>Nama Tes</label>
                                <input type="hidden" name="hentikan-tes-id" id="hentikan-tes-id" >
                                <input type="hidden" name="hentikan-tes-user-id" id="hentikan-tes-user-id" >
                                <input type="text" class="form-control" id="hentikan-tes-nama" name="hentikan-tes-nama" readonly>
                            </div>
                            <div class="form-group">
                                <label>Keterangan Soal</label>
                                <input type="text" class="form-control" id="hentikan-dijawab" name="hentikan-dijawab" readonly>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="hentikan-centang" name="hentikan-centang" value="1"> Centang dan klik tombol Hentikan Tes.
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" id="tambah-simpan" class="btn btn-primary" style="border-radius:12px; font-weight:600;">Hentikan Tes</button>
                    <a href="#" class="btn btn-default" data-dismiss="modal" style="border-radius:12px;">Close</a>
                </div>
            </div>
        </div>
    </form>
    </div>
</div><!-- /.container -->
<script type="text/javascript">
/* ===============================
   CBT FULL SECURITY SYSTEM
================================ */
var tab_switch_count = 0;
var forced_finish = false;

/* ===============================
   AUDIO ALARM
================================ */
var alarm = new Audio('https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg');
alarm.loop = false;

/* ===============================
   FULLSCREEN AUTO
================================ */
function enterFullscreen(){
    let el = document.documentElement;
    if(el.requestFullscreen) el.requestFullscreen();
    else if(el.webkitRequestFullscreen) el.webkitRequestFullscreen();
    else if(el.msRequestFullscreen) el.msRequestFullscreen();
}
document.addEventListener('click', enterFullscreen, { once:true });

/* ===============================
   NOTIF TENGAH + ALARM + GETAR
================================ */
function showWarningNotif(count){
    let msg = '';
    let color = '#f1c40f';

    if(count === 1){
        msg = '⚠ PERINGATAN!<br>Anda berpindah tab<br><b>Sisa kesempatan: 2</b>';
    }else if(count === 2){
        msg = '🚫 PERINGATAN TERAKHIR!<br><b>UJIAN AKAN DIHENTIKAN</b>';
        color = '#e74c3c';
    }

    alarm.play().catch(()=>{});
    if(navigator.vibrate) navigator.vibrate([300,200,300]);

    let notif = $(`
        <div class="cbt-warning" style="border-top-color:${color}">
            ${msg}
        </div>
    `);

    $('body').append(notif);
    setTimeout(()=>notif.addClass('show'),10);
    setTimeout(()=>{
        notif.removeClass('show');
        setTimeout(()=>notif.remove(),300);
    },3000);
}

/* ===============================
   DETEKSI PINDAH TAB (PALING AMAN)
================================ */
document.addEventListener('visibilitychange', function(){
    if(document.hidden){
        if(forced_finish) return;
        tab_switch_count++;

        if(tab_switch_count < 3){
            showWarningNotif(tab_switch_count);
            return;
        }

        /* ===============================
           TERMINATE CBT
        ================================ */
        forced_finish = true;

        $(document).on('keydown contextmenu', function(e){
            e.preventDefault(); return false;
        });

        $('body').append(`
            <div id="cbt-lockscreen">
                <div class="cbt-box">
                    <div class="cbt-icon">⛔</div>
                    <div class="cbt-title">UJIAN DIHENTIKAN</div>
                    <div class="cbt-desc">
                        Pelanggaran terdeteksi<br>
                        Silakan hubungi panitia ujian
                    </div>
                    <div class="cbt-countdown">5</div>
                    <div class="cbt-note">Mengakhiri ujian...</div>
                </div>
            </div>
        `);

        startFinishCountdown();
    }
});

/* ===============================
   COUNTDOWN & SUBMIT RESMI
================================ */
function startFinishCountdown(){
    let hitung = 5;
    let timer = setInterval(function(){
        hitung--;
        $('.cbt-countdown').text(hitung);

        if(hitung <= 0){
            clearInterval(timer);

            $.getJSON('<?php echo site_url().'/'.$url; ?>/get_tes_info/' + $('#tes-id').val(), function (data) {

                if(data.data == 1){
                    $('#hentikan-tes-id').val(data.tes_id);
                    $('#hentikan-tes-user-id').val(data.tes_user_id);
                    $('#hentikan-tes-nama').val(data.tes_nama);
                    $('#hentikan-dijawab').val(
                        data.tes_dijawab+" dijawab. "+
                        data.tes_blum_dijawab+" belum dijawab."
                    );

                    $('#form-hentikan input[type=checkbox]').prop('checked', true);

                    $('#form-hentikan').append(`
                        <input type="hidden" name="status" value="N">
                        <input type="hidden" name="selesai" value="1">
                        <input type="hidden" name="is_finish" value="1">
                    `);

                    document.getElementById('form-hentikan').submit();
                }
            });
        }
    },1000);
}

/* ===============================
   CSS CBT
================================ */
$('<style>').html(`
.cbt-warning{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.9);
    background:#111;
    color:#fff;
    padding:18px 26px;
    border-radius:16px;
    border-top:6px solid #f1c40f;
    box-shadow:0 20px 60px rgba(0,0,0,.8);
    z-index:999999;
    text-align:center;
    opacity:0;
    transition:.3s;
    max-width:90%;
}
.cbt-warning.show{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

#cbt-lockscreen{
    position:fixed;
    inset:0;
    background:#000;
    z-index:9999999;
    display:flex;
    align-items:center;
    justify-content:center;
}
.cbt-box{
    background:#111;
    padding:40px;
    border-radius:20px;
    text-align:center;
    color:#fff;
}
.cbt-icon{
    font-size:52px;
    color:#e74c3c;
}
.cbt-title{
    margin-top:10px;
    font-size:22px;
    font-weight:800;
    color:#e74c3c;
}
.cbt-desc{
    font-size:14px;
    margin:10px 0;
}
.cbt-countdown{
    font-size:70px;
    font-weight:900;
    color:#e74c3c;
}
.cbt-note{
    font-size:12px;
    color:#aaa;
}
`).appendTo('head');
</script>
</script>
<script type="text/javascript">
    // ====== FONT ZOOM ======
    function zoombesar(){
        $('#isi-tes-soal').css("font-size", "140%");
        $('#isi-tes-soal').css("line-height", "140%");
    }
    function zoomnormal(){
        $('#isi-tes-soal').css("font-size", "15px");
        $('#isi-tes-soal').css("line-height", "110%");
    }

    // ====== RAGU-RAGU ======
    function ragu(){
        $("#modal-proses").modal('show');
        $.ajax({
            url:'<?php echo site_url().'/'.$url; ?>/get_tes_soal_by_tessoal/'+$('#tes-soal-id').val(),
            type:"POST",
            cache: false,
            timeout: 10000,
            success:function(respon){
                var data = $.parseJSON(respon);
                if(data.data==1){
                    var ragu = $('#tes-soal-ragu').val()==0 ? 1 : 0;
                    $.ajax({
                        url:'<?php echo site_url().'/'.$url; ?>/update_tes_soal_ragu/'+$('#tes-soal-id').val()+'/'+ragu,
                        type:"POST",
                        cache: false,
                        timeout: 5000,
                        success:function(respon){
                            var data = $.parseJSON(respon);
                            if(data.data==1) notify_success('Jawaban Ragu-ragu berhasil diubah');
                        },
                        error: function(xmlhttprequest, textstatus) {
                            $("#modal-proses").modal('hide');
                            notify_error("Gagal mengubah Soal, Silahkan Refresh Halaman");
                        }
                    });
                    // Update UI
                    if($('#tes-soal-ragu').val()==0){
                        $('#btn-soal-'+$('#tes-soal-nomor').val()).removeClass('btn-default btn-primary').addClass('btn-warning');
                        $('#btn-ragu-checkbox').prop("checked", true);
                        $('#tes-soal-ragu').val(1);
                    }else{
                        $('#btn-soal-'+$('#tes-soal-nomor').val()).removeClass('btn-warning').addClass('btn-primary');
                        $('#btn-ragu-checkbox').prop("checked", false);
                        $('#tes-soal-ragu').val(0);
                    }
                }
                $("#modal-proses").modal('hide');
            },
            error: function() { $("#modal-proses").modal('hide'); notify_error("Gagal mengubah soal"); }
        });
    }

    // ====== NAVIGASI SOAL ======
    function soal(tessoal_id){
        $("#modal-proses").modal('show');
        $.ajax({
            url:'<?php echo site_url().'/'.$url; ?>/get_soal_by_tessoal/'+tessoal_id+'/'+$('#tes-user-id').val(),
            type:"POST",
            cache: false,
            timeout: 10000,
            success:function(respon){
                var data = $.parseJSON(respon);
                if(data.data==1){
                    $('#tes-soal-id').val(data.tes_soal_id);
                    $('#tes-soal-nomor').val(data.tes_soal_nomor);
                    $('#isi-tes-soal').html(data.tes_soal);
                    $('#tes-soal-ragu').val(data.tes_ragu);
                    $('#judul-soal').html('ke '+data.tes_soal_nomor);
                    $('#btn-ragu-checkbox').prop("checked", data.tes_ragu==1);
                    // Tombol navigasi
                    var n = parseInt(data.tes_soal_nomor);
                    var j = parseInt($('#tes-soal-jml').val());
                    if(n==1){ $('#btn-sebelumnya').addClass('hide'); $('#btn-selanjutnya').removeClass('hide'); }
                    else if(n==j){ $('#btn-sebelumnya').removeClass('hide'); $('#btn-selanjutnya').addClass('hide'); }
                    else{ $('#btn-sebelumnya').removeClass('hide'); $('#btn-selanjutnya').removeClass('hide'); }
                } else if(data.data==2){ window.location.reload(); }
                $("#modal-proses").modal('hide');
            },
            error: function() { $("#modal-proses").modal('hide'); notify_error("Gagal mengambil Soal"); }
        });
    }

    function soal_navigasi(n){
        var t = parseInt($('#tes-soal-nomor').val())+n;
        if(t>=1 && t<=parseInt($('#tes-soal-jml').val())){
            $('#btn-soal-'+t).trigger('click');
        }
    }

    // ====== HENTIKAN TES ======
    function hentikan_tes(){
        $("#modal-proses").modal('show');
        $('#hentikan-centang').prop("checked", false);
        $.getJSON('<?php echo site_url().'/'.$url; ?>/get_tes_info/'+$('#tes-id').val(), function(data){
            if(data.data==1){
                $('#hentikan-tes-id').val(data.tes_id);
                $('#hentikan-tes-user-id').val(data.tes_user_id);
                $('#hentikan-tes-nama').val(data.tes_nama);
                $('#hentikan-dijawab').val(data.tes_dijawab+" dijawab. "+data.tes_blum_dijawab+" belum dijawab.");
                $("#modal-hentikan").modal('show');
            } else{ window.location.reload(); }
            $("#modal-proses").modal('hide');
        });
    }

    // ====== JAWAB ======
    function jawab(){ $('#form-kerjakan').submit(); }

    $(function () {
        var sisa_detik = <?php if(!empty($detik_sisa)){ echo $detik_sisa; } ?>;
        setInterval(function() {
            var menit = Math.floor(sisa_detik/60);
            $("#sisa-waktu").html("Sisa Waktu : "+menit+" menit");
            sisa_detik--;
            if(sisa_detik<60) $("#sisa-waktu").css("color","red");
            if(sisa_detik<0) window.location.reload();
        },1000);

        $('#btn-sebelumnya').click(function(){ soal_navigasi(-1); });
        $('#btn-selanjutnya').click(function(){ soal_navigasi(1); });
        $('#btn-hentikan').click(function(){ hentikan_tes(); });

        // Form submit jawaban
        $('#form-kerjakan').submit(function(){
            $("#modal-proses").modal('show');
            $.ajax({
                url:"<?php echo site_url().'/'.$url; ?>/simpan_jawaban",
                type:"POST",
                data:$('#form-kerjakan').serialize(),
                cache: false,
                timeout: 10000,
                success:function(respon){
                    var obj = $.parseJSON(respon);
                    if(obj.status==1){
                        $("#modal-proses").modal('hide');
                        notify_success(obj.pesan);
                        $('#btn-soal-'+obj.nomor_soal).removeClass('btn-default btn-warning').addClass('btn-primary');
                    } else if(obj.status==2){ window.location.reload(); }
                    else{ $("#modal-proses").modal('hide'); notify_error(obj.pesan); }
                },
                error: function(){ $("#modal-proses").modal('hide'); notify_error("Gagal menyimpan jawaban"); }
            });
            return false;
        });

        // Form submit hentikan
        $('#form-hentikan').submit(function(){
            $("#modal-proses").modal('show');
            $.ajax({
                url:"<?php echo site_url().'/'.$url; ?>/hentikan_tes",
                type:"POST",
                data:$('#form-hentikan').serialize(),
                cache: false,
                timeout: 10000,
                success:function(respon){
                    var obj = $.parseJSON(respon);
                    if(obj.status==1){ window.location.reload(); }
                    else{ $("#modal-proses").modal('hide'); notify_error(obj.pesan); }
                },
                error: function(){ $("#modal-proses").modal('hide'); notify_error("Gagal menghentikan Tes"); }
            });
            return false;
        });
    });
</script>
<script>

/* ===============================
   ANTI COPY CBT SECURITY
================================ */

// disable klik kanan
document.addEventListener("contextmenu", function(e){
    e.preventDefault();
});

// disable select text
document.addEventListener("selectstart", function(e){
    e.preventDefault();
});

// disable copy cut paste
document.addEventListener("copy", function(e){
    e.preventDefault();
});
document.addEventListener("cut", function(e){
    e.preventDefault();
});
document.addEventListener("paste", function(e){
    e.preventDefault();
});

// blok shortcut keyboard
document.addEventListener("keydown", function(e){

    // blok CTRL
    if(e.ctrlKey){

        // Ctrl+C
        if(e.key === "c"){ e.preventDefault(); }

        // Ctrl+V
        if(e.key === "v"){ e.preventDefault(); }

        // Ctrl+X
        if(e.key === "x"){ e.preventDefault(); }

        // Ctrl+U (view source)
        if(e.key === "u"){ e.preventDefault(); }

        // Ctrl+A (select all)
        if(e.key === "a"){ e.preventDefault(); }

        // Ctrl+S (save)
        if(e.key === "s"){ e.preventDefault(); }

        // Ctrl+P (print)
        if(e.key === "p"){ e.preventDefault(); }
    }

    // F12 (dev tools)
    if(e.key === "F12"){
        e.preventDefault();
    }

});

</script>