@extends('admin.layouts.app')
@section('content')
	<!-- [ breadcrumb ] start -->
	<div class="page-header">
		<div class="page-block">
			<div class="row align-items-center">
				<div class="col-md-12">
					<div class="page-header-title">
						<h5 class="m-b-10">Data Soal</h5>
					</div>
					<ul class="breadcrumb">
						<li class="breadcrumb-item"><a href="{{ route('dashboard.index')  }}">Home</a></li>
						<li class="breadcrumb-item"><a href="javascript: void(0)">Data Master</a></li>
						<li class="breadcrumb-item" aria-current="page">Halaman Data Hasil Tes</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- [ breadcrumb ] end -->

	<!-- [ Main Content ] start -->
	<div class="row">
		<!-- [ sample-page ] start -->
		<div class="col-sm-12">
			<div class="card">
				<div class="card-header">
          <div class="row">
            <div class="col-md-6">
              <h5>Hasil Tes User</h5>
            </div>
            <div class="col-md-6 d-flex justify-content-end">
              <button type="button" class="btn btn-sm btn-primary rounded-circle">
                <i class="ti ti-database-import"></i>
              </button>
            </div>
          </div>
				</div>
				<div class="card-body">
          <table class="table" id="table-data">
            <thead>
              <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Kode Unik</th>
                <th>Tgl dan Jam Ujian</th>
                <th>Status Data</th>
                <th>Aksi</th>
              </tr>
            </thead>
          </table>
				</div>
			</div>
		</div>
		<!-- [ sample-page ] end -->
	</div>
	<!-- [ Main Content ] end -->

  <!-- Modal Delete -->
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Hapus Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Apakah anda akan menghapus data dengan nama "<span id="delete_test" class="fw-bold"></span>" ini? (data hanya akan dinonaktikan)
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-danger" onclick="hapusData()">Hapus</button>
        </div>
      </div>
    </div>
  </div>

  {{-- <!-- Modal Restore -->
  <div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Restore Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Apakah anda akan memulihkan data dengan nama "<span id="restore_test" class="fw-bold"></span>" ini? (data akan diperiksa dengan status terakhirnya)
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-danger" onclick="restoreData()">Hapus</button>
        </div>
      </div>
    </div>
  </div> --}}
@endsection

@section('script')
	<script>
    let idHapus = null;
    let tableData = null;

    function fetchRowData() {
      if(tableData != null) {
        tableData.ajax.reload(null, false);
      }
    }

    function getDataInfo(btn) {
      let idShow = btn.getAttribute('data-id');
      Swal.fire({
        title: 'Alert',
        icon: 'question',
        text: 'Apakah Anda ingin melihat hasil dari data ini?',
        confirmButtonText: 'Ya',
        cancelButtonText: 'Tidak',
        showCancelButton: true,
        showCloseButton: true,

      }).then((result) => {
        if (result.isConfirmed) {
          window.open("{{ route('hasil-tes.index') }}?id_test_sessions=" + idShow, "_blank");
        }
      });
    }

    function getDataHapus(btn) {
      idHapus = btn.getAttribute('data-id');
      let urlShow = '{{ route('hasil_tes.show', ['__ID__']) }}';

        $.get(urlShow.replace('__ID__', idHapus), function(data, status) {
          if(data.status) {
            $('#delete_test').html(data.nama);
          }
        });
    }

    function hapusData() {
      if(idHapus != null) {
        let urlDestroy = '{{ route('hasil_tes.destroy', ['__ID__']) }}';

        $.post(urlDestroy.replace('__ID__', idHapus), {
          '_token': document.getElementById('_token').getAttribute('value'),
          '_method': 'DELETE'
        }, function(data, status) {
          if(data.status) {
            $('#deleteModal').modal('hide');
            Swal.fire({
              title: "Info",
              text: "Data berhasil dinonakstifkan!",
              icon: "success"
            });
            fetchRowData();
            idHapus = null;
          }
        });
      }
    }

    $(document).ready(function() {
      tableData = new DataTable("#table-data", {
        'ajax': {
          'url': '{{ route('hasil-tes.fetchData') }}'
        },
        'columns': [
          {
            data: null,
            render: function(data, type, row, meta) {
              return meta.row + 1;
            }
          },
          {
            data: 'nama_lengkap'
          },
          {
            data: 'kode_booking'
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              return `${data.tgl_tes} ${data.jam_tes}`;
            }
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              let bgClass = ['secondary', 'warning', 'success'];
              let text = ['Nonaktif', 'Dalam Ujian', 'Selesai'];
              return `
                <span class="badge rounded-pill text-bg-${bgClass[data.status_tes]}">${text[data.status_tes]}</span>
              `;
            }
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              if(data.status_tes == 0) {
                return `
                  <div class="btn-group">
                    <a class="btn btn-info btn-sm rounded-circle mx-1 text-light" onclick="getDataInfo(this)" data-id="${data.id_test_session}">
                      <i class="ti ti-file-info"></i>
                    </a>
                  </div>
                `;
              }
              return `
                <div class="btn-group">
                  <a class="btn btn-info btn-sm rounded-circle mx-1 text-light" onclick="getDataInfo(this)" data-id="${data.id_test_session}">
                    <i class="ti ti-file-info"></i>
                  </a>
                  <button class="btn btn-sm btn-danger delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#deleteModal" onclick="getDataHapus(this)" data-id="${data.id_test_session}">
                    <i class="ti ti-trash"></i>
                  </button>
                </div>
              `;
            }
          },
        ]
      });
    });
	</script>
@endsection