@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 Soal</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>Kumpulan Soal</h5>
            </div>
            <div class="col-md-6 d-flex justify-content-end">
              <button class="btn btn-sm btn-info delete-btn rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#addModal">
                <i class="ti ti-database-import"></i>
              </button>
            </div>
          </div>
				</div>
				<div class="card-body">
          <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>Note:</strong> Untuk melihat jawaban dan kunci jawaban, silahkan tekan tombol info
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          <table class="table" id="table-data">
            <thead>
              <tr>
                <th>No</th>
                <th>Pertanyaan</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
				</div>
			</div>
		</div>
		<!-- [ sample-page ] end -->
	</div>
	<!-- [ Main Content ] end -->

  <!-- Info Modal -->
  <div class="modal fade" id="infoModal" 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">Info Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 my-1">
              <label for="info_pertanyaan" class="form-label">Pertanyaan</label>
              <input disabled type="text" class="form-control" id="info_pertanyaan" name="info_pertanyaan">
            </div>
            <div class="col-md-12 my-1">
              <label for="info_jawaban_a" class="form-label">Jawaban A</label>
              <input disabled type="text" class="form-control" id="info_jawaban_a" name="info_jawaban_a">
            </div>
            <div class="col-md-12 my-1">
              <label for="info_jawaban_b" class="form-label">Jawaban B</label>
              <input disabled type="text" class="form-control" id="info_jawaban_b" name="info_jawaban_b">
            </div>
            <div class="col-md-12 my-1">
              <label for="info_jawaban_c" class="form-label">Jawaban C</label>
              <input disabled type="text" class="form-control" id="info_jawaban_c" name="info_jawaban_c">
            </div>
            <div class="col-md-12 my-1">
              <label for="info_jawaban_d" class="form-label">Jawaban D</label>
              <input disabled type="text" class="form-control" id="info_jawaban_d" name="info_jawaban_d">
            </div>
            <div class="col-md-12 my-1">
              <label for="info_jawaban_e" class="form-label">Jawaban E</label>
              <input disabled type="text" class="form-control" id="info_jawaban_e" name="info_jawaban_e">
            </div>
            <div class="col-md-6 my-1">
              <label for="info_is_reverse" class="form-label">Apakah jawaban positif?</label>
              <select disabled class="form-select" name="info_is_reverse" id="info_is_reverse">
                <option value="0">Tidak</option>
                <option value="1">Ya</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Add -->
  <div class="modal fade" id="addModal" 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">Add Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 my-1">
              <label for="pertanyaan" class="form-label">Pertanyaan</label>
              <input type="text" class="form-control" id="pertanyaan" name="pertanyaan">
            </div>
            <div class="col-md-12 my-1">
              <label for="jawaban_a" class="form-label">Jawaban A</label>
              <input type="text" class="form-control" id="jawaban_a" name="jawaban_a">
            </div>
            <div class="col-md-12 my-1">
              <label for="jawaban_b" class="form-label">Jawaban B</label>
              <input type="text" class="form-control" id="jawaban_b" name="jawaban_b">
            </div>
            <div class="col-md-12 my-1">
              <label for="jawaban_c" class="form-label">Jawaban C</label>
              <input type="text" class="form-control" id="jawaban_c" name="jawaban_c">
            </div>
            <div class="col-md-12 my-1">
              <label for="jawaban_d" class="form-label">Jawaban D</label>
              <input type="text" class="form-control" id="jawaban_d" name="jawaban_d">
            </div>
            <div class="col-md-12 my-1">
              <label for="jawaban_e" class="form-label">Jawaban E</label>
              <input type="text" class="form-control" id="jawaban_e" name="jawaban_e">
            </div>
            <div class="col-md-6 my-1">
              <label for="is_reverse" class="form-label">Apakah jawaban positif?</label>
              <select class="form-select" name="is_reverse" id="is_reverse">
                <option value="0">Tidak</option>
                <option value="1">Ya</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" onclick="simpanAddData()">Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Modal -->
  <div class="modal fade" id="editModal" 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">Edit Data</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 my-1">
              <label for="edit_pertanyaan" class="form-label">Pertanyaan</label>
              <input type="text" class="form-control" id="edit_pertanyaan" name="edit_pertanyaan">
            </div>
            <div class="col-md-12 my-1">
              <label for="edit_jawaban_a" class="form-label">Jawaban A</label>
              <input type="text" class="form-control" id="edit_jawaban_a" name="edit_jawaban_a">
            </div>
            <div class="col-md-12 my-1">
              <label for="edit_jawaban_b" class="form-label">Jawaban B</label>
              <input type="text" class="form-control" id="edit_jawaban_b" name="edit_jawaban_b">
            </div>
            <div class="col-md-12 my-1">
              <label for="edit_jawaban_c" class="form-label">Jawaban C</label>
              <input type="text" class="form-control" id="edit_jawaban_c" name="edit_jawaban_c">
            </div>
            <div class="col-md-12 my-1">
              <label for="edit_jawaban_d" class="form-label">Jawaban D</label>
              <input type="text" class="form-control" id="edit_jawaban_d" name="edit_jawaban_d">
            </div>
            <div class="col-md-12 my-1">
              <label for="edit_jawaban_e" class="form-label">Jawaban E</label>
              <input type="text" class="form-control" id="edit_jawaban_e" name="edit_jawaban_e">
            </div>
            <div class="col-md-6 my-1">
              <label for="is_reverse" class="form-label">Apakah jawaban positif?</label>
              <select class="form-select" name="edit_is_reverse" id="edit_is_reverse">
                <option value="0">Tidak</option>
                <option value="1">Ya</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
          <button type="button" class="btn btn-primary" onclick="simpanEditData()">Simpan</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 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 soal "<span id="delete_soal" class="fw-bold"></span>" ini?
        </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>
@endsection

@section('script')
	<script>
    let table = null;
    let idEdit = null;
    let idHapus = null;
		$(document).ready(function() {
      table = new DataTable("#table-data", {
        ajax: {
          url: '{{ route('soal.fetchData') }}',
        },
        columns: [
          {
            data: null,
            render: function(data, type, row, meta) {
              return meta.row + 1;
            }
          },
          {
            data: 'pertanyaan'
          },
          {
            data: null,
            render: function(data, type, row, meta) {
              return `
                <div class="btn-group">
                  <button type="button" class="btn btn-primary btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#infoModal" onclick="getDataInfo(this)" data-id="${data.id_soal}">
                    <i class="ti ti-file-info"></i>
                  </button>
                  <button type="button" class="btn btn-info btn-sm rounded-circle mx-1" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataEdit(this)" data-id="${data.id_soal}">
                    <i class="ti ti-edit"></i>
                  </button>
                  <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_soal}">
                    <i class="ti ti-trash"></i>
                  </button>
                </div>
              `;
            }
          }
        ]
      });
    });

    function fetchRowData() {
      table.ajax.reload(null, false);
    }

    function simpanAddData() {
      let urlStore = '{{ route('soal.store') }}';

      $.post(urlStore, {
        '_token': document.getElementById('_token').getAttribute('value'),
        'pertanyaan': $('#pertanyaan').val(),
        'jawaban_a': $('#jawaban_a').val(),
        'jawaban_b': $('#jawaban_b').val(),
        'jawaban_c': $('#jawaban_c').val(),
        'jawaban_d': $('#jawaban_d').val(),
        'jawaban_e': $('#jawaban_e').val(),
        'is_reverse': $('#is_reverse').val(),
      }, function(data, status) {
        $('#addModal').modal('hide');
        Swal.fire({
          title: "Info",
          text: "Data berhasil ditambahkan!",
          icon: "success"
        });
        fetchRowData();
      });
    }

    function getDataInfo(btn) {
      let idShow = btn.getAttribute('data-id');
      let urlShow = '{{ route('soal.show', ['__ID__']) }}';
      $.get(urlShow.replace('__ID__', idShow), function(data, status) {
        if(data.status) {
          $('#info_pertanyaan').attr('disabled', '');
          $('#info_jawaban_a').attr('disabled', '');
          $('#info_jawaban_b').attr('disabled', '');
          $('#info_jawaban_c').attr('disabled', '');
          $('#info_jawaban_d').attr('disabled', '');
          $('#info_jawaban_e').attr('disabled', '');
          $('#info_is_reverse').attr('disabled', '');

          $('#info_pertanyaan').val(data.data.pertanyaan);
          $('#info_jawaban_a').val(data.data.jawaban_a);
          $('#info_jawaban_b').val(data.data.jawaban_b);
          $('#info_jawaban_c').val(data.data.jawaban_c);
          $('#info_jawaban_d').val(data.data.jawaban_d);
          $('#info_jawaban_e').val(data.data.jawaban_e);
          $('#info_is_reverse').val(data.data.is_reverse);

          $('#info_pertanyaan').attr('disabled', 'disabled');
          $('#info_jawaban_a').attr('disabled', 'disabled');
          $('#info_jawaban_b').attr('disabled', 'disabled');
          $('#info_jawaban_c').attr('disabled', 'disabled');
          $('#info_jawaban_d').attr('disabled', 'disabled');
          $('#info_jawaban_e').attr('disabled', 'disabled');
          $('#info_is_reverse').attr('disabled', 'disabled');
        }
      });
    }

    function getDataEdit(btn) {
      idEdit = btn.getAttribute('data-id');
      let urlEdit = '{{ route('soal.edit', ['__ID__']) }}';

      $.get(urlEdit.replace('__ID__', idEdit), function(data, status) {
        if(data.status) {
          $('#edit_pertanyaan').val(data.data.pertanyaan);
          $('#edit_jawaban_a').val(data.data.jawaban_a);
          $('#edit_jawaban_b').val(data.data.jawaban_b);
          $('#edit_jawaban_c').val(data.data.jawaban_c);
          $('#edit_jawaban_d').val(data.data.jawaban_d);
          $('#edit_jawaban_e').val(data.data.jawaban_e);
          $('#edit_is_reverse').val(data.data.is_reverse);
        }
      });
    }

    function simpanEditData() {
        if(idEdit != null) {
          let urlUpdate = '{{ route('soal.update', ['__ID__']) }}';

          $.post(urlUpdate.replace('__ID__', idEdit), {
            '_token': document.getElementById('_token').getAttribute('value'),
            '_method': 'PUT',
            'pertanyaan': $('#edit_pertanyaan').val(),
            'jawaban_a': $('#edit_jawaban_a').val(),
            'jawaban_b': $('#edit_jawaban_b').val(),
            'jawaban_c': $('#edit_jawaban_c').val(),
            'jawaban_d': $('#edit_jawaban_d').val(),
            'jawaban_e': $('#edit_jawaban_e').val(),
            'is_reverse': $('#edit_is_reverse').val(),
          }, function(data, status) {
            if(data.status) {
              $('#editModal').modal('hide');
              Swal.fire({
                title: "Info",
                text: "Data berhasil di edit!",
                icon: "success"
              });
              fetchRowData();
              idEdit = null;
            }
          });
        }
      }

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

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

      function hapusData() {
        if(idHapus != null) {
          let urlDestroy = '{{ route('soal.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 dihapus!",
                icon: "success"
              });
              fetchRowData();
              idHapus = null;
            }
          });
        }
      }
	</script>
@endsection