<x-layouts.app :title="__('rankings.title').' — TrafficPumper'"><x-customer-shell>
<header class="tp-page-header"><div><p>{{__('customer.rank_tracking')}}</p><h1>{{__('rankings.title')}}</h1><span>{{__('rankings.description')}}</span></div></header>
@if($errors->any())<div class="alert alert-danger">{{$errors->first()}}</div>@endif
<section class="tp-panel"><form method="GET" class="tp-ranking-filters"><select name="project" class="form-select"><option value="">{{__('rankings.all_projects')}}</option>@foreach($projects as $project)<option value="{{$project->ulid}}" @selected(request('project')===$project->ulid)>{{$project->name}}</option>@endforeach</select><select name="keywords[]" class="form-select"><option value="">{{__('rankings.all_keywords')}}</option>@foreach($keywords as $keyword)<option value="{{$keyword->ulid}}" @selected(in_array($keyword->ulid,request('keywords',[])))>{{$keyword->phrase}}</option>@endforeach</select><select name="range" class="form-select">@foreach(['7d'=>'last7','30d'=>'last30','90d'=>'last90','this_month'=>'this_month','last_month'=>'last_month','custom'=>'custom'] as $value=>$label)<option value="{{$value}}" @selected(request('range','30d')===$value)>{{__('rankings.'.$label)}}</option>@endforeach</select><input type="date" name="from" value="{{request('from')}}" class="form-control" aria-label="{{__('rankings.from')}}"><input type="date" name="to" value="{{request('to')}}" class="form-control" aria-label="{{__('rankings.to')}}"><select name="movement" class="form-select"><option value="">{{__('rankings.movement')}}</option>@foreach(['winner','loser','unchanged','new','unranked'] as $v)<option value="{{$v}}" @selected(request('movement')===$v)>{{__('rankings.'.$v)}}</option>@endforeach</select><button class="btn btn-primary">{{__('rankings.filters')}}</button><a class="btn btn-outline-secondary" href="{{route('rankings.index')}}">{{__('rankings.clear')}}</a></form></section>
<section class="tp-metric-grid tp-ranking-metrics"><x-metric-card :label="__('rankings.tracked')" :value="$summary['tracked']" icon="⌕"/><x-metric-card :label="__('rankings.average')" :value="$summary['average']" icon="◎"/><x-metric-card :label="__('rankings.top3')" :value="$summary['top3']" icon="★"/><x-metric-card :label="__('rankings.top10')" :value="$summary['top10']" icon="↗"/><x-metric-card :label="__('rankings.winners')" :value="$summary['winners']" icon="↑"/><x-metric-card :label="__('rankings.losers')" :value="$summary['losers']" icon="↓"/></section>
<div class="tp-ranking-grid"><section class="tp-panel"><div class="tp-panel-heading"><h2>{{__('rankings.performance')}}</h2></div>@if($chart->isEmpty())<x-empty-state :title="__('rankings.no_checks')" :description="__('rankings.no_filter_data')"/>@else<div class="tp-ranking-chart" data-ranking-chart='@json($chart)' role="img" aria-label="{{__('rankings.performance')}}"></div><p class="small text-body-secondary mb-0">{{__('rankings.outside_help')}}</p>@endif</section><section class="tp-panel"><div class="tp-panel-heading"><h2>{{__('rankings.distribution')}}</h2></div><div class="tp-distribution">@foreach($distribution as $key=>$count)<div><span>{{__('rankings.range.'.$key)}}</span><i style="--count:{{$count}}"></i><strong>{{$count}}</strong></div>@endforeach</div></section></div>
<section class="tp-panel"><div class="table-responsive"><table class="table tp-data-table"><thead><tr><th>{{__('rankings.date')}}</th><th>{{__('rankings.keyword')}}</th><th>{{__('rankings.project')}}</th><th>{{__('rankings.rank')}}</th><th>{{__('rankings.previous')}}</th><th>{{__('rankings.change')}}</th><th>{{__('rankings.engine')}}</th><th>{{__('rankings.country')}}</th><th>{{__('rankings.language')}}</th><th>{{__('rankings.device')}}</th><th>{{__('rankings.status')}}</th><th>{{__('rankings.action')}}</th></tr></thead><tbody>@forelse($rows as $row)<tr><td>{{$row['check']->checked_at->translatedFormat('d M Y H:i')}}</td><td><a href="{{route('rankings.keywords.show',$row['keyword'])}}">{{$row['keyword']->phrase}}</a></td><td>{{$row['project']->name}}</td><td>{{$row['rank']?'#'.$row['rank']:'100+'}}</td><td>{{$row['previous']?'#'.$row['previous']:'—'}}</td><td><span class="tp-movement tp-{{$row['movement']}}">{{__('rankings.'.$row['movement'])}} @if($row['change']!==null){{$row['change']>0?'+':''}}{{$row['change']}}@endif</span></td><td>{{$row['check']->search_engine->label()}}</td><td>{{$row['check']->country_code}}</td><td>{{$row['check']->language_code}}</td><td>{{$row['check']->device->label()}}</td><td>{{$row['check']->status->label()}}</td><td><a href="{{route('rankings.checks.show',$row['check'])}}">{{__('rankings.view')}}</a></td></tr>@empty<tr><td colspan="12"><x-empty-state :title="__('rankings.no_filter_data')" :description="__('rankings.no_checks')"/></td></tr>@endforelse</tbody></table></div>{{$rows->links()}}</section>
</x-customer-shell></x-layouts.app>
