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

<!-- Modal -->
<div class="modal fade" id="createPegawai" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pegawai Baru</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{url('pegawai-non-pns/create')}}" method="POST" autocomplete="off">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label for="satker">Satker</label>
                        <select name="satker" id="satker" class="form-control">
                            @foreach($satker as $s)
                            <option value="{{$s->nama}}">{{$s->nama}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="nip">Nip</label>
                        <input type="text" name="nip" id="nip" class="form-control" placeholder="Masukan NIP" required>
                    </div>
                    <div class="form-group">
                        <label for="nama">Nama</label>
                        <input type="text" name="nama" id="nama" class="form-control" placeholder="Masukan Nama Lengkap" required>
                    </div>
                    <div class="form-group">
                        <label for="nama">Jabatan</label>
                        <input type="text" name="jabatan" id="jabatan" class="form-control" placeholder="Masukan Jabatan" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="editPegawai" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Pegawai</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{url('pegawai-non-pns/edit')}}" method="POST" autocomplete="off">
                @csrf
                <input type="hidden" name="id" id="editId">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="satker">Satker</label>
                        <select name="satker" id="editSatker" class="form-control">
                            @foreach($satker as $s)
                            <option value="{{$s->nama}}">{{$s->nama}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="nip">Nip</label>
                        <input type="text" name="nip" id="editNip" class="form-control" placeholder="Masukan NIP" required>
                    </div>
                    <div class="form-group">
                        <label for="nama">Nama</label>
                        <input type="text" name="nama" id="editNama" class="form-control" placeholder="Masukan Nama Lengkap" required>
                    </div>
                    <div class="form-group">
                        <label for="nama">Jabatan</label>
                        <input type="text" name="jabatan" id="editJabatan" class="form-control" placeholder="Masukan Jabatan" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $('#exampleModal').on('show.bs.modal', event => {
        var button = $(event.relatedTarget);
        var modal = $(this);
        // Use above variables to manipulate the DOM
        
    });
</script>
<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="float-left">Pegawai Non PNS</h1>
                <div class="d-flex justify-content-end">
                    <button data-toggle="modal" data-target="#createPegawai" class="btn btn-primary float-right">Pegawai
                        Baru</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="content">

    <!-- Default box -->
    <div class="card">
        <div class="card-body">
            @include('layouts.success_error')
            <table class="table table-striped table-bordered" id="datatable" style="width:100%">
                <thead>
                    <tr>
                        <th>Satker</th>
                        <th>Nip</th>
                        <th>Nama Lengkap</th>
                        <th>Jabatan</th>
                        <th>Opsi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pegawai as $p)
                    <tr>
                        <td>{{$p->satker}}</td>
                        <td>{{$p->nip}}</td>
                        <td>{{trim($p->nama_lengkap)}}</td>
                        <td>{{$p->jabatan}}</td>
                        <td><button class="btn btn-warning btn-edit" type="button"
                            data-id="{{$p->id}}"
                            data-satker="{{$p->satker}}"
                            data-nip="{{$p->nip}}"
                            data-nama="{{trim($p->nama_lengkap)}}"
                            data-jabatan="{{$p->jabatan}}"
                            >Edit</button></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

</section>
@endsection

@section('js')
<script>
    var t = $('#datatable').DataTable({
        "pageLength": 50,
        responsive: true
    });
    
    $(document).ready(function() {
        $('.btn-edit').on('click', function(){
            let that = $(this);
            $('#editId').val(that.data('id'));
            $('#editSatker').val(that.data('satker'));
            $('#editNip').val(that.data('nip'));
            $('#editNama').val(that.data('nama'));
            $('#editJabatan').val(that.data('jabatan'));

            $('#editPegawai').modal('show');
        });
    });
</script>
@endsection