<x-layouts.app :title="__('customer.dashboard').' — TrafficPumper'"><div class="tp-customer-shell"><x-customer-sidebar/><main class="tp-customer-main">
<span class="visually-hidden">{{ __('ui.welcome',['name'=>auth()->user()->name]) }}</span>
<header class="tp-page-header"><div><p>{{ __('customer.rank_tracking') }}</p><h1>{{ __('customer.dashboard') }}</h1><span>{{ __('customer.dashboard_intro') }}</span></div><form class="tp-dashboard-filters" method="GET"><label>{{ __('customer.project') }}<select class="form-select" name="project" onchange="this.form.submit()"><option value="">{{ __('customer.all_projects') }}</option>@foreach($projects as $project)<option value="{{ $project->ulid }}" @selected($selectedProject?->id===$project->id)>{{ $project->name }}</option>@endforeach</select></label><label>{{ __('customer.period') }}<select class="form-select" name="days" onchange="this.form.submit()">@foreach([7,30,90] as $d)<option value="{{$d}}" @selected($days===$d)>{{ __('customer.last_days',['count'=>$d]) }}</option>@endforeach</select></label></form></header>
<section class="tp-metric-grid"><x-metric-card :label="__('customer.active_projects')" :value="$metrics['projects']" icon="▣"/><x-metric-card :label="__('customer.tracked_keywords')" :value="$metrics['keywords']" icon="⌕"/><x-metric-card :label="__('customer.top10')" :value="$metrics['top10']" icon="↗"/><x-metric-card :label="__('customer.average_rank')" :value="$metrics['average']" icon="◎"/><x-metric-card :label="__('customer.rising')" :value="$metrics['winners']" icon="↑"/><x-metric-card :label="__('customer.falling')" :value="$metrics['losers']" icon="↓"/></section>
<section class="tp-panel tp-chart-panel"><div class="tp-panel-heading"><div><p>{{ __('customer.performance') }}</p><h2>{{ __('customer.ranking_performance') }}</h2></div></div>@if($rows->whereNotNull('current')->isEmpty())<x-empty-state :title="__('customer.no_rank_data')" :description="__('customer.after_first_check')"/>@else<div class="tp-rank-bars">@foreach($rows->whereNotNull('current')->take(10) as $row)<div title="{{ $row['keyword']->phrase }}: {{ $row['current'] }}"><span>{{ Str::limit($row['keyword']->phrase,20) }}</span><i style="--rank:{{ min($row['current'],100) }}"></i><strong>#{{ $row['current'] }}</strong></div>@endforeach</div>@endif</section>
<section class="tp-panel"><div class="tp-panel-heading"><div><p>{{ __('customer.latest_data') }}</p><h2>{{ __('customer.keyword_summary') }}</h2></div></div><div class="table-responsive"><table class="table tp-data-table"><thead><tr><th>{{ __('customer.keyword') }}</th><th>{{ __('customer.project') }}</th><th>{{ __('customer.current_rank') }}</th><th>{{ __('customer.previous_rank') }}</th><th>{{ __('customer.change') }}</th><th>{{ __('customer.target') }}</th><th>{{ __('customer.last_check') }}</th></tr></thead><tbody>@forelse($rows as $row)<tr><td><strong>{{ $row['keyword']->phrase }}</strong></td><td>{{ $row['project']->name }}</td><td>{{ $row['current']?'#'.$row['current']:'—' }}</td><td>{{ $row['previous']?'#'.$row['previous']:'—' }}</td><td><x-rank-change :change="$row['change']"/></td><td>{{ $row['keyword']->search_engine->label() }} · {{ $row['keyword']->device->label() }}</td><td>{{ $row['checked_at']?->diffForHumans()??'—' }}</td></tr>@empty<tr><td colspan="7"><x-empty-state :title="__('customer.no_keywords')" :description="__('customer.add_keyword_hint')"/></td></tr>@endforelse</tbody></table></div></section>
<div class="tp-two-columns"><section class="tp-panel"><div class="tp-panel-heading"><h2>{{ __('customer.top_winners') }}</h2></div>@forelse($winners as $row)<div class="tp-mover"><span><strong>{{ $row['keyword']->phrase }}</strong><small>{{ $row['project']->name }}</small></span><x-rank-change :change="$row['change']"/></div>@empty<x-empty-state :title="__('customer.no_movement')" :description="__('customer.after_two_checks')"/>@endforelse</section><section class="tp-panel"><div class="tp-panel-heading"><h2>{{ __('customer.top_losers') }}</h2></div>@forelse($losers as $row)<div class="tp-mover"><span><strong>{{ $row['keyword']->phrase }}</strong><small>{{ $row['project']->name }}</small></span><x-rank-change :change="$row['change']"/></div>@empty<x-empty-state :title="__('customer.no_movement')" :description="__('customer.after_two_checks')"/>@endforelse</section></div>
</main></div></x-layouts.app>
