@extends('dashboards.layouts.dash-layout')
@section('title', 'Kehadiran')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid mt-2 px-3">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Kehadiran</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ Route('adminIndexKehadiran') }}">Kehadiran</a></li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->

  @if ($message = Session::get('success'))
  <div class="container-fluid px-3">
    <div class="card card-success">
      <div class="card-header">
        <h3 class="card-title">SUKSES</h3>

        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
          </button>
        </div>
        <!-- /.card-tools -->
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        <strong> {{ $message }} </strong>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </div>
      <!-- /.card-body -->
    </div>
  </div>
  @endif

  @if ($message = Session::get('gagal'))
  <div class="container-fluid px-3">
    <div class="card card-danger">
      <div class="card-header">
        <h3 class="card-title">DATA KODE PRAKTIKUM TIDAK DITEMUKAN!</h3>

        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
          </button>
        </div>
        <!-- /.card-tools -->
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        <strong> {{ $message }} </strong>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </div>
      <!-- /.card-body -->
    </div>
  </div>
  @endif
</section>

<section class="content">
  <div class="container-fluid px-3">
    <div class="row">
      <div class="col-12">
        <div class="card card-warning collapsed-card">
          <div class="card-header">
            <h3 class="card-title">Tambah Data Dari Excel</h3>

            <div class="card-tools">
              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
              </button>
            </div>
            <!-- /.card-tools -->
          </div>
          <!-- /.card-header -->
          <!-- form start -->
          <div class="card-body">
            <div class="form-group">
              <label for="">PENTING!</label>
              <P>Sebelum anda mengunggah data, bentuk header tabel excel untuk halaman ini adalah sebagai berikut:</P>
              <p>| NO | NIM | NAMA | PRAKTIKUM | TOTAL HADIR | TOTAL TIDAK HADIR | KESIMPULAN |</p>
              <P>*Data excel harus berupa tabel dengan header huruf kapital dan nama seperti tertera diatas. <br> **Isi KOLOM PRAKTIKUM adalah [ KODE PRAKTIKUM][YY - YY] contoh JARKOM20-21</p>
            </div>
            <div class="form-group">
              <label for="exampleInputFile">Ungah File Excel</label>
              <div class="input-group">
                <div class="custom-file">
                  <form action="{{ Route('adminImportKehadiran') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="file" class="custom-file-input" id="exampleInputFile" name="file">
                    <label class="custom-file-label" for="exampleInputFile">Pilih File</label>
                </div>
                <div class="input-group-append">
                  <button class="btn btn-secondary input-group-text">Unggah</span>
                </div>
                </form>
              </div>
            </div>

            {{-- <div class="form-group">
                  <label for="exampleInputFile">Hapus Berdasarkan Kode Praktikum</label>
                  <div class="input-group">
                    <div class="custom-file">
                      <select class="custom-select" required id="kodeprak" name="kodeprak">
                        <option selected disabled>-- Pilih Alternatif --</option>
                        @foreach ($praktikums as $praktikum)
                        <option value="{{ $praktikum->kodepraktikum }}">{{ $praktikum->kodepraktikum }}</option>
            @endforeach
            </select>
          </div>
          <div class="input-group-append">
            <button class="btn btn-danger input-group-text">Hapus</span>
          </div>
          </form>
        </div>
      </div> --}}

      <!-- /.card-body -->
    </div>
    <!-- /.card -->
  </div>
  <!-- /.col -->
  </div>
  <!-- /.row -->
  </div>
  </div>
  <!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
  <div class="container-fluid px-3">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="card-tools">
              <div class="btn-group float-right">
                <a class="btn btn-default" href="{{ Route('adminCreateKehadiran') }}">Tambah Kehadiran</a>
                <a class="btn btn-danger delete_all" data-url="{{ url('kehadiransDeleteAll') }}">Hapus Terpilih</a>
                {{-- <a class="btn btn-default" href="{{ Route('adminEksportKehadiran') }}">Export Excel</a> --}}
                <button type="button" class="btn btn-default" data-card-widget="maximize"><i class="fas fa-expand"></i>
                </button>
              </div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table id="example1" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Nim</th>
                  <th>Nama</th>
                  <th>Kode Praktikum</th>
                  <th>Total Hadir</th>
                  <th>Total Tak Hadir</th>
                  <th>Kesimpulan</th>
                  <th width="15%">Aksi</th>
                  <th width="5px"><input type="checkbox" id="master"></th>
                </tr>
              </thead>
              <tbody>
                @foreach ($kehadirans as $kehadiran)

                <tr id="tr_{{$kehadiran->idkehadiran}}">
                  <td>{{ $loop->iteration }}</td>
                  <td>{{ $kehadiran->nim }}</td>
                  <td>{{ $kehadiran->nama }}</td>
                  <td>{{ $kehadiran->kodeprak }}</td>
                  <td>{{ $kehadiran->hadir }}</td>
                  <td>{{ $kehadiran->takhadir }}</td>
                  <td>{{ $kehadiran->kesimpulan }}</td>
                  <td>
                    <form action="{{ route('adminDestroyKehadiran',$kehadiran->idkehadiran) }}" method="POST">

                      <a class="btn btn-primary" href="{{ route('adminEditKehadiran',$kehadiran->idkehadiran) }}">Edit</a>

                      @csrf
                      @method('DELETE')

                      <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                  </td>
                  <td><input type="checkbox" class="sub_chk" data-id="{{$kehadiran->idkehadiran}}"></td>
                </tr>
                @endforeach
                </tfoot>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
@push('js')

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/datatables.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.colVis.min.js"></script>

<script>
  $(document).on('change', '.custom-file-input', function(event) {
    $(this).next('.custom-file-label').html(event.target.files[0].name);
  })
</script>

<script>
  $(document).ready(function() {
    var table = $('#example1').DataTable({
      buttons: [
            {
                extend: 'copy',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6 ]
                }
            },
            {
                extend: 'csv',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6 ]
                }
            },
            {
                extend: 'excel',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6 ]
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6 ]
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [ 1, 2, 3, 4, 5, 6 ]
                }
            },
        ],
        // columnDefs: [ {
        //     targets: -1,
        //     visible: false
        // } ],
      lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, "All"]
      ],
      language: {
        lengthMenu: "Tampilkan _MENU_ data per halaman",
        zeroRecords: "Tidak ada data - Maaf",
        info: "Menampilkan halaman ke- _PAGE_ dari _PAGES_",
        infoEmpty: "Tidak ada data yang tersedia",
        infoFiltered: "(Filterisasi dari _MAX_ total data)",
        search: "Cari :",
        paginate: {
          first: "Awal",
          last: "Akhir",
          next: "Selanjutnya",
          previous: "Sebelumnya"
        },
      }
    });

    table.buttons().container()
      .appendTo('#example1_wrapper .col-md-6:eq(0)');

    $('#master').on('click', function(e) {
      if ($(this).is(':checked', true)) {
        $(".sub_chk").prop('checked', true);
      } else {
        $(".sub_chk").prop('checked', false);
      }
    });

    $('.delete_all').on('click', function(e) {

      var allVals = [];
      $(".sub_chk:checked").each(function() {
        allVals.push($(this).attr('data-id'));
      });

      if (allVals.length <= 0) {
        alert("Silahkan Centang Data Terlebih Dahulu.");
      } else {

        var check = confirm("Anda Akan Menghapus Data Terpilih, Apakah Yakin?");
        if (check == true) {

          var join_selected_values = allVals.join(",");

          $.ajax({
            url: $(this).data('url'),
            type: 'DELETE',
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: 'ids=' + join_selected_values,
            success: function(data) {
              if (data['success']) {
                $(".sub_chk:checked").each(function() {
                  $(this).parents("tr").remove();
                });
                if (!alert(data['success'])) {
                  window.location.reload();
                }
                // alert(data['success']);
              } else if (data['error']) {
                alert(data['error']);
              } else {
                alert('Whoops Something went wrong!!');
              }
            },
            error: function(data) {
              alert(data.responseText);
            }
          });

          $.each(allVals, function(index, value) {
            $('table tr').filter("[data-row-id='" + value + "']").remove();
          });
        }
      }
    });

    // $('[data-toggle=confirmation]').confirmation({
    //     rootSelector: '[data-toggle=confirmation]',
    //     onConfirm: function (event, element) {
    //         element.trigger('confirm');
    //     }
    // });

    $(document).on('confirm', function(e) {
      var ele = e.target;
      e.preventDefault();

      $.ajax({
        url: ele.href,
        type: 'DELETE',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(data) {
          if (data['success']) {
            $("#" + data['tr']).slideUp("fast");
            alert(data['success']);
          } else if (data['error']) {
            alert(data['error']);
          } else {
            alert('Whoops Something went wrong!!');
          }
        },
        error: function(data) {
          alert(data.responseText);
        }
      });

      return false;
    });
  });
</script>
@endpush
@endsection