@extends('admin.hris.mobile.main')

<!-- prettier-ignore -->
@push('style')
<!-- prettier-ignore -->
<link rel="stylesheet" href="{{ route('hris-mobile.riwayat-hidup.css') }}" />
@endpush

<!-- prettier-ignore -->
@section('content')
<div id="header-content" class="header">
    <button id="btn-back" class="btn-link" type="button">
        <!-- prettier-ignore -->
        <img alt="left-black" src="{{ asset('asset-webview/hris/icons/left-black.png') }}" height="24" width="24">
        <span>Riwayat Hidup</span>
    </button>
    <button class="btn-icon" id="btn-update" type="button">
        <img alt="icon-pencil-white" src="{{ asset('asset-webview/hris/icons/icon-pencil-white.png') }}" height="16"
            width="16">
        Perbarui
    </button>
</div>
<div id="body-content" class="body">
    <div class="profile-container">
        <div id="avatar-container" class="avatar-container">
            <input type="file" id="photo-input" accept="image/*" class="d-none">
            <img id="sample-avatar" alt="sample-avatar" src="{{ asset('asset-webview/hris/images/sample-photo.png') }}">
            <button type="button" class="btn-icon" id="change-photo">
                <img class="icon-button" alt="icon-camera"
                    src="{{ asset('asset-webview/hris/icons/icon-camera.png') }}">
            </button>
        </div>
        <div class="biodata-container">
            <div class="biodata-title" id="biodata-nama-pegawai"></div>
            <div class="biodata-subtitle" id="biodata-kode-pegawai"></div>
            <div class="biodata-subtitle" id="biodata-status-pegawai"></div>
        </div>
    </div>
    <div class="card">
        <div class="header">
            <!-- prettier-ignore -->
            <button id="data-diri" type="button" class="navigation-item active">Data Diri</button>
            <!-- prettier-ignore -->
            <button id="data-pengalaman" type="button" class="navigation-item">Riwayat Pekerjaan</button>
            <!-- prettier-ignore -->
            <button id="data-pendidikan" type="button" class="navigation-item">Pendidikan</button>
            <!-- prettier-ignore -->
            <button id="data-pelatihan" type="button" class="navigation-item">Pelatihan</button>
            <!-- prettier-ignore -->
            <button id="data-penghargaan" type="button" class="navigation-item">Penghargaan</button>
            <!-- prettier-ignore -->
            <button id="data-kedinasan" type="button" class="navigation-item">Kedinasan</button>
            <!-- prettier-ignore -->
            <button id="data-sanksi" type="button" class="navigation-item">Sanksi</button>
        </div>
        <div id="scrollable-body" class="body">
            <div class="show data-content" data-id="data-diri">
                <div class="content-title">Data Diri</div>
                <div class="info-container">
                    <div class="info-item">
                        <div class="title-label">Nama Lengkap</div>
                        <div id="nama-pegawai" class="value-label">
                            Nama Lengkap
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">Nama Jabatan</div>
                        <div id="jabatan-pegawai" class="value-label">
                            Nama Jabatan
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">ID Pegawai</div>
                        <div id="id-pegawai" class="value-label">
                            ID Pegawai
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">Status Kepegawaian</div>
                        <div id="status-pegawai" class="value-label">
                            Status Kepegawaian
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">Tempat, Tanggal Lahir</div>
                        <div id="ttlahir-pegawai" class="value-label">
                            Tempat, dd-mm-yyyy
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">Status Pernikahan</div>
                        <div id="nikah-pegawai" class="value-label">
                            Status Pernikahan
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">No Ponsel</div>
                        <!-- prettier-ignore -->
                        <div id="telepon-pegawai" class="value-label">Nomor Telepon <a href="#" target="_blank"
                                class="whatsapp-link">WhatsApp Aktif</a></div>
                    </div>
                    <div class="info-item">
                        <div class="title-label">Email</div>
                        <div id="email-pegawai" class="value-label">
                            Email Pegawai
                        </div>
                    </div>
                </div>
            </div>
            <!-- prettier-ignore -->
            <div id="content-pengalaman" class="data-content" data-id="data-pengalaman">
                <div class="content-title">Data Riwayat Pekerjaan</div>
            </div>
            <div id="content-pendidikan" class="data-content" data-id="data-pendidikan">
                <div class="content-title">Data Pendidikan</div>
            </div>
            <div id="content-pelatihan" class="data-content" data-id="data-pelatihan">
                <div class="content-title">Data Pelatihan</div>
            </div>
            <div id="content-penghargaan" class="data-content" data-id="data-penghargaan">
                <div class="content-title">Data Penghargaan</div>
            </div>
            <div id="content-kedinasan" class="data-content" data-id="data-kedinasan">
                <div class="content-title">Data Kedinasan</div>
            </div>
            <div id="content-sanksi" class="data-content" data-id="data-sanksi">
                <div class="content-title">Data Sanksi</div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@push('script')
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        $(window).scrollTop(0);
        window.$NAVIGATION_BOTTOM.css("opacity", 0);
        window.$BACKGROUND_ROOT.removeClass("d-none");

        const $BtnBack = $("#btn-back");
        const $NavigationItem = $(".navigation-item");
        const $DataContent = $(".data-content");
        const $HeaderContent = $('#header-content');
        const $BodyContent = $("#body-content");


        const $AvatarContainer = $("#avatar-container");
        const $BiodataNamaPegawai = $("#biodata-nama-pegawai");
        const $BiodataKodePegawai = $("#biodata-kode-pegawai");
        const $BiodataStatusPegawai = $("#biodata-status-pegawai");

        const $ScrollableBody = $('#scrollable-body');

        const $NamaPegawai = $("#nama-pegawai");
        const $JabatanPegawai = $("#jabatan-pegawai");
        const $IdPegawai = $("#id-pegawai");
        const $StatusPegawai = $("#status-pegawai");
        const $TtlahirPegawai = $("#ttlahir-pegawai");
        const $NikahPegawai = $("#nikah-pegawai");
        const $TeleponPegawai = $("#telepon-pegawai");
        const $EmailPegawai = $("#email-pegawai");

        const $ContentPendidikan = $("#content-pendidikan");
        const $ContentPelatihan = $("#content-pelatihan");
        const $ContentPenghargaan = $("#content-penghargaan");
        const $ContentKedinasan = $("#content-kedinasan");
        const $ContentSanksi = $("#content-sanksi");
        const $ContentPengalaman = $("#content-pengalaman");

        let CONTENT_BODY = null;

        /**
         * Render a message indicating that there is no data for the given label.
         *
         * @param {string} label - The label of the data that is not available.
         * @returns {string} - The rendered HTML message.
         */
        function renderEmptyData(label) {
            return `<div class="text-muted h6">Tidak ada data ${label}</div>`
        }

        $.ajax({
            method: "get",
            url: "{{ route('api.hris-mobile.v1.data-pegawai') }}",
            dataType: "json",
            async: true,
            beforeSend: function () {
                $('#btn-update').prop('disabled', true);
            },
            success: function (response) {
                const data_diri = response.data_diri;
                if (data_diri) {
                    $BiodataNamaPegawai.text(data_diri.nama);
                    $BiodataKodePegawai.text(data_diri.nik);
                    $BiodataStatusPegawai.text(data_diri.status_pegawai);

                    $NamaPegawai.text(data_diri.nama);
                    $JabatanPegawai.text(data_diri.nama_jabatan);
                    $IdPegawai.text(data_diri.nik);
                    $StatusPegawai.text(data_diri.status_pegawai);
                    // prettier-ignore
                    $TtlahirPegawai.text(`${data_diri.tempat_lahir}, ${data_diri.tanggal_lahir}`);
                    // prettier-ignore
                    $NikahPegawai.text(`${data_diri.status_nikah} - ${data_diri.jumlah_anak} Anak`);
                    // prettier-ignore
                    $TeleponPegawai.html(`${data_diri.no_telp} <a href="https://wa.me/${data_diri.no_telp}" target="_blank" class="whatsapp-link">WhatsApp Aktif</a>`);
                    $EmailPegawai.text(data_diri.email);

                    if (data_diri.foto) {
                        $AvatarContainer.find("#sample-avatar").attr("src", data_diri.foto);
                    }
                }

                const data_pendidikan = response.data_pendidikan;
                if (data_pendidikan.length > 0) {
                    // prettier-ignore
                    $ContentPendidikan.append(`<div id="list-pendidikan" class="info-container"></div>`);

                    let html = "";
                    data_pendidikan.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tahun}</div>
                            <div class="value-label">${data.nama_pendidikan} - ${data.nama_jurusan}</div>
                        </div>`;
                    });

                    $ContentPendidikan.find("#list-pendidikan").html(html);
                } else {
                    const el = renderEmptyData("pendidikan");
                    $ContentPendidikan.append(`<div id="list-pendidikan" class="info-container">${el}</div>`);
                }

                const data_pelatihan = response.data_pelatihan;
                if (data_pelatihan.length > 0) {
                    // prettier-ignore
                    $ContentPelatihan.append(`<div id="list-pelatihan" class="info-container"></div>`);

                    let html = "";
                    data_pelatihan.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tahun}</div>
                            <div class="value-label">${data.nama_pelatihan}</div>
                        </div>`;
                    });

                    $ContentPelatihan.find("#list-pelatihan").html(html);
                } else {
                    const el = renderEmptyData("pelatihan");
                    $ContentPelatihan.append(`<div id="list-pelatihan" class="info-container">${el}</div>`);
                }

                const data_penghargaan = response.data_penghargaan;
                if (data_penghargaan.length > 0) {
                    // prettier-ignore
                    $ContentPenghargaan.append(`<div id="list-penghargaan" class="info-container"></div>`);

                    let html = "";
                    data_penghargaan.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tahun}</div>
                            <div class="value-label">${data.nama_penghargaan}</div>
                        </div>`;
                    });

                    $ContentPenghargaan.find("#list-penghargaan").html(html);
                } else {
                    const el = renderEmptyData("penghargaan");
                    $ContentPenghargaan.append(`<div id="list-penghargaan" class="info-container">${el}</div>`);
                }

                const data_kedinasan = response.data_kedinasan;
                if (data_kedinasan.length > 0) {
                    // prettier-ignore
                    $ContentKedinasan.append(`<div id="list-kedinasan" class="info-container"></div>`);

                    let html = "";
                    data_kedinasan.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tahun}</div>
                            <div class="value-label">${data.no_sk} - ${data.nama_kedinasan}</div>
                        </div>`;
                    });

                    $ContentKedinasan.find("#list-kedinasan").html(html);
                } else {
                    const el = renderEmptyData("kedinasan");
                    $ContentKedinasan.append(`<div id="list-kedinasan" class="info-container">${el}</div>`);
                }

                const data_sanksi = response.data_sanksi;
                if (data_sanksi.length > 0) {
                    // prettier-ignore
                    $ContentSanksi.append(`<div id="list-sanksi" class="info-container"></div>`);

                    let html = "";
                    data_sanksi.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tanggal}</div>
                            <div class="value-label">${data.jenis_sanksi} - ${data.nama_sanksi}</div>
                        </div>`;
                    });

                    $ContentSanksi.find("#list-sanksi").html(html);
                } else {
                    const el = renderEmptyData("sanksi");
                    $ContentSanksi.append(`<div id="list-sanksi" class="info-container">${el}</div>`);
                }

                const data_pengalaman = response.data_pengalaman;
                if (data_pengalaman.length > 0) {
                    // prettier-ignore
                    $ContentPengalaman.append(`<div id="list-pengalaman" class="info-container"></div>`);

                    let html = "";
                    data_pengalaman.forEach(function (data) {
                        html += `<div class="info-item">
                            <div class="title-label">${data.tahun_mulai} - ${data.tahun_selesai}</div>
                            <div class="value-label">${data.nama_perusahaan} - ${data.jabatan}</div>
                        </div>`;
                    });

                    $ContentPengalaman.find("#list-pengalaman").html(html);
                } else {
                    const el = renderEmptyData("pengalaman kerja");
                    $ContentPengalaman.append(`<div id="list-pengalaman" class="info-container">${el}</div>`);
                }

                // simpan element body di variabel
                CONTENT_BODY = $('#scrollable-body').children().clone();
            },
            complete: function () {
                $('#btn-update').prop('disabled', false);
            }
        });

        $BtnBack.click(function () {
            window.history.back();
        });

        $NavigationItem.on('click', function () {
            const id = $(this).attr("id");

            $NavigationItem.removeClass("active");
            $(this).addClass("active");

            const target = $(this).attr('id')
            const $TargetSection = $(`[data-id~="${target}"]`)

            // Hitung posisi target relatif terhadap scrollable container
            const containerScrollTop = $ScrollableBody.scrollTop();
            const targetOffsetTop = $TargetSection.offset().top;
            const containerOffsetTop = $ScrollableBody.offset().top;
            const scrollToPosition = containerScrollTop + targetOffsetTop - containerOffsetTop;

            // Smooth scroll DALAM div container
            $ScrollableBody.animate({
                scrollTop: scrollToPosition
            }, 800); // Durasi animasi 800ms
        });

        // Update active tab saat scroll
        $ScrollableBody.on('scroll', function () {
            const scrollPos = $(this).scrollTop(); // Offset untuk deteksi lebih baik

            $('.data-content').each(function () {
                const sectionTop = $(this).position().top;
                const sectionBottom = sectionTop + $(this).outerHeight();
                const sectionId = $(this).data('id');

                if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
                    $NavigationItem.removeClass("active");
                    $(`#${sectionId}`).addClass('active');
                }
            });
        });

        /**
         * Render component field update karyawan.
         * @param {string} id - id of input field.
         * @param {string} label - label of input field.
         * @param {string} value - value of input field.
         * @param {string} placeholder - placeholder of input field.
         * @return {string} - rendered component field update karyawan.
         */
        function renderComponentFieldUpdateKaryawan(id, label, value, placeholder) {
            return `<div class="form-group">
            <div class="input-group">
                <label for="${id}">${label}</label>
                <input id="${id}" name="${id}" type="text" class="form-control" placeholder="${placeholder}" autocomplete="off" value="${value}">
            </div>
        </div>`;
        }

        /**
         * Render a component field date button for update karyawan.
         * @param {string} id - id of button field.
         * @param {string} label - label of button field.
         * @param {string} value - value of button field.
         * @return {string} The rendered component field date button.
         */
        function renderComponentFieldButtonUpdateKaryawan(id, label, value) {
            return `<div class="form-group">
                <div id="group-${id}" class="input-group">
                    <div class="form-label">${label}</div>
                    <button class="btn-link" id="btn-${id}" type="button">${value}</<button>
                </div>
            </div>`
        }

        /**
         * Render a component field date button for update karyawan.
         * @param {string} id - id of button field.
         * @param {string} label - label of button field.
         * @return {string} The rendered component field date button.
         */
        function renderComponentDateButtonUpdateKaryawan(id, label) {
            return `<button class="btn-link" id="btn-${id}" type="button">${label}</<button>`
        }

        /**
         * Render a component field date input for update karyawan.
         * @param {string} id - id of input field.
         * @param {string} value - value of input field (default: current date).
         * @return {string} The rendered component field date input.
         */
        function renderComponentFieldDateUpdateKaryawan(id, value = "{{ date('Y-m-d')}}") {
            return `<input id="${id}" name="${id}" type="date" class="form-control" value="${value}" max="{{ date('Y-12-31') }}">`
        }

        /**
         * Render a component action container with a list of elements.
         * The elements are filtered to remove any falsy values before being joined together.
         * @param {...elements} A list of elements to render.
         * @returns {string} The rendered component action container.
         */
        function renderComponentActionContainer(...elements) {
            return `<div class="action-container">${elements.filter(Boolean).join('')}</div>`
        }

        /**
         * Render a component button with a label of "Simpan" and primary styling.
         * @returns {string} The rendered component button.
         */
        function renderComponenButtonSimpanUpdateKaryawan() {
            return `<button id="btn-simpan" class="btn-primary" type="button">Simpan</button>`;
        }

        /**
         * Render a component button with a label of "Batal" and secondary styling.
         * @returns {string} The rendered component button.
         */
        function renderComponenButtonBatalUpdateKaryawan() {
            return `<button id="btn-batal" class="btn-secondary" type="button">Batal</button>`;
        }

        /**
         * Renders a component button with a label of "Perbarui" and primary styling.
         * The button contains an icon of a white pencil.
         * @returns {string} The rendered component button.
         */
        function renderComponenButtonUpdateKaryawan() {
            return `<button class="btn-icon" id="btn-update" type="button">
                <img alt="icon-pencil-white" src="{{ asset('asset-webview/hris/icons/icon-pencil-white.png') }}" height="16"
                    width="16">
                Perbarui
            </button>`;
        }

        $HeaderContent.on('click', '#btn-update', function () {
            $ScrollableBody.scrollTop(0);

            $NavigationItem.removeClass("active");
            $('#data-diri').addClass("active");

            // remove button update untuk diganti dengan button simpan dan batal
            $(this).remove();

            // render button simpan dan batal
            const buttonSimpan = renderComponenButtonSimpanUpdateKaryawan();
            const buttonBatal = renderComponenButtonBatalUpdateKaryawan();
            // render action container
            const actionContainer = renderComponentActionContainer(buttonBatal, buttonSimpan);
            // render button simpan dan batal ke dom
            $HeaderContent.append(actionContainer);
            // ambil nilai untuk kebutuhan masing-masing field
            const nama_pegawai = $(CONTENT_BODY).find('#nama-pegawai').text().trim();
            const email_pegawai = $(CONTENT_BODY).find('#email-pegawai').text().trim();
            const no_telepon_pegawai = $(CONTENT_BODY).find('#telepon-pegawai').contents().filter(function () {
                return this.nodeType === 3; // Node.TEXT_NODE
            }).text().trim();
            const ttl_pegawai = $(CONTENT_BODY).find('#ttlahir-pegawai').text().trim();
            const [kota, tanggal] = ttl_pegawai.split(',');
            const formatted_tanggal = convertdmyToymd(tanggal);
            const formatted_tanggal_indonesia = formatTanggalIndonesia(formatted_tanggal);

            TANGGAL_LAHIR_PEGAWAI = formatted_tanggal;

            // render component field update karyawan
            const field_nama_pegawai = renderComponentFieldUpdateKaryawan('field-nama-pegawai', 'Nama Pegawai', nama_pegawai, 'Nama Pegawai...');
            const field_email_pegawai = renderComponentFieldUpdateKaryawan('field-email-pegawai', 'Email', email_pegawai, 'Email...');
            const field_no_telepon_pegawai = renderComponentFieldUpdateKaryawan('field-no-telepon-pegawai', 'No Telepon', no_telepon_pegawai, 'No Telepon...');
            const field_tempat_lahir_pegawai = renderComponentFieldUpdateKaryawan('field-tempat-lahir-pegawai', 'Tempat Lahir', kota?.trim(), 'Tempat Lahir...');
            const field_tanggal_lahir_pegawai = renderComponentFieldButtonUpdateKaryawan('tanggal-lahir-pegawai', 'Tanggal Lahir', formatted_tanggal_indonesia);
            // render component field update karyawan ke dom
            $ScrollableBody.html(`${field_nama_pegawai}${field_no_telepon_pegawai}${field_email_pegawai}${field_tempat_lahir_pegawai}${field_tanggal_lahir_pegawai}`);
        })

        $HeaderContent.on('click', '#btn-batal', function () {
            $ScrollableBody.scrollTop(0);

            $NavigationItem.removeClass("active");
            $('#data-diri').addClass("active");
            // remove action container
            $HeaderContent.find('.action-container').remove();
            // render button update
            const element = renderComponenButtonUpdateKaryawan();
            $HeaderContent.append(element);
            // render content body
            $ScrollableBody.html(CONTENT_BODY);
        })

        function handleUpdateKaryawan() {
            const nama_pegawai = $ScrollableBody.find('#field-nama-pegawai').val();
            const email_pegawai = $ScrollableBody.find('#field-email-pegawai').val();
            const no_telepon_pegawai = $ScrollableBody.find('#field-no-telepon-pegawai').val();
            const tempat_lahir_pegawai = $ScrollableBody.find('#field-tempat-lahir-pegawai').val();
            const tanggal_lahir_pegawai = TANGGAL_LAHIR_PEGAWAI;

            const data = {
                nama_pegawai: nama_pegawai,
                email_pegawai: email_pegawai,
                no_telepon_pegawai: no_telepon_pegawai,
                tempat_lahir_pegawai: tempat_lahir_pegawai,
                tanggal_lahir_pegawai: tanggal_lahir_pegawai
            }

            const formatted_tanggal_lahir_pegawai = convertymdTodmy(tanggal_lahir_pegawai);

            $.ajax({
                method: "patch",
                url: "{{ route('api.hris-mobile.v1.update-data-pegawai') }}",
                data: data,
                dataType: "json",
                async: true,
                beforeSend: function () {
                    $HeaderContent.find('#btn-batal').prop('disabled', true);
                    $HeaderContent.find('#btn-simpan').prop('disabled', true);

                    $HeaderContent.find('#btn-batal').text('Memproses...');
                    $HeaderContent.find('#btn-simpan').text('Memproses...');
                },
                success: function (response) {
                    // remove action container
                    $HeaderContent.find('.action-container').remove();
                    // render button update
                    const element = renderComponenButtonUpdateKaryawan();
                    $HeaderContent.append(element);

                    $BiodataNamaPegawai.text(nama_pegawai);
                    // update nama pegawai di dom
                    $(CONTENT_BODY).find('#nama-pegawai').text(nama_pegawai);
                    $(CONTENT_BODY).find('#email-pegawai').text(email_pegawai);
                    $(CONTENT_BODY).find('#telepon-pegawai').html(`${no_telepon_pegawai} <a href="https://wa.me/${no_telepon_pegawai}" target="_blank" class="whatsapp-link">WhatsApp Aktif</a>`);
                    $(CONTENT_BODY).find('#ttlahir-pegawai').text(`${tempat_lahir_pegawai}, ${formatted_tanggal_lahir_pegawai}`);
                    // render content body
                    $ScrollableBody.html(CONTENT_BODY);

                    window.$ALERT_COMPONENT.text('Data diri karyawan berhasil di perbarui');
                    window.$ALERT_COMPONENT.addClass("d-block");

                    setTimeout(function () {
                        // prettier-ignore
                        window.$ALERT_COMPONENT.removeClass("d-block");
                    }, 3000);
                },
                complete: function () {
                    if ($HeaderContent.find('#btn-batal').length) {
                        $HeaderContent.find('#btn-batal').prop('disabled', false);
                        $HeaderContent.find('#btn-batal').text('Batal');
                    }

                    if ($HeaderContent.find('#btn-simpan').length) {
                        $HeaderContent.find('#btn-simpan').prop('disabled', false);
                        $HeaderContent.find('#btn-simpan').text('Simpan');
                    }
                }
            });
        }

        $HeaderContent.on('click', '#btn-simpan', function () {
            $ScrollableBody.scrollTop(0);

            $NavigationItem.removeClass("active");
            $('#data-diri').addClass("active");
            // mengecek apaka inputan sudah diisi semua atau tidak
            const nama_pegawai = $ScrollableBody.find('#field-nama-pegawai').val();
            const email_pegawai = $ScrollableBody.find('#field-email-pegawai').val();
            const no_telepon_pegawai = $ScrollableBody.find('#field-no-telepon-pegawai').val();
            const tempat_lahir_pegawai = $ScrollableBody.find('#field-tempat-lahir-pegawai').val();

            if (!nama_pegawai) {
                $ScrollableBody.find('#field-nama-pegawai').focus();
                return;
            }

            if (!email_pegawai) {
                $ScrollableBody.find('#field-email-pegawai').focus();
                return;
            }

            if (!no_telepon_pegawai) {
                $ScrollableBody.find('#field-no-telepon-pegawai').focus();
                return;
            }

            if (!tempat_lahir_pegawai) {
                $ScrollableBody.find('#field-tempat-lahir-pegawai').focus();
                return;
            }

            handleUpdateKaryawan();
        })

        /**
         * Format a given date string into the Indonesian date format (dd MMM yyyy).
         * @param {string} tanggal - date string in the format 'yyyy-mm-dd'.
         * @returns {string} Formatted date string in the Indonesian date format (dd MMM yyyy).
         */
        function formatTanggalIndonesia(tanggal) {
            const namaBulan = [
                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
            ];

            const date = new Date(tanggal);
            const hari = String(date.getDate()).padStart(2, '0');
            const bulan = namaBulan[date.getMonth()];
            const tahun = date.getFullYear();

            return `${hari} ${bulan} ${tahun}`;
        }

        /**
         * Converts a given date string in the format 'd-m-Y' into the format 'Y-m-d'.
         * @param {string} dateString - date string in the format 'd-m-Y'.
         * @returns {string} Formatted date string in the format 'Y-m-d'.
         * @throws {Error} If the given date string is invalid.
         */
        function convertdmyToymd(dateString) {
            const parts = dateString.split('-');
            if (parts.length !== 3) {
                throw new Error('Format tanggal tidak valid. Gunakan format d-m-Y');
            }

            const [day, month, year] = parts;

            return `${year.trim()}-${month.trim()}-${day.trim()}`;
        }

        /**
         * Converts a given date string in the format 'Y-m-d' into the format 'd-m-Y'.
         * @param {string} dateString - date string in the format 'Y-m-d'.
         * @returns {string} Formatted date string in the format 'd-m-Y'.
         * @throws {Error} If the given date string is invalid.
         */
        function convertymdTodmy(dateString) {
            const parts = dateString.split('-');
            if (parts.length !== 3) {
                throw new Error('Format tanggal tidak valid. Gunakan format Y-m-d');
            }

            const [year, month, day] = parts;

            return `${day.trim()}-${month.trim()}-${year.trim()}`;
        }

        let TANGGAL_LAHIR_PEGAWAI = null;
        let isProcessingTanggalLahirPegawai = false;

        $ScrollableBody.on('click', '#btn-tanggal-lahir-pegawai', function () {
            const ttl_pegawai = $(CONTENT_BODY).find('#ttlahir-pegawai').text().trim();
            const [kota, tanggal] = ttl_pegawai.split(',');
            const formatted_tanggal = convertdmyToymd(tanggal);
            // cek apakah input date ada atau tidak
            if (!$ScrollableBody.find('#field-tanggal-lahir-pegawai').length) {
                // remove button trigger date
                $(this).remove();
                // render component input date
                const element = renderComponentFieldDateUpdateKaryawan('field-tanggal-lahir-pegawai', formatted_tanggal);
                $ScrollableBody.find('#group-tanggal-lahir-pegawai').append(element);

                // Gunakan setTimeout untuk memastikan DOM sudah ter-render
                setTimeout(function () {
                    const dateInput = document.getElementById('field-tanggal-lahir-pegawai');

                    if (dateInput) {
                        // Fokus dulu
                        dateInput.focus();

                        // Delay kecil sebelum showPicker
                        setTimeout(function () {
                            try {
                                if (dateInput.showPicker) {
                                    dateInput.showPicker();
                                } else {
                                    // Fallback: trigger click event
                                    dateInput.click();
                                }
                            } catch (e) {
                                // Jika showPicker gagal (biasa di iOS),
                                // input sudah focused jadi user tinggal tap
                                console.log('showPicker tidak support:', e);
                            }
                        }, 100);
                    }
                }, 50)
            }
        })

        $ScrollableBody.on('change blur', '#field-tanggal-lahir-pegawai', function (event) {
            console.info('field-tanggal-lahir-pegawai');
            // Cegah double execution
            if (isProcessingTanggalLahirPegawai) return;
            isProcessingTanggalLahirPegawai = true;

            event.stopImmediatePropagation();

            // Update value jika event change
            if (event.type === 'change') {
                TANGGAL_LAHIR_PEGAWAI = $(this).val();
            }

            const formated_date = formatTanggalIndonesia(TANGGAL_LAHIR_PEGAWAI);

            // render component button date
            let label = formated_date

            const element = renderComponentDateButtonUpdateKaryawan('tanggal-lahir-pegawai', label);
            $ScrollableBody.find('#group-tanggal-lahir-pegawai').append(element);

            // remove input date
            $(this).remove();

            // Reset flag setelah DOM update
            setTimeout(() => { isProcessingTanggalLahirPegawai = false; }, 10);
        })

        const $BtnChangePhoto = $('#change-photo');

        $BtnChangePhoto.on('click', function () {
            $('#photo-input').trigger('click');
        })

        const $PhotoInput = $('#photo-input');

        $PhotoInput.on('change', function () {
            const file = this.files[0];
            if (!file) return;

            // Validasi ukuran maksimal 5MB
            const maxSize = 5 * 1024 * 1024; // 5MB dalam bytes
            if (file.size > maxSize) {
                alert('Ukuran foto maksimal 5MB. Silakan pilih foto lain.');
                $PhotoInput.val(''); // reset input
                return; // stop eksekusi
            }

            const formData = new FormData();
            formData.append('foto', file);

            $.ajax({
                url: "{{ route('api.hris-mobile.v1.update-photo-pegawai') }}",
                method: 'post',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $('#change-photo').prop('disabled', true);
                },
                success: function (response) {
                    const data = response.data;

                    $AvatarContainer.find("#sample-avatar").attr("src", data);
                },
                error: function (xhr) {
                    console.error('Upload gagal:', xhr.responseText);
                    alert('Gagal mengunggah foto, silakan coba lagi.');
                },
                complete: function () {
                    $BtnChangePhoto.prop('disabled', false);
                    // reset input agar bisa pilih file yang sama lagi
                    $PhotoInput.val('');
                }
            });
        })
    });
</script>
@endpush