@extends('layouts.index')
@section('title')
Master Pegawai
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/jquery.steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
<link
      href="../../assets/libs/jquery-steps/jquery.steps.css"
      rel="stylesheet"
    />
    <link href="../../assets/libs/jquery-steps/steps.css" rel="stylesheet" />
<style>
    .l2 {
        padding-left: 1em;
    }
    .l3 {
        padding-left: 2em;
    }
    .l4 {
        padding-left: 3em;
    }
    .l5 {
        padding-left: 4em;
    }
    .l6 {
        padding-left: 5em;
    }
    .l7 {
        padding-left: 6em;
    }
    .l8 {
        padding-left: 7em;
    }
    .l9 {
        padding-left: 8em;
    }
    .l10 {
        padding-left: 9em;
    }

    label.error {
            color: #F94687 !important;
            font-size: 13px !important;
            font-size: .875rem !important;
            font-weight: 400 !important;
            line-height: 1.5 !important;
            margin-top: 5px !important;
            padding: 0 !important;
            margin-left: 0px !important;
        }
    
        input.error {
            color: #F94687 !important;
            border: 1px solid #F94687 !important;
            background: none !important;
        }

        select.error {
            color: #F94687 !important;
            border: 1px solid #F94687 !important;
            background: none !important;
        }
</style>


@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="{{ route('master-pegawai.index') }}">Employee Masterlist</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Add
                    </li>

                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Add new Employee</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<!-- Container fluid  -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->

    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="mb-0">Add new Employee</h4>
                </div>
                <div class="card-body wizard-content">
                    <h6 class="card-subtitle mb-3"></h6>
                    <form action="{{route('master-pegawai.store')}}" method="POST" id="form_kepegawaian" enctype="multipart/form-data" class="validation-wizard wizard-circle">
                        @csrf
                        <!-- Step 1 -->
                        <h6>Employee Status</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="firstName1">Employee Status :</label>
                                        <select class="form-select required" name="status_pegawai" id="statuspegawai" onclick="detailStatus(this.value)">
                                            <option value="">-- Select --</option>
                                            @foreach($ref_status_pegawai as $data)
                                            <option value="{{ $data->id }}">{{ $data->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <input type="hidden" name="repeated" id="repeated" value="0">
                                    <div class="mb-3" id="long_working_time" style="display: none">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label for="">Start Date</label>
                                                <input type="date" class="form-control" name="start_date">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="">End Date</label>
                                                <input type="date" class="form-control" name="end_date">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- Step 2 -->
                        <h6>Profile</h6>
                        <section>

                            <!-- start biodata Non-PNS -->
                            <div class="row">

                                <div class="col-12 col-md-12 mt-3 mb-2" id="biodatapns" style="display: none;">
                                    <h4 class="mb-1 text-primary text-center"><i data-feather="clipboard"></i> Profile PNS</h4>
                                    <hr>

                                    <div class="row border-bottom ">
                                        <div class="col-md-10">
                                            <div class="p-3 ">
                                                <div class="input-group searchbar">
                                                    <span class="input-group-text" id="search"><i class="ri-search-line text-muted"></i></span>
                                                    <input type="text" id="cari_nip" class="form-control" placeholder="Cari berdasarkan NIP" aria-describedby="search" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2 p-3">
                                            <button type="button" class="justify-content-center
                                            w-100
                                            btn btn-rounded btn-primary
                                            d-flex
                                            align-items-center" onclick="cariNip()" id="caridatapns">Cari</button>
                                        </div>
                                    </div>

                                    <!-- Gagal Cari PNS -->
                                    <div class="row" id="pencariandatapnsGagal" style="display: none;">
                                        <div class="col-md-12 p-3">
                                            <div class="alert customize-alert alert-dismissible text-danger alert-light-danger fade show" role="alert">
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                <div class="d-flex align-items-center font-weight-medium">
                                                    <i data-feather="info" class="text-danger fill-white feather-sm me-2"></i>
                                                    Data Gagal Ditemukan
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Biodata Hasil data -->
                                    <div class="row" id="pencariandatapns" style="display: none;">
                                        <div class="col-md-12 p-3">
                                            <div class="alert customize-alert alert-dismissible text-success alert-light-success fade show" role="alert">
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                                <div class="d-flex align-items-center font-weight-medium">
                                                    <i data-feather="info" class="text-success fill-white feather-sm me-2"></i>
                                                    Data Berhasil Ditemukan
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                        <div class="col-12 col-sm-12 mt-3">
                                            <h5 class="mb-1"><i class="feather icon-user mr-25"></i>Data PNS</h5>
                                            <div class="row">
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>NIP Baru<span class="text-danger">*</span></label>
                                                            <input type="text" id="nip_baru" name="nip_baru" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>NIP Lama</label>
                                                            <input type="text" id="nip_lama" name="nip_lama" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Kartu Pegawai Elektronik </label>
                                                            <input type="text" id="kpe" name="kpe" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Kartu Pegawai</label>
                                                            <input type="text" id="kartu_pegawai" name="kartu_pegawai" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Jenis Pegawai <span class="text-danger">*</span></label>
                                                            <select class="form-select" id="id_jenis_pegawai" name="id_jenis_pegawai">
                                                                <option value="">Pilih</option>
                                                                
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Kedudukan Hukum <span class="text-danger">*</span></label>
                                                            <select class="form-select" id="id_kedudukan_hukum" name="id_kedudukan_hukum">
                                                                <option value="">Pilih</option>
                                                               
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Jenis Pengadaan </label>
                                                            <select class="form-select " id="id_jenis_pengadaan" name="id_jenis_pengadaan">
                                                                <option value="">Pilih</option>
                                                               
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Status <span class="text-danger">*</span></label>
                                                            <ul class="list-unstyled mb-0 ">
                                                                <li class="d-inline-block mr-2">
                                                                    <fieldset>
                                                                        <div class="vs-radio-con">
                                                                            <input type="radio" name="status_cpns_pns" id="cpns" value="C">
                                                                            <span class="vs-radio">
                                                                                <span class="vs-radio--border"></span>
                                                                                <span class="vs-radio--circle"></span>
                                                                            </span>
                                                                            <span class="">CPNS </span>
                                                                        </div>
                                                                    </fieldset>
                                                                </li>
                                                                <li class="d-inline-block mr-2">
                                                                    <fieldset>
                                                                        <div class="vs-radio-con">
                                                                            <input type="radio" name="status_cpns_pns" id="pns" value="P">
                                                                            <span class="vs-radio">
                                                                                <span class="vs-radio--border"></span>
                                                                                <span class="vs-radio--circle"></span>
                                                                            </span>
                                                                            <span class="">PNS</span>
                                                                        </div>
                                                                    </fieldset>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12  mt-3">
                                                    <div class="divider divider-primary">
                                                        <div class="divider-text">CPNS</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> No. SK CPNS <span class="text-danger">*</span></label>
                                                            <input type="text" id="no_sk_cpns" name="no_sk_cpns" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. SK CPNS <span class="text-danger">*</span></label>
                                                            <input type="date" id="tanggal_sk_cpns" name="tanggal_sk_cpns" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>TMT CPNS <span class="text-danger">*</span></label>
                                                            <input type="date" name="tmt_cpns" id="tmt_cpns" value="" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>No. Nota Persetujuan CPNS</label>
                                                            <input type="text" id="no_np_cpns" name="no_np_cpns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. Nota Persetujuan CPNS</label>
                                                            <input type="date" id="tanggal_np_cpns" name="tanggal_np_cpns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Spesimen Pejabat CPNS</label>
                                                            <input type="text" id="spesimen_pejabat_cpns" name="spesimen_pejabat_cpns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Spesimen Pengadaan</label>
                                                            <input type="text" id="spesimen_pengadaan" name="spesimen_pengadaan" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12  mt-3">
                                                    <div class="divider divider-primary">
                                                        <div class="divider-text">PNS</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> No. SK PNS</label>
                                                            <input type="text" id="no_sk_pns" name="no_sk_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. SK PNS</label>
                                                            <input type="date" id="tanggal_sk_pns" name="tanggal_sk_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>TMT PNS</label>
                                                            <input type="date" id="tmt_pns" name="tmt_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>No. Nota Persetujuan PNS </label>
                                                            <input type="text" id="no_np_pns" name="no_np_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. Nota Persetujuan PNS </label>
                                                            <input type="date" id="tanggal_np_pns" name="tanggal_np_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Spesimen NIP </label>
                                                            <input type="text" id="spesimen_nip" name="spesimen_nip" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. Penetapan NIP </label>
                                                            <input type="date" id="tanggal_penetapan_nip" name="tanggal_penetapan_nip" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>No. Surat Dokter</label>
                                                            <input type="text" id="no_surat_dokter" name="no_surat_dokter" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. Surat Dokter</label>
                                                            <input type="date" id="tanggal_surat_dokter" name="tanggal_surat_dokter" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> No. STTPL </label>
                                                            <input type="text" id="no_sttpl" name="no_sttpl" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. STTPL</label>
                                                            <input type="date" id="tanggal_sttpl" name="tanggal_sttpl" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> No. SPMT </label>
                                                            <input type="text" id="no_spmt" name="no_spmt" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>Tgl. Tugas</label>
                                                            <input type="date" id="tanggal_tugas" name="tanggal_tugas" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> No. Pertimbangan Teknis CPNS PNS </label>
                                                            <input type="text" id="no_pt_cpns_pns" name="no_pt_cpns_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label> Tgl Pertimbangan Teknis CPNS PNS </label>
                                                            <input type="date" id="tanggal_pt_cpns_pns" name="tanggal_pt_cpns_pns" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6  mt-3">
                                                    <div class="form-group">
                                                        <div class="controls">
                                                            <label>No. ASKES </label>
                                                            <input type="text" id="no_askes" name="no_askes" value="" class="form-control ">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-12 mt-3">
                                                    <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                                    <div class="row" style="margin-top: 32px">
                                                        <div class="col-md-12">
                                                            <div class="divider divider-primary">
                                                                <div class="divider-text">Pangkat dan Golongan</div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Golongan Awal </label>
                                                                    <select class="form-select" id="id_golongan_awal" name="id_golongan_awal">
                                                                        <option value="">Pilih</option>
                                                                       
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Golongan Akhir </label>
                                                                    <select class="form-select" id="id_golongan_akhir" name="id_golongan_akhir">
                                                                        <option value="">Pilih</option>
                                                                        
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>TMT. Golongan </label>
                                                                    <input type="date" id="tmt_golongan" name="tmt_golongan" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Spesimen Kenaikan Pangkat </label>
                                                                    <input type="text" id="spesimen_kenaikan_pangkat" name="spesimen_kenaikan_pangkat" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Eselon</label>
                                                                    <select class="form-select" id="id_eselon" name="id_eselon">
                                                                        <option value="">Pilih</option>
                                                                        
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>TMT. Eselon </label>
                                                                    <input type="date" id="tmt_eselon" name="tmt_eselon" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Gaji Pokok</label>
                                                                    <input type="text" id="gaji_pokok" name="gaji_pokok" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>TMT Melaksakan Tugas</label>
                                                                    <input type="date" id="tmt_melaksanakan_tugas" name="tmt_melaksanakan_tugas" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12 mt-3 mb-2">
                                        <div class="col-12 col-sm-12 mt-3">
                                            <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                            <div class="row" style="margin-top: 32px">

                                                <div class="col-md-12">
                                                    <div class="divider divider-primary">
                                                        <div class="divider-text">Personal Identity</div>
                                                    </div>
                                                </div>
                                                    <div class="row">
                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>KTP Number / NIK </label>
                                                                    <input type="text" id="nik" name="nik" value="" class="form-control" placeholder="Enter KTP Number">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Employee Number / NIP </label>
                                                                    <input type="text" id="nip" name="nip" value="" class="form-control" placeholder="Enter Employee Number">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Full Name <span class="text-danger">*</span></label>
                                                                    <input type="text" id="nama_lengkap" name="nama_lengkap" value="" class="form-control required" placeholder="Enter Full Name">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Gender</label>
                                                                    <select class="form-select" id="jenis_kelamin" name="jenis_kelamin">
                                                                        <option value="">-- Select --</option>
                                                                        <option value="L">Male</option>
                                                                        <option value="P">Female</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label> Religion</label>
                                                                    <select class="form-select" id="id_agama" name="id_agama">
                                                                        <option value="">-- Select --</option>
                                                                        <option value="1">Islam</option>
                                                                        <option value="2">Kristen</option>
                                                                        <option value="3">Katholik</option>
                                                                        <option value="4">Hindu</option>
                                                                        <option value="5">Budha</option>
                                                                        <option value="6">Konghucu</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Date of Birth</label>
                                                                    <input type="date" id="tanggal_lahir" name="tanggal_lahir" value="" class="form-control">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label><i class="feather icon-map-pin"></i> Place of Birth</label>
                                                                    <input type="text" name="tempat_lahir" id="tempat_lahir" class="form-control" placeholder="Enter Place of Birth">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Full Address</label>
                                                                    <textarea name="alamat" id="alamat" class="form-control" placeholder="Enter Full Address"></textarea>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Postal Code</label>
                                                                    <input type="text" id="kode_pos" name="kode_pos" value="" class="form-control" placeholder="Enter Postal Code">
                                                                </div>
                                                            </div>
                                                        </div>


                                                        {{-- <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>No. Akta Kelahiran</label>
                                                                    <input type="text" id="no_akta_kelahiran" name="no_akta_kelahiran" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>No. Akta Kematian</label>
                                                                    <input type="text" id="no_akta_kematian" name="no_akta_kematian" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Tgl. Kematian</label>
                                                                    <input type="date" id="tanggal_kematian" name="tanggal_kematian" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div> --}}


                                                        <div class="col-md-12 mt-3">
                                                            <div class="divider divider-primary">
                                                                <div class="divider-text">Education</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Degree</label>
                                                                    <input type="text" id="gelar_belakang" name="gelar_belakang" value="" class="form-control" placeholder="Enter Degree">
                                                                </div>
                                                            </div>

                                                        </div>
                                                        {{-- <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Karis / Karsu</label>
                                                                    <input type="text" id="karis_karsu" name="karis_karsu" value="" class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div> --}}
                                                    </div>
                                                        <div class="divider divider-primary mt-3">
                                                            <div class="divider-text">Contact</div>
                                                        </div>
                                                    <div class="row">
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Phone Number</label>
                                                                    <input type="text" id="no_hp" name="no_hp" value="" class="form-control" placeholder="Enter No hp">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Telp Number</label>
                                                                    <input type="text" id="no_telepon" name="no_telepon" value="" class="form-control" placeholder="Enter No telp">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>E-mail <sup class="text-danger" title="Wajib diisi">*</sup> </label>
                                                                    <input type="text" id="email" name="email" value="" class="form-control required" placeholder="Enter Email">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-12 col-md-12 mt-3">
                                                            <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                                            <div class="row" style="margin-top: 32px">
                                                                

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>NPWP</label>
                                                                            <input type="text" id="npwp" name="npwp" value="" class="form-control" placeholder="Enter NPWP">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>NPWP Address</label>
                                                                            <textarea name="address_npwp" cols="30" rows="5" class="form-control" placeholder="NPWP Address"></textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="col-md-4 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Bank Name</label>
                                                                            <input type="text" id="bank_name" name="bank_name" value="" class="form-control" placeholder="Bank Name">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Account Name</label>
                                                                            <input type="text" id="bank_account_name" name="bank_account_name" value="" class="form-control" placeholder="Bank Account Name">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Account Number</label>
                                                                            <input type="text" id="bank_account_number" name="bank_account_number" value="" class="form-control" placeholder="Bank Account Number">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="divider divider-primary">
                                                                        <div class="divider-text">Insurance</div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>BPJS Number</label>
                                                                            <input type="text" id="no_bpjs" name="no_bpjs" value="" class="form-control" placeholder="Enter No BPJS">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="divider divider-primary">
                                                                        <div class="divider-text">Emergency Contact</div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Name</label>
                                                                            <input type="text" id="emergency_name" name="emergency_name" value="" class="form-control" placeholder="Enter Contact Name">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Relationship</label>
                                                                            <input type="text" id="emergency_relationship" name="emergency_relationship" value="" class="form-control" placeholder="Enter Contact Relationship">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Contact Number</label>
                                                                            <input type="text" id="emergency_contact_number" name="emergency_contact_number" value="" class="form-control" placeholder="Enter Contact Number">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="divider divider-primary">
                                                                        <div class="divider-text">Social Media</div>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Facebook</label>
                                                                            <input type="text" id="facebook" name="facebook" value="" class="form-control" placeholder="Enter Username Facebook">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Twitter </label>
                                                                            <input type="text" id="twitter" name="twitter" value="" class="form-control" placeholder="Enter Username Twitter">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Instagram </label>
                                                                            <input type="text" id="instagram" name="instagram" value="" class="form-control" placeholder="Enter Username Instagram">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                {{-- <div class="col-md-12 mt-3">
                                                                    <div class="divider divider-primary">
                                                                        <div class="divider-text">Foto</div>
                                                                    </div>
                                                                </div> --}}
                                                                {{-- <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>File Foto</label>
                                                                            <div id="preview" style="display: none">
                                                                                <img id="imgshow_tambah" src="#" width="200" height="200"
                                                                                style="object-fit: cover;border-radius: 20px;">
                                                                                <br><br>
                                                                            </div>
                                                                            <input type="file" class="form-control" name="foto" id="foto">

                                                                            <small class="">* jpg,jpeg,png | Max: 10 Mb</small>
                                                                        </div>
                                                                    </div>
                                                                </div> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </section>
                        <!-- Step 3 -->
                        <h6>Position</h6>
                        <section>
                            <div class="row">
                                <div class="col-md-12">

                                    <div class="mb-3">
                                        <label for="id_jabatan"> Position <sup class="text-danger" title="Wajib diisi">*</sup></label>
                                        <select class="select1 form-control custom-select required" style="width: 100%" id="id_jabatan" name="id_jabatan">
                                            @foreach ($ref_unit_kerja as $item)
                                                <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                @if ($item->children)
                                                    @foreach ($item->children as $item)
                                                        <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                        @if ($item->children)
                                                            @foreach ($item->children as $item)
                                                                <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                @if ($item->children)
                                                                    @foreach ($item->children as $item)
                                                                        <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                        @if ($item->children)
                                                                            @foreach ($item->children as $item)
                                                                                <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                                @if ($item->children)
                                                                                    @foreach ($item->children as $item)
                                                                                        <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                                        @if ($item->children)
                                                                                            @foreach ($item->children as $item)
                                                                                                <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                                                @if ($item->children)
                                                                                                    @foreach ($item->children as $item)
                                                                                                        <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                                                        @if ($item->children)
                                                                                                            @foreach ($item->children as $item)
                                                                                                                <option class="l{{$item->level}}" value="{{$item->id}}">{{$item->nama}}</option>
                                                                                                            @endforeach
                                                                                                        @endif
                                                                                                    @endforeach
                                                                                                @endif
                                                                                            @endforeach
                                                                                        @endif
                                                                                    @endforeach
                                                                                @endif
                                                                            @endforeach
                                                                        @endif
                                                                    @endforeach
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3 mt-3" id="ref_jabatan">
                                        <label for="id_unit_kerja">Division <sup class="text-danger"
                                                title="Wajib diisi">*</sup></label>
                                        <select class="form-select required" id="id_unit_kerja" name="id_unit_kerja">
                                            @foreach ($ref_jabatan as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->nama }}</option>
                                            @endforeach
                                        </select>
                                        <label id="error_id_unit_kerja" class="error" style="display: none;"></label>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <!-- Step 4 -->
                    </form>
                </div>
            </div>
        </div>


    </div>




    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>

@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

<script src="{{ asset('back') }}/libs/jquery-steps/build/jquery.steps.min.js"></script>
<script src="{{ asset('back') }}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/additional-methods.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
<script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>

<script>
    
    var form = $(".validation-wizard").show();
    $(".validation-wizard").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "fade",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit",
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                return (
                    currentIndex > newIndex ||
                    (!(3 === newIndex && Number($("#age-2").val()) < 18) &&
                        (currentIndex < newIndex &&
                            (form.find(".body:eq(" + newIndex + ") label.error").remove(),
                                form
                                .find(".body:eq(" + newIndex + ") .error")
                                .removeClass("error")),
                            (form.validate().settings.ignore = ":disabled,:hidden"),
                            form.valid()))
                );
            },
            onFinishing: function(event, currentIndex) {
                return (form.validate().settings.ignore = ":disabled"), form.valid();
            },
            onFinished: function(event, currentIndex) {
                $('#form_kepegawaian').submit();
                // Swal.fire(
                //     "Form Submitted!",
                //     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
                // );
            },
        }),
        $(".validation-wizard").validate({
            ignore: "input[type=hidden]",
            rules: {
                nama_lengkap : {
                    required: true,
				},
                // id_agama : {
                //     required: true,
				// },
                // tempat_lahir : {
                //     required: true,
				// },
                // tanggal_lahir : {
                //     required: true,
				// },
                // jenis_kelamin : {
                //     required: true
                // },
                // alamat : {
                //     required: true,
				// },
                status_pegawai : {
                    required: true,
				},
                // nik : {
				// 	minlength : 16,
				// 	maxlength : 16
				// },
                foto :  {
                    required: false,
                    extension: "jpg|jpeg|png",
                    accept: "image/*",
                    maxfiles: 1000000
                },
                email : {
                    required: true,
                    email: true
                },
                // password : {
				// 	minlength : 5
				// },
				// password_confirm : {
				// 	minlength : 5,
				// 	equalTo : "#password"
				// }
            },
            messages: {
                nama_lengkap: {
                    required: "Full Name is required"
                },
                // id_agama: {
                //     required: "Agama harus diisi"
                // },
                // jenis_kelamin: {
                //     required: "Jenis Kelamin harus diisi"
                // },
                // tempat_lahir: {
                //     required: "Tempat Lahir harus diisi"
                // },
                // tanggal_lahir: {
                //     required: "Tangal Lahir harus diisi"
                // },
                // alamat: {
                //     required: "Alamat harus diisi"
                // },
                status_pegawai: {
                    required: "Employee Status is required"
                },
                // nik: {
                //     required: "Nik harus diisi",
                //     minlength: "Nik yang diInput minimal harus 16 karakter!",
                //     maxlength: "Nik tidak boleh lebih dari 16 karakter",
                // },
                foto: {
                    extension: "Foto harus berupa : jpg, jpeg, png",
                    accept: "Hanya gambar yang bisa di upload!",
                    maxfiles: "Ukuran foto tidak boleh lebih dari 1 gb!"
                },
                email: {
                    required: "Email is required",
                    email: "Email not valid",
                },
                // password: {
                //     required: "Password harus diisi",
                //     minlength: "Password yang diInput minimal harus 16 karakter!"
                // },
                // password_confirm: {
                //     required: "Konfirmasi Password harus diisi",
                //     minlength: "Konfirmasi Password yang diInput minimal harus 16 karakter!",
                //     equalTo: "Konfirmasi Password tidak sesuai",
                // },
            },
        });
</script>


<script>
    $(document).ready(function() {
        $('#statuspegawai').on('change', function() {
            if (this.value == 6) {
                $("#formnip").show();
                $("#biodatapns").show();
                $("#biodatanonpns").hide();
                $('#nip_baru').addClass('required');
                $('#id_jenis_pegawai').addClass('required');
                $('#id_kedudukan_hukum').addClass('required');
                $('#no_sk_cpns').addClass('required');
                $('#tanggal_sk_cpns').addClass('required');
                $('#tmt_cpns').addClass('required');
            } else {
                $("#formnip").hide();
                $("#biodatapns").hide();
                $("#biodatanonpns").show();
                $('#nip_baru').removeClass('required');
                $('#id_jenis_pegawai').removeClass('required');
                $('#id_kedudukan_hukum').removeClass('required');
                $('#no_sk_cpns').removeClass('required');
                $('#tanggal_sk_cpns').removeClass('required');
                $('#tmt_cpns').removeClass('required');
            }
        });
    });
    async function cariNip() {
        var label_cari = document.getElementById('caridatapns')
        label_cari.innerHTML = "Mencari <i class='fa-li fa fa-spinner fa-spin'></i>";
        label_cari.disabled = true;
        var nip = document.getElementById('cari_nip').value;
        var url = "{{route('pegawai.cari-nip')}}";
        const response = await fetch(url, {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "_token": "{{csrf_token()}}",
                "nip": nip
            })
        }).then(response => response.json()) 
        .then(function(json){
            var res = json.data;
            if (res.error !== true) {
                document.getElementById('pencariandatapns').style.display = 'block';
                document.getElementById('pencariandatapnsGagal').style.display = 'none';
                //Data PNS
                document.getElementById('nip_baru').value = res.pegawai.nip_baru;
                document.getElementById('nip_lama').value = res.pegawai.nip_lama;
                document.getElementById('id_jenis_pegawai').value = res.pegawai.id_jenis_pegawai;
                document.getElementById('kpe').value = res.pegawai.kpe;
                document.getElementById('kartu_pegawai').value = res.pegawai.kartu_pegawai;
                document.getElementById('id_kedudukan_hukum').value = res.pegawai.id_kedudukan_hukum;
                document.getElementById('id_jenis_pengadaan').value = res.pegawai.id_jenis_pengadaan;
                if (res.pegawai.status_cpns_pns == "P") {
                    document.getElementById('cpns').checked = false;
                    document.getElementById('pns').checked = true;
                }else{
                    document.getElementById('cpns').checked = true;
                    document.getElementById('pns').checked = false;
                }
                //CPNS
                document.getElementById('no_sk_cpns').value = res.pegawai.no_sk_cpns;
                document.getElementById('tanggal_sk_cpns').value = res.pegawai.tanggal_sk_cpns;
                document.getElementById('tmt_cpns').value = res.pegawai.tmt_cpns;
                document.getElementById('no_np_cpns').value = res.pegawai.no_np_cpns;
                document.getElementById('tanggal_np_cpns').value = res.pegawai.tanggal_np_cpns;
                document.getElementById('spesimen_pejabat_cpns').value = res.pegawai.spesimen_pejabat_cpns;
                document.getElementById('spesimen_pengadaan').value = res.pegawai.spesimen_pengadaan;
                //PNS
                document.getElementById('no_sk_pns').value = res.pegawai.no_sk_pns;
                document.getElementById('tanggal_sk_pns').value = res.pegawai.tanggal_sk_pns;
                document.getElementById('tmt_pns').value = res.pegawai.tmt_pns;
                document.getElementById('no_np_pns').value = res.pegawai.no_np_pns;
                document.getElementById('tanggal_np_pns').value = res.pegawai.tanggal_np_pns;
                document.getElementById('spesimen_nip').value = res.pegawai.spesimen_nip;
                document.getElementById('tanggal_penetapan_nip').value = res.pegawai.tanggal_penetapan_nip;
                document.getElementById('no_surat_dokter').value = res.pegawai.no_surat_dokter;
                document.getElementById('tanggal_surat_dokter').value = res.pegawai.tanggal_surat_dokter;
                document.getElementById('no_sttpl').value = res.pegawai.no_sttpl;
                document.getElementById('tanggal_sttpl').value = res.pegawai.tanggal_sttpl;
                document.getElementById('no_spmt').value = res.pegawai.no_spmt;
                document.getElementById('tanggal_tugas').value = res.pegawai.tanggal_tugas;
                document.getElementById('no_pt_cpns_pns').value = res.pegawai.no_pt_cpns_pns;
                document.getElementById('tanggal_pt_cpns_pns').value = res.pegawai.tanggal_pt_cpns_pns;
                document.getElementById('no_askes').value = res.pegawai.no_askes;
                //Pangkat dan Golongan
                document.getElementById('id_golongan_awal').value = res.pegawai.id_golongan_awal;
                document.getElementById('id_golongan_akhir').value = res.pegawai.id_golongan_akhir;
                document.getElementById('tmt_golongan').value = res.pegawai.tmt_golongan;
                document.getElementById('spesimen_kenaikan_pangkat').value = res.pegawai.spesimen_kenaikan_pangkat;
                document.getElementById('id_eselon').value = res.pegawai.id_eselon;
                document.getElementById('tmt_eselon').value = res.pegawai.tmt_eselon;
                document.getElementById('gaji_pokok').value = res.pegawai.gaji_pokok;
                document.getElementById('tmt_melaksanakan_tugas').value = res.pegawai.tmt_melaksanakan_tugas;
            }else{
                document.getElementById('pencariandatapns').style.display = 'none';
                document.getElementById('pencariandatapnsGagal').style.display = 'block';
            }
            label_cari.textContent = "Cari";
            label_cari.disabled = false;
        })
        .catch(err => console.log('Request Failed', err));
    }
    $('document').ready(function() {
        $("#foto").change(function() {
            $('#preview').show();
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imgshow_tambah').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    });
    $('.select1').select2({
        templateResult: function (data) {    
            if (!data.element) {
            return data.text;
            }
            var $element = $(data.element);
            var $wrapper = $('<span></span>');
            $wrapper.addClass($element[0].className);
            $wrapper.text(data.text);
            return $wrapper;
        }
    });
    async function showJabatan() {
        var jenis = document.getElementById('jenis_jabatan').value;
        var url = "{{route('pegawai.cari-jenis-jabatan')}}";
        const response = await fetch(url, {
            method: 'POST',
            headers: {
            'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "_token": "{{csrf_token()}}",
                "jenis": jenis
            })
        }).then(response => response.json()) 
        .then(function(data){
            var html = "";
            console.log(data);
            data.forEach(e => {
                html += "<option value=" + e.id  + ">" + e.nama + "</option>";
            });
            document.getElementById("ref_jabatan").style.display = 'block'; 
            document.getElementById("id_jabatan").innerHTML = html;
        }).catch(err => console.log('Request Failed', err));
        
    }

    async function detailStatus(id) {
        var url = "{{url('ref-status-pegawai')}}/"+id;
        const response = await fetch(url).then(response => response.json()) 
        .then(function(data){
            $('#repeated').val(data.berulang);
            if (data.berulang == 0) {
                $('#long_working_time').hide();
            }else{
                $('#long_working_time').show();
            }
        }).catch(err => console.log('Request Failed', err));
        
    }
</script>

@endsection