@extends('layout.main')
@section('body_main')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Data Terakhir</h4>
                </div>
                <div class="card-body p-2">
                    <div class="d-flex mb-3">
                        <input type="text" onchange="searchData(this)" class="form-control form-control-sm" placeholder="Search">
                        <button type="button" class="btn btn-primary ms-2">Cari</button>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>File Folder</th>
                                <th>Tanggal Modifikasi</th>
                            </tr>
                        </thead>
                        <tbody id="tableFolderLastUpdated">
                            <!-- data dari fetch masuk sini -->
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <script>
        function fetchData(){
            fetch(`/last-document`)
            .then(response => response.json())
            .then(data => {
                    const tbody = document.getElementById('tableFolderLastUpdated');
                    const resData = data?.data || [];

                    if (resData.length === 0) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="3" class="text-center text-muted">
                                    Tidak ada data
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    tbody.innerHTML = resData.map(item => {
                    const fullPath = item.file;

                    const parts = fullPath.split('/');

                    const fileName = parts.pop();          // ambil paling belakang
                    const folderPath = parts.join('/');    // gabung sisanya

                    return `
                        <tr>
                            <td>${fileName}</td>
                            <td>${folderPath}</td>
                            <td>${formatTanggal(item.entry_at)}</td>
                        </tr>
                    `;
                }).join('');


                })
                .catch(error => console.error('Error : ', error))
        }

        function formatTanggal(dateString) {
            const d = new Date(dateString);

            return d.toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        }
        fetchData()
    </script>
@endsection