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

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Edit Employee</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="border-bottom title-part-padding">
                        <h4 class="mb-0">Edit Employee</h4>
                    </div>
                    <div class="card-body">
                        <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>Profile</span>
                                </a>
                            </li>
                            @hasanyrole('admin|hr')
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#kepegawaian" role="tab">
                                    <span>Employee</span>
                                </a>
                            </li>
                            @endhasanyrole
                            @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="row">
                                                <div class="col-md-12">
                                                    <h4 class="text-primary">Personal Identity</h4>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>KTP Number / NIK </label>
                                                                <input type="text" id="nik" name="nik"
                                                                    value="{{ old('nik', $detail->nik) }}"
                                                                    class="form-control" placeholder="Enter your KTP number">
                                                            </div>
                                                        </div>
                                                        <label id="error_nik" class="error" style="display: none;"></label>
                                                    </div>
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Employee Number / NIP </label>
                                                                <input type="text" id="nip" name="nip"
                                                                    value="{{ old('nip', $detail->nip) }}"
                                                                    class="form-control" placeholder="Enter your Employee number" @role('user') readonly @endrole>
                                                            </div>
                                                        </div>
                                                        <label id="error_nip" 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 Birth </label>
                                                                <input type="text" name="tempat_lahir" id="tempat_lahir"
                                                                    value="{{ old('tempat_lahir', $detail->tempat_lahir) }}"
                                                                    class="form-control " placeholder="Enter your Place of Birth">
                                                            </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 " placeholder="Enter your Postal Code">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12 mt-3">
                                                        <h4 class="text-primary">Education</h4>
                                                    </div>

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

                                                <div class="col-md-12 mt-3">
                                                    <h4 class="text-primary">Contact</h4>
                                                </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="{{ old('no_hp', $detail->no_hp) }}"
                                                                    class="form-control " placeholder="Enter your Phone Number">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Telephone Number</label>
                                                                <input type="text" id="no_telepon" name="no_telepon"
                                                                    value="{{ old('no_telepon', $detail->no_telepon) }}"
                                                                    class="form-control " placeholder="Enter your Telephone Number">
                                                            </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="Required">*</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 " placeholder="Enter your NPWP Number">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 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">{{ $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-6 mt-3">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        <label>Bank Account Name</label>
                                                                        <input type="text" id="bank_account_name" name="bank_account_name" value="{{ $detail->bank_account_name }}" class="form-control" placeholder="Bank Account Name">
                                                                    </div>
                                                                </div>
                                                            </div>

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

                                                            <div class="col-md-12 mt-3">
                                                                <h4 class="text-primary">Insurance</h4>
                                                            </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="{{ old('no_bpjs', $detail->no_bpjs) }}"
                                                                            class="form-control " placeholder="Enter your BPJS Number">
                                                                    </div>
                                                                </div>
                                                            </div>

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

                                                            <div class="col-md-6 mt-3">
                                                                <div class="form-group">
                                                                    <div class="controls">
                                                                        <label>Emergency Name</label>
                                                                        <input type="text" id="emergency_name" name="emergency_name" value="{{ $detail->emergency_name }}" 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>Emergency Relationship</label>
                                                                        <input type="text" id="emergency_relationship" name="emergency_relationship" value="{{ $detail->emergency_relationship }}" 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>Emergency Contact Number</label>
                                                                        <input type="text" id="emergency_contact_number" name="emergency_contact_number" value="{{ $detail->emergency_contact_number }}" class="form-control" placeholder="Enter Contact Number">
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-12 mt-3">
                                                                <h4 class="text-primary">Social Media</h4>
                                                            </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 " placeholder="Enter your facebook username">
                                                                    </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 " placeholder="Enter your twitter username">
                                                                    </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 " placeholder="Enter your instagram username">
                                                                    </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" style="margin-top: 30px !important;">
                                                        <a href="{{ url()->previous() }}" class="btn btn-outline-primary me-md-2">Back</a>
                                                        <button class="btn btn-primary me-md-2"
                                                            type="submit">Save</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="tab-pane p-3" id="kepegawaian" role="tabpanel">
                                <div class="p-3">
                                    <form id="update-kepegawaian" 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-md-12">

                                                <div class="mb-3">
                                                    <label for="Location1"> Position <sup class="text-danger"
                                                            title="Required">*</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->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                {{ $item->nama }}</option>
                                                            @if ($item->children)
                                                                @foreach ($item->children as $item)
                                                                    <option class="l{{ $item->level }}"
                                                                        value="{{ $item->id }}"
                                                                        {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                        {{ $item->nama }}</option>
                                                                    @if ($item->children)
                                                                        @foreach ($item->children as $item)
                                                                            <option class="l{{ $item->level }}"
                                                                                value="{{ $item->id }}"
                                                                                {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                {{ $item->nama }}</option>
                                                                                @if ($item->children)
                                                                                    @foreach ($item->children as $item)
                                                                                        <option class="l{{ $item->level }}"
                                                                                            value="{{ $item->id }}"
                                                                                            {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                            {{ $item->nama }}</option>
                                                                                            @if ($item->children)
                                                                                                @foreach ($item->children as $item)
                                                                                                    <option class="l{{ $item->level }}"
                                                                                                        value="{{ $item->id }}"
                                                                                                        {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                                        {{ $item->nama }}</option>
                                                                                                        @if ($item->children)
                                                                                                            @foreach ($item->children as $item)
                                                                                                                <option class="l{{ $item->level }}"
                                                                                                                    value="{{ $item->id }}"
                                                                                                                    {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                                                    {{ $item->nama }}</option>
                                                                                                                    @if ($item->children)
                                                                                                                    @foreach ($item->children as $item)
                                                                                                                        <option class="l{{ $item->level }}"
                                                                                                                            value="{{ $item->id }}"
                                                                                                                            {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                                                            {{ $item->nama }}</option>
                                                                                                                            @if ($item->children)
                                                                                                                                @foreach ($item->children as $item)
                                                                                                                                    <option class="l{{ $item->level }}"
                                                                                                                                        value="{{ $item->id }}"
                                                                                                                                        {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                                                                        {{ $item->nama }}</option>
                                                                                                                                        @if ($item->children)
                                                                                                                                            @foreach ($item->children as $item)
                                                                                                                                                <option class="l{{ $item->level }}"
                                                                                                                                                    value="{{ $item->id }}"
                                                                                                                                                    {{ $item->id == $detail->id_jabatan ? 'selected' : null }}>
                                                                                                                                                    {{ $item->nama }}</option>
                                                                                                                                            @endforeach
                                                                                                                                        @endif
                                                                                                                                @endforeach
                                                                                                                            @endif
                                                                                                                    @endforeach
                                                                                                                @endif
                                                                                                            @endforeach
                                                                                                        @endif
                                                                                                @endforeach
                                                                                            @endif
                                                                                    @endforeach
                                                                                @endif
                                                                        @endforeach
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                    <label id="error_id_jabatan" class="error" style="display: none;"></label>
                                                </div>
                                                
                                                <div class="mb-3 mt-3" id="ref_jabatan">
                                                    <label for="id_unit_kerja">Division <sup class="text-danger"
                                                            title="Required">*</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->id == $detail->id_unit_kerja ? 'selected' : null }}>
                                                                {{ $item->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                    <label id="error_id_unit_kerja" class="error" style="display: none;"></label>
                                                </div>

                                                <div class="mb-3 mt-3">
                                                    <label for="id_status_pegawai">Employee Status <sup class="text-danger"
                                                            title="Required">*</sup></label>
                                                    <select class="form-select required" id="statusPegawai" name="id_status_pegawai" onchange="detailStatusPegawai(this.value, {{ $detail->id }})">
                                                        @foreach ($ref_status_pegawai as $item)
                                                            <option value="{{ $item->id }}"
                                                                {{ $item->id == $detail->id_status_pegawai ? 'selected' : null }}>
                                                                {{ $item->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                    <label id="error_id_jabatan" class="error" style="display: none;"></label>
                                                </div>
                                                <input type="hidden" name="repeated" id="repeated" value="0">
                                                <input type="hidden" name="id_pegawai_berulang" id="id_pegawai_berulang">
                                                <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" id="start_date">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label for="">End Date</label>
                                                            <input type="date" class="form-control" name="end_date" id="end_date">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mb-3 mt-3">
                                                    <label for="id_status_pegawai">Leave Request Approver<sup class="text-danger"
                                                            title="Required">*</sup></label>
                                                    <select class="form-select select2 required" name="persetujuan_cuti[]" id="pegawai_persetujuan_cuti" style="width: 100%; height: 36px" multiple>
                                                        @php
                                                            $arrSelected = [];
                                                            if ($detail->persetujuan_cuti_arr) {
                                                                $arrSelected = $detail->persetujuan_cuti_arr->pluck('id_penyetuju')->toArray();
                                                            }
                                                        @endphp
                                                        @foreach ($pegawai as $item)
                                                            <option value="{{$item->id}}" {{in_array($item->id, $arrSelected) ? 'selected' : null}} >{{$item->nama_lengkap}}</option>
                                                        @endforeach
                                                    </select>
                                                    <label id="error_pegawai_persetujuan_cuti" class="error" style="display: none;"></label>
                                                </div>
                                            </div>
                                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                                <a href="{{url()->previous() }}" class="btn btn-outline-primary me-md-2">Back</a>
                                                <button class="btn btn-primary me-md-2" type="submit">Save</button>
                                            </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>

    function getDetailStatus(id) {
        var url = "{{url('ref-status-pegawai')}}/"+id;
        const response = 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));
        
    }

    
    function detailStatusPegawai(id, id_pegawai) {
        var url = "{{url('ref-status-pegawai-edit')}}/"+id+"/"+id_pegawai;
        const response = fetch(url).then(response => response.json()) 
        .then(function(data){
            $('#repeated').val(data[0].berulang);
            if (data.berulang == 0) {
                $('#long_working_time').hide();
            }else{
                if(data[1].repeated != "0") {
                    $('#long_working_time').show();
                    var url = "{{url('get-pegawai-berulang')}}/"+{{ $detail->id }};
                    const response = fetch(url).then(response => response.json()) 
                    .then(function(data){
                        $("#id_pegawai_berulang").val(data.id);
                        $("#start_date").val(data.start_date);
                        $("#end_date").val(data.end_date);
                    }).catch(err => console.log('Request Failed', err));
                } else {
                    $('#repeated').val(data[0].berulang);
                    if (data[0].berulang == 0) {
                        $('#long_working_time').hide();
                    }else{
                        $('#long_working_time').show();
                    }
                }
                
            }
        }).catch(err => console.log('Request Failed', err));
    }

    detailStatusPegawai($("#statusPegawai").val(), {{ $detail->id }});
</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',
                            timerProgressBar: true,
                            timer: 2000,
                        });
                    }
                }
            });
        });


        $('#update-kepegawaian').on('submit', function (event) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('master-pegawai.update-kepegawaian') }}",
                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: 'Data has been changed successfully',
                            showConfirmButton: false,
                            timerProgressBar: true,
                            timer: 1000,
                        });
                    }
                }
            });
        });


        // $('#update-user').on('submit', function (event) {
        //     event.preventDefault();
        //     $.ajax({
        //         url: "{{ route('master-pegawai.update-user') }}",
        //         method: "POST",
        //         data: new FormData(this),
        //         contentType: false,
        //         processData: false,
        //         success: function (result) {
        //             console.log(result);
        //             if (result.success == false) {
        //                 $("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.success == true) {
        //                 Swal.fire({
        //                     icon: 'success',
        //                     title: 'Data Kepegawaian berhasil diperbaharui.',
        //                     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