@extends('admin.admin-template')
@section('title', $title)
@section('css')
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">Admin</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">User</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">{{$title}}</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
          
        </div>
      </div>
    </div>


    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">

                <div class="float-right">
                  <button class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#modal-irban"  data-name="Tambah Irban" data-ket="tambah">Tambah</button>
                </div>
                <b>Inspektur Pembantu Wilayah  </b><br>
                (Orang yang berkerja di instansi / pemerintahan) Bertugas untuk menindaklanjuti sebuah laporan<br><br>

                <div class="table-responsive">
                  <table class="table table-sm">
                    <thead>
                      <tr>
                        <td>No</td>
                        <td>Nama</td>
                        <td>Username</td>
                        <td>Hp</td>
                        <td>Action</td>
                      </tr>
                    </thead>
                    <tbody>

                      @foreach ($irbans as $no => $irban)
                          <tr id="irban{{$irban->id}}">
                            <td>{{$no+1}}</td>
                            <td>
                              <b>{{$irban->nama}}</b> <br>
                              {{$irban->jabatan}}
                            </td>
                            <td>{{$irban->username}}</td>
                            <td>{{$irban->hp}}</td>
                            <td>
                              <button class="btn btn-outline-info btn-sm btn-icon-text"  data-toggle="modal" data-target="#modal-irban"  data-name="Edit Irban" data-ket="edit" 
                              data-username="{{$irban->username}}" 
                              data-jabatan="{{$irban->jabatan}}" 
                              data-foto="{{asset("storage/".$irban->foto)}}" 
                              data-nama="{{$irban->nama}}" 
                              data-hp="{{$irban->hp}}" 
                              data-id="{{$irban->id}}">
                                <i class="mdi mdi-pencil btn-icon-prepend"></i>Edit
                              </button>
                              <button class="btn btn-outline-danger btn-sm btn-icon-text" onclick="hapusRemove('{{route('admin.irban.delete',['id'=> $irban->id])}}', 'Apakah kamu yakin ingin menghapus irban', 'irban{{$irban->id}}')">
                                <i class="mdi mdi-close btn-icon-prepend"></i>Hapus
                              </button>
                            </td>
                          </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
               
              </div>
            </div>
        </div>
    </div>
  </div>

  <div class="modal fade" id="modal-irban" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="post" id="formAction" enctype="multipart/form-data"> @csrf
          <div id="inputHidden"></div>
          <div class="modal-body">
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="username">Username</label>
              <div class="col-sm-9">
                <input class="form-control" id="username" type="text" name="username">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="password">Password</label>
              <div class="col-sm-9">
                <input class="form-control" id="password" type="text" name="password">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="jabatan">Jabatan</label>
              <div class="col-sm-9">
                <input class="form-control" id="jabatan" type="text" name="jabatan">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="nama">Nama</label>
              <div class="col-sm-9">
                <input class="form-control" id="nama" type="text" name="nama">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="hp">Phone</label>
              <div class="col-sm-9">
                <input class="form-control" id="hp" type="text" name="hp">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label" for="foto">Foto</label>
              <div class="col-sm-9">
                <input class="form-control" id="foto" type="file" name="foto">
                <span id="link-foto" class="text-muted">
                  
                </span>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
          </form>
      </div>
    </div>
  </div>
@endsection

@section('script')
<script src="{{asset('js/hapus.js')}}"></script>
<script>
$('#modal-irban').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.irban.store')}}")
    modal.find('#inputHidden').html('')
    modal.find('#link-foto').html('')

    modal.find('#username').val("{{old('username')}}")
    modal.find('#password').val("{{old('password')}}")
    modal.find('#jabatan').val("{{old('jabatan')}}")
    modal.find('#nama').val("{{old('nama')}}")
    modal.find('#hp').val("{{old('hp')}}")
  }else{
    var id = button.data('id') 
    var username = button.data('username') 
    var password = button.data('password') 
    var jabatan = button.data('jabatan') 
    var foto = button.data('foto') 
    var nama = button.data('nama') 
    var hp = button.data('hp') 

    modal.find('#username').val(username)
    modal.find('#password').val(password)
    modal.find('#jabatan').val(jabatan)
    modal.find('#nama').val(nama)
    modal.find('#hp').val(hp)

    modal.find('#link-foto').html('<a href="'+foto+'" target="_blank">Link Foto</a>')
    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.irban.update')}}")

  }
})
</script>
@endsection