@extends('layout.template')

@section('css')
<link rel="stylesheet" href="{{ asset('assets/bundles/datatables/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/bundles/bootstrap-daterangepicker/daterangepicker.css') }}">
@endsection

@section('isi')
<div class="section-header">
    <h1>Ujian</h1>
    <div class="section-header-breadcrumb" style="padding: 10px !important">
      <div class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></div>
      <div class="breadcrumb-item active"><a href="{{ url('/admin/ujian') }}">Ujian</a></div>
      <div class="breadcrumb-item active"><a href="#">Open</a></div>
    </div>
</div>

<div class="card">
    <div class="card-header">
      <h4>Memulai Ujian</h4>
    </div>
    <div class="card-body">
        <div class="row">
            <label class="col-md-2">Nama Program</label>
            <div class="col-md-10">: {{ $program->nama ?? "N/A"}}</div>
        </div>
        <div class="row">
            <label class="col-md-2">Durasi Ujian</label>
            <div class="col-md-10">: {{ $program->durasi_ujian }} Menit</div>
        </div>
        <div class="row">
            <label class="col-md-2">Skor Syarat Kelulusan</label>
            <div class="col-md-10">: {{ $program->skor_kelulusan }}</div>
        </div>

        @php
            $arr_jenis_ujian = [];

            foreach($ujian as $item)
            {
                $arr_jenis_ujian[] = $item->nama. " (". ($item->jenis_ujian == null ? "-" : $item->jenis_ujian->nama) .")";
            }
        @endphp

        <div class="row">
            <label class="col-md-2">Nama dan Jenis Ujian</label>
            <div class="col-md-10">: {{ implode(", ", $arr_jenis_ujian) }}</div>
        </div>

        <div class="alert alert-light alert-has-icon">
            <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
            <div class="alert-body">
            <div class="alert-title">PERATURAN UJIAN</div>
              Mohon perhatikan hal-hal berikut ini ketika sedang ujian : <br>
              1. Jangan keluar dari halaman Ujian ketika ujian sedang berlangsung <br>
              2. Jangan <b>Refresh</b> halaman<br>
              3. Pastikan setelah mengisi soal ujian klik tombol <b>SUBMIT</b> agar nilai ujian dapat dihitung <br>
              4. Jika Anda <b>refresh halaman</b> atau <b>keluar dari halaman ujian</b> atau <b>tidak menekan tombol SUBMIT setelah Ujian</b> maka Ujian Anda dianggap selesai dengan nilai 0.
            </div>
        </div>

        <div class="empty-state">
            <form id="fromMulaiUjian" method="POST" action="{{ url('admin/ujian/start_new')}}">
                @csrf

                @foreach ($ujian as $item)
                <input type="hidden" value="{{ $item->id }}" name="id_ujian[]">
                @endforeach

                <input type="hidden" value="{{ $id_program }}" name="id_program">
                <input type="hidden" value="{{ $id_pendaftaran_program }}" name="id_pendaftaran_program">

                @if ($ujian->count() > 0)
                <button type="button" onclick="StartUjian()" class="btn btn-success mt-4 btn-lg text-white" id="btnMulai">MULAI</button>
                @endif

            </form>
        </div>

        {{-- @if (
                date('Y-m-d H:i') >= date('Y-m-d H:i', strtotime($ujian->tanggal." ".$ujian->jam_mulai))
                &&
                date('Y-m-d H:i') <= date('Y-m-d H:i', strtotime($ujian->tanggal." ".$ujian->jam_selesai))
            )

            <div class="empty-state">
                <form id="fromMulaiUjian" method="POST" action="{{ url('admin/ujian/start')}}">
                    @csrf

                    @foreach ($ujian as $item)
                    <input type="hidden" value="{{ $item->id }}" name="id_ujian[]">
                    @endforeach

                    <input type="hidden" value="{{ $ujian->id_program }}" name="id_program">
                    <button type="button" onclick="StartUjian()" class="btn btn-success mt-4 btn-lg text-white">MULAI</button>
                </form>
            </div>
        @else
            <div class="empty-state">
                <button type="button" class="btn btn-success mt-4 btn-lg text-white" disabled>MULAI</button>
            </div>
        @endif --}}
    </div>
</div>
@endsection

@section('modal')
@endsection

@section('js')
<script>

    function StartUjian()
    {
        swal({
            title: "Anda yakin ?",
            text: "Akan memulai ujian!",
            icon: "warning",
            buttons: true,
            dangerMode: true
        })
        .then((willDelete) => {
            if (willDelete) {
                $("#btnMulai").attr("disabled", true);
                $("#fromMulaiUjian").submit();
            }
        });
    }

</script>
@endsection