@extends('layouts.index')
@section('title')
    Edit Employee
@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" />
    <style>
        .l2 {
            padding-left: 1em;
        }

        .l3 {
            padding-left: 2em;
        }

        label.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    input.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    select.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    .colored-toast.swal2-icon-success {
        background-color: #a5dc86 !important;
    }

    .colored-toast.swal2-icon-error {
        background-color: #f27474 !important;
    }

    .colored-toast.swal2-icon-warning {
        background-color: #f8bb86 !important;
    }

    .colored-toast.swal2-icon-info {
        background-color: #3fc3ee !important;
    }

    .colored-toast.swal2-icon-question {
        background-color: #87adbd !important;
    }

    .colored-toast .swal2-title {
        color: white;
    }

    .colored-toast .swal2-close {
        color: white;
    }

    .colored-toast .swal2-html-container {
        color: white;
    }

    </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') }}">Dash. User</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            Edit
                        </li>

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

        <div class="row">

            <section id="tabs">
                <div class="card">
                    <div class="card-body">
                        <!-- Nav tabs -->
                        <div class="d-flex">
                            <h4>Edit Employee</h4>
                            {{-- <select class="form-select w-25 ms-auto">
                            <option selected="">Today</option>
                            <option value="1">Weekly</option>
                        </select> --}}
                        </div>
                        <ul class="nav nav-tabs" role="tablist" id="nav-tab">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#biodata" role="tab">
                                    <span>Biodata</span>
                                </a>
                            </li>
                            @if ($detail->id_pns)
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#pns" role="tab">
                                        <span>PNS </span>
                                    </a>
                                </li>
                            @endif
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane p-3 active" id="biodata" role="tabpanel">
                                <div class="p-3">
                                    <form id="update-biodata" enctype="multipart/form-data">
                                        @csrf
                                        
                                        <input type="hidden" name="id" value="{{ $detail->id }}">
                                        <div class="col-12 col-md-12 mb-2">
                                            <div class="col-12 col-sm-12">
                                                <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                            <div class="divider-text">Personal Identity</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>No. KTP </label>
                                                                    <input type="text" id="nik" name="nik"
                                                                        value="{{ old('nik', $detail->nik) }}"
                                                                        class="form-control">
                                                                </div>
                                                            </div>
                                                            <label id="error_nik" class="error" style="display: none;"></label>
                                                        </div>

                                                        <div class="col-md-12 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Fullname <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" id="nama_lengkap" name="nama_lengkap"
                                                                        value="{{ old('nama_lengkap', $detail->nama_lengkap) }}"
                                                                        class="form-control required">
                                                                </div>
                                                            </div>
                                                            <label id="error_nama_lengkap" class="error" style="display: none;"></label>
                                                        </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 Gender</option>
                                                                        <option value="L" {{ $detail->jenis_kelamin == 'L' ? 'selected' : null }}>Male</option>
                                                                        <option value="P" {{ $detail->jenis_kelamin == 'P' ? 'selected' : null }}>Female</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <label id="error_jenis_kelamin" class="error" style="display: none;"></label>
                                                        </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 Religion</option>
                                                                        @foreach ($ref_agama as $item)
                                                                            <option value="{{ $item->id }}"
                                                                                {{ $detail->id_agama == $item->id ? 'selected' : null }}>
                                                                                {{ $item->nama }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <label id="error_id_agama" class="error" style="display: none;"></label>
                                                        </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="{{ old('tanggal_lahir', $detail->tanggal_lahir) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                            <label id="error_tanggal_lahir" class="error" style="display: none;"></label>
                                                        </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 Born </label>
                                                                    <input type="text" name="tempat_lahir" id="tempat_lahir"
                                                                        value="{{ old('tempat_lahir', $detail->tempat_lahir) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                            <label id="error_tempat_lahir" class="error" style="display: none;"></label>
                                                        </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">{{ old('alamat', $detail->alamat) }}</textarea>
                                                                </div>
                                                            </div>
                                                            <label id="error_alamat" class="error" style="display: none;"></label>
                                                        </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="{{ old('kode_pos', $detail->kode_pos) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12 mt-3">
                                                            <div class="">
                                                                <div class="">Education &amp; Jobs
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Front Degree</label>
                                                                    <input type="text" id="gelar_depan" name="gelar_depan"
                                                                        value="{{ old('gelar_depan', $detail->gelar_depan) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>Back Degree</label>
                                                                    <input type="text" id="gelar_belakang"
                                                                        name="gelar_belakang"
                                                                        value="{{ old('gelar_belakang', $detail->gelar_belakang) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class=" mt-3">
                                                        <div class="">Contact</div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>No. HP </label>
                                                                    <input type="text" id="no_hp" name="no_hp"
                                                                        value="{{ old('no_hp', $detail->no_hp) }}"
                                                                        class="form-control ">
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-6 mt-3">
                                                            <div class="form-group">
                                                                <div class="controls">
                                                                    <label>No. Telp</label>
                                                                    <input type="text" id="no_telepon" name="no_telepon"
                                                                        value="{{ old('no_telepon', $detail->no_telepon) }}"
                                                                        class="form-control ">
                                                                </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="{{ old('email', $detail->email) }}"
                                                                        class="form-control required">
                                                                </div>
                                                            </div>
                                                            <label id="error_email" class="error" style="display: none;"></label>
                                                        </div>

                                                        <div class="col-12 col-md-12">
                                                            <h5 class="mb-1 mt-sm-0"></h5>
                                                            <div class="row">
                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>NPWP</label>
                                                                            <input type="text" id="npwp" name="npwp"
                                                                                value="{{ old('npwp', $detail->npwp) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Date of NPWP</label>
                                                                            <input type="date" id="tanggal_npwp"
                                                                                name="tanggal_npwp"
                                                                                value="{{ old('tanggal_npwp', $detail->tanggal_npwp) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Adress NPWP</label>
                                                                            <textarea name="address_npwp" cols="30" rows="5" class="form-control" placeholder="Adress NPWP">{{ $detail->address_npwp }}</textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Bank Name</label>
                                                                            <input type="text" id="bank_name" name="bank_name" value="{{ $detail->bank_name }}" class="form-control" placeholder="Bank Name">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="">
                                                                        <div class="">Assurance</div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>No. BPJS</label>
                                                                            <input type="text" id="no_bpjs" name="no_bpjs"
                                                                                value="{{ old('no_bpjs', $detail->no_bpjs) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Faskes BPJS</label>
                                                                            <input type="text" id="faskes_bpjs"
                                                                                name="faskes_bpjs"
                                                                                value="{{ old('faskes_bpjs', $detail->faskes_bpjs) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>BPJS Class</label>
                                                                            <select name="kelas_bpjs" id="kelas_bpjs"
                                                                                class="form-select">
                                                                                <option value="">-- Select --</option>
                                                                                <option value="1"
                                                                                    {{ old('kelas_bpjs', $detail->kelas_bpjs) == '1' ? 'selected' : '' }}>
                                                                                    Class 1</option>
                                                                                <option value="2"
                                                                                    {{ old('kelas_bpjs', $detail->kelas_bpjs) == '2' ? 'selected' : '' }}>
                                                                                    Class 2</option>
                                                                                <option value="3"
                                                                                    {{ old('kelas_bpjs', $detail->kelas_bpjs) == '3' ? 'selected' : '' }}>
                                                                                    Class 3</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="">
                                                                        <div class="">Certificate of health</div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Doctor's health statement</label>
                                                                            <input type="text" id="keterangan_sehat_dokter"
                                                                                name="keterangan_sehat_dokter"
                                                                                value="{{ old('keterangan_sehat_dokter', $detail->keterangan_sehat_dokter) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Date of Doctor's health statement</label>
                                                                            <input type="date" id="tanggal_keterangan_sehat"
                                                                                name="tanggal_keterangan_sehat"
                                                                                value="{{ old('tanggal_keterangan_sehat', $detail->tanggal_keterangan_sehat) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>No Description of good behavior</label>
                                                                            <input type="text"
                                                                                id="no_keterangan_kelakuan_baik"
                                                                                name="no_keterangan_kelakuan_baik"
                                                                                value="{{ old('no_keterangan_kelakuan_baik', $detail->no_keterangan_kelakuan_baik) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-6 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>Date of Description of good behavior</label>
                                                                            <input type="date"
                                                                                id="tanggal_keterangan_kelakuan_baik"
                                                                                name="tanggal_keterangan_kelakuan_baik"
                                                                                value="{{ old('tanggal_keterangan_kelakuan_baik', $detail->tanggal_keterangan_kelakuan_baik) }}"
                                                                                class="form-control ">
                                                                        </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="{{ $detail->emergency_name }}" class="form-control" placeholder="Input 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="{{ $detail->emergency_relationship }}" class="form-control" placeholder="Input 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="{{ $detail->emergency_contact_number }}" class="form-control" placeholder="Input Contact Number">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12 mt-3">
                                                                    <div class="">
                                                                        <div class="">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="{{ old('facebook', $detail->facebook) }}"
                                                                                class="form-control ">
                                                                        </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="{{ old('twitter', $detail->twitter) }}"
                                                                                class="form-control ">
                                                                        </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="{{ old('instagram', $detail->instagram) }}"
                                                                                class="form-control ">
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                {{-- <div class="col-md-12 mt-3">
                                                                    <div class="">
                                                                        <div class="">Foto</div>
                                                                    </div>
                                                                </div> --}}

                                                                {{-- <div class="col-md-12 mt-3">
                                                                    <div class="form-group">
                                                                        <div class="controls">
                                                                            <label>File Foto</label>
                                                                            @php
                                                                                $path = asset($detail->foto);
                                                                                if ($detail->foto && Storage::exists($detail->foto)) {
                                                                                    $path = Storage::url($detail->foto);
                                                                                }
                                                                            @endphp
                                                                            <div id="preview_biodata">
                                                                                <img id="imgshow_biodata"
                                                                                    src="{{ $path }}" width="200"
                                                                                    height="200"
                                                                                    style="object-fit: cover;border-radius: 20px;">
                                                                                <br><br>
                                                                            </div>
                                                                            <input type="file" class="form-control"
                                                                                name="foto" id="foto_biodata">

                                                                            <small class="">* jpg,jpeg,png |
                                                                                Max: 10 Mb</small>
                                                                        </div>
                                                                    </div>
                                                                </div> --}}

                                                            </div>
                                                        </div>
                                                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                                            <a href="{{ url('dashboard-user') }}" class="btn btn-outline-primary me-md-2">Back</a>
                                                            <button class="btn btn-primary me-md-2"
                                                                type="submit">Submit</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>


        </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 src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            $('a[data-bs-toggle="tab"]').on('show.bs.tab', function (e) {
                localStorage.setItem('activeTab', $(e.target).attr('href'));
            });

            var activeTab = localStorage.getItem('activeTab');
            if (activeTab) {
                $('#nav-tab a[href="' + activeTab + '"]').tab('show');
            }
        });
    </script>

    <script>
        $('.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;
            }
        });

        $('#update-biodata').on('submit', function (event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('master-pegawai.update-biodata') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function (result) {
                    console.log(result);
                    if (result.status == "error") {
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        for (const [key, value] of Object.entries(result.errors)) {
                            $("#error_" + key).css("display", "block");
                            $("#error_" + key).html(value[0]);
                            $('[name="' + key + '"]').addClass("error");
                        }
                    } else if (result.status == 'success') {
                        $("label.error").css("display", "none");
                        $("input.error").removeClass("error");
                        $(".dropify-wrapper").css('cssText', 'border: 1px solid #e2e7f1 !important');
                        Swal.fire({
                            icon: 'success',
                            title: 'Profile has been changed successfully',
                            target: 'body',
                            iconColor: 'white',
                            customClass: {
                                popup: 'colored-toast'
                            },
                            toast: true,
                            position: 'top-right',
                            showConfirmButton: false,
                            timerProgressBar: true,
                            timer: 3500,
                        });
                    }
                }
            });
        });

        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));

        }

        $('document').ready(function() {
            $("#foto_biodata").change(function() {
                $('#preview_biodata').show();
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imgshow_biodata').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
        });
    </script>

@endsection