@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 class="header">
    <button id="btn-back" class="btn-link">
        <!-- prettier-ignore -->
        <img alt="left-black" src="{{ asset('asset-webview/hris/icons/left-black.png') }}" height="24" width="24">
        <span>Riwayat Hidup</span>
    </button>
</div>
<div id="body-content" class="body">
    <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-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 class="body">
            <div class="show data-content" data-id="data-diri">
                <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>
            </div>
            <!-- prettier-ignore -->
            <div id="content-pendidikan" class="data-content" data-id="data-pendidikan"></div>
            <div id="content-pelatihan" class="data-content" data-id="data-pelatihan"></div>
            <div id="content-penghargaan" class="data-content" data-id="data-penghargaan"></div>
            <div id="content-kedinasan" class="data-content" data-id="data-kedinasan"></div>
            <div id="content-sanksi" class="data-content" data-id="data-sanksi"></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 $BodyContent = $("#body-content");

        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 $ContentPendidikan = $("#content-pendidikan");
        const $ContentPelatihan = $("#content-pelatihan");
        const $ContentPenghargaan = $("#content-penghargaan");
        const $ContentKedinasan = $("#content-kedinasan");
        const $ContentSanksi = $("#content-sanksi");

        function renderComponentPhoto(url) {
            return `<img class="cv-photo" alt="sample-photo" src="${url}" height="200">`
        }

        $.ajax({
            method: "get",
            url: "{{ route('api.hris-mobile.v1.data-pegawai') }}",
            dataType: "json",
            async: true,
            beforeSend: function (xhr) {
                $ContentPendidikan.empty();
            },
            success: function (response) {
                const data_diri = response.data_diri;
                if (data_diri) {
                    $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>`);

                    if (data_diri.foto) {
                        const element = renderComponentPhoto(data_diri.foto);
                        $BodyContent.prepend(element);
                    }
                }

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

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

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

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

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

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

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

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

            $DataContent.each(function () {
                const $this = $(this);
                const konten = $this.data("id");

                // Tambah class berdasarkan status
                $this.addClass("status-" + status);

                // Atau kondisional
                if (id === konten) {
                    $this.addClass("show");
                } else {
                    $this.removeClass("show");
                }
            });
        });
    });
</script>
@endpush