@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') }}">
<link rel="stylesheet" href="{{ asset('assets/bundles/bootstrap-timepicker/css/bootstrap-timepicker.min.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>
</div>

<div class="card card-primary">
  <div class="card-header">
    <h4>Data Ujian</h4>

    <div class="card-header-action">
        <a href="{{ url('admin/ujian') }}" class="btn btn-primary text-white">Rincian Ujian</a>      
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
        <input hidden id="id_program" value="{{ $id_program }}">
        <table class="table table-striped table-hover" id="tblData" style="width:100%;">
          <thead>
            <tr>
                <th style="width: 12px">No</th>
                <th>Nama</th>
                <th>Program</th>
                <th>Jenis Ujian</th>
                <th>Jadwal</th>
                <th>Pukul</th>
                <th>Durasi</th>
                <th>Aksi</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
    </div>
  </div>
</div>
@endsection

@section('js')
<script src="{{ asset('assets/bundles/datatables/datatables.min.js') }}"></script>
<script src="{{ asset('assets/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/bundles/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/bundles/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
<script>
    var id_program = $("#id_program").val()
    $("#tblData").DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('admin/ujian/get-data-ujian-user') }}/" + id_program,
        "columns": [
            { data: 'DT_RowIndex', name: 'DT_RowIndex' },   
            { data: 'nama', name: 'nama' },
            { data: 'program.nama', name: 'program.nama' },
            { data: 'jenis_ujian.nama', name: 'jenis_ujian.nama' },
            { data: 'tanggal', name: 'tanggal' },
            { data: 'pukul', name: 'pukul' },
            { data: 'duration', name: 'duration' },
            { data: 'aksi', name: 'aksi', orderable: false, searchable: false}
        ]
    });

</script>
@endsection