@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;
        }
        .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-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;
        }
        @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'] ?? []);
        $columns = collect($detail['columns'] ?? []);
        $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, ',', '.');
        $dateLabel = $date instanceof \Carbon\Carbon ? $date->format('Y-m-d') : (string) ($detail['date'] ?? '-');
        $detailNet = (float) ($budget['net'] ?? 0);
        $detailGross = (float) ($budget['gross'] ?? 0);
        $totalNormalNominal = (float) ($summary['estimasi_gaji_normal'] ?? 0);
        $totalOvertimeNominal = (float) ($summary['estimasi_lembur'] ?? 0);
    @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((int) ($summary['employees'] ?? 0), 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-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">Estimasi Gaji Normal</div>
                            <div class="fw-bold">{{ $rupiah($totalNormalNominal) }}</div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="text-muted small">Estimasi Lembur</div>
                            <div class="fw-bold">{{ $rupiah($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">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>
                <span class="badge text-bg-primary">{{ number_format($rows->count(), 0, ',', '.') }} row</span>
            </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">
                                    Belum ada actual hadir approved pada tanggal ini.
                                </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