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

<!-- prettier-ignore -->
@push('style')
<!-- 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"/>
<link rel="stylesheet" href="{{ route('hris-mobile.jadwal-kerja.css') }}" />
@endpush

<!-- prettier-ignore -->
@section('content')
@php
    $currentMonth = date('Y-m');
    $tahun = date('Y');
@endphp

<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>Jadwal Kerja</span>
</button>
</div>
<div class="card">
<div class="header">
    <div class="form-group">
        <!-- prettier-ignore -->
        <select id="filter" class="filter-data">
            <option value="{{ $tahun }}01" {{ $currentMonth == $tahun . '-01' ? 'selected' : '' }}>Januari {{ $tahun }}</option>
            <option value="{{ $tahun }}02" {{ $currentMonth == $tahun . '-02' ? 'selected' : '' }}>Februari {{ $tahun }}</option>
            <option value="{{ $tahun }}03" {{ $currentMonth == $tahun . '-03' ? 'selected' : '' }}>Maret {{ $tahun }}</option>
            <option value="{{ $tahun }}04" {{ $currentMonth == $tahun . '-04' ? 'selected' : '' }}>April {{ $tahun }}</option>
            <option value="{{ $tahun }}05" {{ $currentMonth == $tahun . '-05' ? 'selected' : '' }}>Mei {{ $tahun }}</option>
            <option value="{{ $tahun }}06" {{ $currentMonth == $tahun . '-06' ? 'selected' : '' }}>Juni {{ $tahun }}</option>
            <option value="{{ $tahun }}07" {{ $currentMonth == $tahun . '-07' ? 'selected' : '' }}>Juli {{ $tahun }}</option>
            <option value="{{ $tahun }}08" {{ $currentMonth == $tahun . '-08' ? 'selected' : '' }}>Agustus {{ $tahun }}</option>
            <option value="{{ $tahun }}09" {{ $currentMonth == $tahun . '-09' ? 'selected' : '' }}>September {{ $tahun }}</option>
            <option value="{{ $tahun }}10" {{ $currentMonth == $tahun . '-10' ? 'selected' : '' }}>Oktober {{ $tahun }}</option>
            <option value="{{ $tahun }}11" {{ $currentMonth == $tahun . '-11' ? 'selected' : '' }}>November {{ $tahun }}</option>
            <option value="{{ $tahun }}12" {{ $currentMonth == $tahun . '-12' ? 'selected' : '' }}>Desember {{ $tahun }}</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="header-list">
        <div class="header-item tanggal">Tanggal</div>
        <div class="header-item keterangan">Keterangan</div>
    </div>
    <div id="data-jadwal" class="data-list"></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");
        const $Filter = $("#filter");
        const $DataJadwal = $("#data-jadwal");

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

        $Filter.on('change', function() {
            const value = $(this).val();
            const tahun = value.substring(0, 4);
            const bulan = value.substring(4, 6);

            getJadwalKerja(bulan, tahun);
        });

        function getJadwalKerja(bulan = "{{ date('m') }}", tahun = "{{ date('Y') }}") {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-jadwal-kerja') }}",
                data: { bulan, tahun },
                dataType: "json",
                async: true,
                beforeSend: function() {
                    $DataJadwal.empty();
                },
                success: function(response) {
                    const data = response.data;

                    if(data.length > 0) {
                        let html = "";

                        data.forEach(function(item) {
                            html += `<div class="data-item">
                                <div class="item tanggal">
                                    <h1>${item.tanggal}</h1>
                                    <p>${item.nama_hari}</p>
                                </div>
                                <div class="item keterangan">
                                    <div class="item-location">
                                        <img alt="marker-blue" src="{{ asset('asset-webview/hris/icons/marker-blue.png') }}" height="24" width="24">
                                        <p>${item.lokasi}</p>
                                    </div>
                                    <div class="item-time">
                                        <img alt="marker-blue" src="{{ asset('asset-webview/hris/icons/clock2-blue.png') }}" height="24" width="24">
                                        <p>${item.jadwal} WIB</p>
                                    </div>
                                </div>
                            </div>`;
                        });

                        $DataJadwal.html(html);
                    }
                }
            });
        }

        // Initial load
        getJadwalKerja();
    });
</script>
@endpush