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

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

<!-- prettier-ignore -->
@section('content')
<div class="header">
    <!-- prettier-ignore -->
    <img alt="character-asset" src="{{ asset('asset-webview/hris/images/documents-asset.png') }}" height="137"
        width="154">
    <div class="header-information">
        <h4>File Manager</h4>
        <p>Terima kasih sudah selalu melakukan upgrade diri.</p>
    </div>
</div>
<div class="card">
    <div class="header">
        <h6>File Kamu</h6>
    </div>
    <div class="document-container">
        @if (!empty($data))
        @foreach($data as $item)
        <a href="{{ $item['url'] }}" target="_blank" class="list-item" download>
            <!-- prettier-ignore -->
            <img alt="pdf-icon" src="{{ asset('asset-webview/hris/icons/pdf.png') }}" height="30" width="30">
            <div class="list-label">
                <div class="list-title title-case">{{ $item['nama_dokumen'] }}</div>
                <div class="list-subtitle">
                    <!-- prettier-ignore -->
                    <img alt="clock" src="{{ asset('asset-webview/hris/icons/clock.png') }}" height="14" width="14">
                    <span>update {{ $item['updated_at'] }}</span>
                </div>
            </div>
            <!-- prettier-ignore -->
            <img class="action-image" alt="right-angle" src="{{ asset('asset-webview/hris/icons/right-angle.png') }}"
                height="24" width="24">
        </a>
        @endforeach
        @else
        <p class="text-muted text-center">Tidak ada data dokumen yang tersimpan.</p>
        @endif
    </div>
</div>
@endsection

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

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

    // Fungsi untuk mengkonversi string ke Title Case
    function toTitleCase(str) {
        return str
            .toLowerCase() // Ubah semua huruf jadi kecil dulu
            .split(' ') // Pisahkan berdasarkan spasi
            .map(word => {
                // Untuk setiap kata, huruf pertama kapital, sisanya kecil
                return word.charAt(0).toUpperCase() + word.slice(1);
            })
            .join(' '); // Gabungkan kembali dengan spasi
    }

    $('.title-case').each(function () {
        $(this).text(toTitleCase($(this).text()));
    });
</script>
@endpush