@extends('layouts.adminlte')

@section('title', 'Budget Payroll Harian')
@section('page_title', 'Budget Payroll Harian')

@push('styles')
    <style>
        .payroll-detail-shell {
            --payroll-blue: #0d6efd;
            --payroll-ink: #111827;
            --payroll-muted: #667085;
            --payroll-line: #d8dee8;
        }
        .payroll-detail-hero {
            border: 1px solid rgba(13, 110, 253, .28);
            border-left: 5px solid var(--payroll-blue);
            border-radius: 16px;
            background: linear-gradient(135deg, #f8fbff 0%, #eef7ff 52%, #ffffff 100%);
            box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
            padding: 18px;
        }
        .payroll-detail-title {
            color: var(--payroll-ink);
            font-size: clamp(22px, 2vw, 32px);
            font-weight: 800;
            letter-spacing: -.02em;
        }
        .payroll-stat {
            border: 1px solid var(--payroll-line);
            border-radius: 14px;
            background: #fff;
            padding: 12px 14px;
            min-height: 92px;
        }
        .payroll-stat .label {
            color: var(--payroll-muted);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .03em;
            text-transform: uppercase;
        }
        .payroll-stat .value {
            color: var(--payroll-ink);
            font-size: 22px;
            font-weight: 800;
            margin-top: 4px;
        }
        .payroll-detail-card {
            border: 1px solid var(--payroll-line);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
        }
        .payroll-detail-table {
            font-size: 13px;
            margin-bottom: 0;
            min-width: 2400px;
        }
        .payroll-detail-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #0f2f56;
            color: #fff;
            border-color: #23466f;
            vertical-align: middle;
            white-space: nowrap;
        }
        .payroll-detail-table tbody td,
        .payroll-detail-table tfoot th,
        .payroll-detail-table tfoot td {
            vertical-align: middle;
            white-space: nowrap;
        }
        .payroll-detail-table tfoot th,
        .payroll-detail-table tfoot td {
            position: sticky;
            bottom: 0;
            z-index: 1;
            background: #fff4cc;
            border-top: 2px solid #f59e0b;
            font-weight: 800;
        }
        .payroll-detail-table .freeze-left-1,
        .payroll-detail-table .freeze-left-2,
        .payroll-detail-table .freeze-left-3 {
            position: sticky;
            z-index: 3;
            background: inherit;
        }
        .payroll-detail-table thead .freeze-left-1,
        .payroll-detail-table thead .freeze-left-2,
        .payroll-detail-table thead .freeze-left-3,
        .payroll-detail-table thead .freeze-right-1 {
            z-index: 5;
            background: #0f2f56;
        }
        .freeze-left-1 { left: 0; min-width: 64px; width: 64px; max-width: 64px; }
        .freeze-left-2 { left: 64px; min-width: 260px; width: 260px; max-width: 260px; }
        .freeze-left-3 { left: 324px; min-width: 120px; width: 120px; max-width: 120px; }
        .freeze-left-2,
        .freeze-left-3 {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .payroll-detail-table tbody .freeze-left-1,
        .payroll-detail-table tbody .freeze-left-2,
        .payroll-detail-table tbody .freeze-left-3,
        .payroll-detail-table tfoot .freeze-left-1,
        .payroll-detail-table tfoot .freeze-left-2,
        .payroll-detail-table tfoot .freeze-left-3 {
            background: #fff;
        }
        .payroll-detail-table tbody tr:nth-of-type(odd) .freeze-left-1,
        .payroll-detail-table tbody tr:nth-of-type(odd) .freeze-left-2,
        .payroll-detail-table tbody tr:nth-of-type(odd) .freeze-left-3 {
            background: #f2f2f2;
        }
        .payroll-detail-table tbody tr.table-danger .freeze-left-1,
        .payroll-detail-table tbody tr.table-danger .freeze-left-2,
        .payroll-detail-table tbody tr.table-danger .freeze-left-3 {
            background: #f8d7da;
        }
        .payroll-detail-table tbody tr.table-warning .freeze-left-1,
        .payroll-detail-table tbody tr.table-warning .freeze-left-2,
        .payroll-detail-table tbody tr.table-warning .freeze-left-3 {
            background: #fff3cd;
        }
        .payroll-detail-table tbody tr.table-secondary .freeze-left-1,
        .payroll-detail-table tbody tr.table-secondary .freeze-left-2,
        .payroll-detail-table tbody tr.table-secondary .freeze-left-3 {
            background: #e2e3e5;
        }
        .payroll-detail-table .freeze-right-1 {
            position: sticky;
            right: 0;
            z-index: 4;
            background: #fff;
            background-clip: padding-box;
            min-width: 170px;
            width: 170px;
            box-shadow: -8px 0 12px rgba(15, 23, 42, .08);
        }
        .payroll-detail-table thead .freeze-right-1 {
            background: #0f2f56;
        }
        .payroll-detail-table tbody tr:nth-of-type(odd) .freeze-right-1 {
            background: #f2f2f2;
        }
        .payroll-detail-table tbody tr.table-danger .freeze-right-1 {
            background: #f8d7da;
        }
        .payroll-detail-table tbody tr.table-warning .freeze-right-1 {
            background: #fff3cd;
        }
        .payroll-detail-table tbody tr.table-secondary .freeze-right-1 {
            background: #e2e3e5;
        }
        .payroll-detail-table tfoot .freeze-right-1 {
            background: #fff4cc;
        }
        .payroll-grand-card {
            border: 1px solid #f59e0b;
            border-radius: 14px;
            background: #fff9e8;
            padding: 14px;
        }
        .payroll-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            background: #e7f1ff;
            color: #084298;
            font-size: 12px;
            font-weight: 700;
            padding: 5px 10px;
        }
        .payroll-table-tools {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        .payroll-sortable {
            cursor: pointer;
            user-select: none;
        }
        .payroll-sortable::after {
            content: '↕';
            opacity: .65;
            margin-left: 6px;
            font-size: 11px;
        }
        .payroll-sortable.sort-asc::after { content: '↑'; opacity: 1; }
        .payroll-sortable.sort-desc::after { content: '↓'; opacity: 1; }
        .payroll-top-scroll {
            height: 14px;
            overflow-x: auto;
            overflow-y: hidden;
            border-bottom: 1px solid #e5e7eb;
            background: #f8fafc;
        }
        .payroll-top-scroll-inner {
            height: 1px;
            min-width: 2400px;
        }
        @media print {
            .main-sidebar,
            .app-sidebar,
            .app-header,
            .navbar,
            .breadcrumb,
            .no-print {
                display: none !important;
            }
            .content-wrapper,
            .app-main {
                margin-left: 0 !important;
            }
            .payroll-detail-table thead th,
            .payroll-detail-table tfoot th,
            .payroll-detail-table tfoot td {
                position: static;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $rows = collect($detail['rows'] ?? []);
        $costRows = collect($costDetail['rows'] ?? []);
        $costSummary = (array) ($costDetail['summary'] ?? []);
        $detailColumns = collect($detail['columns'] ?? []);
        $costRowsForColumns = $costRows;
        $dynamicOtKeys = $costRowsForColumns
            ->flatMap(fn ($row) => array_keys((array) ($row['ot_values'] ?? [])))
            ->filter(fn ($key) => is_numeric($key))
            ->map(fn ($key) => rtrim(rtrim(number_format((float) $key, 1, '.', ''), '0'), '.'))
            ->unique()
            ->sortBy(fn ($key) => (float) $key)
            ->values();
        if ($dynamicOtKeys->isEmpty()) {
            $dynamicOtKeys = $detailColumns
                ->pluck('key')
                ->filter(fn ($key) => is_numeric($key) && (float) $key > 0)
                ->map(fn ($key) => rtrim(rtrim(number_format((float) $key, 1, '.', ''), '0'), '.'))
                ->unique()
                ->sortBy(fn ($key) => (float) $key)
                ->values();
        }
        $columns = $dynamicOtKeys
            ->map(fn ($key) => [
                'key' => (string) $key,
                'label' => rtrim(rtrim(number_format(((float) $key) * 100, 1, ',', ''), '0'), ',') . '%',
            ])
            ->values();
        $summary = (array) ($detail['summary'] ?? []);
        $otSummary = (array) ($summary['ot_values'] ?? []);
        $fmt = fn ($value, $digits = 2) => number_format((float) ($value ?? 0), $digits, ',', '.');
        $rupiah = fn ($value) => 'Rp ' . number_format((float) ($value ?? 0), 0, ',', '.');
        $dashFmt = fn ($value, $digits = 2) => abs((float) ($value ?? 0)) > 0.00001 ? number_format((float) $value, $digits, ',', '.') : '-';
        $dashRupiah = fn ($value) => abs((float) ($value ?? 0)) > 0.00001 ? ('Rp ' . number_format((float) $value, 0, ',', '.')) : '-';
        $personalCostColumnCount = 22 + $columns->count();
        $dateLabel = $date instanceof \Carbon\Carbon ? $date->format('Y-m-d') : (string) ($detail['date'] ?? '-');
        $detailNet = (float) ($budget['net'] ?? 0);
        $detailGross = (float) ($budget['gross'] ?? 0);
        if ($detailGross < $detailNet) {
            $detailGross = $detailNet;
        }
        $totalNormalNominal = (float) ($summary['estimasi_gaji_normal'] ?? 0);
        $totalOvertimeNominal = (float) ($summary['estimasi_lembur'] ?? 0);
        $payrollRowsByEmployee = $rows->keyBy(fn ($row) => (int) ($row['karyawan_id'] ?? 0));
        $attendanceBaseNominal = (float) ($budget['net_hadir'] ?? 0) + (float) ($budget['net_leave_paid'] ?? 0);
        if ((float) ($costSummary['net'] ?? 0) > 0) {
            $attendanceBaseNominal = (float) ($costSummary['net'] ?? 0);
            $detailNet = $attendanceBaseNominal;
            $detailGross = max($detailGross, $attendanceBaseNominal);
        } elseif ($attendanceBaseNominal <= 0) {
            $attendanceBaseNominal = $detailNet;
        }
        $hadirCount = (int) ($costSummary['hadir'] ?? $budget['hadir_count'] ?? 0);
        $leavePaidCount = (int) ($costSummary['leave_paid'] ?? $budget['leave_paid_count'] ?? 0);
        $leaveUnpaidCount = $costRows->where('category', 'leaveNoPay')->count();
        $alphaCount = (int) ($costSummary['alpha'] ?? $budget['alpha_count'] ?? 0);
        $paidAttendanceCount = $hadirCount + $leavePaidCount;
        $actualEmployeeCount = (int) ($summary['employees'] ?? 0);
        if ($actualEmployeeCount <= 0) {
            $actualEmployeeCount = (int) ($costSummary['paid'] ?? $budget['employee_count'] ?? 0);
        }
        $groupedCostRows = $costRows
            ->map(function ($row) use ($payrollRowsByEmployee) {
                $row = (array) $row;
                $otRow = (array) ($payrollRowsByEmployee[(int) ($row['karyawan_id'] ?? 0)] ?? []);
                $hasCalculationRow = !empty($otRow);
                $row['display_rate_harian'] = round((float) ($row['rate_harian'] ?? 0), 2);
                $row['display_normal_cost'] = round((float) ($row['normal_cost'] ?? 0), 2);
                $row['display_norest_cost'] = round((float) ($row['norest_cost'] ?? 0), 2);
                $row['display_target_cost'] = round((float) ($row['target_cost'] ?? 0), 2);
                $row['display_continues_cost'] = round((float) ($row['continues_cost'] ?? 0), 2);
                $row['display_overtime_cost'] = max(0, round((float) ($row['overtime_cost'] ?? 0), 2));
                $row['display_subtotal_cost'] = max(0, round((float) $row['display_normal_cost'] + (float) $row['display_norest_cost'] + (float) $row['display_overtime_cost'] + (float) $row['display_target_cost'] + (float) $row['display_continues_cost'], 2));
                $hasActual = trim((string) ($row['checkin_time'] ?? '')) !== '' && trim((string) ($row['checkin_time'] ?? '')) !== '-';
                $hasCost = (float) ($row['display_subtotal_cost'] ?? 0) > 0;
                $row['display_sort_bucket'] = ($hasActual || $hasCost) ? 0 : 1;
                $row['display_group'] = !empty($row['is_leave_paid']) ? 'Leave Paid'
                    : ((string) ($row['category'] ?? '') === 'leaveNoPay' ? 'Leave Unpaid'
                    : (!empty($row['is_alpha']) ? 'Alpha / No Paid' : 'Hadir'));
                return $row;
            })
            ->sortBy(function ($row) {
                $order = ['Hadir' => 1, 'Leave Paid' => 2, 'Leave Unpaid' => 3, 'Alpha / No Paid' => 4];
                return ($order[(string) ($row['display_group'] ?? '')] ?? 5)
                    . '|' . (int) ($row['display_sort_bucket'] ?? 1)
                    . '|' . sprintf('%012.2f', 999999999 - (float) ($row['display_subtotal_cost'] ?? 0))
                    . '|' . ($row['nama_karyawan'] ?? '');
            }, SORT_NATURAL | SORT_FLAG_CASE)
            ->groupBy('display_group');
        $flatGroupedCostRows = $groupedCostRows->flatten(1);
        $personalNormalTotal = (float) $flatGroupedCostRows->sum('display_normal_cost');
        $personalNoRestTotal = (float) $flatGroupedCostRows->sum('display_norest_cost');
        $personalOvertimeTotal = (float) $flatGroupedCostRows->sum('display_overtime_cost');
        $personalTargetTotal = (float) $flatGroupedCostRows->sum('display_target_cost');
        $personalContinuesTotal = (float) $flatGroupedCostRows->sum('display_continues_cost');
        $personalSubtotalTotal = (float) $flatGroupedCostRows->sum('display_subtotal_cost');
    @endphp

    <div class="payroll-detail-shell">
        <div class="payroll-detail-hero mb-3">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                <div>
                    <div class="payroll-chip mb-2">Profil {{ request('profil_bulan_id') }} | {{ $dateLabel }}</div>
                    <div class="payroll-detail-title">Budget Payroll {{ $dateLabel }}</div>
                    <div class="text-muted mt-1">
                        Rincian actual hadir harian. Halaman ini tidak dipotong pagination, jadi seluruh karyawan approved pada tanggal tersebut ikut tampil.
                    </div>
                </div>
                <div class="d-flex flex-wrap gap-2 no-print">
                    <a href="{{ route('dashboard') }}" class="btn btn-outline-secondary">Kembali Dashboard</a>
                    <button type="button" class="btn btn-primary" onclick="window.print()">Print / PDF</button>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-12 col-md-6 col-xl-3">
                <div class="payroll-stat">
                    <div class="label">Mode</div>
                    <div class="value">{{ $budget['label'] ?: '-' }}</div>
                    <div class="text-muted small">{{ $budget['mode'] ?: 'actual/estimate' }}</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <div class="payroll-stat">
                    <div class="label">Net Harian</div>
                    <div class="value">{{ $rupiah($detailNet) }}</div>
                    <div class="text-muted small">Budget dari widget payroll</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <div class="payroll-stat">
                    <div class="label">Bruto Harian</div>
                    <div class="value">{{ $rupiah($detailGross) }}</div>
                    <div class="text-muted small">Sebelum PPh21/BPJS</div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-xl-3">
                <div class="payroll-stat">
                    <div class="label">Karyawan Actual</div>
                    <div class="value">{{ number_format($actualEmployeeCount, 0, ',', '.') }}</div>
                    <div class="text-muted small">Widget: {{ number_format((int) ($budget['employee_count'] ?? 0), 0, ',', '.') }} karyawan dihitung</div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-12 col-md-3">
                <div class="payroll-stat">
                    <div class="label">Hadir Dibayar</div>
                    <div class="value text-success">{{ number_format($hadirCount, 0, ',', '.') }}</div>
                    <div class="text-muted small">Gaji harian tanpa lembur.</div>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="payroll-stat">
                    <div class="label">Leave Paid</div>
                    <div class="value text-primary">{{ number_format($leavePaidCount, 0, ',', '.') }}</div>
                    <div class="text-muted small">Tetap masuk cost harian.</div>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="payroll-stat">
                    <div class="label">Alpha</div>
                    <div class="value text-danger">{{ number_format($alphaCount, 0, ',', '.') }}</div>
                    <div class="text-muted small">Tidak dihitung nominal.</div>
                </div>
            </div>
            <div class="col-12 col-md-3">
                <div class="payroll-stat">
                    <div class="label">Basis Dibayar</div>
                    <div class="value">{{ number_format($paidAttendanceCount, 0, ',', '.') }}</div>
                    <div class="text-muted small">Hadir + Leave Paid.</div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-12 col-xl-8">
                <div class="payroll-grand-card h-100">
                    <div class="fw-bold mb-2">Grand Total Actual Hadir</div>
                    <div class="row g-2">
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Hari Hadir</div>
                            <div class="fw-bold">{{ $fmt($summary['hari_hadir'] ?? 0) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Rate / Jam</div>
                            <div class="fw-bold">{{ $rupiah($summary['rate_gaji_per_jam'] ?? 0) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Jam Normal</div>
                            <div class="fw-bold">{{ $fmt($summary['jam_normal'] ?? 0) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Jam Lembur xKali</div>
                            <div class="fw-bold">{{ $fmt($summary['jam_lembur_xkali'] ?? 0) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Gaji Harian Tanpa Lembur</div>
                            <div class="fw-bold">{{ $rupiah($attendanceBaseNominal) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Gaji Harian + Lembur Approved</div>
                            <div class="fw-bold">{{ $rupiah($personalSubtotalTotal ?: ($attendanceBaseNominal + $totalOvertimeNominal)) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">PPh21</div>
                            <div class="fw-bold">{{ $rupiah($budget['pph21'] ?? 0) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">BPJS</div>
                            <div class="fw-bold">{{ $rupiah($budget['bpjs'] ?? 0) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-4">
                <div class="payroll-grand-card h-100">
                    <div class="fw-bold mb-2">Pembanding Planning Normal</div>
                    <div class="d-flex justify-content-between">
                        <span>Planning normal</span>
                        <strong>{{ $rupiah($budget['planning_net'] ?? 0) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Bruto normal</span>
                        <strong>{{ $rupiah($budget['planning_gross'] ?? 0) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Potensi OT dikeluarkan</span>
                        <strong>{{ $rupiah($budget['overtime_removed'] ?? 0) }}</strong>
                    </div>
                    <div class="text-muted small mt-2">
                        Planning dipakai sebagai pembanding jika semua karyawan masuk normal tanpa lembur.
                    </div>
                </div>
            </div>
        </div>

        <div class="payroll-detail-card">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 p-3 border-bottom">
                <div>
                    <h5 class="mb-1">Drilldown Personal Cost Harian</h5>
                    <div class="text-muted small">
                        Hadir {{ number_format($hadirCount, 0, ',', '.') }} |
                        Leave paid {{ number_format($leavePaidCount, 0, ',', '.') }} |
                        Leave unpaid {{ number_format($leaveUnpaidCount, 0, ',', '.') }} |
                        Alpha {{ number_format($alphaCount, 0, ',', '.') }} |
                        Basis dibayar {{ number_format($paidAttendanceCount, 0, ',', '.') }}
                    </div>
                </div>
                <div class="payroll-table-tools no-print">
                    <input type="search" class="form-control form-control-sm" id="payrollCostSearch" style="width:260px;" placeholder="Cari nama / finger / jabatan / status">
                    <select class="form-select form-select-sm" id="payrollCostGroupFilter" style="width:160px;">
                        <option value="">Semua group</option>
                        <option value="Hadir">Hadir</option>
                        <option value="Leave Paid">Leave Paid</option>
                        <option value="Leave Unpaid">Leave Unpaid</option>
                        <option value="Alpha / No Paid">Alpha / No Paid</option>
                    </select>
                    <button type="button" class="btn btn-success btn-sm" id="payrollCostExportCsv">
                        <i class="fas fa-file-csv me-1"></i> Export CSV
                    </button>
                    <span class="badge text-bg-success" id="payrollCostVisibleCount">{{ number_format($costRows->count(), 0, ',', '.') }} row</span>
                </div>
            </div>
            <div class="payroll-top-scroll no-print" id="payrollCostTopScroll"><div class="payroll-top-scroll-inner"></div></div>
            <div class="table-responsive" id="payrollCostTableWrap">
                <table class="table table-sm table-striped table-hover payroll-detail-table" id="payrollCostTable">
                    <thead>
                        <tr>
                            <th class="text-center payroll-sortable freeze-left-1" data-sort-index="0" data-sort-type="number">No.</th>
                            <th class="payroll-sortable freeze-left-2" data-sort-index="1">Karyawan</th>
                            <th class="payroll-sortable freeze-left-3" data-sort-index="2">Kode Finger</th>
                            <th class="payroll-sortable" data-sort-index="3">Jabatan</th>
                            <th class="payroll-sortable" data-sort-index="4">Jenis</th>
                            <th>Hari</th>
                            <th>Basis HK</th>
                            <th>Plan Jam</th>
                            <th>Actual In</th>
                            <th>Actual Out</th>
                            <th class="payroll-sortable" data-sort-index="10">Status</th>
                            <th class="text-end payroll-sortable" data-sort-index="11" data-sort-type="money">Rate Harian</th>
                            <th class="text-end payroll-sortable" data-sort-index="12" data-sort-type="money">Rate / Jam</th>
                            <th class="text-end payroll-sortable" data-sort-index="13" data-sort-type="money">Upah 1 Day</th>
                            <th class="text-end payroll-sortable" data-sort-index="14" data-sort-type="money">Cost Upah 1HK</th>
                            <th class="text-end payroll-sortable" data-sort-index="15" data-sort-type="number">Jam Lembur Bersih</th>
                            @foreach ($columns as $col)
                                <th class="text-end">{{ $col['label'] ?? '-' }}</th>
                            @endforeach
                            <th class="text-end payroll-sortable" data-sort-index="{{ 16 + $columns->count() }}" data-sort-type="number">Jam Lembur xKali</th>
                            <th class="text-end payroll-sortable" data-sort-index="{{ 17 + $columns->count() }}" data-sort-type="money">Cost NoRest</th>
                            <th class="text-end payroll-sortable" data-sort-index="{{ 18 + $columns->count() }}" data-sort-type="money">Cost OVT</th>
                            <th class="text-end payroll-sortable" data-sort-index="{{ 19 + $columns->count() }}" data-sort-type="money">Cost Target</th>
                            <th class="text-end payroll-sortable" data-sort-index="{{ 20 + $columns->count() }}" data-sort-type="money">Cost Continues Workdays</th>
                            <th class="text-end payroll-sortable freeze-right-1" data-sort-index="{{ 21 + $columns->count() }}" data-sort-type="money">Sub Total 1 Day</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($groupedCostRows as $groupName => $groupRows)
                            <tr class="table-light payroll-group-row" data-group="{{ $groupName }}">
                                <td colspan="{{ $personalCostColumnCount }}" class="fw-bold">
                                    {{ $groupName }} - {{ number_format($groupRows->count(), 0, ',', '.') }} orang
                                </td>
                            </tr>
                            @foreach ($groupRows as $row)
                                @php
                                    $rowClass = !empty($row['is_alpha']) || (string) ($row['category'] ?? '') === 'leaveNoPay' ? 'table-danger' : (!empty($row['is_leave_paid']) ? 'table-warning' : '');
                                    if ((float) ($row['rate_harian'] ?? 0) <= 0 && empty($row['is_alpha']) && (string) ($row['category'] ?? '') !== 'leaveNoPay') {
                                        $rowClass = 'table-secondary';
                                    }
                                    $otRow = (array) ($payrollRowsByEmployee[(int) ($row['karyawan_id'] ?? 0)] ?? []);
                                    $hasCalculationRow = !empty($otRow);
                                    $otValues = (array) ($hasCalculationRow ? ($otRow['ot_values'] ?? []) : ($row['ot_values'] ?? []));
                                    $normalCost = (float) ($row['display_normal_cost'] ?? 0);
                                    $noRestCost = (float) ($row['display_norest_cost'] ?? 0);
                                    $overtimeCost = (float) ($row['display_overtime_cost'] ?? 0);
                                    $targetCost = (float) ($row['display_target_cost'] ?? 0);
                                    $continuesCost = (float) ($row['display_continues_cost'] ?? 0);
                                    $totalOneDay = (float) ($row['display_subtotal_cost'] ?? ($normalCost + $noRestCost + $overtimeCost + $targetCost + $continuesCost));
                                    $jamLemburBersih = (float) ($hasCalculationRow ? ($otRow['jam_lembur_bersih'] ?? 0) : ($row['spl_hours_normal'] ?? 0));
                                    $jamLemburXKali = $overtimeCost > 0 && (float) ($row['rate_per_jam'] ?? 0) > 0
                                        ? ($overtimeCost / (float) ($row['rate_per_jam'] ?? 1))
                                        : 0.0;
                                    $dayTypeLabel = match ((string) ($row['day_type'] ?? 'workday')) {
                                        'weekend' => 'Weekend',
                                        'holiday' => 'Holiday',
                                        'holiday_special' => 'Holiday Special',
                                        default => 'Workday',
                                    };
                                @endphp
                                <tr class="{{ $rowClass }} payroll-cost-row" data-group="{{ $groupName }}" data-search="{{ strtolower(trim(($row['nama_karyawan'] ?? '') . ' ' . ($row['id_finger'] ?? '') . ' ' . ($row['jabatan'] ?? '') . ' ' . ($row['jenis_pekerja'] ?? '') . ' ' . ($row['status'] ?? '') . ' ' . ($row['spl_badge_label'] ?? ''))) }}">
                                    <td class="text-center freeze-left-1">{{ number_format($loop->parent->iteration, 0, ',', '.') }}.{{ number_format($loop->iteration, 0, ',', '.') }}</td>
                                    <td class="freeze-left-2">{{ $row['nama_karyawan'] ?? '-' }}</td>
                                    <td class="freeze-left-3">{{ $row['id_finger'] ?? '-' }}</td>
                                    <td>{{ $row['jabatan'] ?? '-' }}</td>
                                    <td>{{ $row['jenis_pekerja'] ?? '-' }}</td>
                                    <td>{{ $dayTypeLabel }}</td>
                                    <td>{{ $row['work_basis'] ?? '-' }}</td>
                                    <td>{{ $row['shift'] ?? '-' }}</td>
                                    <td>{{ $row['checkin_time'] ?? '-' }}</td>
                                    <td>{{ $row['checkout_time'] ?? '-' }}</td>
                                    <td>
                                        {{ $row['status'] ?? '-' }}
                                        @if (!empty($row['spl_badge_label']))
                                            <span class="badge text-bg-warning ms-1">{{ $row['spl_badge_label'] }}</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        {{ $rupiah($row['display_rate_harian'] ?? 0) }}
                                        @if ((float) ($row['rate_harian'] ?? 0) <= 0 && empty($row['is_alpha']) && (string) ($row['category'] ?? '') !== 'leaveNoPay')
                                            <span class="badge text-bg-secondary ms-1">rate kosong</span>
                                        @endif
                                    </td>
                                    <td class="text-end">{{ $dashRupiah($row['rate_per_jam'] ?? 0) }}</td>
                                    <td class="text-end fw-bold">{{ $rupiah($normalCost) }}</td>
                                    <td class="text-end fw-bold">{{ $dashRupiah($normalCost) }}</td>
                                    <td class="text-end">{{ $dashFmt($jamLemburBersih) }}</td>
                                    @foreach ($columns as $col)
                                        @php $key = (string) ($col['key'] ?? ''); @endphp
                                        <td class="text-end">{{ $dashFmt($otValues[$key] ?? $otValues[number_format((float) $key, 1, '.', '')] ?? 0) }}</td>
                                    @endforeach
                                    <td class="text-end">{{ $dashFmt($jamLemburXKali) }}</td>
                                    <td class="text-end fw-bold">{{ $dashRupiah($noRestCost) }}</td>
                                    <td class="text-end fw-bold">{{ $dashRupiah($overtimeCost) }}</td>
                                    <td class="text-end fw-bold">{{ $dashRupiah($targetCost) }}</td>
                                    <td class="text-end fw-bold">{{ $dashRupiah($continuesCost) }}</td>
                                    <td class="text-end fw-bold freeze-right-1">{{ $rupiah($totalOneDay) }}</td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="{{ $personalCostColumnCount }}" class="text-center text-muted py-4">
                                    Belum ada data personal cost untuk tanggal ini.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="{{ $personalCostColumnCount - 6 }}">Grand Total Cost Harian</th>
                            <td class="text-end">{{ $dashRupiah($personalNormalTotal) }}</td>
                            <td class="text-end">{{ $dashRupiah($personalNoRestTotal) }}</td>
                            <td class="text-end">{{ $dashRupiah($personalOvertimeTotal) }}</td>
                            <td class="text-end">{{ $dashRupiah($personalTargetTotal) }}</td>
                            <td class="text-end">{{ $dashRupiah($personalContinuesTotal) }}</td>
                            <td class="text-end freeze-right-1">{{ $rupiah($personalSubtotalTotal) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="payroll-detail-card mt-3">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 p-3 border-bottom">
                <div>
                    <h5 class="mb-1">Rincian Actual Hadir</h5>
                    <div class="text-muted small">
                        {{ $dateLabel }} | {{ number_format((int) ($summary['employees'] ?? 0), 0, ',', '.') }} karyawan |
                        Hari hadir {{ $fmt($summary['hari_hadir'] ?? 0) }} |
                        Jam normal {{ $fmt($summary['jam_normal'] ?? 0) }} |
                        Lembur bersih {{ $fmt($summary['jam_lembur_bersih'] ?? 0) }}
                    </div>
                </div>
                @if (!request()->boolean('with_actual_detail'))
                    <a class="btn btn-outline-primary btn-sm no-print" href="{{ request()->fullUrlWithQuery(['with_actual_detail' => 1]) }}">
                        Muat rincian actual
                    </a>
                @else
                    <span class="badge text-bg-primary">{{ number_format($rows->count(), 0, ',', '.') }} row</span>
                @endif
            </div>

            <div class="table-responsive" style="max-height: calc(100vh - 220px);">
                <table class="table table-sm table-striped table-hover payroll-detail-table">
                    <thead>
                        <tr>
                            <th class="text-center">No.</th>
                            <th>Karyawan</th>
                            <th class="text-end">Hari Hadir</th>
                            <th class="text-end">Rate Gaji / Jam</th>
                            <th class="text-end">Jam Normal</th>
                            <th class="text-end">Jam Lembur Bersih</th>
                            @foreach ($columns as $col)
                                <th class="text-end">{{ $col['label'] ?? $col['key'] ?? '-' }}</th>
                            @endforeach
                            <th class="text-end">Jam Lembur xKali</th>
                            <th class="text-end">Est. Gaji Normal</th>
                            <th class="text-end">Est. Lembur</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr>
                                <td class="text-center">{{ number_format((int) ($row['no'] ?? $loop->iteration), 0, ',', '.') }}</td>
                                <td>{{ $row['karyawan'] ?? '-' }}</td>
                                <td class="text-end">{{ $fmt($row['hari_hadir'] ?? 0) }}</td>
                                <td class="text-end">{{ $rupiah($row['rate_gaji_per_jam'] ?? 0) }}</td>
                                <td class="text-end">{{ $fmt($row['jam_normal'] ?? 0) }}</td>
                                <td class="text-end">{{ $fmt($row['jam_lembur_bersih'] ?? 0) }}</td>
                                @foreach ($columns as $col)
                                    @php $key = (string) ($col['key'] ?? ''); @endphp
                                    <td class="text-end">{{ $fmt(($row['ot_values'] ?? [])[$key] ?? 0) }}</td>
                                @endforeach
                                <td class="text-end fw-bold">{{ $fmt($row['jam_lembur_xkali'] ?? 0) }}</td>
                                <td class="text-end">{{ $rupiah($row['estimasi_gaji_normal'] ?? 0) }}</td>
                                <td class="text-end">{{ $rupiah($row['estimasi_lembur'] ?? 0) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ 9 + $columns->count() }}" class="text-center text-muted py-4">
                                    @if (!request()->boolean('with_actual_detail'))
                                        Rincian actual belum dimuat agar halaman cost cepat dibuka.
                                    @else
                                        Belum ada actual hadir approved pada tanggal ini.
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="2">Grand Total</th>
                            <td class="text-end">{{ $fmt($summary['hari_hadir'] ?? 0) }}</td>
                            <td class="text-end">{{ $rupiah($summary['rate_gaji_per_jam'] ?? 0) }}</td>
                            <td class="text-end">{{ $fmt($summary['jam_normal'] ?? 0) }}</td>
                            <td class="text-end">{{ $fmt($summary['jam_lembur_bersih'] ?? 0) }}</td>
                            @foreach ($columns as $col)
                                @php $key = (string) ($col['key'] ?? ''); @endphp
                                <td class="text-end">{{ $fmt($otSummary[$key] ?? 0) }}</td>
                            @endforeach
                            <td class="text-end">{{ $fmt($summary['jam_lembur_xkali'] ?? 0) }}</td>
                            <td class="text-end">{{ $rupiah($summary['estimasi_gaji_normal'] ?? 0) }}</td>
                            <td class="text-end">{{ $rupiah($summary['estimasi_lembur'] ?? 0) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const table = document.getElementById('payrollCostTable');
            if (!table) return;

            const tbody = table.querySelector('tbody');
            const tableWrap = document.getElementById('payrollCostTableWrap');
            const topScroll = document.getElementById('payrollCostTopScroll');
            const searchEl = document.getElementById('payrollCostSearch');
            const groupEl = document.getElementById('payrollCostGroupFilter');
            const countEl = document.getElementById('payrollCostVisibleCount');
            const exportBtn = document.getElementById('payrollCostExportCsv');
            const groupOrder = ['Hadir', 'Leave Paid', 'Leave Unpaid', 'Alpha / No Paid'];
            const groupLabels = new Map(
                Array.from(tbody.querySelectorAll('.payroll-group-row')).map(row => [row.dataset.group || '', row.cloneNode(true)])
            );
            const rows = Array.from(tbody.querySelectorAll('.payroll-cost-row')).map(row => row.cloneNode(true));
            let sortState = { index: 1, type: 'text', dir: 'asc' };

            const parseNumber = (text) => {
                const clean = String(text || '').replace(/Rp|\s|\./g, '').replace(',', '.').replace(/[^\d.-]/g, '');
                const parsed = Number.parseFloat(clean);
                return Number.isFinite(parsed) ? parsed : 0;
            };
            const cellValue = (row, index, type) => {
                const text = row.children[index]?.innerText?.trim() || '';
                return type === 'number' || type === 'money' ? parseNumber(text) : text.toLowerCase();
            };
            const rowMatches = (row) => {
                const needle = (searchEl?.value || '').trim().toLowerCase();
                const group = groupEl?.value || '';
                if (group && (row.dataset.group || '') !== group) return false;
                if (needle && !(row.dataset.search || '').includes(needle)) return false;
                return true;
            };
            const render = () => {
                const visibleRows = rows.filter(rowMatches);
                const byGroup = new Map();
                visibleRows.forEach(row => {
                    const group = row.dataset.group || 'Hadir';
                    if (!byGroup.has(group)) byGroup.set(group, []);
                    byGroup.get(group).push(row);
                });
                tbody.innerHTML = '';
                groupOrder.forEach(group => {
                    const groupRows = byGroup.get(group) || [];
                    if (!groupRows.length) return;
                    const header = groupLabels.get(group)?.cloneNode(true) || document.createElement('tr');
                    header.dataset.group = group;
                    header.className = 'table-light payroll-group-row';
                    if (!header.children.length) {
                        const td = document.createElement('td');
                        td.colSpan = table.tHead.rows[0].cells.length;
                        header.appendChild(td);
                    }
                    header.children[0].textContent = `${group} - ${groupRows.length.toLocaleString('id-ID')} orang`;
                    tbody.appendChild(header);
                    groupRows
                        .sort((a, b) => {
                            const av = cellValue(a, sortState.index, sortState.type);
                            const bv = cellValue(b, sortState.index, sortState.type);
                            const result = typeof av === 'number' ? av - bv : String(av).localeCompare(String(bv), 'id');
                            return sortState.dir === 'asc' ? result : -result;
                        })
                        .forEach((row, idx) => {
                            const clone = row.cloneNode(true);
                            if (clone.children[0]) clone.children[0].textContent = String(idx + 1);
                            tbody.appendChild(clone);
                        });
                });
                if (countEl) countEl.textContent = `${visibleRows.length.toLocaleString('id-ID')} row`;
            };
            const exportCsv = () => {
                const headers = Array.from(table.tHead.rows[0].cells).map(cell => cell.innerText.trim());
                const visibleRows = Array.from(tbody.querySelectorAll('.payroll-cost-row'));
                const csvRows = [headers];
                visibleRows.forEach(row => {
                    csvRows.push(Array.from(row.cells).map(cell => cell.innerText.trim().replace(/\s+/g, ' ')));
                });
                const csv = csvRows
                    .map(cols => cols.map(value => `"${String(value).replace(/"/g, '""')}"`).join(','))
                    .join('\r\n');
                const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `payroll-cost-harian-{{ $dateLabel }}.csv`;
                document.body.appendChild(link);
                link.click();
                link.remove();
                URL.revokeObjectURL(url);
            };

            searchEl?.addEventListener('input', render);
            groupEl?.addEventListener('change', render);
            exportBtn?.addEventListener('click', exportCsv);
            if (tableWrap && topScroll) {
                const topInner = topScroll.querySelector('.payroll-top-scroll-inner');
                if (topInner) topInner.style.width = `${table.scrollWidth}px`;
                topScroll.addEventListener('scroll', () => { tableWrap.scrollLeft = topScroll.scrollLeft; });
                tableWrap.addEventListener('scroll', () => { topScroll.scrollLeft = tableWrap.scrollLeft; });
            }
            table.querySelectorAll('.payroll-sortable').forEach(th => {
                th.addEventListener('click', () => {
                    const index = Number.parseInt(th.dataset.sortIndex || '1', 10);
                    const type = th.dataset.sortType || 'text';
                    sortState = {
                        index,
                        type,
                        dir: sortState.index === index && sortState.dir === 'asc' ? 'desc' : 'asc',
                    };
                    table.querySelectorAll('.payroll-sortable').forEach(node => node.classList.remove('sort-asc', 'sort-desc'));
                    th.classList.add(sortState.dir === 'asc' ? 'sort-asc' : 'sort-desc');
                    render();
                });
            });
            render();
        })();
    </script>
@endpush