<x-layouts.dashboard title="Reports & Analytics">
    <form class="toolbar report-filter">
        <strong>Analytics Filters</strong>
        <div class="segmented">
            @foreach (['today' => 'Today', 'week' => 'This Week', 'month' => 'This Month', 'last' => 'Last Month', 'custom' => 'Custom'] as $key => $label)
                <label><input type="radio" name="range" value="{{ $key }}" @checked($key === 'month')><span>{{ $label }}</span></label>
            @endforeach
        </div>
        <input type="date" aria-label="Custom start">
        <input type="date" aria-label="Custom end">
    </form>
    <div class="stats"><div class="stat"><span>Approved Revenue</span><strong>{{ number_format($revenue) }}</strong></div></div>
    <div class="grid two">
        <div class="card">
            <h3>Completed vs Pending Work</h3>
            @forelse ($tasks as $status => $total)
                <div class="bar-row"><span>{{ str($status)->headline() }}</span><div class="progress"><i style="width:{{ min($total * 18, 100) }}%"></i></div><b>{{ $total }}</b></div>
            @empty
                <div class="empty-state">Task analytics appear after work is created.</div>
            @endforelse
        </div>
        <div class="card">
            <h3>Payment Status & Client Growth</h3>
            @forelse ($requests as $status => $total)
                <div class="bar-row"><span>{{ str($status)->headline() }} requests</span><div class="progress"><i style="width:{{ min($total * 18, 100) }}%"></i></div><b>{{ $total }}</b></div>
            @empty
                <div class="empty-state">Request analytics appear after clients submit work.</div>
            @endforelse
        </div>
        <div class="card"><h3>Plan Usage</h3><p class="muted">Monthly work limits and package usage keep sidebar pulse counts and delivery planning clear.</p><div class="ring-chart" style="--value:68"><b>68%</b></div></div>
        <div class="card">
            <h3>Designer Performance</h3>
            @forelse ($designers as $designer)
                <div class="bar-row"><span>{{ $designer->name }}</span><div class="progress"><i style="width:{{ min($designer->assigned_tasks_count * 18, 100) }}%"></i></div><b>{{ $designer->assigned_tasks_count }}</b></div>
            @empty
                <div class="empty-state">Designer performance appears after tasks are assigned.</div>
            @endforelse
        </div>
    </div>
</x-layouts.dashboard>
