@extends('admin.hris.mobile.main')
<!-- prettier-ignore -->
@push('style')
<!-- prettier-ignore -->
<link rel="stylesheet" href="{{ route('hris-mobile.absensi.css') }}" />
<!-- prettier-ignore -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
@endpush
<!-- prettier-ignore -->
@section('content')
@php
    $currentMonth = date('Y-m');
@endphp

<div class="container-sm">
    <div class="header">
        <button class="btn-icon">
            <!-- prettier-ignore -->
            <img alt="burger-icon" src="{{ asset('asset-webview/hris/icons/burger-black.png') }}" height="16" width="16" />
        </button>
        <div class="filter-container">
            <!-- prettier-ignore -->
            <select id="filter-tanggal">
                <option value="{{ date('Y') }}-01" {{ $currentMonth == date('Y').'-01' ? 'selected' : '' }}>Januari {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-02" {{ $currentMonth == date('Y').'-02' ? 'selected' : '' }}>Februari {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-03" {{ $currentMonth == date('Y').'-03' ? 'selected' : '' }}>Maret {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-04" {{ $currentMonth == date('Y').'-04' ? 'selected' : '' }}>April {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-05" {{ $currentMonth == date('Y').'-05' ? 'selected' : '' }}>Mei {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-06" {{ $currentMonth == date('Y').'-06' ? 'selected' : '' }}>Juni {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-07" {{ $currentMonth == date('Y').'-07' ? 'selected' : '' }}>Juli {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-08" {{ $currentMonth == date('Y').'-08' ? 'selected' : '' }}>Agustus {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-09" {{ $currentMonth == date('Y').'-09' ? 'selected' : '' }}>September {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-10" {{ $currentMonth == date('Y').'-10' ? 'selected' : '' }}>Oktober {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-11" {{ $currentMonth == date('Y').'-11' ? 'selected' : '' }}>November {{ date('Y') }}</option>
                <option value="{{ date('Y') }}-12" {{ $currentMonth == date('Y').'-12' ? 'selected' : '' }}>Desember {{ date('Y') }}</option>
            </select>
            <!-- prettier-ignore -->
            <img alt="up-down" src="{{ asset('asset-webview/hris/icons/up-down.png') }}" height="24" width="16" />
        </div>
    </div>
    <div class="body">
        <div class="calendar-container">
            <div class="weekdays">
                <div class="weekday">S</div>
                <div class="weekday">S</div>
                <div class="weekday">R</div>
                <div class="weekday">K</div>
                <div class="weekday">J</div>
                <div class="weekday">S</div>
                <div class="weekday">M</div>
            </div>
            <div id="calendar-days" class="days"></div>
        </div>
        <div class="information-container">
            <div class="box-information">
                <div class="header">
                    <h6>Kehadiran</h6>
                </div>
                <div class="body">
                    <div class="label-container">
                        <h1 id="persentase-kehadiran">0%</h1>
                        <!-- prettier-ignore -->
                        <p id="label-kehadiran">0 hari masuk kerja dalam total absensi 0 hari.</p>
                    </div>
                    <div class="chart-container">
                        <figure class="highcharts-figure">
                            <div id="absensi-chart"></div>
                        </figure>
                        <div class="legend-container">
                            <div class="legend">
                                <div class="box-legend green"></div>
                                <div class="label-legend">Masuk</div>
                                <!-- prettier-ignore -->
                                <div id="jumlah-masuk" class="label-legend fw-bold ms-auto">0</div>
                            </div>
                            <div class="legend">
                                <div class="box-legend orange"></div>
                                <!-- prettier-ignore -->
                                <div class="label-legend">Sakit</div>
                                <!-- prettier-ignore -->
                                <div id="jumlah-sakit" class="label-legend fw-bold ms-auto">0</div>
                            </div>
                            <div class="legend">
                                <div class="box-legend red"></div>
                                <div class="label-legend">Izin</div>
                                <!-- prettier-ignore -->
                                <div id="jumlah-izin" class="label-legend fw-bold ms-auto">0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<!-- prettier-ignore -->
@section('additional-content')
<!-- prettier-ignore -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="absensi-offcanvas" aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasLabel">Informasi Absensi</h5>
    </div>
    <div class="offcanvas-body">
        <div class="data-information"></div>
        <div class="action-container">
            <button id="close-offcanvas" type="button" class="btn-link">
                Tutup
            </button>
        </div>
    </div>
</div>
@endsection
<!-- prettier-ignore -->
@push('script')
<!-- prettier-ignore -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        window.$BACKGROUND_ROOT.addClass("d-none");
        $(window).scrollTop(0);

        const $FilterTanggal = $("#filter-tanggal");
        const $CalendarDays = $("#calendar-days");
        const $CloseOffcanvas = $("#close-offcanvas");
        const $DataInformation = $(".data-information");
        const $PersentaseKehadiran = $("#persentase-kehadiran");
        const $LabelKehadiran = $("#label-kehadiran");
        const $JumlahMasuk = $("#jumlah-masuk");
        const $JumlahSakit = $("#jumlah-sakit");
        const $JumlahIzin = $("#jumlah-izin");

        // prettier-ignore
        const $AbsensiOffcanvas = new bootstrap.Offcanvas("#absensi-offcanvas");

        let CHART_ABSENSI = null;

        // Data events - customize sesuai kebutuhan
        // prettier-ignore
        let events = {};

        function getDataKalenderNasional(tahun="{{ date('Y') }}", bulan="{{ date('m') }}") {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-kalender-nasional') }}",
                data: { tahun, bulan },
                dataType: "json",
                async: true,
                success: function (response) {
                    events = response.data;
                    renderCalendar();
                },
            });
        }

        // initial render
        getDataKalenderNasional();

        function getDataRekapAbsensi(tahun="{{ date('Y') }}", bulan="{{ date('m') }}") {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-rekap-absensi') }}",
                data: { tahun, bulan },
                dataType: "json",
                async: true,
                success: function (response) {
                    $PersentaseKehadiran.text(`${response.persentase}%`)
                    $LabelKehadiran.text(`${response.jumlah_masuk} hari masuk kerja dalam total absensi ${response.total_absensi} hari.`);
                    $JumlahMasuk.text(response.jumlah_masuk);
                    $JumlahIzin.text(response.jumlah_izin);
                    $JumlahSakit.text(response.jumlah_sakit);
                    renderChartAbsensi(response.data_chart);
                },
            });
        }

        // initial render
        getDataRekapAbsensi();

        // $FilterTanggal.selectize({
        //     create: false,
        //     onChange: function (value) {
        //         const splice = value.split("-");
        //         const month = parseInt(splice[1]) - 1;
        //         const year = parseInt(splice[0]);

        //         currentDate.setFullYear(year, month);
        //         const bulan = (month + 1).toString().padStart(2, '0');
        //         getDataKalenderNasional(year, bulan);
        //         getDataRekapAbsensi(year, bulan);
        //     },
        // });
        $FilterTanggal.on("change", function () {
            const value = $(this).val();
            const splice = value.split("-");
            const month = parseInt(splice[1]) - 1;
            const year = parseInt(splice[0]);

            currentDate.setFullYear(year, month);
            const bulan = (month + 1).toString().padStart(2, '0');
            getDataKalenderNasional(year, bulan);
            getDataRekapAbsensi(year, bulan);
        });

        function getJakartaDateParts(date) {
            const options = {
                timeZone: "Asia/Jakarta",
                year: "numeric",
                month: "numeric",
                day: "numeric",
                hour: "numeric",
                minute: "numeric",
                second: "numeric",
            };

            const formatter = new Intl.DateTimeFormat("en-US", options);
            const parts = formatter.formatToParts(date);

            const dateParts = {};
            parts.forEach(({ type, value }) => {
                dateParts[type] = value;
            });

            return {
                year: parseInt(dateParts.year),
                month: parseInt(dateParts.month) - 1,
                day: parseInt(dateParts.day),
                hour: parseInt(dateParts.hour),
                minute: parseInt(dateParts.minute),
                second: parseInt(dateParts.second),
            };
        }

        function initializeDateWithTimezone() {
            const now = new Date();
            const parts = getJakartaDateParts(now);

            return new Date(
                parts.year,
                parts.month,
                parts.day,
                parts.hour,
                parts.minute,
                parts.second
            );
        }

        function generateCalendar(year, month) {
            // Untuk mendapatkan hari pertama bulan ini
            const firstDay = new Date(year, month, 1);

            // Untuk mendapatkan tanggal terakhir bulan ini
            const lastDay = new Date(year, month + 1, 0);

            // Untuk mendapatkan tanggal terakhir bulan sebelumnya
            const prevLastDate = new Date(year, month, 0);
            // Buat date di UTC dulu, lalu konversi ke Jakarta
            // prettier-ignore
            const firstDayUTC = new Date(Date.UTC(year, month, 1, 0, 0, 0));
            // prettier-ignore
            const lastDayUTC = new Date(Date.UTC(year, month + 1, 0, 0, 0, 0));
            // prettier-ignore
            const prevLastDateUTC = new Date(Date.UTC(year, month, 0, 0, 0, 0));

            // Konversi ke Jakarta timezone
            // prettier-ignore
            const firstDayParts = getJakartaDateParts(firstDayUTC);
            // prettier-ignore
            const firstDayJakarta = new Date(firstDayParts.year, firstDayParts.month, firstDayParts.day);
            // prettier-ignore
            const lastDayParts = getJakartaDateParts(lastDayUTC);
            // prettier-ignore
            const prevLastDateParts =getJakartaDateParts(prevLastDateUTC);

            return {
                firstDay: firstDayJakarta.getDay(),
                lastDate: parseInt(lastDayParts.day),
                prevLastDate: parseInt(prevLastDateParts.day),
            };
        }

        function getDayOfWeek(year, month, day) {
            // prettier-ignore
            const dateUTC = new Date(Date.UTC(year, month, day, 0, 0, 0));
            const parts = getJakartaDateParts(dateUTC);

            return new Date(parts.year, parts.month, parts.day);
        }

        let currentDate = initializeDateWithTimezone();

        function renderCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();

            const generate_calendar = generateCalendar(year, month);
            // Get first day of month (0 = Sunday, 1 = Monday, etc)
            const firstDay = generate_calendar.firstDay;
            // Adjust untuk Senin sebagai hari pertama (0 = Senin)
            const adjustedFirstDay = firstDay === 0 ? 6 : firstDay - 1;

            // Get last date of month
            const lastDate = generate_calendar.lastDate;

            // Get last date of previous month
            const prevLastDate = generate_calendar.prevLastDate;

            $CalendarDays.empty();

            const today = initializeDateWithTimezone();
            // prettier-ignore
            const isCurrentMonth = today.getMonth() === month && today.getFullYear() === year;

            // Previous month days
            for (let i = adjustedFirstDay; i > 0; i--) {
                const day = prevLastDate - i + 1;
                const dayEl = createDayElement(day, "other-month");
                $CalendarDays.append(dayEl);
            }

            // Current month days
            // prettier-ignore
            for (let day = 1; day <= lastDate; day++) {
                const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                const isToday = isCurrentMonth && day === today.getDate();
                const dayOfWeek = getDayOfWeek(year, month, day).getDay();

                const isWeekend = dayOfWeek === 0 || dayOfWeek === 6 // 0 = Sabtu, 6 = Minggu;

                let classes = '';
                if (isToday) classes += ' today';
                if (isWeekend) classes += ' weekend';

                const dayEl = createDayElement(day, classes, dateStr);
                $CalendarDays.append(dayEl);
            }

            // Next month days
            const totalCells = $CalendarDays.children().length;
            const remainingCells = 42 - totalCells; // 6 rows x 7 days
            for (let day = 1; day <= remainingCells; day++) {
                const dayEl = createDayElement(day, "other-month");
                $CalendarDays.append(dayEl);
            }
        }

        function createDayElement(day, classes = "", dateStr = "") {
            // prettier-ignore
            const _dayEl = $("<div>").addClass("label").text(day);
            // prettier-ignore
            const dayEl = $("<div>").data("date", dateStr).addClass(`day ${classes}`).append(_dayEl);

            // Add event styling and indicators
            if (dateStr && events[dateStr]) {
                const event = events[dateStr];
                dayEl.addClass(event.type);
            }

            return dayEl;
        }

        $CalendarDays.on("click", ".day", function () {
            const data = $(this).data("date");
            const event = events[data];

            $DataInformation.empty();

            if (typeof event !== "undefined") {
                let html = "";

                if (event.events.length > 0) {
                    let icon;
                    event.events.forEach(function (item) {
                        // prettier-ignore
                        if (item.type === "CUTI") {
                            // prettier-ignore
                            icon = "{{ asset('asset-webview/hris/icons/cuti-icon.png') }}";
                        } else if (item.type === "IZIN" || item.type === "LIBUR") {
                            // prettier-ignore
                            icon = "{{ asset('asset-webview/hris/icons/izin-icon.png') }}";
                        } else if (item.type === "SPPD") {
                            // prettier-ignore
                            icon = "{{ asset('asset-webview/hris/icons/sppd-icon.png') }}";
                        } else if (item.type === "LEMBUR") {
                            // prettier-ignore
                            icon = "{{ asset('asset-webview/hris/icons/lembur-icon.png') }}";
                        }

                        html += `<div class="item">
                            <img alt="icon" src="${icon}" height="20" width="20">
                            <div class="text-label">${item.keterangan}</div>
                        </div>`;
                    });
                } else {
                    html = `<div class="notes">Tidak ada informasi absensi.</div>`;
                }

                $DataInformation.html(html);

                $AbsensiOffcanvas.show();
            }
        });

        $CloseOffcanvas.click(function () {
            $AbsensiOffcanvas.hide();
        });

        // CHART CONFIGURATION
        function renderChartAbsensi(data) {
            if(!CHART_ABSENSI) {
                CHART_ABSENSI = Highcharts.chart("absensi-chart", {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: 0,
                        plotShadow: false,
                        backgroundColor: "transparent",
                    },
                    title: {
                        text: null,
                    },
                    tooltip: {
                        enabled: false,
                    },
                    exporting: {
                        enabled: false,
                    },
                    credits: {
                        enabled: false,
                    },
                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: false,
                            },
                            colors: [
                                "#1DD882", // Green
                                "#FFC135", // Orange
                                "#FF0000", // Red
                            ],
                            borderWidth: 0,
                            startAngle: -90,
                            endAngle: 90,
                            center: ["40%", "15%"],
                            size: "110%",
                        },
                    },
                    series: [
                        {
                            type: "pie",
                            name: "Browser share",
                            innerSize: "50%",
                            data: [
                                ["Masuk", 80],
                                ["Sakit", 10],
                                ["Izin", 20],
                            ],
                        },
                    ],
                });
            } else {
                CHART_ABSENSI.series[0].setData(data);
            }
        }
        // END CHART CONFIGURATION
    });
</script>
@endpush