@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') }}" />
@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">
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-3">
        <div class="col-md-3">
            <div class="small-box bg-secondary">
                <div class="inner">
                    <h3 id="sumTotal">0</h3>
                    <p>Total Karyawan</p>
                </div>
                <div class="icon"><i class="fas fa-users"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3 id="sumPresent">0</h3>
                    <p>Hadir</p>
                </div>
                <div class="icon"><i class="fas fa-check"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3 id="sumLate">0</h3>
                    <p>Telat</p>
                </div>
                <div class="icon"><i class="fas fa-clock"></i></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3 id="sumMissing">0</h3>
                    <p>Belum Check-in</p>
                </div>
                <div class="icon"><i class="fas fa-exclamation-triangle"></i></div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="morningTable" class="table table-striped table-hover w-100">
                <thead>
                <tr>
                    <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>
@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>
        $(function(){
            let rows = [];
            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: (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);
                            return `${lngTxt}, ${latTxt}`;
                        }},
                    { 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();
                            return `<a href="${url}" target="_blank" class="d-inline-flex align-items-center gap-2 text-decoration-none">
                                        <img src="${url}" alt="Foto check-in" style="width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid #d4d7db;">
                                        <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('belum')) mainBadge = `<span class="badge bg-danger">${escapeHtml(v)}</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>`;
                        }},
                ]
            });

            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();
                        const sum = resp.summary || {};
                        $('#sumTotal').text(Number(sum.total || 0));
                        $('#sumPresent').text(Number(sum.present || 0));
                        $('#sumLate').text(Number(sum.late || 0));
                        $('#sumMissing').text(Number(sum.missing || 0));
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load report hadir pagi', 'error'));
            }

            $('#btnFilter, #btnReload').on('click', loadData);
            $('#filterQ').on('keydown', function(e){ if(e.key === 'Enter'){ e.preventDefault(); loadData(); } });

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