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

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('hris-mobile.slip-gaji.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>Slip Gaji</span>
    </button>
</div>
<div class="card">
    <div class="header">
        <div class="form-group">
            <div class="filter-label">Daftar Gaji</div>
            <!-- prettier-ignore -->
            <select id="filter" class="filter-data">
                <option value="{{ date('Y') - 1 }}">{{ date("Y") - 1 }}</option>
                <option value="{{ date('Y') }}" selected>{{ 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 id="data-list" class="data-list">
            <!-- prettier-ignore -->
            <div class="d-flex justify-content-center align-self-center text-muted fs-6">Tidak ada data gaji untuk tahun {{ date("Y") }}</div>
        </div>
    </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");

        window.sessionStorage.setItem("filter", "202510");

        const $BtnBack = $("#btn-back");
        const $Filter = $("#filter");
        const $DataList = $("#data-list");

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

        $Filter.on("change", function () {
            const value = $(this).val();
            getDataGaji(value);
        });

        function getDataGaji(tahun = "{{ date('Y') }}") {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-payroll') }}",
                data: { tahun },
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data;

                    let html = "";

                    if (data.length > 0) {
                        data.forEach(function (item) {
                            const periode = item.periode;

                            html += `<a href="{{ route('hris-mobile.detail.slip-gaji') }}?periode=${periode}" class="data-item">
                                <img alt="mail-blue" src="{{ asset('asset-webview/hris/icons/mail-blue.png') }}" height="30" width="30" />
                                <div class="item-label">
                                    <h6>${item.bulan}</h6>
                                    <p>Transfer ${item.tanggal_transfer}</p>
                                </div>
                                <img class="action-image" alt="mail-blue" src="{{ asset('asset-webview/hris/icons/right-angle.png') }}" height="24" width="24" />
                            </a>`;
                        });
                    } else {
                        html = `<div class="d-flex justify-content-center align-self-center text-muted fs-6">Tidak ada data gaji untuk tahun ${tahun}</div>`;
                    }

                    $DataList.html(html);
                },
            });
        }

        // initial render
        getDataGaji();
    });
</script>
@endpush