@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav')

    <div class="container-fluid py-3">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="mb-3">
                    <h6 class="mb-2 text-dark font-weight-bold">Pull Finger</h6>
                    <div class="px-3 py-2 rounded-2 mb-2" style="background-color: #f1f3f5; border: 1px solid #d9dfe3;">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <i class="fas fa-circle-info text-primary"></i>
                            <span class="text-sm font-weight-bold" style="color: #344767 !important;">Petunjuk Umum</span>
                        </div>
                        <ul class="text-sm mb-0 ps-4" style="color: #344767 !important;">
                            <li class="mb-1">Pastikan sebelum melakukan pull, data <strong>Tukar Jadwal</strong> sudah diinput pada sistem FTM. Apabila belum, hasil rekap finger dapat tidak akurat karena deteksi scan masuk dan scan keluar menjadi tidak valid.</li>
                            <li class="mb-1">Apabila total sumber data (Sumber Data) lebih banyak daripada data lokal (Data Lokal), status tanggal tersebut akan menjadi <strong>Belum Lengkap</strong> dan perlu dilakukan <strong>Pull Ulang</strong> agar data terkini tergambar penuh.</li>
                            <li class="mb-1">Apabila terdapat data pada kolom <strong>Summary Tanpa Shift</strong>, pastikan seluruh data tukar jadwal telah diinput pada sistem FTM terlebih dahulu, kemudian lakukan <strong>Pull Ulang</strong> setelah selesai input.</li>
                            <li class="mb-1">Ikon <i class="fas fa-circle-info text-info"></i> di samping angka pada kolom <strong>Total Summary</strong> dan <strong>Summary Tanpa Shift</strong> berfungsi untuk menampilkan <strong>rincian per status karyawan</strong> pada tanggal tersebut beserta status pull masing-masing. Arti warnanya:
                                <ul class="ps-4 mt-1 mb-0">
                                    <li class="mb-1"><i class="fas fa-circle-info text-info"></i> <strong class="text-danger">Merah</strong> — ada status karyawan yang belum dipull (total summary-nya masih 0).</li>
                                    <li class="mb-1"><i class="fas fa-circle-info text-warning"></i> <strong class="text-warning">Kuning</strong> — seluruh status sudah dipull tetapi ada yang belum lengkap.</li>
                                    <li class="mb-1"><i class="fas fa-circle-info text-success"></i> <strong class="text-success">Hijau</strong> — seluruh status sudah lengkap.</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div id="noFtmAlertContainer">@include('components.karyawan-tanpa-ftm-alert')</div>
                </div>

                <form id="pullFingerFilterForm" onsubmit="event.preventDefault(); loadDailySummary();">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="bulan" class="form-label text-sm font-weight-bold">Bulan</label>
                            <select class="form-select" id="bulan" name="bulan">
                                @php
                                    $months = [
                                        '01' => 'Januari',
                                        '02' => 'Februari',
                                        '03' => 'Maret',
                                        '04' => 'April',
                                        '05' => 'Mei',
                                        '06' => 'Juni',
                                        '07' => 'Juli',
                                        '08' => 'Agustus',
                                        '09' => 'September',
                                        '10' => 'Oktober',
                                        '11' => 'November',
                                        '12' => 'Desember',
                                    ];
                                @endphp
                                @foreach ($months as $value => $label)
                                    <option value="{{ $value }}" {{ ($default_month ?? now()->format('m')) === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="tahun" class="form-label text-sm font-weight-bold">Tahun</label>
                            <input type="number" class="form-control" id="tahun" name="tahun" min="2000" max="2100" value="{{ $default_year ?? now()->format('Y') }}">
                        </div>
                        <div class="col-md-4">
                            <label for="status_karyawan" class="form-label text-sm font-weight-bold">Status Karyawan</label>
                            @php
                                $statusQuery = DB::select("SELECT id, nama FROM msjhris.mst_status ORDER BY id");
                                $statusFilterForRole = $status_filter_for_role ?? [
                                    'is_krl_role' => false,
                                    'is_hrd_role' => false,
                                    'preselected_status_ids' => [],
                                    'preselected_status_names' => [],
                                    'readonly' => false,
                                    'message' => '',
                                ];
                            @endphp
                            
                            @if ($statusFilterForRole['readonly'])
                                <div class="position-relative">
                                    <select class="form-control select2"
                                        name="status_karyawan[]"
                                        id="status_karyawan"
                                        multiple
                                        @if ($statusFilterForRole['is_krl_role']) readonly @endif>
                                        <option value="all">Semua Status</option>
                                        @if ($statusQuery)
                                            @foreach ($statusQuery as $sq)
                                                <br />
<b>Warning</b>:  Undefined variable $sq in <b>/opt/lampp/htdocs/msjabsensi/resources/views/absens/trspul/list.blade.php</b> on line <b>88</b><br />
                                                <option value="{{ $sAsArray[0] }}" 
                                                    @if(!empty($statusFilterForRole['preselected_status_ids']) && in_array($sAsArray[0], $statusFilterForRole['preselected_status_ids'])) selected @endif>
                                                    {{ $sAsArray[1] }}
                                                </option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @if ($statusFilterForRole['is_krl_role'])
                                        <div class="position-absolute top-0 end-0 p-1" style="margin-top: -6px; margin-left: -6px;">
                                            <i class="fas fa-lock text-secondary" style="font-size: 10px;"></i>
                                        </div>
                                    @endif
                                </div>
                                @if (!empty($statusFilterForRole['message']))
                                    <small class="text-warning d-block mt-1">
                                        <i class="fas fa-info-circle me-1"></i>{{ $statusFilterForRole['message'] }}
                                    </small>
                                @endif
                            @else
                                <select class="form-control select2"
                                    name="status_karyawan[]"
                                    id="status_karyawan"
                                    multiple>
                                    <option value="all" {{ empty($statusFilterForRole['preselected_status_ids']) ? 'selected' : '' }}>Semua Status</option>
                                    @if ($statusQuery)
                                        @foreach ($statusQuery as $sq)
                                            <br />
<b>Warning</b>:  Undefined variable $sq in <b>/opt/lampp/htdocs/msjabsensi/resources/views/absens/trspul/list.blade.php</b> on line <b>115</b><br />
                                            <option value="{{ $sAsArray[0] }}" 
                                                @if(!empty($statusFilterForRole['preselected_status_ids']) && in_array($sAsArray[0], $statusFilterForRole['preselected_status_ids'])) selected @endif>
                                                {{ $sAsArray[1] }}
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <div class="d-flex h-100 align-items-end">
                                <button type="button" class="btn btn-primary w-100 mb-0" onclick="loadDailySummary()">
                                    <i class="fas fa-search me-2"></i>Tampilkan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-sm">
                <div class="card-header pb-0">
                <h6 class="text-dark font-weight-bold mb-0">Tanggal Tersedia</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-items-center mb-0" id="summaryTable">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th style="width: 60px;">No</th>
                                <th style="width: 180px;">Hari</th>
                                <th style="width: 180px;">Tanggal</th>
                                <th style="width: 140px;">Sumber Data</th>
                                <th style="width: 140px;">Data Lokal</th>
                                <th style="width: 140px;">Total Summary</th>
                                <th style="width: 140px;">Summary Tanpa Shift</th>
                                <th style="width: 160px;">Status</th>
                                <th style="width: 120px;">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function loadNoFtmAlert() {
                var bulan = document.getElementById('bulan')?.value;
                var tahun = document.getElementById('tahun')?.value;
                if (!bulan || !tahun) return;

                var start = tahun + '-' + bulan + '-01';
                var endDate = new Date(tahun, bulan, 1); // awal bulan berikutnya
                var end = endDate.getFullYear() + '-' +
                    String(endDate.getMonth() + 1).padStart(2, '0') + '-' +
                    String(endDate.getDate()).padStart(2, '0');

                fetch('{{ route('noftm.alert') }}?start=' + start + '&end=' + end, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                    .then(function (res) { return res.text(); })
                    .then(function (html) {
                        var container = document.getElementById('noFtmAlertContainer');
                        if (container) container.innerHTML = html;
                    })
                    .catch(function (e) { console.error('Gagal memuat alert karyawan tanpa FTM', e); });
            }

            document.getElementById('bulan')?.addEventListener('change', loadNoFtmAlert);
            document.getElementById('tahun')?.addEventListener('change', loadNoFtmAlert);
            // muat ulang sesuai nilai default filter saat halaman dibuka
            document.addEventListener('DOMContentLoaded', loadNoFtmAlert);
        </script>
        <style>
            #summaryTable th,
            #summaryTable td {
                vertical-align: middle;
            }

            .table-wrap-centered,
            #summaryTable_wrapper {
                max-width: 99%;
                margin: 0 auto;
            }
        </style>
        <script>
            let summaryTable = null;
            let cachedSummaryRows = [];
            let pendingPullTanggal = '';
            let pendingPullLabel = '';
            let pullStatusTimer = null;

            $(document).ready(function() {
                loadDailySummary();
            });

            function loadDailySummary() {
                const bulan = document.getElementById('bulan').value;
                const tahun = document.getElementById('tahun').value;
                const statusKaryawanSelect = document.getElementById('status_karyawan');
                let statusKaryawan = [];
                if (statusKaryawanSelect && statusKaryawanSelect.selectedOptions) {
                    for (let i = 0; i < statusKaryawanSelect.selectedOptions.length; i++) {
                        const value = statusKaryawanSelect.selectedOptions[i].value;
                        // Jika memilih "all" atau ada nilai, masukkan ke array
                        if (value === 'all' || value) {
                            statusKaryawan.push(value);
                        }
                    }
                }

                // Jika tidak ada yang dipilih atau hanya "all", kirim array kosong (artinya semua status)
                if (statusKaryawan.length === 0 || (statusKaryawan.length === 1 && statusKaryawan[0] === 'all')) {
                    statusKaryawan = []; // Kirim kosong = tampilkan semua
                }

                if (!bulan || !tahun) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Filter diperlukan',
                        text: 'Silakan pilih bulan dan tahun terlebih dahulu.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                if (summaryTable) {
                    summaryTable.destroy();
                    summaryTable = null;
                }

                $('#summaryTable tbody').html(`
                    <tr>
                        <td colspan="8" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status"></div>
                            <p class="text-sm text-secondary mt-3 mb-0">Memuat tanggal tersedia...</p>
                        </td>
                    </tr>
                `);

                $.ajax({
                    url: '{{ route('trspul.summary') }}',
                    method: 'GET',
                    data: {
                        bulan: bulan,
                        tahun: tahun,
                        status_karyawan: statusKaryawan
                    },
                    success: function(response) {
                        cachedSummaryRows = response.data || [];
                        renderDailySummary(cachedSummaryRows);
                    },
                    error: function(xhr) {
                        $('#summaryTable tbody').html(`
                            <tr>
                                <td colspan="8" class="text-center py-4 text-danger">
                                    Gagal memuat tanggal tersedia.
                                </td>
                            </tr>
                        `);

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message || 'Gagal memuat tanggal tersedia.',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            }

            function renderDailySummary(rows) {
                if (summaryTable) {
                    summaryTable.destroy();
                    summaryTable = null;
                }

                const tbody = $('#summaryTable tbody');
                tbody.empty();

                if (!rows.length) {
                    tbody.html(`
                        <tr>
                            <td colspan="8" class="text-center py-4">
                                <i class="fas fa-inbox fa-3x text-secondary mb-3 d-block"></i>
                                <p class="text-sm text-secondary mb-0">Belum ada data tanggal tersedia untuk rentang ini.</p>
                            </td>
                        </tr>
                    `);
                    return;
                }

                rows.forEach((row, index) => {
                    const isComplete = String(row.status_sync || '').toLowerCase() === 'lengkap';
                    const localRecords = Number(row.local_records || 0);
                    let statusHtml;
                    if (isComplete) {
                        statusHtml = `<div class="d-flex align-items-center gap-2">
                            <span class="badge bg-primary">Lengkap</span>
                            <button type="button" class="btn btn-sm btn-warning mb-0" onclick="pullUlang('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}')">
                                <i class="fas fa-rotate me-1"></i>Pull Ulang
                            </button>
                            
                        </div>`;
                    } else if (localRecords > 0) {
                        statusHtml = `<div class="d-flex align-items-center gap-2">
                            <span class="badge" style="background-color: #fb6340 !important; color: #ffffff !important;">Belum Lengkap</span>
                            <button type="button" class="btn btn-sm btn-warning mb-0" onclick="pullUlang('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}')">
                                <i class="fas fa-rotate me-1"></i>Pull Ulang
                            </button>
                        </div>`;
                    } else {
                        statusHtml = `<button type="button" class="btn btn-sm btn-danger mb-0" onclick="showPullFingerWarning('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}', ${row.source_records || 0}, ${row.local_records || 0})">Belum Dipull</button>`;
                    }
                    const totalSummaryHtml = `
                <div class="d-flex align-items-center justify-content-center gap-1">
                    <span class="fw-semibold">${row.total_summary || 0}</span>
                    <button type="button" class="btn btn-sm btn-link ${row.info_color_class || 'text-info'} p-0 mb-0" title="Rincian per status"
                        onclick="showStatusBreakdown('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}')">
                        <i class="fas fa-circle-info"></i>
                    </button>
                </div>`;
            const totalBelumLengkapHtml = `
                <div class="d-flex align-items-center justify-content-center gap-1">
                    <span class="fw-semibold">${row.total_summary_belum_lengkap || 0}</span>
                    <button type="button" class="btn btn-sm btn-link ${row.info_color_class || 'text-info'} p-0 mb-0" title="Rincian per status"
                        onclick="showStatusBreakdown('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}')">
                        <i class="fas fa-circle-info"></i>
                    </button>
                </div>`;
            tbody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${row.hari || '-'}</td>
                            <td>${row.tanggal || '-'}</td>
                            <td>${row.source_records || 0}</td>
                            <td>${row.local_records || 0}</td>
                            <td class="text-center">${totalSummaryHtml}</td>
                            <td class="text-center">${totalBelumLengkapHtml}</td>
                            
                            <td>
                                ${statusHtml}
                            </td>
                            <td>
                                <button type="button" class="btn btn-sm btn-info mb-0" onclick="showDetail('${escapeHtml(row.tanggal_iso || '')}', '${escapeHtml(row.tanggal || '-')}')">
                                    <i class="fas fa-eye me-1"></i>Detail
                                </button>
                            </td>
                        </tr>
                    `);
                });

                summaryTable = $('#summaryTable').DataTable({
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Maaf - Data tidak ada',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    searching: false,
                    responsive: true,
                    dom: 'rtip'
                });
            }

            function getSelectedStatusValues() {
                const sel = document.getElementById('status_karyawan');
                const vals = [];
                if (sel && sel.selectedOptions) {
                    for (let i = 0; i < sel.selectedOptions.length; i++) {
                        const v = sel.selectedOptions[i].value;
                        if (v && v !== 'all') vals.push(v);
                    }
                }
                return vals;
            }

            function normalizeStatusKaryawanSelection(event) {
                const select = document.getElementById('status_karyawan');
                if (!select) return;
                const values = Array.from(select.selectedOptions).map(option => option.value);
                const selectedValue = event && event.params && event.params.data
                    ? String(event.params.data.id)
                    : '';
                if (selectedValue === 'all') {
                    $(select).val(['all']).trigger('change.select2');
                } else if (selectedValue !== '' && values.includes('all')) {
                    $(select).val(values.filter(value => value !== 'all')).trigger('change.select2');
                } else if (values.length === 0) {
                    $(select).val(['all']).trigger('change.select2');
                }
            }

            function buildSelectedStatusQuery() {
                const vals = getSelectedStatusValues();
                if (!vals.length) return '';
                return vals.map(v => '&status_karyawan[]=' + encodeURIComponent(v)).join('');
            }

            function showStatusBreakdown(tanggalIso, tanggalLabel) {
                const rows = (cachedSummaryRows || []).filter((row) =>
                    String(row.tanggal_iso || '') === String(tanggalIso || '')
                );

                if (!rows.length) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Belum ada data',
                        text: 'Tidak ada data ringkasan untuk tanggal ' + (tanggalLabel || tanggalIso || '-') + '.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const breakdownMap = {};
                rows.forEach((row) => {
                    (row.breakdown || []).forEach((item) => {
                        const key = String(item.id_status ?? 0);
                        if (!breakdownMap[key]) {
                            breakdownMap[key] = {
                                id_status: item.id_status ?? 0,
                                status: item.status || ('Status ' + (item.id_status ?? 0)),
                                status_sync: item.status_sync || '',
                                total_summary: 0,
                                total_summary_belum_lengkap: 0,
                            };
                        }
                        breakdownMap[key].total_summary += Number(item.total_summary || 0);
                        breakdownMap[key].total_summary_belum_lengkap += Number(item.total_summary_belum_lengkap || 0);
                        if (String(item.status_sync || '').toLowerCase() === 'lengkap') {
                            breakdownMap[key].status_sync = item.status_sync;
                        }
                    });
                });

                const items = Object.values(breakdownMap).sort((a, b) => Number(a.id_status) - Number(b.id_status));

                if (!items.length) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Belum ada data',
                        text: 'Belum ada rincian per status untuk tanggal ' + (tanggalLabel || tanggalIso || '-') + '.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const title = 'Rincian Total Summary';
                let totalSummary = 0;
                let totalBelumLengkap = 0;
                const bodyRows = items.map((item, index) => {
                    const summary = Number(item.total_summary || 0);
                    const belumLengkap = Number(item.total_summary_belum_lengkap || 0);
                    const statusSync = String(item.status_sync || '').toLowerCase() === 'lengkap' ? 'Lengkap' : 'Belum Lengkap';
                    totalSummary += summary;
                    totalBelumLengkap += belumLengkap;
                    return `<tr>
                        <td class="text-center">${index + 1}</td>
                        <td>${escapeHtml(item.status || '-')}</td>
                        <td class="text-center fw-semibold">${summary}</td>
                        <td class="text-center fw-semibold">${belumLengkap}</td>
                        <td class="text-center"><span class="badge ${statusSync === 'Lengkap' ? 'bg-primary' : ''}" ${statusSync === 'Lengkap' ? '' : 'style="background-color: #fb6340 !important; color: #ffffff !important;"'}>${statusSync}</span></td>
                    </tr>`;
                }).join('');

                Swal.fire({
                    title: title,
                    html: `
                        <div class="fw-semibold mb-1">${escapeHtml(tanggalLabel || tanggalIso || '-')}</div>
                        <div class="text-sm text-secondary mb-3">Rincian per status karyawan</div>
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0">
                                <thead style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center" style="width: 50px;">No</th>
                                        <th>Status Karyawan</th>
                                        <th class="text-center" style="width: 110px;">Total Summary</th>
                                        <th class="text-center" style="width: 130px;">Summary Tanpa Shift</th>
                                        <th class="text-center" style="width: 130px;">Status</th>
                                    </tr>
                                </thead>
                                <tbody>${bodyRows}</tbody>
                                <tfoot>
                                    <tr class="fw-bold">
                                        <td class="text-center" colspan="2">Total</td>
                                        <td class="text-center">${totalSummary}</td>
                                        <td class="text-center">${totalBelumLengkap}</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                                                </div>`,
                    width: '820px',
                    confirmButtonText: 'Tutup',
                    confirmButtonColor: '#028284',
                    // Sesuaikan lebar modal dengan lebar tabel agar tabel tidak
                    // terpotong / tidak memerlukan scroll horizontal.
                    didOpen: function () {
                        const popup = Swal.getPopup();
                        const table = popup.querySelector('table');
                        if (!table) return;

                        // Clone tabel ke dalam container terlepas (lebar auto,
                        // tidak terbatas) untuk mengukur lebar alami (natural) tabel.
                        const measurer = document.createElement('div');
                        measurer.style.position = 'fixed';
                        measurer.style.top = '-9999px';
                        measurer.style.left = '-9999px';
                        measurer.style.width = 'auto';
                        measurer.style.maxWidth = 'none';
                        measurer.style.padding = '0';
                        const clone = table.cloneNode(true);
                        measurer.appendChild(clone);
                        document.body.appendChild(measurer);

                        const naturalWidth = clone.offsetWidth;
                        document.body.removeChild(measurer);

                        // +48px untuk padding/margin bodi Swal agar tabel pas pasnya.
                        const target = Math.max(820, naturalWidth + 48);
                        // Jangan terlalu lebar.
                        popup.style.width = Math.min(target, 1200) + 'px';

                        // Buat area scroll tetap visible agar tabel tidak terseliah.
                        const wrapper = popup.querySelector('.table-responsive');
                        if (wrapper) wrapper.style.overflow = 'visible';
                    }
                });
            }

            function showDetail(tanggalIso, tanggalLabel) {
                const tanggal = tanggalIso || '';
                if (!tanggal) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanggal tidak valid',
                        text: 'Silakan pilih tanggal yang ingin dilihat.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const url = '{{ route('trspul.fingerDetail') }}?tanggal=' + encodeURIComponent(tanggal) + buildSelectedStatusQuery();
                window.open(url, '_blank');
            }

            function escapeHtml(value) {
                return String(value || '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function showPullFingerWarning(tanggalIso, tanggalLabel, sourceRecords, localRecords) {
                const message = localRecords > 0
                    ? `Tanggal ini belum lengkap dipull. Data sumber terkini ${sourceRecords} baris, sedangkan terakhir dipull ${localRecords} baris. Ada tambahan att_log setelah pull terakhir. Klik "Pull Sekarang" untuk langsung menarik data tanggal ini.`
                    : `Tanggal ini belum dipull. Data sumber tersedia ${sourceRecords} baris, tetapi data lokal masih kosong. Klik "Pull Sekarang" untuk langsung menarik data tanggal ini.`;

                pendingPullTanggal = tanggalIso || '';
                pendingPullLabel = tanggalLabel || tanggalIso || '-';

                Swal.fire({
                    icon: 'warning',
                    title: 'Tanggal Belum Dipull',
                    html: `<div class="fw-semibold mb-1">${pendingPullLabel}</div><div class="text-sm text-secondary mb-0">${message}</div>`,
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-download me-1"></i>Pull Sekarang',
                    cancelButtonText: 'Tutup',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d'
                }).then((result) => {
                    if (result.isConfirmed) {
                        startManualPull();
                    }
                });
            }

            // Pull manual untuk tanggal yang belum dipull / belum lengkap.
            function startManualPull() {
                if (!pendingPullTanggal) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanggal tidak valid',
                        text: 'Silakan pilih tanggal yang ingin dipull terlebih dahulu.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                startPull(pendingPullTanggal, pendingPullLabel || pendingPullTanggal);
            }

            // Pull ulang untuk tanggal yang sudah berstatus Lengkap.
            function pullUlang(tanggalIso, tanggalLabel) {
                const tanggal = tanggalIso || '';
                if (!tanggal) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanggal tidak valid',
                        text: 'Silakan pilih tanggal yang ingin dipull ulang terlebih dahulu.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const label = tanggalLabel || tanggal;
                Swal.fire({
                    icon: 'question',
                    title: 'Pull Ulang',
                    html: `Yakin ingin pull ulang data untuk <strong>${label}</strong>?<br><small>Data yang sudah tersimpan akan di-refresh dari sumber.</small>`,
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-download me-1"></i>Ya, Pull Ulang',
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6c757d'
                }).then((result) => {
                    if (result.isConfirmed) {
                        startPull(tanggal, label);
                    }
                });
            }

            function startPull(tanggal, label) {
                Swal.fire({
                    title: 'Pull Finger',
                    html: `Sedang menarik data untuk <strong>${label}</strong>...<br><small>Proses ini berjalan di background dan mungkin memerlukan beberapa saat.</small>`,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Ambil status karyawan yang sedang dipilih di filter.
                // Kosong / 'all' = pull semua status.
                let statusKaryawan = [];
                const statusKaryawanSelect = document.getElementById('status_karyawan');
                if (statusKaryawanSelect && statusKaryawanSelect.selectedOptions) {
                    for (let i = 0; i < statusKaryawanSelect.selectedOptions.length; i++) {
                        statusKaryawan.push(statusKaryawanSelect.selectedOptions[i].value);
                    }
                }
                if (statusKaryawan.length === 0 || (statusKaryawan.length === 1 && statusKaryawan[0] === 'all')) {
                    statusKaryawan = [];
                }

                $.ajax({
                    url: '{{ route('system.sync.pullfinger.start') }}',
                    method: 'POST',
                    data: {
                        tanggal: tanggal,
                        status_karyawan: statusKaryawan,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success && response.job_key) {
                            startPullStatusPolling(response.job_key, tanggal);
                        } else if (!response.success) {
                            // Guard: tanggal sebelumnya belum dipull.
                            Swal.fire({
                                icon: 'warning',
                                title: 'Pull Tanggal Sebelumnya Dulu',
                                html: `<div class="fw-semibold mb-1">${escapeHtml(tanggal)}</div><div class="text-sm text-secondary mb-0">${escapeHtml(response.message || 'Harus pull terlebih dahulu tanggal sebelumnya.')}</div>`,
                                confirmButtonColor: '#028284'
                            }).then(() => loadDailySummary());
                        } else {
                            Swal.fire({
                                icon: 'info',
                                title: 'Tidak Perlu Pull',
                                text: response.message || 'Tidak ada data yang perlu dipull ulang.',
                                confirmButtonColor: '#028284'
                            }).then(() => loadDailySummary());
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 419) {
                            // CSRF token / sesi sudah kedaluwarsa (halaman dibiarkan terbuka
                            // lebih lama dari SESSION_LIFETIME). Muat ulang halaman agar
                            // token CSRF yang baru ikut ter-render.
                            Swal.fire({
                                icon: 'warning',
                                title: 'Sesi Telah Berakhir',
                                text: 'Sesi login Anda sudah kedaluwarsa. Halaman akan dimuat ulang, silakan coba pull finger kembali.',
                                confirmButtonColor: '#028284'
                            }).then(() => window.location.reload());
                            return;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: xhr.responseJSON?.message || 'Gagal memulai pull finger.',
                            confirmButtonColor: '#028284'
                        }).then(() => loadDailySummary());
                    }
                });
            }

            // Setelah pull selesai, tampilkan alert sukses beserta total summary
            // data yang belum lengkap (tidak memiliki shift/jadwal / missing shift).
            function showPullCompletedAlert(message, tanggalPull) {
                const bulan = document.getElementById('bulan')?.value;
                const tahun = document.getElementById('tahun')?.value;

                const finish = (totalBelumLengkap) => {
                    const extra = totalBelumLengkap > 0
                        ? `<div class="text-sm text-danger mt-2">Terdapat total <strong>${totalBelumLengkap}</strong> data summary yang belum lengkap (tidak memiliki shift/jadwal) untuk tanggal <strong>${escapeHtml(tanggalPull || '-')}</strong>. Pastikan data tukar jadwal sudah di masukkan semua</div>`
                        : `<div class="text-sm text-secondary mt-2">Data tanggal <strong>${escapeHtml(tanggalPull || '-')}</strong> sudah lengkap.</div>`;

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        html: `${escapeHtml(message || 'Pull finger selesai.')}${extra}`,
                        confirmButtonColor: '#028284'
                    }).then(() => loadDailySummary());
                };

                if (!bulan || !tahun) {
                    finish(0);
                    return;
                }

                $.ajax({
                    url: '{{ route('trspul.summary') }}',
                    method: 'GET',
                    data: {
                        bulan: bulan,
                        tahun: tahun,
                        status_karyawan: (function() {
                            const sel = document.getElementById('status_karyawan');
                            const vals = [];
                            if (sel && sel.selectedOptions) {
                                for (let i = 0; i < sel.selectedOptions.length; i++) {
                                    vals.push(sel.selectedOptions[i].value);
                                }
                            }
                            if (vals.length === 0 || (vals.length === 1 && vals[0] === 'all')) return [];
                            return vals.filter(v => v !== 'all');
                        })()
                    },
                    success: function(res) {
                        const rows = res.data || [];
                        // Hitung total summary belum lengkap HANYA untuk tanggal
                        // yang baru saja di-pull, bukan total seluruh bulan.
                        const total = rows
                            .filter(function(r) {
                                return !tanggalPull || String(r.tanggal_iso || '') === String(tanggalPull);
                            })
                            .reduce(function(sum, r) {
                                return sum + Number(r.total_summary_belum_lengkap || 0);
                            }, 0);
                        finish(total);
                    },
                    error: function() {
                        finish(0);
                    }
                });
            }

            function startPullStatusPolling(jobKey, tanggal) {
                if (pullStatusTimer) {
                    clearInterval(pullStatusTimer);
                    pullStatusTimer = null;
                }

                const statusUrl = '{{ route('system.sync.pullfinger.status', ':job') }}'.replace(':job', jobKey);

                pullStatusTimer = setInterval(function() {
                    $.ajax({
                        url: statusUrl,
                        method: 'GET',
                        success: function(res) {
                            const payload = res.data || {};
                            const status = String(payload.status || '');
                            const progress = Number(payload.progress || 0);
                            const message = payload.message || 'Sedang memproses...';

                            if (status === 'completed') {
                                clearInterval(pullStatusTimer);
                                pullStatusTimer = null;
                                showPullCompletedAlert(message || 'Pull finger selesai.', tanggal);
                            } else if (status === 'failed' || status === 'cancelled') {
                                clearInterval(pullStatusTimer);
                                pullStatusTimer = null;
                                Swal.fire({
                                    icon: 'error',
                                    title: status === 'cancelled' ? 'Dibatalkan' : 'Gagal',
                                    text: message || 'Proses pull finger berhenti.',
                                    confirmButtonColor: '#028284'
                                }).then(() => loadDailySummary());
                            } else {
                                Swal.update({
                                    html: `Sedang menarik data untuk <strong>${tanggal}</strong>...<br><small>${message}</small><br><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: ${Math.min(100, progress)}%">${Math.min(100, progress)}%</div></div>`
                                });
                            }
                        },
                        error: function() {
                            // Jika endpoint status gagal, tetap polling sampai berhenti.
                        }
                    });
                }, 3000);
            }

            $(document).ready(function() {
                $(document).on('select2:select select2:unselect', '#status_karyawan', normalizeStatusKaryawanSelection);
                // Load Select2 library if not already loaded
                if (typeof $.fn.select2 === 'undefined') {
                    // Load Select2 CSS
                    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">');
                    $('head').append('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap.css">');
                    
                    // Load Select2 JS
                    $.getScript('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js')
                        .done(function() {
                            initSelect2();
                        });
                } else {
                    initSelect2();
                }
            });

            function initSelect2() {
                // Initialize Select2 for status_karyawan multi-select
                const isReadonly = {{ $status_filter_for_role['readonly'] ?? false ? 'true' : 'false' }};
                
                $('#status_karyawan').select2({
                    placeholder: 'Pilih Status Karyawan',
                    allowClear: !isReadonly,
                    width: '100%',
                    multiple: true,  // Aktifkan multi-select via Select2
                    language: {
                        noResults: () => "Tidak ada hasil",
                        searching: () => "Mencari..."
                    },
                    // Agar bisa multi-select tanpa Ctrl - dropdown tetap terbuka
                    closeOnSelect: !isReadonly,
                    selectOnClose: !isReadonly,
                    disabled: isReadonly
                });
                
                // Jika readonly (KRL role), nonaktifkan interaksi lebih lanjut
                if (isReadonly) {
                    $('#status_karyawan').prop('readonly', true);
                    $('#status_karyawan').prop('disabled', true);
                }
            }
        </script>
    @endpush
@endsection