<x-layouts.dashboard title="Plus Tracker">
    <form class="toolbar tracker-filter" method="get">
        <div><p class="eyebrow">Progress Control</p><h2>Live work pulse</h2></div>
        <div class="segmented">
            @foreach (['all' => 'All', 'today' => 'Today', 'month' => 'This Month', 'overdue' => 'Overdue'] as $value => $label)
                <label><input type="radio" name="filter" value="{{ $value }}" @checked($filter === $value) onchange="this.form.submit()"><span>{{ $label }}</span></label>
            @endforeach
        </div>
    </form>
    <div class="stats tracker-stats">
        @foreach ($metrics as $label => $value)
            <article class="stat tracker-card {{ str_contains($label, 'Completed') ? 'complete-card' : (str_contains($label, 'Overdue') ? 'danger-card' : (str_contains($label, 'Pending') ? 'warning-card' : '')) }}">
                <span>{{ $label }}</span><strong>{{ number_format($value) }}</strong><small>{{ $value ? 'Tracked now' : 'Clear' }}</small>
            </article>
        @endforeach
    </div>
    <div class="grid two chart-grid">
        <section class="card chart-card">
            <h3>Task Progress</h3>
            <div class="ring-chart" style="--value:{{ $completion }}"><b>{{ $completion }}%</b></div>
            <div class="progress"><i style="width:{{ $completion }}%"></i></div>
        </section>
        <section class="card chart-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 * 14, 100) }}%"></i></div>
                    <b>{{ $designer->assigned_tasks_count }}</b>
                </div>
            @empty
                <div class="empty-state">Assigned designer work appears here.</div>
            @endforelse
        </section>
    </div>
    <div class="grid two chart-grid">
        <section class="table-card">
            <h3>Client Growth and Work</h3>
            @forelse ($clients as $client)
                @php
                    $finished = $client->clientTasks->whereIn('status', ['approved', 'completed', 'delivered'])->count();
                    $percent = $client->clientTasks->count() ? (int) round(($finished / $client->clientTasks->count()) * 100) : 0;
                @endphp
                <div class="client-progress">
                    <strong>{{ $client->name }}</strong>
                    <small>{{ $client->assignedDesigner->name ?? 'Designer not assigned' }}</small>
                    <div class="progress"><i style="width:{{ $percent }}%"></i></div>
                    <b>{{ $percent }}%</b>
                </div>
            @empty
                <div class="empty-state">Client progress appears after work is added.</div>
            @endforelse
        </section>
        <section class="table-card">
            <h3>Plan Usage</h3>
            <table>
                <thead><tr><th>Client</th><th>Plan</th><th>Usage</th></tr></thead>
                <tbody>
                    @forelse ($planUsage as $usage)
                        @php($limit = max($usage->plan->work_limit ?? 0, 1))
                        <tr>
                            <td>{{ $usage->user->name ?? 'Client' }}</td>
                            <td>{{ $usage->plan->name ?? '-' }}</td>
                            <td><div class="progress"><i style="width:{{ min((int) round(($usage->usage_count / $limit) * 100), 100) }}%"></i></div>{{ $usage->usage_count }} / {{ $usage->plan->work_limit ?? 0 }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3">Plan usage appears after subscriptions.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </section>
    </div>
</x-layouts.dashboard>
