@if(!empty($pegawai))
    <h5 class="mt-0 mb-4 text-white"><i class="mdi mdi-pencil mr-2"></i> Ubah</h5>
@else
    <h5 class="mt-0 mb-4 text-white"><i class="mdi mdi-plus mr-2"></i> Tambah</h5>
@endif
<form id="pegawai_form" method="post">
    @csrf
    <x-alert type="error" id="alert_pegawai" />
    <input type="hidden" name="id" value="{{ $pegawai->id ?? '' }}">
    <div class="row">
        <div class="col-md-3">
            <x-form-group id="nip" caption="Nip">
                <x-input name="nip" value="{{ $pegawai->nip ?? '' }}" />
            </x-form-group>
        </div>
        <div class="col-md-6">
            <x-form-group id="nama" caption="Nama">
                <x-input name="nama" value="{{ $pegawai->nama ?? '' }}" />
            </x-form-group>
        </div>
        <div class="col-md-3">
            <x-form-group id="pangkat" caption="Pangkat">
                <x-select class="select2" name="pangkat" :options="$list_pangkat" value="{{ $pegawai->pangkat ?? '' }}" />
            </x-form-group>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <x-form-group id="jabatan" caption="Jabatan">
                <x-input name="jabatan" value="{{ $pegawai->jabatan ?? '' }}" />
            </x-form-group>
        </div>
        <div class="col-md-6">
            <x-form-group id="satuan_kerja" caption="Satuan Kerja">
                <x-input type="hidden" name="satuan_kerja_id" value="{{ $pegawai->jabatan_pegawai->satuan_kerja_id ?? '' }}" />
                <x-input name="satuan_kerja" caption="Klik untuk memilih satuan kerja" value="{{ $pegawai->jabatan_pegawai->satuan_kerja->nama ?? '' }}" readonly />
            </x-form-group>
        </div>
        <div class="col-md-2">
            <x-form-group id="eselon" caption="Eselon">
                <x-select class="select2" name="eselon" :options="$list_eselon" value="{{ $pegawai->eselon ?? '' }}" />
            </x-form-group>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-6">
                    <x-form-group id="jenis" caption="Hak Akses">
                        <x-select class="select2" name="jenis" :options="$list_jenis_jabatan" value="{{ $pegawai->jabatan_pegawai->jenis ?? '' }}" />
                    </x-form-group>
                </div>
                <div class="col-md-6">
                    <x-form-group id="password" caption="Password">
                        <x-input name="password" />
                        @if(!empty($pegawai))
                            <i>Kosongi apabila tidak diubah</i>
                        @endif
                    </x-form-group>
                </div>
            </div>
            <x-form-group id="nik" caption="NIK">
                <x-input name="nik" value="{{ $pegawai->nik ?? '' }}" />
            </x-form-group>
        </div>
        <div class="col-md-6">
            <x-form-group id="file_tanda_tangan_group" caption="Tanda Tangan">
                <input type="file" name="file_tanda_tangan" class="dropify" data-height="105" @if(!empty($pegawai) && $pegawai->tanda_tangan != '') data-default-file="{{ asset("assets/$pegawai->tanda_tangan") }}" @endif />
            </x-form-group>
        </div>
    </div>
    <div class="text-right">
        @if(!empty($pegawai))
            <button type="button" class="btn btn-danger px-3 float-left" onclick="confirm_delete({{ $pegawai->id }})">Hapus</button>
        @endif
        <button type="button" class="btn btn-default px-3" onclick="clear_form()">Batal</button>
        <button type="submit" class="btn btn-primary px-3">Simpan</button>
    </div>
</form>

<script>
    init_form_element();
    $pegawai_form = $('#pegawai_form');
    $pegawai_form.submit((e) => {
        e.preventDefault();
        let data = new FormData($pegawai_form.get(0));
        $.ajax({
            url: "{{ route('pegawai.save') }}",
            type: 'post',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            success: function() {
                search_pegawai(selected_page);
                clear_form();
            },
        }).fail((xhr) => {
            let error = JSON.parse(xhr.responseText);
            if (error.errors) {
                displayErrors('alert_pegawai', error.errors);
            } else {
                console.log(xhr.responseText);
            }
        });
    });
    confirm_delete = (id) => {
        Swal.fire({
            title: 'Anda yakin ?',
            text: "Anda akan menghapus data yg dipilih",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Hapus'
        }).then((result) => {
            console.log(result);
            if (result.value === true) {
                delete_pegawai(id);
            }
        })
    }
    delete_pegawai = (id) => {
        let data = {_token: '{{ csrf_token() }}', id};
        $.post("{{ route('pegawai.delete') }}", data, () => {
            search_pegawai(selected_page);
            clear_form();
        }).fail((xhr) => {
            console.log(xhr.responseText);
        });
    }

    // modal satuan kerja
    $satuan_kerja = $('#satuan_kerja');
    $satuan_kerja_id = $('#satuan_kerja_id');
    $satuan_kerja.click(() => {
        search_satuan_kerja('satuan_kerja');
        $('#modal_satuan_kerja').modal('show');
    });
</script>