@extends('layouts.app')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold">Monitoring Kepatuhan Laporan</h2>
    </div>
 
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3">
            <div class="d-flex align-items-center">
                <h5 class="mb-0 fw-bold text-secondary">Daftar Monitoring Manpower</h5>
                <div class="ms-auto">
                    <button onclick="refreshData()" class="btn btn-sm btn-primary shadow-sm px-3">
                        <i class="fas fa-sync-alt me-2" id="refreshIcon"></i>Refresh Data
                    </button>
                </div>
            </div>
        </div>

        <div class="row align-items-center mb-4">
            <div class="col-12 col-sm-10 d-flex justify-content-start align-items-center"> 
                <div class="btn-group shadow-sm" role="group" aria-label="Date Navigation"> 
                    <button type="button" id="prevDate" class="btn btn-white border-end px-3 py-2" title="Sebelumnya">
                        <i class="bi bi-chevron-left fw-bold text-primary"></i>
                    </button>
 
                    <button type="button" class="btn btn-white px-4 py-2 d-flex align-items-center" data-bs-toggle="modal"
                        data-bs-target="#ModalFilter">
                        <i class="bi bi-calendar3 me-2 text-secondary"></i>
                        <span class="date-display fw-bold text-dark" id="dateDisplay" style="font-size: 1.1rem;"> 
                            Pilih Tanggal
                        </span>
                    </button>
 
                    <button type="button" id="nextDate" class="btn btn-white border-start px-3 py-2" title="Selanjutnya">
                        <i class="bi bi-chevron-right fw-bold text-primary"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="row pb-3 align-items-center g-2"> 
            <div class="col-12 col-md-auto d-flex gap-2"> 
                <div class="dropdown">
                    <button class="btn btn-white btn-sm dropdown-toggle shadow-sm px-3" type="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-list-ol me-1 text-secondary"></i>
                        Tampilkan: <span class="baris fw-bold text-primary">10</span>
                    </button>
                    <ul class="dropdown-menu shadow border-0">
                        <li><button class="dropdown-item" onclick="loadPerPage(10)">10 Baris</button></li>
                        <li><button class="dropdown-item" onclick="loadPerPage(25)">25 Baris</button></li>
                        <li><button class="dropdown-item" onclick="loadPerPage(50)">50 Baris</button></li>
                        <li><button class="dropdown-item" onclick="loadPerPage(100)">100 Baris</button></li>
                    </ul>
                </div>
            </div>
 
            <div class="col d-none d-md-block"></div>
 
            <div class="col-12 col-md-4">
                <div class="input-group input-group-sm shadow-sm">
                    <span class="input-group-text bg-white border-end-0 text-secondary">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" id="searchInput" name="search" class="form-control border-start-0 ps-0"
                        placeholder="Cari data di sini...">
                </div>
            </div>
        </div>


        <div class="table-responsive">
            <table id="datatable" class="table table-hover align-middle mb-0">

                <thead class="table-light">
                    <tr class="text-muted small text-uppercase">

                        <th class="ps-4 d-none d-md-table-cell">No</th>

                        <th>NRP</th>

                        <th class="d-none d-md-table-cell">Nama</th>

                        <th class="d-none d-md-table-cell">Jabatan</th>

                        <th class="d-none d-md-table-cell">Departemen</th>

                        <th>Plan</th>

                        <th>Aktual</th>

                    </tr>
                </thead>

                <tbody></tbody>
            </table>
            <div class="d-flex justify-content-end p-3">
                <nav>
                    <ul class="pagination mb-0" id="pagination"></ul>
                </nav>
            </div>
        </div>
    </div>
 
    <div class="modal fade" id="ModalFilter" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 rounded-4 border-0 shadow">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-semibold">Pilih Bulan & Tahun</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center">
                    <select id="tahunPicker" class="form-select mb-3 shadow-sm">
                        @for ($t = date('Y') - 5; $t <= date('Y') + 1; $t++)
                            <option value="{{ $t }}" {{ $t == date('Y') ? 'selected' : '' }}>{{ $t }}
                            </option>
                        @endfor
                    </select>
                    <div class="d-flex flex-wrap justify-content-center">
                        @php $bulanList = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']; @endphp
                        @foreach ($bulanList as $i => $b)
                            <button type="button"
                                class="btn btn-outline-primary m-1 pilih-bulan {{ $i + 1 == date('n') ? 'active' : '' }}"
                                data-bulan="{{ $i + 1 }}">
                                {{ $b }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const params = new URLSearchParams(window.location.search);
            let today = new Date();
            let bulan = parseInt(params.get('bulan')) || (new Date().getMonth() + 1);
            let tahun = parseInt(params.get('tahun')) || (new Date().getFullYear());

            let page = parseInt(params.get('page')) || 1;
            let perPage = parseInt(params.get('perPage')) || 10;

            let search = params.get('search') || '';

            let typingTimer;
            const delay = 500;

            $("#searchInput").on("keyup", function() {
                clearTimeout(typingTimer);

                typingTimer = setTimeout(() => {
                    search = this.value;
                    page = 1;
                    loadReport(bulan, tahun);
                }, delay);
            });

            document.getElementById("searchInput").value = search;

            document.querySelector(".baris").innerText = perPage;

            function formatTanggalPendek(dateString) {
                if (!dateString) return '';

                const date = new Date(dateString.replace(' ', 'T'));

                return date.toLocaleDateString('id-ID', {
                    day: 'numeric',
                    month: 'short',
                    year: 'numeric'
                });
            }

            $("#tahunPicker").val(tahun);

            function updateDateDisplay(b, t) {
                const monthNames = [
                    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                ];
                $('#dateDisplay').text(monthNames[b - 1] + ' ' + t);
            }

            window.loadPerPage = function(limit) {
                perPage = limit;
                page = 1;  

                document.querySelector(".baris").innerText = limit;

                loadReport(bulan, tahun);
            };

            window.loadReport = function(b, t) {
                bulan = b;
                tahun = t;

                const newUrl = `?bulan=${b}&tahun=${t}&page=${page}&perPage=${perPage}&search=${search}`;
                window.history.replaceState({}, '', newUrl);

                const url =
                    `{{ route('administrator.monitoring') }}?bulan=${b}&tahun=${t}&page=${page}&perPage=${perPage}&search=${search}`;
 
                document.querySelector("#datatable tbody").innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center">Loading...</td>
                    </tr>
                `;

                fetch(url)
                    .then(response => response.json())
                    .then(res => {

                        let rows = '';

                        let no = ((res.pagination.current_page - 1) * res.pagination.per_page) + 1;

                        let paginationHtml = '';

                        let start = Math.max(1, res.pagination.current_page - 2);

                        let end = Math.min(
                            res.pagination.last_page,
                            res.pagination.current_page + 2
                        );

                        for (let i = start; i <= end; i++) {

                            paginationHtml += `
                                <li class="page-item ${i === res.pagination.current_page ? 'active' : ''}">
                                    <button class="page-link" onclick="goPage(${i})">
                                        ${i}
                                    </button>
                                </li>
                            `;
                        }

                        document.getElementById("pagination").innerHTML = paginationHtml;

                        if (res.data.length === 0) {

                            rows = `
                                <tr>
                                    <td colspan="7" class="text-center text-muted">
                                        Data tidak ditemukan
                                    </td>
                                </tr>
                            `;

                        } else {

                            res.data.forEach(item => {

                                rows += `
                                <tr class="align-middle"> 

                                    <!-- DESKTOP NO -->
                                    <td class="ps-4 text-muted d-none d-md-table-cell small">
                                        ${no++}
                                    </td>

                                    <!-- NRP -->
                                    <td>
                                        
                                        <!-- MOBILE -->
                                        <div class="d-flex justify-content-between align-items-start d-md-none">

                                            <!-- KIRI -->
                                            <div>

                                                <div class="fw-semibold text-dark mb-1">
                                                    ${item.nrp ?? '-'} - ${item.nama_karyawan ?? '-'}
                                                </div>

                                                <div class="small text-muted">
                                                    
                                                    <div class="mb-1">
                                                        <i class="bi bi-briefcase me-1"></i>
                                                        ${item.jabatan?.jabatan ?? '-'}
                                                    </div>

                                                    <div>
                                                        <i class="bi bi-building me-1"></i>
                                                        ${item.departemen?.departemen ?? '-'}
                                                    </div>

                                                </div>

                                            </div>

                                            <!-- KANAN -->
                                            <div class="text-end">

                                                <div class="mb-2">

                                                    <div class="small text-muted mb-1">
                                                        Plan
                                                    </div>

                                                    <span class="badge bg-primary text-white px-3 py-2">
                                                        ${item.plan}
                                                    </span>

                                                </div>

                                                <div>

                                                    <div class="small text-muted mb-1">
                                                        Aktual
                                                    </div>

                                                    <a href="/administrator/dashboard/${item.slug}" 
                                                        class="badge bg-success text-white text-decoration-none px-3 py-2">

                                                        ${item.aktual}

                                                    </a>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- DESKTOP -->
                                        <div class="d-none d-md-block">
                                            <div class="fw-semibold text-dark">
                                                ${item.nrp ?? '-'}
                                            </div>
                                        </div>

                                    </td>

                                    <!-- DESKTOP ONLY -->
                                    <td class="d-none d-md-table-cell">
                                        ${item.nama_karyawan ?? '-'}
                                    </td>

                                    <td class="d-none d-md-table-cell small">
                                        ${item.jabatan?.jabatan ?? '-'}
                                    </td>

                                    <td class="d-none d-md-table-cell small">
                                        ${item.departemen?.departemen ?? '-'}
                                    </td>

                                    <td class="d-none d-md-table-cell">
                                        <span class="badge bg-primary text-white fs-6 px-3 py-2 fw-bold shadow-sm d-inline-block text-center"
                                            style="min-width: 65px; border-radius: 6px; letter-spacing: 0.5px;">
                                            ${item.plan}
                                        </span>
                                    </td>

                                    <td class="d-none d-md-table-cell">
                                        <a href="/administrator/dashboard/${item.slug}" 
                                            class="badge bg-success text-white fs-6 px-3 py-2 fw-bold shadow-sm text-decoration-none d-inline-block text-center"
                                            style="min-width: 65px; border-radius: 6px; letter-spacing: 0.5px;">

                                            ${item.aktual}

                                        </a>
                                    </td>

                                </tr>
                                `;
                            });
                        }

                        document.querySelector("#datatable tbody").innerHTML = rows;
                    })
                    .catch(err => {
                        console.error("Error:", err);
                        document.querySelector("#datatable tbody").innerHTML = `
                            <tr>
                                <td colspan="7" class="text-center text-danger">
                                    Gagal memuat data
                                </td>
                            </tr>
                        `;
                    });

                updateDateDisplay(b, t);
                const modalEl = document.getElementById('ModalFilter');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();
            };

            window.goPage = function(p) {
                page = p;
                loadReport(bulan, tahun);
            };

            window.refreshData = function() {

                const icon = document.getElementById("refreshIcon");
 
                icon.classList.add("fa-spin");
 
                page = 1;
 
                loadReport(bulan, tahun);
 
                setTimeout(() => {
                    icon.classList.remove("fa-spin");
                }, 800);

            };

            $("#prevDate").on("click", function() {
                bulan--;
                if (bulan < 1) {
                    bulan = 12;
                    tahun--;
                }
                page = 1;
                loadReport(bulan, tahun);
            });

            $("#nextDate").on("click", function() {
                bulan++;
                if (bulan > 12) {
                    bulan = 1;
                    tahun++;
                }
                page = 1;
                loadReport(bulan, tahun);
            });

            $(document).on("click", ".pilih-bulan", function() {
                $(".pilih-bulan").removeClass("active");
                $(this).addClass("active");

                let pilihBulan = $(this).data("bulan");
                let pilihTahun = $("#tahunPicker").val();
                page = 1;
                loadReport(pilihBulan, pilihTahun);
            });

            loadReport(bulan, tahun);
        });
    </script>
@endsection