@extends('layouts.admin')

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

@section('content')
    <header class="page-header">
        <div>
            <p class="eyebrow">Finance</p>
            <h1>Payroll & Reports</h1>
            <p class="muted">Manage payroll and generate reports</p>
        </div>
    </header>

    <section class="card-grid four-col">
        @foreach ($cards as $card)
            <article class="stat-card compact">
                <p class="muted">{{ $card['label'] }}</p>
                <h3>{{ $card['value'] }}</h3>
                <p class="stat-meta">{{ $card['meta'] }}</p>
            </article>
        @endforeach
    </section>

    <section class="panel">
        <div class="panel__header">
            <h2>Export Payroll Reports</h2>
        </div>
        <div class="panel__body export-grid">
            <label class="field">
                <span>Select Period</span>
                <select class="select">
                    <option>November 2025</option>
                    <option>October 2025</option>
                    <option>September 2025</option>
                </select>
            </label>
            <label class="field">
                <span>Export Format</span>
                <select class="select">
                    <option>BrightPay (Excel)</option>
                    <option>CSV</option>
                    <option>PDF</option>
                </select>
            </label>
            <div class="export-actions">
                <button class="primary-btn">Export Report</button>
                <button class="ghost-btn">Regenerate Payroll</button>
            </div>
        </div>
    </section>

    <section class="panel">
        <div class="panel__header">
            <h2>Monthly Payroll Summary</h2>
        </div>
        <div class="panel__body">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Period</th>
                        <th>Total Employees</th>
                        <th>Total Hours</th>
                        <th>Total Payroll</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($summary as $row)
                        <tr>
                            <td>{{ $row['period'] }}</td>
                            <td>{{ number_format($row['employees']) }}</td>
                            <td>{{ number_format($row['hours']) }}</td>
                            <td>{{ $row['total'] }}</td>
                            <td><span class="pill success">{{ $row['status'] }}</span></td>
                            <td><button class="ghost-btn small">View Details</button></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>

    <section class="panel">
        <div class="panel__header">
            <h2>Employee Payroll Details - November 2025</h2>
            <button class="ghost-btn">Export</button>
        </div>
        <div class="panel__body">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Employee</th>
                        <th>Department</th>
                        <th>Hours</th>
                        <th>Rate</th>
                        <th>Gross Pay</th>
                        <th>Deductions</th>
                        <th>Net Pay</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($details as $row)
                        <tr>
                            <td>
                                <div class="table-person">
                                    <div>
                                        <p>{{ $row['name'] }}</p>
                                        <span class="muted">{{ $row['id'] }}</span>
                                    </div>
                                </div>
                            </td>
                            <td>{{ $row['department'] }}</td>
                            <td>{{ $row['hours'] }}</td>
                            <td>{{ $row['rate'] }}</td>
                            <td>{{ $row['gross'] }}</td>
                            <td>{{ $row['deductions'] }}</td>
                            <td>{{ $row['net'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
@endsection