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

<!-- prettier-ignore -->
@push('style')
<!-- prettier-ignore -->
<link rel="stylesheet" href="{{ route('hris-mobile.libur-kerja-detail.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>Status Pengajuan</span>
    </button>
</div>
<div id="body-content" class="body">
    <div class="box">
        <div id="no-bukti" class="text-label"></div>
        <div id="jenis-pengajuan" class="subtext-label"></div>
        <div id="history-timeline" class="timeline"></div>
    </div>

    <!-- Tombol batalkan -->
</div>
@endsection

<!-- prettier-ignore -->
@section('additional-content')
<!-- prettier-ignore -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="form-offcanvas" aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Pembatalan Pengajuan Cuti</h5>
    </div>
    <div class="offcanvas-body">
        <div class="form-group">
            <input id="keterangan" name="keterangan" type="text" class="form-control" placeholder="Keterangan"
                autocomplete="off" required maxlength="100">
        </div>
        <button id="btn-simpan" type="button" class="btn btn-primary" disabled>Batalkan Pengajuan</button>
    </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");

        $BtnBack.click(function () {
            window.location.href = "{{ route('hris-mobile.page.libur-kerja') }}"
        });

        // Dari URL saat ini
        const urlParams = new URLSearchParams(window.location.search);
        const no_bukti = urlParams.get('no_bukti');

        const $NoBukti = $("#no-bukti");
        const $JenisPengajuan = $("#jenis-pengajuan");

        $NoBukti.text(no_bukti);

        /**
         * Mengembalikan icon untuk timeline berdasarkan status progress dan jenis verifikasi.
         * @param {string} status_progress - Status progress (P, A, R)
         * @param {string} jenis_ver - Jenis verifikasi (APPROVAL, VERIFIKATOR)
         * @returns {string} Icon untuk timeline
         */
        function onLoadIconTimeline(status_progress, jenis_ver) {
            if (jenis_ver === 'VERIFIKATOR' && status_progress === 'P') {
                return `<div class="icon-container on-progress">
                    <div class="icon-bullet"></div>
                </div>`
            } else if (status_progress === 'A') {  // Disederhanakan
                return `<img alt="icon-checkmark" src="{{ asset('asset-webview/hris/icons/icon-checkmark20.png') }}">`
            } else if (status_progress === 'R' || status_progress === 'B') {  // Disederhanakan
                return `<img alt="icon-checkmark" src="{{ asset('asset-webview/hris/icons/cross-circle-red20.png') }}">`
            } else if (jenis_ver === 'APPROVAL' && status_progress === 'P') {
                return `<div class="icon-container"></div>`
            }
        }

        /**
         * Mengembalikan nama peran berdasarkan role pengajuan
        * @param {string} role - Role pengajuan (PEMBUAT, VERIFIKATOR, APPROver)
        * @returns {string} Nama peran
        */
        function onLoadRole(role, status_progress = null) {
            if (role === 'PEMBUAT') {
                if (status_progress === 'B') {
                    return 'Pengajuan Dibatalkan'
                }

                return 'Pengajuan Dibuat'
            } else if (role === 'VERIFIKATOR') {
                return 'Verifikator'
            } else {
                return 'Approval'
            }
        }

        /**
         * Mengembalikan status progress berdasarkan jenis verifikasi
         * @param {string} jenis_ver - Jenis verifikasi (APPROVAL, VERIFIKATOR)
         * @returns {string} Status progress (Pembuat, Dalam proses)
         */
        function onLoadStatusProgress(jenis_ver, status_progress) {
            if (jenis_ver === 'PEMBUAT') {
                return 'Pembuat'
            } else if (status_progress === 'A' || status_progress === 'R') {
                return 'Diproses oleh'
            } else if (jenis_ver !== 'PEMBUAT' && status_progress === 'B') { // jika ada status lain
                return 'Pengajuan Dibatalkan'
            } else if (status_progress) { // jika ada status lain
                return 'Dalam proses'
            } else {
                return 'Belum diproses' // atau sesuai kebutuhan
            }
        }

        /**
         * Renders a component that displays an item of timeline.
         * @param {string} tanggal - Tanggal pengajuan.
         * @param {string} status_progress - Status progress (P, A, R).
         * @param {string} nama_user - Nama user yang melakukan pengajuan.
         * @param {string} jenis_ver - Jenis verifikasi (APPROVAL, VERIFIKATOR).
         * @returns {string} The HTML component for the item of timeline.
         */
        function renderComponentTimelineItem(tanggal, status_progress, nama_user, jenis_ver) {
            const role = onLoadRole(jenis_ver, status_progress);

            let _tanggal;
            const isApproved = status_progress === 'A' ? true : false;
            const progress = onLoadStatusProgress(jenis_ver, status_progress);
            const icon = onLoadIconTimeline(status_progress, jenis_ver);

            if (jenis_ver !== 'PEMBUAT' && status_progress === 'B') {
                _tanggal = 'Selesai';
            } else {
                _tanggal = tanggal ? tanggal : 'Menunggu approval';
            }

            return `<div class="timeline-item ${isApproved ? 'has-approved' : ''}">
                ${icon}
                <div class="item-content">
                    <div class="item-title">${role}</div>
                    <div class="item-details">
                        <div class="detail-title">${progress}</div>
                        <div class="badge">${nama_user}</div>
                    </div>
                </div>
                <div class="subitem-content">${_tanggal}</div>
            </div>`;
        }

        /**
         * Renders a component that displays a cancel button.
         * The cancel button is appended to the '#body-content' element.
         * @returns {void}
         */
        function renderComponentCancelButton() {
            const el = `<div id="action-footer" class="action-footer">
                <button id="btn-abort" class="btn-cancel" type="button">
                    Batalkan Pengajuan
                </button>
            </div>`

            $('#body-content').append(el)
        }

        const $HistoryTimeline = $('#history-timeline');

        $.ajax({
            method: "get",
            url: "{{ route('api.hris-mobile.v1.data-progress-cuti') }}",
            data: { no_bukti },
            dataType: "json",
            async: true,
            success: function (response) {
                console.log(response);
                const data = response.data;

                if (data.pengajuan.cancelled === '1') {
                    // render cancel button
                    renderComponentCancelButton();
                }

                $NoBukti.text(data.pengajuan.no_bukti);
                $JenisPengajuan.text(data.pengajuan.nama_jenis);

                const progress = data.progress

                let html = ''
                progress.forEach(function (item) {
                    const element = renderComponentTimelineItem(item.tanggal, item.status_progress, item.nama_user, item.jenis_ver);
                    html += element
                })

                $HistoryTimeline.html(html);
            }
        });

        /**
             * Handle an error when making an AJAX request.
             * @param {JQueryXHR} xhr - the XMLHttpRequest object.
             * @param {string} default_error - the default error message to use if no specific message is found.
             */
        function onErrorAjaxRequest(xhr, default_error) {
            let error_message = default_error;

            // Handle error dari Laravel validation
            if (xhr.status === 422) {
                // Validation error dari Laravel
                const errors = xhr.responseJSON.errors;

                if (errors && errors.file) {
                    // Ambil pesan error pertama untuk field 'file'
                    error_message = errors.file[0];
                } else if (xhr.responseJSON.message) {
                    error_message = xhr.responseJSON.message;
                }
            } else if (xhr.status === 413) {
                // Payload too large (file terlalu besar di server)
                error_message = 'Ukuran file terlalu besar untuk diupload ke server';
            }
            else if (xhr.status === 500) {
                // Server error
                error_message = 'Terjadi kesalahan pada server';
            }
            else if (xhr.status === 0) {
                // Network error
                error_message = 'Tidak ada koneksi ke server';
            }
            else if (xhr.responseJSON && xhr.responseJSON.message) {
                // Error message dari response
                error_message = xhr.responseJSON.message;
            }

            // Tampilkan alert dengan pesan error
            showAlert(error_message);
        }

        /**
         * Membuat komponen alert yang dapat ditutup dan akan otomatis hilang setelah waktu tertentu
         * @param {string} message - pesan yang ingin ditampilkan
         * @param {string} [type='primary'] - tipe alert yang ingin ditampilkan (default: primary)
         * @param {number} [timeout=3000] - waktu dalam milidetik yang dibutuhkan untuk menghilangkan alert
         * @returns {bootstrap.Alert} - instance bootstrap.Alert yang baru dibuat
         */
        function showAlert(message, type = 'primary', timeout = 3000) {
            console.info('showAlert');

            // cek apakah komponen alert sudah ada atau belum, jika belum buat terlebih dahulu
            if ($('#alert-component').length === 0) {
                $('body').append(`<div id="alert-component" class="alert d-none" role="alert"></div>`);
            }

            const alertEl = document.getElementById('alert-component');

            // Dispose instance lama jika ada
            const oldInstance = bootstrap.Alert.getInstance(alertEl);
            if (oldInstance) {
                oldInstance.dispose();
            }

            // Set konten dan class
            alertEl.className = `alert alert-${type} d-block alert-dismissible fade show`;
            alertEl.innerHTML = message;
            console.log(alertEl);
            // Buat instance baru
            const bsAlert = new bootstrap.Alert(alertEl);

            // Auto close
            if (timeout > 0) {
                setTimeout(() => {
                    bsAlert.close();
                }, timeout);
            }

            return bsAlert;
        }

        const $FormCanvas = $('#form-offcanvas');
        const formOffcanvas = new bootstrap.Offcanvas('#form-offcanvas');

        $('#body-content').on('click', '#btn-abort', function (e) {
            e.preventDefault();

            formOffcanvas.show();
        })

        $('#keterangan').on('input', function (e) {
            const value = $(this).val();

            if (value !== '') {
                $('#btn-simpan').prop('disabled', false);
            } else {
                $('#btn-simpan').prop('disabled', true);
            }
        })

        function onSubmitBatal(e) {
            e.preventDefault();

            const keterangan = $('#keterangan').val();

            $.ajax({
                method: "post",
                url: "{{ route('api.hris-mobile.v1.submit-batal-cuti') }}",
                data: { no_cuti: no_bukti, keterangan },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    $('#btn-simpan').prop('disabled', true);
                    $('#btn-simpan').text('Memproses...');
                },
                success: function (response) {
                    if (!response.data) {
                        showAlert(response.message, 'primary', 2000);

                        return;
                    }

                    showAlert(response.message, 'primary', 2000);

                    setTimeout(function () {
                        // redirect ke halaman pengajuan cuti
                        window.location.href = "{{ route('hris-mobile.page.libur-kerja') }}"
                    }, 2500);
                },
                complete: function () {
                    // Hanya reset tombol jika bukan success
                    if (status !== 'success') {
                        $('#btn-simpan').prop('disabled', false);
                        $('#btn-simpan').text('Batalkan Pengajuan');
                    }
                }
            });
        }

        $('#btn-simpan').on('click', onSubmitBatal)
    });
</script>
@endpush