@extends('layout.master')

@section('title', "Riwayat Bimbingan $student->name")

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{route('student.index')}}">Santri</a></li>
    <li class="breadcrumb-item active" aria-current="page">Riwayat Bimbingan {{$student->name}}</li>
  </ol>
</nav>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <h6 class="card-title">List Riwayat Bimbingan {{$student->name}}</h6>
          </div>
          <div class="col-6">
            <div class="float-end">
              @can('admin')
              <button class="btn btn-success mx-1" onclick="showModalImportBimbingan()">Import Riwayat Bimbingan</button>
              @endcan
              <button class="btn btn-success mx-1" onclick="showModalInputBimbingan()">Tambah Riwayat Bimbingan</button>
            </div>
          </div>
        </div>
        <div class="table-responsive">
            <table id="guidance" class="table">
                <thead>
                    <tr>
                        <th>#</th>       
                        <th>Pengajar</th>       
                        <th>Awal Surat</th>
                        <th>Akhir Surat</th>
                        <th>Catatan</th>
                        <th>Tanggal Bimbingan</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@include('students.modal_input_guidance')
@include('students.modal_edit_guidance')
@can('admin')
@include('students.modal_import_guidance')
@endcan

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
    $(function() {
      var table = $('#guidance').DataTable({
            "aLengthMenu": [
                [10, 30, 50, -1],
                [10, 30, 50, "All"]
            ],
            "iDisplayLength": 10,
            "language": {
                search: ""
            },
            "dom": '<"html5buttons">lfrtip',
            "processing": true,
            "serverSide": true,
            "ajax": '{{route("student.ajaxRequest")}}' + '?service=guidance&id={{$student->id}}',
            "columns": [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'pengajar',
                    name: 'pengajar.name'
                },
                {
                    data: 'chapter_start',
                    name: 'chapter_start'
                },
                {
                    data: 'chapter_end',
                    name: 'chapter_end'
                },
                {
                    data: 'note',
                    name: 'note'
                },
                {
                    data: 'guidance_at',
                    name: 'guidance_at'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            "initComplete": function(settings, json) {
              feather.replace();
            },
            "drawCallback": function(settings, json) {
              feather.replace();
            },
            "bDestroy": true,
        });
        $('#guidance').each(function () {
            var datatable = $(this);
            // SEARCH - Add the placeholder for Search and Turn this into in-line form control
            var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
            search_input.attr('placeholder', 'Search');
            search_input.removeClass('form-control-sm');
            // LENGTH - Inline-Form control
            var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
            length_sel.removeClass('form-control-sm');
        });
        var inputGuidance = document.getElementById('inputGuidance')
        inputGuidance.addEventListener('hidden.bs.modal', function (event) {
          $("#guidanceForm").trigger("reset");
          $.each(['chapter_start', 'chapter_end', 'note'], function(index, value) {
              $(`#${value}`).removeClass('is-invalid');
          });
        })
    });

    function showModalInputBimbingan() {
      $('#inputGuidance').removeAttr('hidden');
      $('#inputGuidance').modal('show');
    }

    function showModalImportBimbingan() {
      $('#importGuidance').removeAttr('hidden');
      var myModal = new bootstrap.Modal(document.getElementById('importGuidance'), {
        keyboard: false,
        backdrop: 'static',
      })
      myModal.show();
    }

    // this is the id of the form
    $("#guidanceForm").submit(function(e) {
    
    e.preventDefault(); // avoid to execute the actual submit of the form.
    
    var form = $(this);
    var actionUrl = "{{route('student.ajaxRequest')}}" + "?service=storeGuidance&id={{$student->id}}";
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000
    });
    
    $.ajax({
        type: "POST",
        url: actionUrl,
        headers: {
          "Accept": "application/json"
        },
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          $('#guidance').DataTable().ajax.reload();
          $('#inputGuidance').modal('hide');
          form.trigger("reset");
          Toast.fire({
            icon: 'success',
            title: `sukses input riwayat bimbingan`
          })
        },
        error: function(xhr, ajaxOptions, thrownError)
        {
          $.each(['chapter_start', 'chapter_end', 'note'], function(index, value) {
              $(`#${value}`).removeClass('is-invalid');
          });
          if (xhr.status == 422) {
            Object.entries(xhr.responseJSON.errors).forEach(entry => {
              const [key, value] = entry;
              $(`#${key}Message`).html(value);
              $(`#${key}`).addClass("is-invalid");
            });
          }
        }
    });
    
    });

    // end guidanceForm

    $("#guidanceEditForm").submit(function(e) {
    
      e.preventDefault(); // avoid to execute the actual submit of the form.
      
      var form = $(this);
      var actionUrl = form.attr('action');
      const Toast = Swal.mixin({
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
      });
      
      $.ajax({
          type: "PUT",
          url: actionUrl,
          headers: {
            "Accept": "application/json"
          },
          data: form.serialize(), // serializes the form's elements.
          success: function(data)
          {
            $('#guidance').DataTable().ajax.reload();
            $('#editGuidance').modal('hide');
            form.trigger("reset");
            Toast.fire({
              icon: 'success',
              title: `sukses update riwayat bimbingan`
            })
          },
          error: function(xhr, ajaxOptions, thrownError)
          {
            $.each(['chapter_start', 'chapter_end', 'note'], function(index, value) {
                $(`#${value}`).removeClass('is-invalid');
            });
            if (xhr.status == 422) {
              Object.entries(xhr.responseJSON.errors).forEach(entry => {
                const [key, value] = entry;
                $(`#${key}Message`).html(value);
                $(`#${key}`).addClass("is-invalid");
              });
            } else {
              Toast.fire({
              icon: 'error',
              title: xhr.responseJSON.message
              })
            }
          }
      });
    
    });

    // this is the id of the form
    $("#importGuidanceForm").submit(function(e) {
    
    e.preventDefault(); // avoid to execute the actual submit of the form.
    
    var form = $(this);
    var actionUrl = "{{route('student.ajaxRequest')}}" + "?service=importGuidance";

    Swal.fire({
      title: 'Apakah Anda Yakin Untuk Mengimport Riwayat Bimbingan',
      icon: 'question',
      showLoaderOnConfirm: true,
      preConfirm: () => {
        return $.ajax({
          type: "POST",
          url: actionUrl,
          headers: {
            "Accept": "application/json"
          },
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData:false
        }).then((response) => {
            $('#guidance').DataTable().ajax.reload();
            $('#importGuidance').modal('hide');
            form.trigger("reset");
            Swal.fire({
                title: response.data.message,
                icon: 'success',
                html: `dengan catatan <br>
                sukses import ${response.data.info.success_import} row <br> 
                error import ${response.data.info.failed_import} row <br>
                ${response.data.info.errors_info.errors_message}`
            });
        },
        (xhr, ajaxOptions, thrownError) => {
            if (xhr.status !== 500) {
              $.each(['excel'], function(index, value) {
                $(`#${value}`).removeClass('is-invalid');
              });
              if (xhr.status == 422) {
                Object.entries(xhr.responseJSON.errors).forEach(entry => {
                  const [key, value] = entry;
                  $(`#${key}Message`).html(value);
                  $(`#${key}`).addClass("is-invalid");
                });
              } else if (xhr.status == 400) {
                  $(`#excelMessage`).html(xhr.responseJSON.errors);
                  $(`#excel`).addClass("is-invalid");
              }
            } else {
              Swal.fire({
                title: 'Gagal Import',
                icon: 'error',
                html: '<b>Internal Server Error Silahkan Hubungi Administrator</b>'
              });
            }
        }).catch(error => {
            Swal.fire({
                title: 'Gagal Import',
                icon: 'error',
                html: 'another Error'
            });
        });
      },
      allowOutsideClick: false,
      showCancelButton: true
    });
    
    });

    // end guidanceForm

    function editGuidance(e) {
      var url = "{{route('student.ajaxRequest')}}" + `?service=updateGuidance&id=${e}`;
      $('#guidanceEditForm').attr('action', url);
      $.ajax({
        type: "GET",
        url: "{{route('student.ajaxRequest')}}" + `?service=editGuidance&id=${e}`,
        success: function (response) {
          $('#chapter_startEdit').val(response.chapter_start);
          $('#chapter_endEdit').val(response.chapter_end);
          $('#noteEdit').val(response.note);
          $('#editGuidance').removeAttr('hidden');
          $('#editGuidance').modal('show');
        }
      });
    }

    function deleteGuidance(e) {
      var urlDelete = "{{route('student.ajaxRequest')}}" + `?service=deleteGuidance&id=${e}`;
      $.ajaxSetup({
          headers: {
          'X-CSRF-TOKEN': '{{csrf_token()}}'
          }
          });
            Swal.fire({
                title             : "Apakah Anda Yakin ?",
                text              : "Data Yang Sudah Dihapus Tidak Bisa Dikembalikan!",
                icon              : "warning",
                showCancelButton  : true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor : "#d33",
                confirmButtonText : "Ya, Tetap Hapus!"
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url    : urlDelete,
                        type   : "delete",
                        success: function(data) {
                          $('#guidance').DataTable().ajax.reload();
                          const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                          });
                          
                          Toast.fire({
                            icon: 'success',
                            title: data.message
                          })
                        },
                        error: function(xhr, ajaxOptions, thrownException) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000
                            });
                            if (xhr.status == 403) {
                                Toast.fire({
                                    icon: 'error',
                                    title: xhr.responseJSON.message
                                })
                            }
                        }
                    })
                }
            })
    }
    
    function downloadTemplate()
    {
      window.location.href = "{{asset('assets/file/template_riwayat_bimbingan.xlsx')}}";
    }
</script>
@endpush