<div>
    <x-title :breadcrumbs="[['link' => route('reports.management'), 'title' => 'Management Report']]">
        Management Report
    </x-title>

    @php
        $tiles = [
            ['key' => 'active',         'label' => 'Total Active Clients',        'colour' => 'text-primary'],
            ['key' => 'signed_up',      'label' => 'Signed Up This Week (YL4U)',  'colour' => 'text-info'],
            ['key' => 'dsar',           'label' => 'At DSAR Stage',               'colour' => 'text-secondary'],
            ['key' => 'awaiting_tob',   'label' => 'Awaiting Terms of Business',  'colour' => 'text-secondary'],
            ['key' => 'submitted',      'label' => 'Fully Submitted to Redress',  'colour' => 'text-success'],
            ['key' => 'awaiting_panel', 'label' => 'Awaiting Panel Decision',     'colour' => 'text-warning'],
            ['key' => 'awards',         'label' => 'Receiving an Award',          'colour' => 'text-success'],
            ['key' => 'closed',         'label' => 'Completed & Closed',          'colour' => 'text-dark'],
            ['key' => 'unable',         'label' => 'Unable to Progress',          'colour' => 'text-danger'],
            ['key' => 'replacements',   'label' => 'Case Replacements',           'colour' => 'text-secondary'],
        ];
    @endphp

    <!-- Stats Grid -->
    <div class="row g-3 mb-4">
        @foreach($tiles as $tile)
            <div class="col-6 col-md-4 col-xl-3">
                <div class="card shadow-sm border-0 text-center p-3 h-100">
                    <span class="h2 fw-bold {{ $tile['colour'] }} mb-1">{{ $stats[$tile['key']] }}</span>
                    <p class="text-muted text-uppercase small fw-bold mb-0">{{ $tile['label'] }}</p>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Case Handler Submission Rate -->
    <div class="card shadow-sm border-0 rounded-lg overflow-hidden mb-4">
        <div class="card-header bg-white py-3 border-bottom-0">
            <h2 class="h6 fw-bold mb-0 text-secondary">Case Handler Submission Rate</h2>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="bg-light text-secondary text-uppercase" style="font-size: 0.75rem; letter-spacing: 0.05em;">
                    <tr>
                        <th class="px-4 border-top-0">Handler</th>
                        <th class="px-4 border-top-0 text-center">Submitted</th>
                        <th class="px-4 border-top-0 text-center">Active Caseload</th>
                        <th class="px-4 border-top-0 text-center">Submission Rate</th>
                    </tr>
                </thead>
                <tbody class="bg-white">
                    @forelse($handlers as $handler)
                        <tr>
                            <td class="px-4 align-middle fw-bold text-dark">{{ $handler['handler'] }}</td>
                            <td class="px-4 align-middle text-center">{{ $handler['submitted'] }}</td>
                            <td class="px-4 align-middle text-center text-muted">{{ $handler['total'] }}</td>
                            <td class="px-4 align-middle text-center">
                                <span class="badge px-3 py-2 {{ $handler['rate'] >= 50 ? 'bg-success' : ($handler['rate'] >= 25 ? 'bg-warning text-dark' : 'bg-secondary') }}">
                                    {{ $handler['rate'] }}%
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-3 text-center text-muted">No handler assignments found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <p class="text-muted small">
        <i class="mdi mdi-information-outline me-1"></i>
        Cases Owed, Total Award Amounts and Aiker Fees are not yet included — they depend on
        a weekly counter and award/fee value fields that have not been built yet.
    </p>
</div>
