@extends('dashboard.base')

@section('content')
        <div class="container-fluid">
            @include('dashboard.shared.alert')
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h5 class="m-0">Pangkat / Golongan Ruang</h5>
                      <a href="{{ route('pangkat.create') }}" class="btn btn-primary"><span class="cil-plus"></span> Tambah</a>
                    </div>
                    <div class="card-body">
                        <table id="table" class="table table-responsive-sm table-striped table-bordered">
                        <thead>
                          <tr>
                            <th style="width: 10%">No</th>
                            <th>Nama Pangkat / Golongan Ruang</th>
                            <th style="width: 20%"></th>
                          </tr>
                        </thead>
                        <tbody>
                          @foreach($pangkats as $pangkat)
                            <tr>
                              <td class="align-middle">{{ $loop->iteration }}</td>
                              <td class="align-middle">{{ $pangkat->name }}</td>
                              <td style="width: 20%">
                                <div class="d-flex justify-content-center">
                                    <a href="{{ route('pangkat.edit', $pangkat->id) }}" class="btn btn-sm btn-success mr-2"><span class="cil-pencil mr-1"></span> Edit</a>
                                    <form class="form-delete" action="{{ route('pangkat.destroy', $pangkat->id ) }}" method="POST">
                                        @method('DELETE')
                                        @csrf
                                        <button class="btn btn-sm btn-danger"><span class="cil-trash mr-1"></span> Hapus</button>
                                    </form>
                                </div>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>

@endsection

@section('javascript')
<script>
    $(document).ready(function() {
        $('#table').DataTable({
            "bLengthChange": false,
            "ordering": false
        });
    } );
    $('#table').on('click', '.form-delete', function(e){
      e.preventDefault();
      var form = $(this);
      swal({
        title: "Apakah Anda yakin?",
        icon: "warning",
        buttons: {
          cancel: {
            text: "Batal",
            visible: true
          },
          confirm: {
            text: "Hapus"
          }
        },
        dangerMode: true,
      })
      .then((yes) => {
        if (yes) {
          form.submit()
        }
      });
    });
</script>
@endsection