@extends('backoffice.template.app')
@section('content')
  <h4 class="fw-bold py-3 mb-2 d-flex justify-content-between">
    <span>
      <span class="text-muted fw-light">Super Admin /</span> Kelola User
    </span>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-create">Tambah User</button>

  </h4>
  <div class="card py-5 px-4">
    <table class="table table-striped" id="table-user">
      <thead>
        <tr>
          <th>No</th>
          <th>Username</th>
          <th>Nama</th>
          <th>No KTP</th>
          <th>Alamat</th>
          <th>NO Hp</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($users as $i => $user)
          <tr>
            <td>{{ $i + 1 }}</td>
            <td>{{ $user->username }}</td>
            <td>{{ $user->nama }}</td>
            <td>{{ $user->no_ktp }}</td>
            <td>{{ $user->alamat }}</td>
            <td>{{ $user->no_hp }}</td>
            <td style="white-space: nowrap;">
              <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#modal-edit"
                onclick="handleEdit({{ $user }}, '{{ route('backoffice.user.management.update', $user->no_ktp) }}' )">Edit</button>
              <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modal-delete"
                onclick="handleDelete('{{ route('backoffice.user.management.delete', $user->no_ktp) }}')">Delete</button>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>

  {{-- MODAL CREATE --}}
  <div class="modal fade" id="modal-create" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Admin</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-create" action="{{ route('backoffice.user.management') }}" method="POST">
            @csrf
            <div class="mb-3">
              <label for="name-create" class="form-label">Nama</label>
              <input type="text" class="form-control" id="name-create" aria-describedby="emailHelp" name="nama">
            </div>
            <div class="mb-3">
              <label for="username-create" class="form-label">Username</label>
              <input type="text" class="form-control" id="username-create" aria-describedby="emailHelp"
                name="username">
            </div>
            <div class="mb-3">
              <label for="alamat-create" class="form-label">Alamat</label>
              <input type="text" class="form-control" id="alamat-create" aria-describedby="emailHelp" name="alamat">
            </div>
            <div class="mb-3">
              <label for="no_hp-create " class="form-label">No. Telepon</label>
              <input type="number" class="form-control" id="no_hp-create" name="no_hp">
            </div>
            <div class="mb-3">
              <label for="no_ktp-create " class="form-label">NO KTP</label>
              <input type="number" class="form-control" id="no_ktp-create" name="no_ktp">
            </div>
            <div class="mb-3">
              <label for="password-create" class="form-label">Password</label>
              <input type="password" class="form-control" id="password-create">
            </div>
            <div class="mb-3">
              <div class="form-label">Role</div>
              <select class="form-select" aria-label="Default select example" name="role_id">
                <option selected value="" disabled>Pilih Role</option>
                @foreach ($roles as $role)
                  <option value="{{ $role->id }}">{{ $role->nama }}</option>
                @endforeach
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-create" class="btn btn-success">Tambah User</button>
        </div>
      </div>
    </div>
  </div>
  {{-- MODAL EDIT --}}
  <div class="modal fade" id="modal-edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Admin</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-edit" method="POST">
            @csrf
            @method('put')
            <div class="mb-3">
              <label for="nama-edit" class="form-label">Nama</label>
              <input type="text" class="form-control" id="nama-edit" aria-describedby="emailHelp" name="nama">
            </div>
            <div class="mb-3">
              <label for="username-edit" class="form-label">Username</label>
              <input type="text" class="form-control" id="username-edit" aria-describedby="emailHelp"
                name="username">
            </div>
            <div class="mb-3">
              <label for="alamat-edit" class="form-label">Alamat</label>
              <input type="text" class="form-control" id="alamat-edit" aria-describedby="emailHelp"
                name="alamat">
            </div>
            <div class="mb-3">
              <label for="no_hp-edit " class="form-label">No. Telepon</label>
              <input type="number" class="form-control" id="no_hp-edit" name="no_hp">
            </div>
            <div class="mb-3">
              <label for="no_ktp-edit " class="form-label">NO KTP</label>
              <input type="number" class="form-control" id="no_ktp-edit" name="no_ktp">
            </div>
            <div class="mb-3">
              <label for="password-edit" class="form-label">Password</label>
              <input type="password" class="form-control" id="password-edit">
            </div>
            <div class="mb-3">
              <div class="form-label">Role</div>
              <select class="form-select" id="role_id-edit" aria-label="Default select example" name="role_id">
                <option selected value="" disabled>Pilih Role</option>
                @foreach ($roles as $role)
                  <option value="{{ $role->id }}">{{ $role->nama }}</option>
                @endforeach
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-edit" class="btn btn-success">Tambah User</button>
        </div>
      </div>
    </div>
  </div>
  {{-- MODAL DELETE --}}
  <div class="modal fade" id="modal-delete" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Hapus User</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form method="POST" id="form-delete">
            @csrf
            @method('delete')
            Apa Anda Yakin Menghapus Admin Ini ?
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="form-delete" class="btn btn-danger">Hapus User</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('script')
  <script>
    $(document).ready(function() {
      $('#table-user').DataTable();
    });

    function handleEdit(user, url) {
      $('#nama-edit').val(user.nama);
      $('#username-edit').val(user.username);
      $('#alamat-edit').val(user.alamat);
      $('#no_hp-edit').val(user.no_hp);
      $('#no_ktp-edit').val(user.no_ktp);
      $('#role_id-edit').val(user.role_id);
      $('#form-edit').attr('action', url);
    }

    function handleDelete(url) {
      $('#form-delete').attr('action', url);
    }
  </script>
@endsection