@extends('layouts.app')
@section('title', 'Dashboard')

@use(App\Support\Expiry)

@section('content')
<div class="row">
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card"><div class="card-body p-3"><div class="row">
            <div class="col-8"><div class="numbers">
                <p class="text-sm mb-0 text-uppercase font-weight-bold">Active Staff</p>
                <h5 class="font-weight-bolder mb-0">{{ number_format($active) }}</h5></div></div>
            <div class="col-4 text-end"><div class="icon icon-shape bg-gradient-primary shadow text-center rounded-circle">
                <i class="bi bi-people-fill text-white"></i></div></div>
        </div></div></div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card"><div class="card-body p-3"><div class="row">
            <div class="col-8"><div class="numbers">
                <p class="text-sm mb-0 text-uppercase font-weight-bold">Resigned</p>
                <h5 class="font-weight-bolder mb-0">{{ number_format($resign) }}</h5></div></div>
            <div class="col-4 text-end"><div class="icon icon-shape bg-gradient-primary shadow text-center rounded-circle">
                <i class="bi bi-person-dash-fill text-white"></i></div></div>
        </div></div></div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card"><div class="card-body p-3"><div class="row">
            <div class="col-8"><div class="numbers">
                <p class="text-sm mb-0 text-uppercase font-weight-bold">Other / Unverified</p>
                <h5 class="font-weight-bolder mb-0">{{ number_format($inactive) }}</h5></div></div>
            <div class="col-4 text-end"><div class="icon icon-shape bg-gradient-primary shadow text-center rounded-circle">
                <i class="bi bi-person-fill-exclamation text-white"></i></div></div>
        </div></div></div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-4">
        <div class="card"><div class="card-body p-3"><div class="row">
            <div class="col-8"><div class="numbers">
                <p class="text-sm mb-0 text-uppercase font-weight-bold">Permits ≤30d</p>
                <h5 class="font-weight-bolder mb-0 text-danger">{{ $expiry['permit_expiry'][30] }}</h5>
                <span class="text-xs">{{ $expiry['permit_expiry']['expired'] }} already expired</span></div></div>
            <div class="col-4 text-end"><div class="icon icon-shape bg-gradient-primary shadow text-center rounded-circle">
                <i class="bi bi-exclamation-triangle-fill text-white"></i></div></div>
        </div></div></div>
    </div>
</div>

@if(isset($attByCode))
{{-- Attendance + payroll reporting: admin & finance only --}}
<div class="row">
    <div class="col-lg-7 mb-4">
        <div class="card h-100">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Attendance — {{ $attMonthLabel }}</h6>
                    <span class="text-xs text-muted">{{ number_format($attMarked) }} of {{ number_format($attActive) }} staff marked this month</span>
                </div>
                <a href="{{ route('attendance.summary') }}" class="btn btn-sm btn-outline-primary mb-0 py-1">Full report</a>
            </div>
            <div class="card-body pt-3">
                <div class="row g-2 mb-3">
                    @foreach(\App\Models\Attendance::CODES as $code => $label)
                        <div class="col">
                            <div class="border rounded text-center py-2 att-{{ $code }}">
                                <div class="h6 mb-0">{{ number_format($attByCode[$code] ?? 0) }}</div>
                                <span style="font-size:.6rem" class="text-uppercase fw-bold">{{ $code }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>

                <h6 class="text-xs text-uppercase text-muted">Top sites recording attendance</h6>
                <div class="table-responsive">
                    <table class="table table-sm align-items-center mb-0">
                        <thead><tr class="text-xxs text-uppercase text-secondary"><th>Site</th><th class="text-center">Staff</th><th class="text-center">Records</th><th></th></tr></thead>
                        <tbody>
                        @forelse($attTopSites as $row)
                            <tr>
                                <td class="text-sm font-weight-bold">{{ $row->name }}</td>
                                <td class="text-center text-sm">{{ $row->staff }}</td>
                                <td class="text-center text-sm">{{ $row->c }}</td>
                                <td class="text-end"><a href="{{ route('attendance.summary') }}" class="text-xs">view</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted text-sm py-3">
                                No attendance recorded yet this month.
                                <a href="{{ route('attendance.index') }}">Start marking</a>.
                            </td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5 mb-4">
        <div class="card h-100">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-0">Payroll — {{ $payMonthLabel }}</h6>
                    <span class="text-xs text-muted">{{ $payFinalized }} finalized · {{ $payDraft }} draft</span>
                </div>
                <a href="{{ route('payroll.index') }}" class="btn btn-sm btn-outline-primary mb-0 py-1">Payroll</a>
            </div>
            <div class="card-body pt-3">
                <div class="row text-center mb-3">
                    <div class="col-6 border-end">
                        <span class="text-xs text-uppercase text-muted">Net payout</span>
                        <h5 class="mb-0 text-primary">RM {{ number_format($payNett, 2) }}</h5>
                    </div>
                    <div class="col-6">
                        <span class="text-xs text-uppercase text-muted">Payslips</span>
                        <h5 class="mb-0">{{ number_format($payCount) }}</h5>
                    </div>
                </div>
                <div class="d-flex justify-content-between text-sm"><span class="text-muted">Gross earnings</span><span>RM {{ number_format($payGross, 2) }}</span></div>
                <div class="d-flex justify-content-between text-sm"><span class="text-muted">Total deductions</span><span>RM {{ number_format($payDeductions, 2) }}</span></div>
                <hr class="horizontal dark my-2">
                <h6 class="text-xs text-uppercase text-muted">Net payout — last 6 months</h6>
                <canvas id="payTrend" height="120"></canvas>
            </div>
        </div>
    </div>
</div>

<style>
    .att-P{background:#c6f6d5;color:#22543d}.att-A{background:#fed7d7;color:#822727}
    .att-R{background:#e2e8f0;color:#4a5568}.att-MC{background:#feebc8;color:#7b341e}
    .att-AL{background:#bee3f8;color:#2a4365}.att-UL{background:#cbd5e0;color:#1a202c}
    .att-PH{background:#e9d8fd;color:#44337a}.att-HD{background:#b2f5ea;color:#234e52}
</style>
@endif

<div class="row">
    @php
        $panels = [
            ['permit', 'Permits Expiring', $expiringPermits, 'permit_expiry'],
            ['passport', 'Passports Expiring', $expiringPassports, 'passport_expiry'],
            ['fomema', 'FOMEMA Expiring', $expiringFomema, 'fomema_expiry'],
        ];
    @endphp
    @foreach($panels as [$type, $label, $rows, $col])
    <div class="col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">{{ $label }} <span class="text-xs text-muted">(≤90 days)</span></h6>
                <a href="{{ route('renewals.index', ['type' => $type]) }}" class="text-xs">View all</a>
            </div>
            <div class="card-body px-0 pt-2 pb-2">
                <div class="table-responsive">
                <table class="table align-items-center mb-0">
                    <tbody>
                    @forelse($rows as $s)
                        <tr>
                            <td class="ps-3"><a href="{{ route('staff.show', $s) }}" class="text-sm font-weight-bold">{{ \Illuminate\Support\Str::limit($s->name, 22) }}</a>
                                <div class="text-xs text-muted">{{ $s->site?->name ?? '—' }}</div></td>
                            <td class="text-end pe-3">
                                <div class="text-xs">{{ optional($s->$col)->format('d M Y') }}</div>
                                {!! Expiry::chip($s->$col) !!}
                            </td>
                        </tr>
                    @empty
                        <tr><td class="ps-3 text-sm text-muted py-3">Nothing expiring soon 🎉</td></tr>
                    @endforelse
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card"><div class="card-header pb-0"><h6>Active by Nationality</h6></div>
            <div class="card-body"><canvas id="natChart" height="200"></canvas></div></div>
    </div>
    <div class="col-lg-6 mb-4">
        <div class="card"><div class="card-header pb-0"><h6>Active by Site (top 8)</h6></div>
            <div class="card-body"><canvas id="siteChart" height="200"></canvas></div></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const coral = '#f5533d';
const grad = ['#ff8a00','#f5330a','#ec1c8f','#2f6bff','#f5533d','#ffb703','#8338ec','#06d6a0'];
new Chart(document.getElementById('natChart'), {
    type: 'doughnut',
    data: { labels: @json($byNationality->keys()), datasets: [{ data: @json($byNationality->values()), backgroundColor: grad }] },
    options: { plugins: { legend: { position: 'right' } } }
});
new Chart(document.getElementById('siteChart'), {
    type: 'bar',
    data: { labels: @json($bySite->keys()), datasets: [{ label: 'Staff', data: @json($bySite->values()), backgroundColor: coral }] },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});

@if(isset($payTrend))
new Chart(document.getElementById('payTrend'), {
    type: 'line',
    data: {
        labels: @json(array_keys($payTrend)),
        datasets: [{
            label: 'Net payout (RM)', data: @json(array_values($payTrend)),
            borderColor: coral, backgroundColor: 'rgba(245,83,61,.12)', fill: true, tension: .35
        }]
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
});
@endif
</script>
@endpush