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

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('hris-mobile.benefit-karyawan.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>Benefit Karyawan</span>
    </button>
</div>
<div class="card">
    <div class="body">
        <div class="header-list">
            <div class="header-item tunjangan">Tunjangan</div>
            <div class="header-item saldo text-end">Saldo</div>
        </div>
        <div class="data-list">
            <div class="data-item">
                <div class="item tunjangan">
                    <div class="icon-box">
                        <!-- prettier-ignore -->
                        <img alt="shield2-blue" src="{{ asset('asset-webview/hris/icons/shield2-blue.png') }}" height="24" width="24">
                    </div>
                    <div class="label-box">
                        <h6>Kesehatan</h6>
                        <p>s/d Des 2025</p>
                    </div>
                </div>
                <div class="item saldo text-end">4.300.000</div>
            </div>
            <div class="data-item">
                <div class="item tunjangan">
                    <div class="icon-box">
                        <!-- prettier-ignore -->
                        <img alt="eyeglass-blue" src="{{ asset('asset-webview/hris/icons/eyeglass-blue.png') }}" height="24" width="24">
                    </div>
                    <div class="label-box">
                        <h6>Kacamata</h6>
                        <p>s/d Des 2025</p>
                    </div>
                </div>
                <div class="item saldo text-end">0</div>
            </div>
            <div class="data-item">
                <div class="item tunjangan">
                    <div class="icon-box">
                        <!-- prettier-ignore -->
                        <img alt="burble-blue" src="{{ asset('asset-webview/hris/icons/burble-blue.png') }}" height="24" width="24">
                    </div>
                    <div class="label-box">
                        <h6>Kebugaran</h6>
                        <p>s/d Des 2025</p>
                    </div>
                </div>
                <div class="item saldo text-end">1.000.000</div>
            </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");

        const $BtnBack = $("#btn-back");

        $BtnBack.click(function () {
            window.history.back();
        });
    });
</script>
@endpush