@extends('layouts.app')

@section('content')
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Questions</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Question</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
		<div class="card">
            <div class="card-header">
                Data Quiz
                <div class="float-end">
                    @if($akses->is_add == 1)
                        <button class="btn btn-primary" onclick="loadForm(0)"><span class="bi bi-plus">TAMBAH</span></button>
                        <button class="btn btn-success" onclick="$('#modal-form-import').modal('show')"><span class="bi bi-file">IMPORT</span></button>
                    @endif
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="card-body" >
               
                <div class="form-group row">
                    <label class="col-md-2">Materi</label>
                    <div class="col-md-6">
                        <select class="form-select select2" id="quiz_id"  onchange="table.draw()">
                            <option value="">-Pilih Materi-</option>
                            @foreach($quiz as $q)
                                <option value="{{ $q->id }}">{{ $q->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-12 col-12">
                    
                    <table class="table table-striped table-bordered" id="datatables" style="width:100%">
                        <thead>
                            <tr>
                                <th>Aksi</th>
                                <th>Materi</th>
                                <th>Pertanyaan</th>
                                <th>Jawaban A</th>
                                <th>Jawaban B</th>
                                <th>Jawaban C</th>
                                <th>Jawaban D</th>
                                <th>Jawaban Benar</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                
			</div>
		</div>
	</section>
@endsection

@push("modals")
   @include('pages.master-quiz.question.form')
   <div class="modal fade" id="modal-form-import" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"  data-bs-backdrop="false">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" x-text="'Import '+type"></h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body modal-body-1">
          <form id="fm-import">
              <div class="form-group row align-items-center">
              <div class="col-lg-2 col-2">
                  <label class="col-form-label">File</label>
              </div>
              <div class="col-lg-10 col-10">
                  <input type="file" name="file" class="form-control">
              </div>
              
          </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="prosesImport()" ><i class="fa fa-check"></i> PROSES</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" ><i class="fa fa-times"></i> TUTUP</button>
        </div>
      </div>
    </div>
  </div>
  
  
@endpush

@push('scripts')
	<script>
        var table;
		$(function(){
            table = $('#datatables').DataTable({
                serverSide:true,
                processing:true,
                responsive: true,
                ajax:{
                    method:"POST",
                    url:"{{ url('master-quiz/question/data') }}",
                    data:(d) => {
                        d.quiz_id = $('#quiz_id').val();
                    }
                },
                columns:[
                    {data:"aksi",render:(data,type,row) => {
                        var button = "";
                            button += `<li><a class="dropdown-item" href="#" onclick="loadForm(${row.id})">EDIT</a></li>`;
                            button += `<li><a class="dropdown-item" href="#" onclick="delData(${row.id})">DELETE</a></li>`;
                        return `<div class="dropdown ">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                AKSI
                                </button>
                                <ul class="dropdown-menu dropdown-menu-dark"  aria-labelledby="dropdownMenuButton1">
                                ${button}
                                </ul>
                            </div>`
                    },orderable:false,searchable:false},
                    {data:"quiz.name"},
                    {data:"question"},
                    {data:"answer_a"},
                    {data:"answer_b"},
                    {data:"answer_c"},
                    {data:"answer_d"},
                    {data:"correct_answer"},
                ]
            });
        })
					
		function delData(id) {
       
            Notiflix.Confirm.show("KONFIRMASI","Apakah yakin akan menghapus data ini?","YA","TIDAK",() => {
                $.post("{{ url('master-quiz/question/delete') }}",{id,id}).done(resp => {
                    if (resp.error == false) {
                        Notiflix.Notify.success("Data Berhasil dihapus");
                        table.draw();
                    } else {
                        Notiflix.Notify.failure(resp.message);
                    }
                }).fail( err => {
                    Notiflix.Notify.failure(err.responseText);
                })
            })
        }

       
    
        function prosesImport() {
            var formData = new FormData($('#fm-import')[0]);
            Notiflix.Block.hourglass("body");
            $.ajax({
                url: "{{ url('master-quiz/question/import') }}", 
                dataType: 'json', 
                cache: false,
                contentType: false,
                processData: false,
                data: formData,                         
                type: 'post',
                success: function(response){
                    Notiflix.Block.remove("body");
                    if (response.error == false) {
                        Notiflix.Notify.success("Data Berhasil diimport");
                        $('#modal-form-import').modal('hide');
                        
                    } else {
                      Notiflix.Notify.failure("Data Gagal diimport");
                    }
                },
                error:function(err) {
                    Notiflix.Block.remove("body");
                    alert(err.responseText);
                }
            });
        }
          
	</script>
@endpush