@extends('admin.template-admin')
@section('title',$title)
@section('head')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.css"/>

@endsection
@section('content')
<div class="container-fluid flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-lg-12 mb-4 order-0">
          
            <div class="card">
              <div class="d-flex align-items-end">
                  <div class="card-body">
                    <div class="float-end">
                      <button  class="btn btn-outline-primary  btn-sm" data-bs-toggle="modal" data-name="Tambah User" data-ket="tambah" href="#modalData">Buat {{$title}} Baru</button>
                    </div>
                    <h5 class="card-title text-primary">{{$title}}</h5>
                    <p class="mb-4">Manajemen User</p>
                  </div>
              </div>
            </div>

            
            
          </div>
    </div>
    <div class="card">
        <div class="card-body">
          @if ($errors->any())
              
              @foreach ($errors->all() as $error)
              <div class="alert alert-danger alert-dismissible" role="alert">
                {{$error}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                </button>
              </div>
              @endforeach
          @endif
          

            <div class="table-responsive">
                <table class="table" id="myTable">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Nama</th>
                      <th>Username</th>
                      <th>NIP</th>
                      <th>Pangkat</th>
                      <th>Jabatan</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($users as $no => $user)
                        <tr class="data{{$user->id}}">
                            <td>{{$no+1}}</td>
                            <td>{{$user->nama}}</td>
                            <td>{{$user->username}}</td>
                            <td>{{$user->nip}}</td>
                            <td>{{$user->pangkat}}</td>
                            <td>{{$user->jabatan}}</td>
                            <td>
                              <button  class="btn btn-primary btn-sm btn-block" data-bs-toggle="modal" data-name="Edit User" data-ket="edit" href="#modalData" data-id="{{$user->id}}" data-nama="{{$user->nama}}"  data-username="{{$user->username}}"  data-nip="{{$user->nip}}"  data-pangkat="{{$user->pangkat}}"  data-jabatan="{{$user->jabatan}}">Edit</button>
                              <a class="btn btn-danger btn-sm" href="#" onclick="hapus('{{route('admin.user.delete',['id'=>$user->id])}}', 'data{{$user->id}}', 'Hapus {{$title}} ?')" >Hapus</a>
                            </td>
                        </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
        </div>
    </div>


    <div class="modal fade" id="modalData" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h4 class="modal-title"></h4>
              </div>
              <form method="post" id="formAction" class="form-horizontal"> @csrf
              <div class="modal-body">
                  <div id="inputHidden"></div>
                  <div class="form-floating mb-3">
                    <input type="text" name="nama" class="form-control" id="nama" placeholder="Nama">
                    <label for="nama">Nama</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" name="username" class="form-control" id="username" placeholder="Username">
                    <label for="username">Username</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" name="password" class="form-control" id="password" placeholder="Password">
                    <label for="password">Password</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" name="nip" class="form-control" id="nip" placeholder="NIP">
                    <label for="nip">NIP</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" name="pangkat" class="form-control" id="pangkat" placeholder="Pangkat">
                    <label for="pangkat">Pangkat</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="text" name="jabatan" class="form-control" id="jabatan" placeholder="Jabatan">
                    <label for="jabatan">Jabatan</label>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save changes</button>
                  <button type="button" class="btn btn-link" data-bs-dismiss="modal">Close</button>
              </div>
              </form>
          </div>
      </div>
    </div>
    
</div>
@endsection

@section('script')

<script src="{{asset('js/delete.js')}}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.js"></script>
    <script>
      $(document).ready( function () {
          $('#myTable').DataTable();
      } );


      $('#modalData').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget) // Button that triggered the modal
          var name = button.data('name') 
          var ket = button.data('ket')
      
          var modal = $(this)
          modal.find('.modal-title').text(name)
      
          if (ket == 'tambah') {
              modal.find('#formAction').attr('action', "{{route('admin.user.store')}}")
              modal.find('#inputHidden').html('')
      
              modal.find('#nama').val('')
              modal.find('#username').val('')
              modal.find('#password').val('')
              modal.find('#pangkat').val('')
              modal.find('#jabatan').val('')
          }else{
              var id = button.data('id') 
      
              modal.find('#nama').val(button.data('nama'))
              modal.find('#username').val(button.data('username'))
              modal.find('#nip').val(button.data('nip'))
              modal.find('#pangkat').val(button.data('pangkat'))
              modal.find('#jabatan').val(button.data('jabatan'))

              modal.find('#inputHidden').html('<input type="hidden" name="id" value="'+id+'"><input type="hidden" name="_method" value="put">')
              modal.find('#formAction').attr('action', "{{route('admin.user.update')}}")
      
          }
      })
    </script>
@endsection