@extends('layouts.adminlte')

@section('title', 'TEMPLATE REPORT PENGGAJIAN')
@section('page_title', 'TEMPLATE REPORT PENGGAJIAN')

@push('styles')
    <style>
        .payroll-matrix-wrap { max-height: 560px; overflow: auto; border: 1px solid #dee2e6; border-radius: .25rem; }
        .payroll-matrix th, .payroll-matrix td { white-space: nowrap; min-width: 130px; vertical-align: top; }
        .payroll-matrix thead th { position: sticky; top: 0; z-index: 4; background: #fff; }
        .payroll-matrix .sticky-col { position: sticky; left: 0; z-index: 5; min-width: 230px; background: #fff; }
        .payroll-matrix thead .sticky-col { z-index: 6; }
        .payroll-cell { font-size: 11px; line-height: 1.35; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px 8px; min-height: 62px; background: #fff; }
        .payroll-cell.blank { background: #fff; border-style: dashed; color: #9ca3af; }
        .payroll-cell .badge { font-size: 10px; }
        .holiday-badge { font-size: 10px; }
        .tag-approved {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            background: #16a34a;
            border: 1px solid #15803d;
            border-radius: 999px;
            padding: 1px 8px;
            line-height: 1.4;
            margin-right: 4px;
        }
        .tag-draft {
            display: inline-block;
            font-size: 10px;
            font-weight: 700;
            color: #fff;
            background: #6b7280;
            border: 1px solid #4b5563;
            border-radius: 999px;
            padding: 1px 8px;
            line-height: 1.4;
            margin-right: 4px;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">
                {{ ($meta['profil']['code'] ?? '-') . ' - ' . ($meta['profil']['name'] ?? '-') }}
            </h3>
            <div class="d-flex gap-2 align-items-center">
                <input type="text" id="employeeFilterInput" class="form-control form-control-sm" placeholder="Filter karyawan..." style="min-width: 240px;">
                <button class="btn btn-outline-secondary btn-sm" onclick="window.print()">
                    <i class="fas fa-print me-1"></i>Print
                </button>
                <a href="{{ route('penggajian.index') }}" class="btn btn-outline-primary btn-sm">Kembali</a>
            </div>
        </div>
        <div class="card-body">
            <div class="mb-2 text-muted small">
                Periode:
                {{ $meta['profil']['start_date'] ?? '-' }} s/d {{ $meta['profil']['end_date'] ?? '-' }} |
                Pay Date: {{ $meta['pay_date'] ?? '-' }} |
                Generated: {{ $generatedAt ?? '-' }}
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Karyawan</th>
                            <th>Siklus</th>
                            <th>Periode Bayar</th>
                            <th>Approved</th>
                            <th>HK</th>
                            <th>Alpha</th>
                            <th>Cuti</th>
                            <th>Jam Lembur</th>
                            <th>Bruto</th>
                            <th>PPh21</th>
                            <th>BPJS</th>
                            <th>Reimburse</th>
                            <th>Netto</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $idx => $row)
                            @php
                                $empKey = strtolower(trim(($row['employee_code'] ?? '') . ' ' . ($row['employee_name'] ?? '')));
                            @endphp
                            <tr>
                                <td>{{ $idx + 1 }}</td>
                                <td class="employee-key" data-employee-key="{{ $empKey }}">{{ $row['employee_code'] ?? '-' }} - {{ $row['employee_name'] ?? '-' }}</td>
                                <td>{{ $row['cycle_label'] ?? '-' }}</td>
                                <td>{{ $row['period_start'] ?? '-' }} s/d {{ $row['period_end'] ?? '-' }}</td>
                                <td>{{ number_format((float) ($row['approved_days'] ?? 0), 0, ',', '.') }} hari / {{ number_format((float) ($row['approved_hours'] ?? 0), 2, ',', '.') }} jam</td>
                                <td class="text-center">{{ number_format((float) ($row['hk_days'] ?? 0), 0, ',', '.') }}/{{ number_format((float) ($row['expected_hk_days'] ?? 0), 0, ',', '.') }}</td>
                                <td class="text-center">{{ number_format((float) ($row['alpha_days'] ?? 0), 0, ',', '.') }}</td>
                                <td class="text-center">{{ number_format((float) ($row['cuti_days'] ?? 0), 0, ',', '.') }}</td>
                                <td class="text-end">{{ number_format((float) ($row['overtime_hours'] ?? 0), 2, ',', '.') }}</td>
                                <td class="text-end">{{ number_format((float) ($row['billed_nominal'] ?? 0), 2, ',', '.') }}</td>
                                <td class="text-end">{{ number_format((float) ($row['pph21_nominal'] ?? 0), 2, ',', '.') }}</td>
                                <td class="text-end">{{ number_format((float) ($row['bpjs_nominal'] ?? 0), 2, ',', '.') }}</td>
                                <td class="text-end">{{ number_format((float) ($row['reimburse_nominal'] ?? 0), 2, ',', '.') }}</td>
                                <td class="text-end"><strong>{{ number_format((float) ($row['net_nominal'] ?? 0), 2, ',', '.') }}</strong></td>
                                <td>{{ !empty($row['is_paid']) ? 'Terbayar' : 'Belum' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="15" class="text-center text-muted">Tidak ada data.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h3 class="card-title m-0">Matrix Penggajian Per Hari</h3>
        </div>
        <div class="card-body">
            @if(empty($matrixDates) || empty($matrixRows))
                <div class="text-muted">Belum ada data harian untuk periode ini.</div>
            @else
                <div class="payroll-matrix-wrap">
                    <table class="table table-bordered table-sm mb-0 payroll-matrix">
                        <thead>
                            <tr>
                                <th class="sticky-col">Karyawan</th>
                                @foreach($matrixDates as $dateKey)
                                    @php
                                        $isHoliday = isset($holidayMap[$dateKey]);
                                        $dayLabel = \Carbon\Carbon::parse($dateKey)->locale('id')->translatedFormat('D');
                                        $dateLabel = \Carbon\Carbon::parse($dateKey)->format('d/m');
                                    @endphp
                                    <th class="text-center">
                                        {{ $dateLabel }}<br>
                                        <small class="text-muted">{{ $dayLabel }}</small><br>
                                        @if($isHoliday)
                                            <span class="badge badge-danger holiday-badge">Libur</span>
                                        @endif
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($matrixRows as $mRow)
                                @php
                                    $empKey = strtolower(trim(($mRow['employee_code'] ?? '') . ' ' . ($mRow['employee_name'] ?? '')));
                                @endphp
                                <tr>
                                    <td class="sticky-col">
                                        <div class="employee-key" data-employee-key="{{ $empKey }}">
                                            <strong>{{ $mRow['employee_code'] ?? '-' }}</strong><br>
                                            {{ $mRow['employee_name'] ?? '-' }}
                                        </div>
                                    </td>
                                    @foreach($matrixDates as $dateKey)
                                        @php $cell = $mRow['cells'][$dateKey] ?? null; @endphp
                                        <td>
                                            @if(!$cell)
                                                <div class="payroll-cell blank">-</div>
                                            @else
                                                <div class="payroll-cell">
                                                    <div class="mb-1">
                                                        @if(!empty($cell['is_approved']))
                                                            <span class="tag-approved">APPROVED</span>
                                                        @else
                                                            <span class="tag-draft">DRAFT</span>
                                                        @endif
                                                        <span class="badge badge-light text-dark">{{ $cell['status'] ?? '-' }}</span>
                                                    </div>
                                                    <div>{{ $cell['in'] ?? '-' }} / {{ $cell['out'] ?? '-' }}</div>
                                                    <div><small class="text-muted">Aktual: {{ number_format((float) ($cell['hours'] ?? 0), 2, ',', '.') }} jam</small></div>
                                                    <div><small class="text-muted">Efektif: {{ number_format((float) ($cell['effective_hours'] ?? 0), 2, ',', '.') }} jam</small></div>
                                                    <div><small class="text-muted">OT: {{ number_format((float) ($cell['overtime_hours'] ?? 0), 2, ',', '.') }} | xKali: {{ number_format((float) ($cell['weighted_overtime_hours'] ?? 0), 2, ',', '.') }}</small></div>
                                                    <div><small class="text-muted">Est: Rp {{ number_format((float) ($cell['estimated_nominal'] ?? 0), 2, ',', '.') }}</small></div>
                                                </div>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const $input = document.getElementById('employeeFilterInput');
        if (!$input) return;

        const norm = (s) => (s || '').toString().trim().toLowerCase();

        const applyFilter = () => {
            const q = norm($input.value);

            // tabel rekap atas
            document.querySelectorAll('.card .table tbody tr').forEach((tr) => {
                const keyEl = tr.querySelector('.employee-key');
                if (!keyEl) return;
                const key = norm(keyEl.getAttribute('data-employee-key'));
                tr.style.display = (!q || key.includes(q)) ? '' : 'none';
            });
        };

        $input.addEventListener('input', applyFilter);
    })();
</script>
@endpush