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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        <!-- Card Filter Periode - Hanya Info Periode -->
        <div class="card shadow-sm mb-4" id="summaryFilterCard">
            <div class="card-body">
                <div class="mb-2">
                    <h6 class="mb-1 text-dark font-weight-bold">Rekap Finger</h6>
                    <p class="text-sm text-secondary mb-0">Pilih tanggal pada ringkasan untuk melihat detail fingerprint per hari.</p>
                </div>
                <div>
                    <span class="badge bg-gradient-info text-white">
                        Periode {{ $filter['tanggal_mulai'] ?? '-' }} s/d {{ $filter['tanggal_akhir'] ?? '-' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Card Ringkasan Rekap Fingerprint -->
        <div class="card shadow-sm mb-4" id="dailySummaryCard">
            <div class="card-body p-3">
                <!-- Baris 1: Judul Halaman (Sendirian) -->
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-dark font-weight-bold mb-0">Ringkasan Rekap Fingerprint</h6>
                    </div>
                </div>

                <!-- Baris 2: Tombol Kembali (Sendirian, Tepat di Bawah Judul) -->
                <div class="row mt-2">
                    <div class="col-12">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>Kembali
                        </button>
                    </div>
                </div>

                <!-- Baris 3: Tombol Cetak - Posisi Agak Turun -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div id="summaryExportButtons" class="d-flex gap-2 flex-wrap"></div>
                    </div>
                </div>

                <!-- Baris 4: Tabel Utama -->
                <div class="row mt-3">
                    <div class="col-12">
                        <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: 100px;">Action</th>
                                        <th style="width: 70px;">No</th>
                                        <th style="width: 150px;">Tanggal</th>
                                        <th style="width: 150px;">Hari</th>
                                        <th style="width: 120px;">Total Data</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="detailViewSection" style="display: none;">
            <div class="card shadow-sm mb-4">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h6 class="text-dark font-weight-bold mb-0">Data Rekap Fingerprint - <span id="detailDateDisplay">-</span></h6>
                        <button class="btn btn-secondary btn-sm mb-0" onclick="backToSummary()">
                            <i class="fas fa-arrow-left me-1"></i>Kembali ke Ringkasan
                        </button>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-body p-3">
                    <div class="table-responsive table-wrap-centered">
                        <table class="table table-hover align-items-center mb-0" id="detailTable">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-center" style="width: 60px;">No</th>
                                    <th class="text-center" style="width: 140px;">Tanggal</th>
                                    <th class="text-center" style="width: 110px;">Shift</th>
                                    <th class="text-center" style="width: 120px;">NIK</th>
                                    <th>Nama</th>
                                    <th class="text-center">Departemen</th>
                                    <th class="text-center">Grup</th>
                                    <th class="text-center">Jam<br><small>Masuk</small></th>
                                    <th class="text-center">Scan<br><small>Masuk</small></th>
                                    <th class="text-center">Terlambat</th>
                                    <th class="text-center">Jam<br><small>Keluar</small></th>
                                    <th class="text-center">Scan<br><small>Keluar</small></th>
                                    <th class="text-center">Pulang<br><small>Cepat</small></th>
                                    <th class="text-center">Durasi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <code>Note : <span class="text-danger">●</span> Data Missing</code>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <style>
            #summaryTable th,
            #summaryTable td,
            #detailTable th,
            #detailTable td {
                vertical-align: middle;
            }

            .table-wrap-centered,
            #summaryTable_wrapper,
            #detailTable_wrapper {
                max-width: 99%;
                margin: 0 auto;
            }

            #summaryTable_wrapper .dt-buttons,
            #detailTable_wrapper .dt-buttons {
                margin-bottom: 10px;
            }
        </style>
        <script>
            let summaryTable = null;
            let detailTable = null;
            let allDetailData = @json($rows ?? []);
            let filterStatusScan = @json($filter['status_scan'] ?? '');
            let currentDateIso = '';
            let currentDateDisplay = '';
            const dayNames = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];

            function formatDateShort(dateStr) {
                if (!dateStr) {
                    return '-';
                }

                if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
                    const date = new Date(dateStr + 'T00:00:00');
                    if (!Number.isNaN(date.getTime())) {
                        const day = String(date.getDate()).padStart(2, '0');
                        const month = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'][date.getMonth()];
                        const year = date.getFullYear();
                        return `${day} ${month} ${year}`;
                    }
                }

                return dateStr;
            }

            function dayNameFromIso(dateStr) {
                if (!dateStr) {
                    return '-';
                }

                const date = new Date(dateStr + 'T00:00:00');
                if (Number.isNaN(date.getTime())) {
                    return '-';
                }

                return dayNames[date.getDay()] || '-';
            }

            function emptyToDash(value) {
                return value && String(value).trim() !== '' ? value : '-';
            }

            function isMissingValue(value) {
                const normalized = String(value || '').trim().toUpperCase();
                return normalized === '' || normalized === '-' || normalized.includes('MISSING');
            }

            // Cek apakah record "Normal" - jam masuk, jam keluar, scan masuk,
            // dan scan keluar semuanya terisi. Definisi ini HARUS sama dengan
            // filter Status Scan di server (RptfingerController::isMissingValue).
            function isNormalScan(row) {
                return !isMissingValue(row.jam_masuk)
                    && !isMissingValue(row.jam_keluar)
                    && !isMissingValue(row.scan_masuk)
                    && !isMissingValue(row.scan_keluar);
            }

            // Penanda "Data Missing" (baris merah + note ●) memakai definisi
            // yang sama dengan Status Scan: hanya record yang gagal cek
            // kelengkapan di atas. Terlambat / pulang cepat BUKAN data missing
            // karena sudah punya kolom sendiri pada tabel detail, sehingga saat
            // filter Status Scan = Normal tidak ada lagi baris yang ditandai
            // "Data Missing".
            function hasDetailIssue(row) {
                return !isNormalScan(row);
            }

            function applyMsjButtonStyle(wrapperSelector) {
                $(`${wrapperSelector} .dt-button`).addClass('btn btn-secondary mb-0 me-1');
                $(`${wrapperSelector} .dt-button`).removeClass('dt-button');
            }

            function buildDailySummary(rows) {
                const summaryMap = new Map();

                rows.forEach((row) => {
                    const dateIso = row.tanggal_iso || row.tanggal_pull || '';
                    if (!dateIso) {
                        return;
                    }

                    if (!summaryMap.has(dateIso)) {
                        summaryMap.set(dateIso, {
                            tanggal_iso: dateIso,
                            tanggal: formatDateShort(dateIso),
                            hari: row.hari || dayNameFromIso(dateIso),
                            total_records: 0,
                        });
                    }

                    summaryMap.get(dateIso).total_records += 1;
                });

                return Array.from(summaryMap.values()).sort((a, b) => b.tanggal_iso.localeCompare(a.tanggal_iso));
            }

            function renderSummaryTable() {
                if (summaryTable) {
                    summaryTable.destroy();
                }

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

                if (!summaryRows.length) {
                    // Leave tbody empty, DataTables will handle emptyTable message
                } else {
                    summaryRows.forEach((row, index) => {
                        tbody.append(`
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm mb-0" onclick="showDetailView('${row.tanggal_iso}')">
                                        <i class="fas fa-eye me-1"></i>View
                                    </button>
                                </td>
                                <td>${index + 1}</td>
                                <td>${row.tanggal}</td>
                                <td>${row.hari}</td>
                                <td>${row.total_records}</td>
                            </tr>
                        `);
                    });
                }

                summaryTable = $('#summaryTable').DataTable({
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Data tidak ditemukan',
                        emptyTable: 'Data tidak ditemukan',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    searching: true,
                    responsive: true,
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                            title: 'Ringkasan Rekap Finger',
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                            title: 'Ringkasan Rekap Finger',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                            title: 'Ringkasan Rekap Finger',
                            exportOptions: { columns: ':visible' }
                        }
                    ]
                });

                applyMsjButtonStyle('#summaryTable_wrapper');
                $('#summaryTable_length').hide();
                
                // Move export buttons to custom container
                $('#summaryTable_wrapper .dt-buttons').appendTo('#summaryExportButtons');
            }

            function showDetailView(dateIso) {
                currentDateIso = dateIso;
                currentDateDisplay = `${formatDateShort(dateIso)} (${dayNameFromIso(dateIso)})`;

                $('#summaryFilterCard').hide();
                $('#dailySummaryCard').hide();
                $('#detailViewSection').show();

                $('#detailDateDisplay').text(currentDateDisplay);

                const rows = allDetailData.filter((row) => (row.tanggal_iso || row.tanggal_pull || '') === dateIso);
                renderDetailTable(rows);
            }

            function renderDetailTable(rows) {
                if (detailTable) {
                    detailTable.destroy();
                }

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

                if (!rows.length) {
                    // Leave tbody empty, DataTables will handle emptyTable message
                } else {
                    rows.forEach((row, index) => {
                        const shiftLabel = emptyToDash(row.shift_code || row.shift);
                        const shiftDesc = emptyToDash(row.shift_name || row.shift_desc);
                        const grup = emptyToDash(row.nama_grup || row.grub || row.grub_desc);
                        const rowStyle = hasDetailIssue(row) ? 'background-color: #ffe3e3;' : '';

                        tbody.append(`
                            <tr style="${rowStyle}">
                                <td class="text-center">${index + 1}</td>
                                <td class="text-center">${formatDateShort(row.tanggal_iso || row.tanggal_pull || currentDateIso)}<br><small class="text-muted">${row.hari || dayNameFromIso(row.tanggal_iso || row.tanggal_pull || currentDateIso)}</small></td>
                                <td class="text-center">${shiftLabel}<br><small class="text-secondary">${shiftDesc}</small></td>
                                <td class="text-center">${emptyToDash(row.nik)}</td>
                                <td>${emptyToDash(row.nama)}</td>
                                <td class="text-center">${emptyToDash(row.departemen)}</td>
                                <td class="text-center">${grup}</td>
                                <td class="text-center">${emptyToDash(row.jam_masuk)}</td>
                                <td class="text-center">${emptyToDash(row.scan_masuk)}</td>
                                <td class="text-center">${(row.terlambat && row.terlambat !== '00:00') ? row.terlambat : ''}</td>
                                <td class="text-center">${emptyToDash(row.jam_keluar)}</td>
                                <td class="text-center">${emptyToDash(row.scan_keluar)}</td>
                                <td class="text-center">${(row.pulang_cepat && row.pulang_cepat !== '00:00') ? row.pulang_cepat : ''}</td>
                                <td class="text-center">${emptyToDash(row.durasi)}</td>
                            </tr>
                        `);
                    });
                }

                detailTable = $('#detailTable').DataTable({
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Data tidak ditemukan',
                        emptyTable: 'Data tidak ditemukan',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)'
                    },
                    searching: false,
                    responsive: true,
                    dom: 'Brtip',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                            title: `Detail Rekap Finger ${currentDateIso}`,
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                            title: `Detail Rekap Finger ${currentDateIso}`,
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions: { columns: ':visible' }
                        },
                        {
                            extend: 'print',
                            text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                            title: `Detail Rekap Finger ${currentDateIso}`,
                            exportOptions: { columns: ':visible' }
                        }
                    ]
                });

                applyMsjButtonStyle('#detailTable_wrapper');
                $('#detailTable_length').hide();
            }

            function backToSummary() {
                $('#detailViewSection').hide();
                $('#summaryFilterCard').show();
                $('#dailySummaryCard').show();
                currentDateIso = '';
                currentDateDisplay = '';
            }

            $(document).ready(function() {
                // Apply status_scan filter from the main filter to ensure
                // both the summary and detail view only show filtered data.
                if (filterStatusScan && filterStatusScan !== 'semua') {
                    allDetailData = allDetailData.filter(function(row) {
                        const normal = isNormalScan(row);
                        return filterStatusScan === 'normal' ? normal : !normal;
                    });
                }

                renderSummaryTable();
            });
        </script>
    @endpush
@endsection