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

<!-- prettier-ignore -->
@push('style')
<!-- prettier-ignore -->
<link rel="stylesheet" href="{{ route('hris-mobile.libur-kerja.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>Ajukan Cuti</span>
    </button>
    <button type="button" id="btn-tambah" class="btn btn-secondary">
        <!-- prettier-ignore -->
        <img alt="circle-add" src="{{ asset('asset-webview/hris/icons/circle-plus.png')}}" height="16" width="16">
        <span>Tambah</span>
    </button>
</div>
<div class="card">
    <ul id="nav-container" class="nav nav-underline" role="tablist">
        <li class="nav-item" role="presentation">
            <!-- prettier-ignore -->
            <button class="nav-link active" id="pengajuan-tab" data-bs-toggle="tab" data-bs-target="#pengajuan-tab-pane"
                type="button" role="tab" aria-controls="pengajuan-tab-pane" aria-selected="true">Pengajuan</button>
        </li>
        <li class="nav-item" role="presentation">
            <!-- prettier-ignore -->
            <button class="nav-link" id="saldo-tab" data-bs-toggle="tab" data-bs-target="#saldo-tab-pane" type="button"
                role="tab" aria-controls="saldo-tab-pane" aria-selected="false">Saldo Cuti</button>
        </li>
    </ul>
    <div class="tab-content">
        <!-- prettier-ignore -->
        <div class="tab-pane active" id="pengajuan-tab-pane" role="tabpanel" aria-labelledby="pengajuan-tab"
            tabindex="0">
            <div id="list-pengajuan" class="data-list">
                <div class="text-muted text-center">Belum ada pengajuan</div>
            </div>
        </div>
        <!-- prettier-ignore -->
        <div class="tab-pane" id="saldo-tab-pane" role="tabpanel" aria-labelledby="saldo-tab" tabindex="0">
            <div class="header-list">
                <div class="header-item keterangan">keterangan</div>
                <div class="header-item sisa text-end">Sisa Hari</div>
            </div>
            <div id="list-saldo-cuti" class="data-list"></div>
        </div>
    </div>
</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">Ajukan Cuti</h5>
    </div>
    <div class="offcanvas-body">
        <div class="form-group">
            <div class="input-group">
                <label for="jenis-cuti">Jenis Cuti</label>
                <select id="jenis-cuti" name="jenis_cuti" class="form-control" required></select>
            </div>
            <!-- prettier-ignore -->
            <img alt="up-down" src="{{ asset('asset-webview/hris/icons/up-down.png') }}" height="24" width="16" />
        </div>
        <div class="form-group">
            <div id="form-group-tanggal-awal" class="input-group">
                <div class="form-label">Tanggal Awal</div>
                <button class="btn-link" id="btn-tanggal-awal">Pilih Tanggal Awal</<button>
            </div>
        </div>
        <div class="form-group">
            <div id="form-group-tanggal-akhir" class="input-group">
                <div class="form-label">Tanggal Akhir</div>
                <button class="btn-link" id="btn-tanggal-akhir">Pilih Tanggal Akhir</<button>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <label for="jumlah-sisa">Sisa Tahunan</label>
                <input id="jumlah-sisa" name="jumlah_sisa" type="text" class="form-control" placeholder="Sisa Hari"
                    autocomplete="off" value="0" readonly>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <label for="jumlah-hari">Jumlah Hari</label>
                <input id="jumlah-hari" name="jumlah_hari" type="text" class="form-control" placeholder="Jumlah Hari"
                    autocomplete="off" value="0" readonly>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <label for="keterangan">Keterangan</label>
                <input id="keterangan" name="keterangan" type="text" class="form-control" placeholder="Keterangan"
                    autocomplete="off" required>
            </div>
        </div>
        <button id="btn-simpan" type="button" class="btn btn-primary" disabled>Ajukan</button>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@push('script')
<!-- prettier-ignore -->
<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 $BtnTambah = $("#btn-tambah");
        const $BtnSimpan = $("#btn-simpan");
        const $JumlahSisa = $("#jumlah-sisa");
        const $JumlahHari = $("#jumlah-hari");
        const $Keterangan = $("#keterangan");
        const $JenisCuti = $("#jenis-cuti");

        // Mengambil nama jika ada gelarnya
        function getOnlyName(str) {
            const replace = str.split(',')[0].trim();
            // Hapus semua karakter selain huruf dan spasi, lalu trim
            return replace.replace(/[^a-zA-Z\s]/g, '').trim();
        }

        function renderComponentApprover(text) {
            const formatted = getOnlyName(text);

            return `<div class="item-right">${formatted}</div>`
        }

        function renderComponentHeaderListPengajuan() {
            return `<div class="data-header">
                <div class="header">Pengajuan</div>
                <div class="header">Validator</div>
            </div>`;
        }

        function renderItemPengajuan(data) {
            const icons = ["{{ asset('asset-webview/hris/icons/checkmark-green.png') }}", "{{ asset('asset-webview/hris/icons/reload-orange.png') }}", "{{ asset('asset-webview/hris/icons/cross-circle-red.png') }}"];

            let html_approver = renderComponentApprover(data.nama_apv);
            let icon = icons[1];

            if (data.status === 'A') {
                html_approver = renderComponentApprover(data.nama_apv);
                icon = icons[0];
            } else if (data.status === 'R') {
                icon = icons[2];
                html_approver = renderComponentApprover(data.nama_apv);
            } else if (data.status === 'B') {
                icon = icons[2];
                html_approver = renderComponentApprover('-');
            }

            return `<a href="{{ route('hris-mobile.page.libur-kerja-detail') }}?no_bukti=${data.no_bukti}" class="data-item">
                <img alt="calendar2-blue" src="{{ asset('asset-webview/hris/icons/calendar2-blue.png') }}" height="24" width="24" />
                <div class="item">
                    <div class="item-label">
                        <h6>${data.nama_cuti}</h6>
                        <img alt="checkmark-green" src="${icon}" height="16" width="16" />
                    </div>
                    <p>${data.tanggal_mulai} s/d ${data.tanggal_selesai}</p>
                </div>
                ${html_approver}
            </a>`
        }

        function renderEmptyListPengajuan() {
            return `<div class="text-muted text-center">Belum ada pengajuan</div>`
        }

        const $ListPengajuan = $("#list-pengajuan");

        function loadDataPengajuan() {
            $.ajax({
                type: "get",
                url: "{{ route('api.hris-mobile.v1.data-aju-cuti') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data;

                    if (data.length === 0) {
                        const element = renderEmptyListPengajuan();
                        $ListPengajuan.html(element);

                        return
                    }

                    let html = '';
                    data.forEach(function (item) {
                        const element = renderItemPengajuan(item);

                        html += element;
                    })

                    $ListPengajuan.html(html);

                    const header = renderComponentHeaderListPengajuan();
                    $ListPengajuan.prepend(header);
                }
            });
        }

        // call loadDataPengajuan on document ready
        loadDataPengajuan();

        function renderItemSaldoCuti(data) {
            const icons = ["{{ asset('asset-webview/hris/icons/birth-blue.png') }}", "{{ asset('asset-webview/hris/icons/calendar2-blue.png') }}"];

            let icon = icons[1];
            if (data.nama_cuti.includes('Melahirkan')) {
                icon = icons[0];
            }

            return `<div class="data-item">
                <div class="item keterangan">
                    <div class="icon-container">
                        <img alt="rip-blue" src="${icon}" height="24" width="24" />
                    </div>
                    <div class="item-label">
                        <h6>${data.nama_cuti}</h6>
                        <p>s/d ${data.batas_cuti}</p>
                    </div>
                </div>
                <div class="saldo text-end">${data.saldo_cuti}</div>
            </div>`
        }

        const $ListSaldoCuti = $("#list-saldo-cuti");

        function loadDataSaldoCuti() {
            $.ajax({
                type: "get",
                url: "{{ route('api.hris-mobile.v1.data-saldo-cuti') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data;

                    let html = '';
                    data.forEach(function (item) {
                        const element = renderItemSaldoCuti(item);

                        html += element;
                    })

                    $ListSaldoCuti.html(html);
                }
            });
        }

        // call loadDataSaldoCuti on document ready
        loadDataSaldoCuti();

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

                    let selected = 'selected';

                    data.forEach(function (item, index) {
                        if (index !== 0) selected = '';

                        $JenisCuti.append(`<option value="${item.kode_status}" ${selected}>${item.nama_status}</option>`);
                    })
                }
            });
        }

        // call loadJenisCuti on document ready
        loadJenisCuti();

        const formOffcanvas = new bootstrap.Offcanvas('#form-offcanvas');
        const $FormGroupTanggalAwal = $("#form-group-tanggal-awal");
        const $FormGroupTanggalAkhir = $("#form-group-tanggal-akhir");

        let TANGGAL_AWAL_CUTI = "{{ date('Y-m-d') }}"
        let TANGGAL_AKHIR_CUTI = "{{ date('Y-m-d') }}"

        $FormGroupTanggalAwal.find('button').text(formatTanggalIndonesia(TANGGAL_AWAL_CUTI));
        $FormGroupTanggalAkhir.find('button').text(formatTanggalIndonesia(TANGGAL_AKHIR_CUTI));

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

        function renderDateInputTanggalAwalCuti(value = "{{ date('Y-m-d')}}") {
            return `<input id="tanggal-mulai" name="tanggal_mulai" type="date" class="form-control" placeholder="Tanggal Mulai"
            value="${value}" min="{{ date('Y-01-01') }}" max="{{ date('Y-12-31') }}">`
        }

        function renderButtonTanggalAwalCuti(label) {
            return `<button class="btn-link" id="btn-tanggal-awal">${label}</<button>`
        }

        function renderDateInputTanggalSelesaiCuti(value = "{{ date('Y-m-d')}}") {
            return `<input id="tanggal-selesai" name="tanggal_selesai" type="date" class="form-control" placeholder="Tanggal Selesai"
            value="${value}" min="{{ date('Y-01-01') }}" max="{{ date('Y-12-31') }}">`
        }

        function renderButtonTanggalAkhirCuti(label) {
            return `<button class="btn-link" id="btn-tanggal-akhir">${label}</<button>`
        }

        $FormGroupTanggalAwal.on('click', 'button', function () {
            // cek apakah ada inputan date tanggal
            if (!$FormGroupTanggalAwal.find('input').length) {
                // hapus element button terlebih dahulu
                $FormGroupTanggalAwal.find('button').remove();
                // buat element input date
                const element = renderDateInputTanggalAwalCuti(TANGGAL_AWAL_CUTI)
                // render element input date
                $FormGroupTanggalAwal.append(element);

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

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

        $FormGroupTanggalAkhir.on('click', 'button', function () {
            // cek apakah ada inputan date tanggal
            if (!$FormGroupTanggalAkhir.find('input').length) {
                // hapus element button terlebih dahulu
                $FormGroupTanggalAkhir.find('button').remove();
                // buat element input date
                const element = renderDateInputTanggalSelesaiCuti(TANGGAL_AKHIR_CUTI)
                // render element input date
                $FormGroupTanggalAkhir.append(element);

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

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

        function manageButtonSimpan(sisa_cuti, jumlah_cuti) {
            if (sisa_cuti === 0) {
                $BtnSimpan.prop("disabled", true);
                $BtnSimpan.text('Sisa cuti sudah habis');

                return;
            }

            if (sisa_cuti < jumlah_cuti) {
                $BtnSimpan.prop("disabled", true);
                $BtnSimpan.text('Jumlah cuti melebihi sisa cuti');

                return;
            }

            $BtnSimpan.prop("disabled", false);
            $BtnSimpan.text('Ajukan');
        }

        function loadJumlahCutiByJenis() {
            const jenis_cuti = $JenisCuti.val();
            const tanggal_mulai = TANGGAL_AWAL_CUTI;
            const tanggal_akhir = TANGGAL_AKHIR_CUTI;

            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-jumlah-cuti') }}",
                data: { jenis_cuti, tanggal_mulai, tanggal_akhir },
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data

                    if (data === null) {
                        $BtnSimpan.prop("disabled", true);
                        $BtnSimpan.text('Ajukan');

                        window.$ALERT_COMPONENT.text(response.message);
                        window.$ALERT_COMPONENT.addClass("d-block");

                        setTimeout(function () {
                            // prettier-ignore
                            window.$ALERT_COMPONENT.removeClass("d-block");
                        }, 3000);

                        return;
                    }

                    $JumlahSisa.val(data.sisa_cuti);
                    $JumlahHari.val(data.jumlah_cuti);

                    manageButtonSimpan(data.sisa_cuti, data.jumlah_cuti);
                }
            });
        }

        $JenisCuti.on('change', function () {
            loadJumlahCutiByJenis();
        })

        let isProcessingTanggalMulai = false;
        $FormGroupTanggalAwal.on('change blur', '#tanggal-mulai', function (event) {
            // Cegah double execution
            if (isProcessingTanggalMulai) return;
            isProcessingTanggalMulai = true;

            event.stopImmediatePropagation();

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

            const formated_date = formatTanggalIndonesia(TANGGAL_AWAL_CUTI);

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

            // render component button date
            const element = renderButtonTanggalAkhirCuti(formated_date);
            $FormGroupTanggalAwal.append(element);

            // recall data cuti jika event change
            if (event.type === 'change') {
                if (TANGGAL_AWAL_CUTI && TANGGAL_AKHIR_CUTI) {
                    loadJumlahCutiByJenis();
                }
            }

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

        let isProcessingTanggalSelesai = false;
        $FormGroupTanggalAkhir.on('change blur', '#tanggal-selesai', function (event) {
            // Cegah double execution
            if (isProcessingTanggalSelesai) return;
            isProcessingTanggalSelesai = true;

            event.stopImmediatePropagation();

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

            const formated_date = formatTanggalIndonesia(TANGGAL_AKHIR_CUTI);

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

            // render component button date
            const element = renderButtonTanggalAkhirCuti(formated_date);
            $FormGroupTanggalAkhir.append(element);

            // recall data cuti jika event change
            if (event.type === 'change') {
                if (TANGGAL_AWAL_CUTI && TANGGAL_AKHIR_CUTI) {
                    loadJumlahCutiByJenis();
                }
            }

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

        function resetFields() {
            TANGGAL_AWAL_CUTI = "{{ date('Y-m-d') }}"
            TANGGAL_AKHIR_CUTI = "{{ date('Y-m-d') }}"
            $JenisCuti.val('1');
            $JumlahSisa.val('0');
            $JumlahHari.val('0');
            $Keterangan.val('');

            $BtnSimpan.prop("disabled", true);
            $BtnSimpan.text('Ajukan');
        }

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

        $BtnTambah.click(function () {
            resetFields();

            formOffcanvas.show();
            loadJumlahCutiByJenis();
        });

        function submitData() {
            const jenis_cuti = $JenisCuti.val();
            const tanggal_mulai = TANGGAL_AWAL_CUTI;
            const tanggal_akhir = TANGGAL_AKHIR_CUTI;
            const jumlah_cuti = $JumlahHari.val();
            const jumlah_sisa = $JumlahSisa.val();
            const keterangan = $Keterangan.val();

            $.ajax({
                method: "post",
                url: "{{ route('api.hris-mobile.v1.submit-cuti') }}",
                data: {
                    jenis_cuti,
                    tanggal_mulai,
                    tanggal_akhir,
                    jumlah_sisa,
                    jumlah_cuti,
                    keterangan
                },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    $BtnSimpan.prop("disabled", true);
                    $BtnSimpan.text('Mengirim...');
                },
                success: function (response) {
                    const data = response.data;

                    if (data !== null) {
                        loadDataPengajuan();
                        loadDataSaldoCuti();
                    }

                    formOffcanvas.hide();

                    window.$ALERT_COMPONENT.text(response.message);
                    window.$ALERT_COMPONENT.addClass("d-block");

                    setTimeout(function () {
                        // prettier-ignore
                        window.$ALERT_COMPONENT.removeClass("d-block");
                    }, 3000);

                    // Reset form fields
                    resetFields();
                },
                complete: function () {
                    $BtnSimpan.prop("disabled", false);
                    $BtnSimpan.text('Ajukan');
                }
            });
        }

        $BtnSimpan.click(function () {
            const keterangan = $Keterangan.val();

            if (!keterangan) {
                window.$ALERT_COMPONENT.text('Keterangan harus diisi');
                window.$ALERT_COMPONENT.addClass("d-block");

                setTimeout(function () {
                    // prettier-ignore
                    window.$ALERT_COMPONENT.removeClass("d-block");
                }, 3000);

                return;
            }

            submitData();
        });
    });
</script>
@endpush