@extends('layouts.master')

@section('title', 'Perjanjian Kinerja Perubahan')

@section('breadcrumb')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1 class="m-0">Perjanjian Kinerja Perubahan</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Perjanjian Kinerja Perubahan</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn bg-primary">
                                <input type="radio" name="status" id="option_b1" value="1" autocomplete="off" checked=""> Aktif
                            </label>
                            <label class="btn bg-primary">
                                <input type="radio" name="status" id="option_b2" value="0" autocomplete="off"> Semua
                            </label>
                        </div>
                    </div>
                    <div class="card-body">
                        <table id="table" class="table table-bordered table-hover dataTable dtr-inline" role="grid"
                            style="width: 100%;">
                            <thead>
                                <tr>
                                    <th width="30" class="text-center">No</th>
                                    <th>NIP</th>
                                    <th>Pegawai</th>
                                    <th>Jabatan</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <style>

    </style>
@endsection

@section('js')
    <script>
 function load(status) {
    table= $('#table').DataTable({
                distroy: true,
                responsive: true,
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: '{{ route('pk.pegawai') }}',
                    type: 'POST',
                    data: {status: status,_token: "{{ csrf_token() }}"},
                },
                columns: [
                    {
                        data: 'id',
                        name: 'id',
                    },
                    {
                        data: 'nip',
                        name: 'nip',
                    },
                    {
                        data: 'nama',
                        name: 'nama',
                        className: 'nama'
                    },
                    {
                        data: 'jabatan.jabatan',
                        name: 'jabatan'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'text-center'
                    }
                ],
                order: [
                    [1, 'asc']
                ],
                oLanguage: {
                    sProcessing: "Memuat Data.."
                },
                fnCreatedRow: function(row, data, index) {
                    $('td', row).eq(0).html(index + 1);
                },
            });
    }

    $('input[type=radio][name=status]').change(function() {
        table.destroy();
        load(this.value);
    });

        $(document).ready(function() {
          load('1');
        });

        $(document).on('click', '.cetakPkInduk', async function(){
            const { value: date } = await Swal.fire({
                icon: 'question',
                title:   "<h5>Tanggal Perjanjian Kinerja Perubahan</h5>",
                input: "date",
                width: '400px'
                });
                if (date) {
                var id_pegawai = $(this).attr('id_pegawai');
                var url = "{{URL::to('report/cetakPkPerubahan/')}}"+'/'+id_pegawai+'/'+date;
                window.open(url, '_blank');
                // Swal.fire("Departure date", date);
                }
                
        });
   
    </script>
@endsection