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

@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>Tugas</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ Route('adminIndexTugas') }}">Tugas</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 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | RERATA |</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('adminImportTugas') }}" 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>
              <!-- /.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('adminCreateTugas') }}">Tambah Tugas</a>
                <a class="btn btn-danger delete_all" data-url="{{ url('tugassDeleteAll') }}">Hapus Terpilih</a>
                {{-- <a class="btn btn-default" href="{{ Route('adminEksportTugas') }}">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 width="5px">No</th>
                    <th>Nim</th>
                    <th>Nama</th>
                    <th>Kode Praktikum</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th width="5%">Rerata</th>
                    <th width="15%">Aksi</th>
                    <th width="5px"><input type="checkbox" id="master"></th>
                </tr>
                </thead>
                <tbody>
                    @foreach ($tugass as $tugas)

                  <tr id="tr_{{$tugas->idtugas}}">
                      <td>{{ $loop->iteration }}</td>
                      <td>{{ $tugas->nim }}</td>
                      <td>{{ $tugas->nama }}</td>
                      <td>{{ $tugas->kodeprak }}</td>
                      <td>{{ $tugas->satu }}</td>
                      <td>{{ $tugas->dua }}</td>
                      <td>{{ $tugas->tiga }}</td>
                      <td>{{ $tugas->empat }}</td>
                      <td>{{ $tugas->lima }}</td>
                      <td>{{ $tugas->enam }}</td>
                      <td>{{ $tugas->tujuh }}</td>
                      <td>{{ $tugas->delapan }}</td>
                      <td>{{ $tugas->sembilan }}</td>
                      <td>{{ $tugas->sepuluh }}</td>
                      <td>{{ number_format($tugas->rerata,2) }}</td>
                      <td>
                          <form action="{{ route('adminDestroyTugas',$tugas->idtugas) }}" method="POST">
                              
                              <a class="btn btn-primary" href="{{ route('adminEditTugas',$tugas->idtugas) }}">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="{{$tugas->idtugas}}"></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, 7, 8, 9, 10, 11, 12, 13, 14]
          }
        },
        {
          extend: 'csv',
          exportOptions: {
            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
          }
        },
        {
          extend: 'excel',
          exportOptions: {
            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
          }
        },
        {
          extend: 'pdf',
          exportOptions: {
            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
          }
        },
        {
          extend: 'print',
          exportOptions: {
            columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
          }
        },
      ],
      // 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