@extends('layouts.app')
{{-- page title --}}
@section('title','Pengguna')

{{-- vendor styles --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/toastr.css')}}">
@endsection
{{-- page styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/extensions/toastr.css')}}">
@endsection

@section('content')

<style>
  .DTFC_Cloned thead {
    background: white;
  }

  .DTFC_Cloned tbody {
    background: white;
  }

</style>
<!-- Pengguna start -->
<section id="basic-datatable">
  <div class="card">
    <div class="card-content">
      <div class="card-body card-dashboard">

        <h3>Data Sekolah</h3>

        <div class="table-responsive">
          <table class="table table-sm table-ssr nowrap">
            <tfoot style="display: table-row-group">
              <th>Id</th>
              <th>NPSN</th>
              <th>Nama</th>
              <th>Akreditasi</th>
              <th>Berdiri Sejak</th>
              <th>Kepala Sekolah</th>
              <th>Action</th>
            </tfoot>
            <thead>
              <tr>
                    <th>Id</th>
                    <th>NPSN</th>
                    <th>Nama</th>
                    <th>Akreditasi</th>
                    <th>Berdiri Sejak</th>
                    <th>Kepala Sekolah</th>
                    <th>Action</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/toastr.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
@endsection

@section('page-scripts')
<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
<script>
  @if (Session::get('status') == 200)
    $(document).ready(function(){
      toastr.success('Data has been saved', 'Success', { "progressBar": true, "showDuration": 500, "closeButton": true })
    });
  @endif

  $(document).ready(function () {
    const params = {
      "url": "{{ url('/master-data/schools') }}",
      "columns": [
        { "data": "schools__id", "visible": false },
        { "data": "schools__npsn" },
        { "data": "schools__name" },
        { "data": "schools__accredetation" },
        { "data": "schools__since_date" },
        { "data": "schools__headschool" },
        { "data": "action", "searchable": false, "orderable": false }
      ]
    }

    dataTableServerSide(params)
  })

  // Confirmation Delete
  $(document).on('click', '.btn-delete', function (e) {
    e.preventDefault();

    const params = {
      "url": "{{ url('/master-data/schools/') }}",
      "id": $(this).attr('data-id'),
      "tr": $(this).parent("td").parent('tr')
    }

    confirmDelete(params)
  })

  // On Upload
  $('#btnUpload').on('click', function () {
    let progress = 0;
    let interval = setInterval(fakeProgress, 25);
    
    const form = $('#form');
    const data = new FormData(form[0]);

    $("#spanUpload").remove()
    $(".btn-close").attr("disabled", true)
    $("#fileExcel").attr("disabled", true)
    $(this).attr("disabled", true)
    $(this).append("<span id='spanLoading' class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span> Memuat ...")

    $("#spinner").show()
    
    // Send to server after progress bar show
    $("#progress").slideDown('fast', () => {
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
        xhr: function() {
          const xhr = new window.XMLHttpRequest();

          xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
              const percent = parseInt((e.loaded / e.total) * 100);
              
              $("#progressbar").attr('aria-valuenow', percent);
              $("#progressbar").css('width', `${percent}%`);
              $("#progressbar").html(`${percent}%`)
            }
          }, false);

          return xhr;
        },
        url: "{{ route('users.upload') }}",
        type: 'POST',
        processData: false,
        contentType: false,
        data: data,
        success: function (resp){
          $("#btnUpload").empty()
          $("#btnUpload").attr("disabled", false)
          $("#btnUpload").append("<span id='spanUpload'>Unggah</span>")
          $(".btn-close").attr("disabled", false)
          $("#progressbar").attr('aria-valuenow', 100);
          $("#progressbar").css('width', `${100}%`);
          $("#progressbar").html(`${100}%`)

          $('.table-ssr').DataTable().draw();

          clearInterval(interval);
            
          setTimeout(() => {
            $("#modal").modal('hide');
            $("#progressbar").attr('aria-valuenow', 0);
            $("#progressbar").css('width', `${0}%`);
            $("#progressbar").html(`${0}%`)
            $("#progress").slideUp('fast');
            $("#form").trigger('reset');
            $(".custom-file-label").text('Unggah Dokumen Excel');
            $("#spinner").hide()
            $("#fileExcel").attr("disabled", false)
          }, 1000);

          if (resp.user_failed > 0) {
            const message = `${resp.user_upload - resp.user_failed} Pengguna berhasil diunggah. ${resp.user_failed} Pengguna gagal, silahkan unduh dokumen untuk informasi lebih detail.`
            toastr.warning(message, 'Sukses', { "progressBar": true, "showDuration": 3000, "closeButton": true })
          } else {
            toastr.success('Dokumen berhasil di unggah', 'Sukses', { "progressBar": true, "showDuration": 500, "closeButton": true })
          }
        },
        error: function(xhr) {
          const err = JSON.parse(xhr.responseText)

          $("#btnUpload").empty()
          $("#btnUpload").attr("disabled", false)
          $("#btnUpload").append("<span id='spanUpload'>Unggah</span>")

          $(".btn-close").attr("disabled", false)
          $("#progressbar").attr('aria-valuenow', 100);
          $("#progressbar").css('width', `${100}%`);
          $("#progressbar").html(`${100}%`)
          
          clearInterval(interval);
          setTimeout(() => {
            $("#spinner").hide()
            $("#fileExcel").attr("disabled", false)
            $("#modal").modal('hide');
          }, 500);

          if ('message' in err) {
            toastr.error('Dokumen gagal di unggah '+ err.message, 'Gagal', { "progressBar": true, "showDuration": 500, "closeButton": true })
          }
        }
      });
    })

    function fakeProgress() {
      const max = Math.floor(Math.random() * 41) + 50 

      if (progress >= max) {
        clearInterval(interval);
        i = 0;
      } else {
        progress++;
        $("#progressbar").attr('aria-valuenow', progress);
        $("#progressbar").css('width', `${progress}%`);
        $("#progressbar").html(`${progress}%`)
      }
    }
  });
</script>
@endsection