@extends('layouts.app')

@section('title', 'Reports & Analytics')

@section('content')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-2">
    <div>
        <h4 class="fw-bold mb-1">HR Reports & Business Analytics</h4>
        <p class="text-secondary small mb-0">Export workforce records, attendance statistics, and leave utilization in CSV format</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('reports.export.employees') }}" class="btn btn-primary btn-sm shadow-sm">
            <i class="bi bi-file-earmark-spreadsheet-fill me-1"></i> Export Employees CSV
        </a>
        <a href="{{ route('reports.export.attendance') }}" class="btn btn-outline-secondary btn-sm bg-white">
            <i class="bi bi-download me-1"></i> Export Attendance CSV
        </a>
    </div>
</div>

<!-- Month-to-date Stats -->
<div class="row g-3 mb-4">
    <div class="col-12 col-sm-6 col-md-3">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Active Staff Headcount</span>
            <h3 class="fw-bold text-primary mb-0 mt-1">{{ $totalEmployees }}</h3>
            <span class="small text-muted">Across {{ $departments->count() }} departments</span>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Monthly Turnout Log</span>
            <h3 class="fw-bold text-success mb-0 mt-1">{{ $monthPresent }}</h3>
            <span class="small text-muted">Successful check-ins</span>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Late Flags This Month</span>
            <h3 class="fw-bold text-warning mb-0 mt-1">{{ $monthLate }}</h3>
            <span class="small text-muted">Grace period exceeded</span>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="stat-card">
            <span class="text-secondary small fw-medium">Approved Leaves (Days)</span>
            <h3 class="fw-bold text-info mb-0 mt-1">{{ $approvedLeavesThisMonth }}</h3>
            <span class="small text-muted">Current billing month</span>
        </div>
    </div>
</div>

<!-- Department Headcount & Turnout Breakdown -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white">
        <h6 class="mb-0 fw-bold">Department Workforce Summary</h6>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 small">
            <thead class="table-light text-secondary">
                <tr>
                    <th>Department</th>
                    <th>Code</th>
                    <th>Total Staff</th>
                    <th>Share of Total</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($departments as $dept)
                    @php
                        $pct = $totalEmployees > 0 ? round(($dept->employees_count / $totalEmployees) * 100, 1) : 0;
                    @endphp
                    <tr>
                        <td class="fw-bold text-dark">{{ $dept->name }}</td>
                        <td><span class="badge bg-light text-secondary border">{{ $dept->code }}</span></td>
                        <td class="fw-semibold">{{ $dept->employees_count }} Members</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="progress flex-grow-1" style="height: 6px;">
                                    <div class="progress-bar bg-primary" style="width: {{ $pct }}%"></div>
                                </div>
                                <span class="text-muted text-xs">{{ $pct }}%</span>
                            </div>
                        </td>
                        <td><span class="badge badge-soft-success">Operational</span></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection