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

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

<!-- prettier-ignore -->
@section('content')
@php
$currentMonth = date('Ym');
$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>Ajukan Absensi</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">
    <div class="header">
        <div class="form-group">
            <div class="filter-label">Daftar Izin Absensi</div>
            <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 id="data-list" class="data-list">
            <div class="text-muted d-flex justify-content-center align-items-center">Tidak ada data.</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 Absensi</h5>
    </div>
    <div class="offcanvas-body">
        <div class="form-group">
            <!-- prettier-ignore -->
            <select id="jenis-absensi" name="jenis_absensi" class="form-control">
                <option value="" disabled selected>Pilih Jenis Absensi</option>
            </select>
            <!-- prettier-ignore -->
            <img alt="up-down" src="{{ asset('asset-webview/hris/icons/up-down.png') }}" height="24" width="16" />
        </div>
        <div class="form-group">
            <!-- prettier-ignore -->
            <input id="keterangan" name="keterangan" type="text" class="form-control" placeholder="Keterangan"
                autocomplete="off">
        </div>
        <div id="checkbox-wrapper" class="form-group checkbox-wrapper">
            <!-- prettier-ignore -->
            <input id="with-location" type="checkbox" class="checkbox-input" value="1" checked>
            <div class="checkbox-custom">
                <!-- prettier-ignore -->
                <svg class="checkmark" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="20 6 9 17 4 12" fill="none" stroke="currentColor" stroke-width="3"
                        stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <span class="label-text">Dengan Koordinat Lokasi</span>
        </div>
        <button id="btn-simpan" type="button" class="btn btn-primary">Kirim</button>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@push('script')
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        $(window).scrollTop(0);
        window.$NAVIGATION_BOTTOM.css("opacity", 0);

        const $Filter = $("#filter");
        const $BtnBack = $("#btn-back");
        const $BtnTambah = $("#btn-tambah");
        const $BtnSimpan = $("#btn-simpan");
        const $JenisAbsensi = $("#jenis-absensi");
        const $Keterangan = $("#keterangan");
        const $CheckboxWrapper = $("#checkbox-wrapper");
        const $WithLocation = $("#with-location");

        const formOffcanvas = new bootstrap.Offcanvas('#form-offcanvas');

        const $EMPTY_COMPONENT = `<div class="text-muted d-flex justify-content-center align-items-center">Tidak ada data.</div>`;

        let LATITUDE = null;
        let LONGITUDE = null;

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

        $BtnTambah.click(function () {
            formOffcanvas.show();
        });

        $BtnSimpan.click(function () {
            submitData();
        });

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

        // Cek apakah browser mendukung Geolocation
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                // Callback sukses
                function (position) {
                    LATITUDE = position.coords.latitude;
                    LONGITUDE = position.coords.longitude;
                },
                // Callback error
                function (error) {
                    console.error("Error:", error.message);
                    if (error.code === error.POSITION_UNAVAILABLE) {
                        // prettier-ignore
                        alert("Silakan aktifkan GPS/Location di pengaturan perangkat Anda");
                        // Tampilkan instruksi cara mengaktifkan GPS
                    }

                    if (error.code === error.PERMISSION_DENIED) {
                        // prettier-ignore
                        alert("Silakan izinkan akses lokasi di pengaturan perangkat Anda");
                    }
                },
                {
                    enableHighAccuracy: true,
                    timeout: 15000,
                    maximumAge: 0,
                }
            );
        } else {
            console.log("Browser tidak mendukung Geolocation");
        }

        function loadJenisAbsensi() {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-status-absensi') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data
                    data.forEach(function (item) {
                        $JenisAbsensi.append(`<option value="${item.status_absen}">${item.nama_status}</option>`);
                    })
                }
            });
        }

        // Call loadJenisAbsensi on document ready
        loadJenisAbsensi();

        function loadData(periode = "{{ date('Ym') }}") {
            $.ajax({
                method: "get",
                url: "{{ route('api.hris-mobile.v1.data-aju-absensi') }}",
                dataType: "json",
                data: { periode },
                beforeSend: function () {
                    $("#data-list").empty();
                },
                async: true,
                success: function (response) {
                    const data = response.data;

                    if (data.length === 0) {
                        $("#data-list").html($EMPTY_COMPONENT);
                        return;
                    }

                    data.forEach(function (item) {
                        let imgIcon = "{{ asset('asset-webview/hris/icons/cross-circle-red.png') }}";

                        if (item.progress === "3") {
                            imgIcon = "{{ asset('asset-webview/hris/icons/checkmark-green.png') }}";
                        } else if (item.progress === "A" || item.progress === "0") {
                            imgIcon = "{{ asset('asset-webview/hris/icons/reload-orange.png') }}";
                        }

                        let html = `<div class="data-item">
                            <img alt="mail-blue" src="{{ asset('asset-webview/hris/icons/mail-blue.png') }}" height="30" width="30" />
                            <div class="item-label">
                                <div>
                                    <h6>${item.tanggal}</h6>
                                    <img alt="reload-orange" src="${imgIcon}" height="16" width="16" />
                                </div>
                                <p>${item.keterangan}</p>
                            </div>
                            <div class="time-label">${item.waktu}</div>
                        </div>`;

                        $("#data-list").append(html);
                    });
                }
            });
        }
        // Call loadData on document ready
        loadData();

        function submitData() {
            const jenis_absensi = $JenisAbsensi.val();
            const keterangan = $Keterangan.val();
            const with_location = $WithLocation.is(":checked") ? "1" : "0";

            let tipe_absen = "I"
            if (window.STATUS_ABSENSI === "PULANG") {
                tipe_absen = "O"
            }

            $.ajax({
                method: "post",
                url: "{{ route('api.hris-mobile.v1.submit-aju-absensi') }}",
                data: { jenis_absensi: jenis_absensi, keterangan: keterangan, tipe_absen: tipe_absen, with_location: with_location, latitude: LATITUDE, longitude: LONGITUDE },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    $BtnSimpan.prop("disabled", true);
                },
                success: function (response) {
                    if (response.status) {
                        loadData();
                    }

                    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
                    $JenisAbsensi.val("");
                    $Keterangan.val("");
                },
                complete: function () {
                    $BtnSimpan.prop("disabled", false);
                }
            });
        }
    });
</script>
@endpush