@extends('layouts.adminlte')

@section('title', 'REPORT HADIR PAGI')
@section('page_title', 'REPORT HADIR PAGI')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/leaflet/leaflet.css') }}" />
    <style>
        .morning-photo-hover {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .morning-photo-thumb {
            width: 34px;
            height: 34px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #d4d7db;
            cursor: zoom-in;
        }
        .morning-photo-hover::after {
            content: "";
            position: fixed;
            z-index: 2050;
            left: min(72vw, calc(var(--photo-x, 0px) + 18px));
            top: min(64vh, calc(var(--photo-y, 0px) + 18px));
            width: 220px;
            height: 220px;
            background-image: var(--photo-url);
            background-size: cover;
            background-position: center;
            border: 3px solid #fff;
            border-radius: 12px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, .35);
            opacity: 0;
            pointer-events: none;
            transform: scale(.96);
            transition: opacity .12s ease, transform .12s ease;
        }
        .morning-photo-hover:hover::after {
            opacity: 1;
            transform: scale(1);
        }
        .summary-filter-card { cursor: pointer; }
        .summary-filter-card.is-active { outline: 3px solid rgba(13, 110, 253, .45); }
        #morningMap {
            min-height: 640px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
        }
        .morning-map-wrap { display: none; }
        .morning-map-legend {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 8px;
            font-size: 12px;
        }
        .legend-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            margin-right: 4px;
        }
        .morning-map-person-label {
            border: 0;
            border-radius: 6px;
            padding: 2px 6px;
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
            color: #111827;
            font-size: 11px;
            font-weight: 700;
        }
        .morning-summary-grid {
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            gap: 6px;
        }
        .morning-summary-grid .small-box { min-height: 88px; margin-bottom: 0; }
        .morning-summary-grid .inner { padding: 10px; }
        .morning-summary-grid h3 { font-size: 24px; margin-bottom: 8px; }
        .morning-summary-grid p { font-size: 12px; margin-bottom: 0; white-space: nowrap; }
        .morning-summary-grid .icon { font-size: 30px; bottom: 6px; right: 8px; }
        @media (max-width: 1199.98px) { .morning-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        @media (max-width: 767.98px) { .morning-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Tanggal</label>
                    <input type="date" id="filterDate" class="form-control" value="{{ $defaultDate }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Search Karyawan</label>
                    <input type="text" id="filterQ" class="form-control" placeholder="kode / nama karyawan">
                </div>
                <div class="col-md-5 text-end">
                    <span class="badge bg-info text-dark me-2">Mode: {{ strtoupper($morningCheckMode) }}</span>
                    <span class="badge bg-secondary me-2">Ref: {{ $morningCheckTime }}</span>
                    <span class="badge bg-secondary">Grace: {{ $checkinGraceMinutes }} menit</span>
                    <div class="mt-2">
                        <div class="btn-group me-2" role="group" aria-label="Mode tampilan">
                            <button type="button" class="btn btn-dark active" id="btnTableMode"><i class="fas fa-table me-1"></i>Datatable</button>
                            <button type="button" class="btn btn-outline-dark" id="btnMapMode"><i class="fas fa-map-location-dot me-1"></i>Map</button>
                        </div>
                        <button class="btn btn-primary" id="btnFilter"><i class="fas fa-filter me-1"></i>Tampilkan</button>
                        <button class="btn btn-outline-primary" id="btnReload"><i class="fas fa-sync me-1"></i>Reload</button>
                        <button class="btn btn-warning" id="btnAskMorningRows" disabled><i class="fas fa-question-circle me-1"></i>Tanya / Isi Jadwal</button>
                        <button class="btn btn-success" id="btnExportExcel"><i class="fas fa-file-excel me-1"></i>Excel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="morning-summary-grid mb-3">
        <div class="small-box summary-filter-card is-active" style="background:#dbeafe;color:#1e3a8a" data-summary-filter="all">
            <div class="inner"><h3 id="sumTotal">0</h3><p>Total Hire</p></div>
            <div class="icon"><i class="fas fa-users"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#dcfce7;color:#166534" data-summary-filter="present">
            <div class="inner"><h3 id="sumPresent">0</h3><p>Hadir</p></div>
            <div class="icon"><i class="fas fa-check"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#fef3c7;color:#92400e" data-summary-filter="leave">
            <div class="inner"><h3 id="sumLate">0</h3><p>Leave</p></div>
            <div class="icon"><i class="fas fa-clock"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#ffedd5;color:#9a3412" data-summary-filter="verify">
            <div class="inner"><h3 id="sumVerify">0</h3><p>Perlu Verifikasi</p></div>
            <div class="icon"><i class="fas fa-question-circle"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#e0f2fe;color:#075985" data-summary-filter="pending_shift">
            <div class="inner"><h3 id="sumPendingShift">0</h3><p>Shift Belum Selesai</p></div>
            <div class="icon"><i class="fas fa-hourglass-half"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#cffafe;color:#155e75" data-summary-filter="waiting_shift">
            <div class="inner"><h3 id="sumWaitingShift">0</h3><p>Waiting Shift</p></div>
            <div class="icon"><i class="fas fa-calendar-check"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#e2e8f0;color:#475569" data-summary-filter="offday">
            <div class="inner"><h3 id="sumOffday">0</h3><p>Libur / Offday</p></div>
            <div class="icon"><i class="fas fa-bed"></i></div>
        </div>
        <div class="small-box summary-filter-card" style="background:#fee2e2;color:#991b1b" data-summary-filter="alpha">
            <div class="inner"><h3 id="sumMissing">0</h3><p>Alpha</p></div>
            <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
        </div>
    </div>
    <div class="card morning-table-wrap">
        <div class="card-body">
            <table id="morningTable" class="table table-striped table-hover w-100">
                <thead>
                <tr>
                    <th style="width:36px"><input type="checkbox" id="checkAllMorningRows"></th>
                    <th>No.</th>
                    <th>Karyawan</th>
                    <th>Waktu Referensi</th>
                    <th>Batas Hadir</th>
                    <th>Check-in Pertama</th>
                    <th>Metode</th>
                    <th>Long/Lat</th>
                    <th>Lokasi</th>
                    <th>Foto</th>
                    <th>Face (Manual)</th>
                    <th>Telat (menit)</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div class="card morning-map-wrap">
        <div class="card-body">
            <div class="morning-map-legend">
                <span><span class="legend-dot" style="background:#16a34a"></span>Dalam radius</span>
                <span><span class="legend-dot" style="background:#dc2626"></span>Luar radius</span>
                <span><span class="legend-dot" style="background:#6b7280"></span>Tanpa radius/site</span>
                <span><span class="legend-dot" style="background:#2563eb"></span>Radius site</span>
                <span class="ms-auto text-muted" id="morningMapInfo">-</span>
            </div>
            <div id="morningMap"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/leaflet/leaflet.js') }}"></script>
    <script>
        $(function(){
            let rows = [];
            let summaryFilter = @json($defaultStatusFilter ?? 'all');
            let viewMode = 'table';
            let map = null;
            let markerLayer = null;
            let circleLayer = null;
            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function contextBadge(label, title, cls) {
                const safeTitle = title ? ` title="${escapeHtml(title)}"` : '';
                return `<span class="badge ${cls} me-1 mb-1"${safeTitle}>${escapeHtml(label)}</span>`;
            }

            const table = $('#morningTable').DataTable({
                data: [],
                pageLength: 25,
                columns: [
                    { data: null, render: (r) => `<input type="checkbox" class="morning-row-check" value="${Number(r.karyawan_id || 0)}">`, orderable: false, searchable: false },
                    { data: null, render: (d,t,r,m) => m.row + 1, orderable: false, searchable: false },
                    { data: null, render: (r) => `<div><strong>${r.employee_code || '-'}</strong></div><div class="text-muted">${r.full_name || '-'}</div>` },
                    { data: 'reference_time', render: (v) => (v || '-').toString().replace('T', ' ') },
                    { data: 'deadline_time', render: (v) => (v || '-').toString().replace('T', ' ') },
                    { data: 'checkin_at', render: (v) => v ? v.toString().replace('T', ' ') : '-' },
                    { data: null, render: (r) => {
                            const m = (r.checkin_method || '-');
                            const p = (r.location_provider || '-');
                            return `<div><strong>${m}</strong></div><small class="text-muted">provider: ${p}</small>`;
                        }},
                    { data: null, render: (r) => {
                            const lat = r.latitude;
                            const lng = r.longitude;
                            if (lat === null || lng === null) return '-';
                            const latTxt = Number(lat).toFixed(6);
                            const lngTxt = Number(lng).toFixed(6);
                            const radius = r.site_radius_meter === null || r.site_radius_meter === undefined ? null : Number(r.site_radius_meter);
                            const distance = r.distance_to_site_meter === null || r.distance_to_site_meter === undefined ? null : Number(r.distance_to_site_meter);
                            const inside = r.inside_site_radius;
                            const params = new URLSearchParams({
                                lat: latTxt,
                                lng: lngTxt,
                                label: `${r.employee_code || ''} ${r.full_name || ''}`.trim() || 'Lokasi aktual',
                                site: `${r.site_code || ''} ${r.site_name || ''}`.trim() || 'Radius site',
                            });
                            if (r.site_latitude && r.site_longitude) {
                                params.set('site_lat', Number(r.site_latitude).toFixed(6));
                                params.set('site_lng', Number(r.site_longitude).toFixed(6));
                            }
                            if (radius) params.set('radius', String(radius));
                            const url = `{{ route('attendance_morning_checkin_report.map_preview') }}?${params.toString()}`;
                            const radiusBadge = radius
                                ? `<div class="small mt-1">
                                    <span class="badge ${inside === false ? 'bg-danger' : 'bg-info text-dark'}">
                                        Radius ${radius.toLocaleString('id-ID')} m${distance || distance === 0 ? ` | Jarak ${Math.round(distance).toLocaleString('id-ID')} m` : ''}
                                    </span>
                                </div>`
                                : '';
                            const siteCenter = r.site_latitude && r.site_longitude
                                ? `<div class="small text-muted">Site: ${Number(r.site_longitude).toFixed(6)}, ${Number(r.site_latitude).toFixed(6)}</div>`
                                : '';
                            return `<a href="${url}" target="_blank" rel="noopener" class="text-decoration-none" title="Buka lokasi di OpenStreetMap">
                                <div><i class="fas fa-map-marker-alt text-danger me-1"></i>${lngTxt},</div>
                                <div>${latTxt}</div>
                            </a>${radiusBadge}${siteCenter}`;
                        }},
                    { data: null, render: (r) => {
                            const code = r.site_code || '-';
                            const name = r.site_name || '-';
                            return `<div>${code}</div><small class="text-muted">${name}</small>`;
                        }},
                    { data: 'face_image_url', orderable: false, searchable: false, render: (v) => {
                            if (!v) return '-';
                            const url = v.toString();
                            const safeUrl = escapeHtml(url);
                            return `<a href="${safeUrl}" target="_blank" class="morning-photo-hover gap-2 text-decoration-none" style="--photo-url:url(&quot;${safeUrl}&quot;)">
                                        <img src="${safeUrl}" alt="Foto check-in" class="morning-photo-thumb">
                                        <span class="btn btn-xs btn-outline-primary">Lihat</span>
                                    </a>`;
                        }},
                    { data: 'manual_face_detected', render: (v) => {
                            if (v === null || v === undefined) return '-';
                            return v ? `<span class="badge bg-success">OK</span>` : `<span class="badge bg-warning text-dark">NO</span>`;
                        }},
                    { data: 'late_minutes', render: (v) => Number(v || 0) > 0 ? Number(v) : '-' },
                    { data: null, render: (r) => {
                            const v = r.status || '-';
                            const s = (v || '').toString().toLowerCase();
                            let mainBadge = `<span class="badge bg-secondary">${escapeHtml(v || '-')}</span>`;
                            if (s.includes('telat')) mainBadge = `<span class="badge bg-warning text-dark">${escapeHtml(v)}</span>`;
                            if (s.includes('hadir')) mainBadge = `<span class="badge bg-success">${escapeHtml(v)}</span>`;
                            if (s.includes('libur') || s.includes('offday')) mainBadge = `<span class="badge bg-secondary">${escapeHtml(v)}</span>`;
                            const hasLeaveBadge = !!(r.leave_badge && r.leave_badge.label);
                            if (hasLeaveBadge) { mainBadge = ''; }
                            else if (s.includes('waiting shift')) mainBadge = `<span class="badge bg-info text-dark">${escapeHtml(v)}</span>`;
                            else if (s.includes('belum check')) mainBadge = `<span class="badge bg-danger">Alpha</span>`;

                            const contextBadges = [];
                            if (r.leave_badge?.label) {
                                contextBadges.push(contextBadge(r.leave_badge.label, r.leave_badge.title || '', 'bg-info text-dark'));
                            }
                            if (r.schedule_badge?.label) {
                                const title = r.schedule_badge.title || `${r.schedule_badge.start_time || ''}-${r.schedule_badge.end_time || ''}`;
                                contextBadges.push(contextBadge(r.schedule_badge.label, title, 'bg-dark'));
                            }
                            if (!contextBadges.length) {
                                return mainBadge;
                            }

                            return `<div>${mainBadge}</div><div class="mt-1">${contextBadges.join('')}</div>`;
                        }},
                ]
            });

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                if (settings.nTable.id !== 'morningTable') return true;
                if (summaryFilter === 'all') return true;
                const row = table.row(dataIndex).data() || {};
                const status = String(row.status || '').toLowerCase();
                const hasLeave = !!(row.leave_badge && row.leave_badge.label);
                const isPresent = status.includes('hadir');
                const isWaitingShift = status.includes('waiting shift');
                const isPendingShift = status.includes('belum waktunya') || status.includes('shift belum selesai');
                const isVerify = status.includes('verifikasi');
                const isOffday = status.includes('libur') || status.includes('offday');
                const isAlpha = !isPresent && !hasLeave && !isPendingShift && !isWaitingShift && !isVerify && !isOffday;
                if (summaryFilter === 'present') return isPresent;
                if (summaryFilter === 'leave') return hasLeave;
                if (summaryFilter === 'pending_shift') return isPendingShift;
                if (summaryFilter === 'waiting_shift') return isWaitingShift;
                if (summaryFilter === 'verify') return isVerify;
                if (summaryFilter === 'offday') return isOffday;
                if (summaryFilter === 'alpha') return isAlpha;
                return true;
            });

            function passesSummaryFilter(row) {
                if (summaryFilter === 'all') return true;
                const status = String(row.status || '').toLowerCase();
                const hasLeave = !!(row.leave_badge && row.leave_badge.label);
                const isPresent = status.includes('hadir');
                const isWaitingShift = status.includes('waiting shift');
                const isPendingShift = status.includes('belum waktunya') || status.includes('shift belum selesai');
                const isVerify = status.includes('verifikasi');
                const isOffday = status.includes('libur') || status.includes('offday');
                const isAlpha = !isPresent && !hasLeave && !isPendingShift && !isWaitingShift && !isVerify && !isOffday;
                if (summaryFilter === 'present') return isPresent;
                if (summaryFilter === 'leave') return hasLeave;
                if (summaryFilter === 'pending_shift') return isPendingShift;
                if (summaryFilter === 'waiting_shift') return isWaitingShift;
                if (summaryFilter === 'verify') return isVerify;
                if (summaryFilter === 'offday') return isOffday;
                if (summaryFilter === 'alpha') return isAlpha;
                return true;
            }

            function ensureMap() {
                if (map) return;
                map = L.map('morningMap').setView([-6.2, 107.0], 11);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 20,
                    attribution: '&copy; OpenStreetMap contributors'
                }).addTo(map);
                markerLayer = L.layerGroup().addTo(map);
                circleLayer = L.layerGroup().addTo(map);
            }

            function markerColor(row) {
                if (row.inside_site_radius === true) return '#16a34a';
                if (row.inside_site_radius === false) return '#dc2626';
                return '#6b7280';
            }

            function renderMap() {
                if (viewMode !== 'map') return;
                ensureMap();
                markerLayer.clearLayers();
                circleLayer.clearLayers();

                const visibleRows = rows.filter(passesSummaryFilter)
                    .filter(r => r.latitude !== null && r.longitude !== null);
                const bounds = [];
                const siteSeen = new Set();

                visibleRows.forEach((r) => {
                    const lat = Number(r.latitude);
                    const lng = Number(r.longitude);
                    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return;
                    const color = markerColor(r);
                    const personLabel = `${r.employee_code || '-'} - ${r.full_name || '-'}`;
                    const distance = r.distance_to_site_meter === null || r.distance_to_site_meter === undefined ? null : Math.round(Number(r.distance_to_site_meter));
                    const radius = r.site_radius_meter === null || r.site_radius_meter === undefined ? null : Math.round(Number(r.site_radius_meter));
                    const radiusStatus = r.inside_site_radius === true ? 'Dalam radius' : (r.inside_site_radius === false ? 'Luar radius' : 'Tanpa radius');
                    const photo = r.face_image_url ? `<div class="mt-2"><img src="${escapeHtml(r.face_image_url)}" style="width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #ddd"></div>` : '';
                    const marker = L.circleMarker([lat, lng], {
                        radius: 7,
                        color,
                        fillColor: color,
                        fillOpacity: .85,
                        weight: 2,
                    }).bindPopup(`
                        <div style="min-width:220px">
                            <strong>${escapeHtml(personLabel)}</strong>
                            <div>Check-in: ${escapeHtml(r.checkin_at || '-')}</div>
                            <div>Site: ${escapeHtml(r.site_code || '-')} ${escapeHtml(r.site_name || '')}</div>
                            <div>Status: <b>${escapeHtml(radiusStatus)}</b></div>
                            <div>Radius: ${radius ? radius.toLocaleString('id-ID') + ' m' : '-'}</div>
                            <div>Jarak: ${distance || distance === 0 ? distance.toLocaleString('id-ID') + ' m' : '-'}</div>
                            ${photo}
                        </div>
                    `).bindTooltip(escapeHtml(personLabel), {
                        permanent: true,
                        direction: 'top',
                        offset: [0, -8],
                        className: 'morning-map-person-label',
                    });
                    marker.addTo(markerLayer);
                    bounds.push([lat, lng]);

                    if (r.site_latitude && r.site_longitude && radius) {
                        const siteLat = Number(r.site_latitude);
                        const siteLng = Number(r.site_longitude);
                        const key = `${r.site_code || ''}|${siteLat}|${siteLng}|${radius}`;
                        if (!siteSeen.has(key)) {
                            siteSeen.add(key);
                            L.circle([siteLat, siteLng], {
                                radius,
                                color: '#2563eb',
                                fillColor: '#3b82f6',
                                fillOpacity: .1,
                                weight: 2,
                            }).bindPopup(`${escapeHtml(r.site_code || 'SITE')}<br>Radius ${radius.toLocaleString('id-ID')} m`).addTo(circleLayer);
                            bounds.push([siteLat, siteLng]);
                        }
                    }
                });

                $('#morningMapInfo').text(`${visibleRows.length.toLocaleString('id-ID')} marker | ${siteSeen.size.toLocaleString('id-ID')} radius site`);
                if (bounds.length) {
                    map.fitBounds(bounds, { padding: [40, 40], maxZoom: 18 });
                }
                setTimeout(() => map.invalidateSize(), 80);
            }

            function setViewMode(mode) {
                viewMode = mode === 'map' ? 'map' : 'table';
                $('.morning-table-wrap').toggle(viewMode === 'table');
                $('.morning-map-wrap').toggle(viewMode === 'map');
                $('#btnTableMode').toggleClass('btn-dark active', viewMode === 'table').toggleClass('btn-outline-dark', viewMode !== 'table');
                $('#btnMapMode').toggleClass('btn-dark active', viewMode === 'map').toggleClass('btn-outline-dark', viewMode !== 'map');
                renderMap();
            }

            function loadData() {
                const params = new URLSearchParams({
                    date: ($('#filterDate').val() || '').toString(),
                    q: ($('#filterQ').val() || '').toString(),
                });
                $.getJSON(`{{ route('attendance_morning_checkin_report.data') }}?${params.toString()}`)
                    .done(resp => {
                        rows = resp.data || [];
                        table.clear().rows.add(rows).draw();
                        updateMorningActionState();
                        const sum = resp.summary || {};
                        $('#sumTotal').text(Number(sum.total || 0));
                        $('#sumPresent').text(Number(sum.present || 0));
                        $('#sumLate').text(Number((sum.leave ?? sum.late) || 0));
                        $('#sumMissing').text(Number(sum.missing || 0));
                        $('#sumVerify').text(Number(sum.verify || 0));
                        $('#sumWaitingShift').text(Number(sum.waiting_shift || 0));
                        $('#sumPendingShift').text(Number(sum.pending_shift || 0));
                        $('#sumOffday').text(Number(sum.offday || 0));
                        renderMap();
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load report hadir pagi', 'error'));
            }

            $('#btnFilter, #btnReload').on('click', loadData);
            $('#btnTableMode').on('click', () => setViewMode('table'));
            $('#btnMapMode').on('click', () => setViewMode('map'));
            $('#btnExportExcel').on('click', function(){
                const params = new URLSearchParams({
                    date: ($('#filterDate').val() || '').toString(),
                    q: ($('#filterQ').val() || '').toString(),
                    status_filter: summaryFilter,
                });
                window.location.href = `{{ route('attendance_morning_checkin_report.export_excel') }}?${params.toString()}`;
            });
            $('.export-card-btn').on('click', function(e) {
                e.stopPropagation();
                const filter = $(this).data('status-filter') || 'all';
                const params = new URLSearchParams({
                    date: ($('#filterDate').val() || '').toString(),
                    q: ($('#filterQ').val() || '').toString(),
                    status_filter: filter,
                });
                window.location.href = `{{ route('attendance_morning_checkin_report.export_excel') }}?` + params.toString();
            });

            $('.summary-filter-card').on('click', function(){
                summaryFilter = String($(this).data('summary-filter') || 'all');
                $('.summary-filter-card').removeClass('is-active');
                $(this).addClass('is-active');
                table.draw();
                updateMorningActionState();
                renderMap();
            });
            function visibleMorningRows() {
                return table.rows({ filter: 'applied' }).data().toArray();
            }
            function selectedMorningRows() {
                const ids = new Set($('.morning-row-check:checked').map((_, el) => String(el.value || '')).get());
                return visibleMorningRows().filter((r) => ids.has(String(r.karyawan_id || '')));
            }
            function targetMorningRows() {
                const selected = selectedMorningRows();
                return (selected.length ? selected : visibleMorningRows()).filter((r) => {
                    const status = String(r.status || '').toLowerCase();
                    return Number(r.karyawan_id || 0) > 0 && (status.includes('verifikasi') || status.includes('belum check'));
                });
            }
            function updateMorningActionState() {
                $('#btnAskMorningRows').prop('disabled', targetMorningRows().length < 1);
            }
            $('#morningTable').on('draw.dt change', updateMorningActionState);
            $('#checkAllMorningRows').on('change', function() {
                $('.morning-row-check').prop('checked', this.checked);
                updateMorningActionState();
            });
            $('#btnAskMorningRows').on('click', function() {
                const target = targetMorningRows();
                if (!target.length) return Swal.fire('Info', 'Pilih data Alpha / Perlu Verifikasi dulu.', 'info');
                const ids = Array.from(new Set(target.map((r) => String(r.karyawan_id || '')).filter(Boolean)));
                const date = ($('#filterDate').val() || '').toString();
                const kind = summaryFilter === 'alpha' ? 'alpha' : 'verify';
                $.post(`{{ route('attendance_morning_checkin_report.ask_mobile') }}`, {
                    _token: '{{ csrf_token() }}',
                    date,
                    kind,
                    karyawan_ids: ids,
                }).done((resp) => {
                    Swal.fire('OK', resp.message || 'Task dikirim ke Android.', 'success');
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal kirim task Android.', 'error');
                });
            });
            $('.summary-filter-card').removeClass('is-active');
            $(`.summary-filter-card[data-summary-filter="${summaryFilter}"]`).addClass('is-active');
            $('#filterQ').on('keydown', function(e){ if(e.key === 'Enter'){ e.preventDefault(); loadData(); } });
            $('#morningTable').on('mousemove', '.morning-photo-hover', function(e){
                this.style.setProperty('--photo-x', `${e.clientX}px`);
                this.style.setProperty('--photo-y', `${e.clientY}px`);
            });

            loadData();
        });
    </script>
@endpush