@extends('layouts.app')
@section('content')

<div class="modal fade" id="pegawaiId" tabindex="-1" role="dialog" aria-labelledby="pegawaiTitleId"
      aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Pilih Pegawai</h5>
            
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="px-3 pt-3">
            <div class="form-group">
              <input type="search" class="form-control" id="cari_pegawai" placeholder="Cari Nama / Nip..">
            </div>
          </div>
          <div class="modal-body px-3 py-0">
            <form action="{{'satker/create/admin'}}" method="POST">
                @csrf
                <input type="hidden" name="id" id="hiddenPegawaiId">
                  <table class="table table-bordered" id="list_pegawai">
                    <thead>
                      <tr>
                        <th style="width:100px;">Nip</th>
                        <th>Nama</th>
                        <th>Satker</th>
                        <th style="width:80px;" class="text-center">Aksi</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($pegawai as $u)
                      <tr>
                        <td>{{$u->nip}}</td>
                        <td>{{$u->gelar_depan}} {{$u->nama_lengkap}} {{$u->gelar_belakang}}</td>
                        <td>{{$u->satker}}</td>
                        <td><button class="btn btn-primary btn-sm btn-block btn-pegawai" class="text-center"
                            type="submit" value="{{$u->nip}}" name="btnsubmit">Pilih</button></td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="pegawaiHapus" tabindex="-1" role="dialog" aria-labelledby="pegawaiTitleId"
      aria-hidden="true">
      <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Hapus Pegawai ?</h5>
            
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{'satker/hapus/admin'}}" method="POST">
            @csrf
            <input type="hidden" id="idhapus" name="idhapus">
          <div class="modal-body">
                <p>Nip : <span id="idhapusnip"></span><br>Nama : <span id="idhapusnama"></span></p>
                <p></p>
                <p><strong>Hapus ?</strong></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            <button type="submit" class="btn btn-danger">Ya, Hapus</button>
          </div>
        </form>
        </div>
      </div>
    </div>

<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">Satker</h1>
            </div>
        </div>
    </div>
</section>

<section class="content">

    <!-- Default box -->
    <div class="card">
        <div class="card-body">
            @include('layouts.success_error')
            <table class="table table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th style="width: 250px">Nama</th>
                        <th>User</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($satker as $s)
                    <tr>
                        <td>{{$s->nama}}</td>
                        <td>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td colspan="3"><button class="btn btn-secondary btn-baru btn-sm" data-id="{{$s->id}}" style="width:350px;">Tambah User {{$s->nama}}</button></td>
                                    </tr>
                                    @foreach ($s->admin as $item)
                                    <tr>
                                        <td style="width: 200px">{{$item->nip}}</td>
                                        <td>{{$item->nama}}</td>
                                        <td style="width: 50px"><button class="btn btn-danger btn-sm btn-hapus" data-nip="{{$item->nip}}" data-nama="{{$item->nama}}" data-id="{{$item->id}}" >Hapus</button></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

</section>
@endsection

@section('js')
<script>
    $(document).ready(function() {
        $("#cari_pegawai").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#list_pegawai tbody tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

        $('.btn-baru').on('click', function(){
            let that = $(this);
            $('#hiddenPegawaiId').val(that.data('id'));
            $('#pegawaiId').modal('show');
        });
        
        $('.btn-hapus').on('click', function(){
            let that = $(this);
            $('#idhapus').val(that.data('id'));
            $('#idhapusnip').text(that.data('nip'));
            $('#idhapusnama').text(that.data('nama'));
            $('#pegawaiHapus').modal('show');
        });
    });
</script>
@endsection