<x-layouts.app :title="__('visibility.title').' — TrafficPumper'"><x-customer-shell>
<header class="tp-page-header"><div><p>{{__('customer.reports')}}</p><h1>{{__('visibility.title')}}</h1><span>{{__('visibility.description')}}</span></div></header>
<section class="tp-panel"><form method="GET" class="tp-visibility-filters">
<select name="project" class="form-select"><option value="">{{__('visibility.all_projects')}}</option>@foreach($projects as $project)<option value="{{$project->ulid}}" @selected(request('project')===$project->ulid)>{{$project->name}}</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 $v=>$l)<option value="{{$v}}" @selected(request('range','30d')===$v)>{{__('visibility.'.$l)}}</option>@endforeach</select>
<select name="compare" class="form-select"><option value="previous">{{__('visibility.compare_previous')}}</option><option value="none" @selected(request('compare')==='none')>{{__('visibility.no_compare')}}</option></select>
<select name="country" class="form-select"><option value="">{{__('visibility.country')}}</option>@foreach($countries as $v=>$l)<option value="{{$v}}">{{$l}}</option>@endforeach</select>
<select name="device" class="form-select"><option value="">{{__('visibility.device')}}</option>@foreach(\App\Enums\KeywordDevice::cases() as $v)<option value="{{$v->value}}">{{$v->label()}}</option>@endforeach</select>
<input type="date" name="from" value="{{request('from')}}" class="form-control"><input type="date" name="to" value="{{request('to')}}" class="form-control"><button class="btn btn-primary">{{__('visibility.filter')}}</button><a class="btn btn-outline-secondary" href="{{route('reports.visibility')}}">{{__('visibility.clear')}}</a></form></section>
<div class="alert alert-info"><strong>{{__('visibility.formula')}}</strong><br>{{__('visibility.coverage',['measured'=>$coverage[0],'total'=>$coverage[1]])}}@if($coverage[0]<$coverage[1])<br>{{__('visibility.coverage_warning')}}@endif</div>
<section class="tp-metric-grid tp-visibility-metrics"><x-metric-card :label="__('visibility.score')" :value="$metrics['current']!==null?number_format($metrics['current'],2).'%':null" icon="◎"/><x-metric-card :label="__('visibility.previous')" :value="$metrics['previous']!==null?number_format($metrics['previous'],2).'%':__('visibility.no_comparison')" icon="◷"/><x-metric-card :label="__('visibility.change')" :value="$metrics['change']!==null?number_format($metrics['change'],2).'%':null" icon="↕"/><x-metric-card :label="__('visibility.measured')" :value="$metrics['measured']" icon="●"/><x-metric-card :label="__('visibility.top10')" :value="$metrics['top10']" icon="↗"/><x-metric-card :label="__('visibility.unranked')" :value="$metrics['unranked']" icon="—"/></section>
<div class="tp-ranking-grid"><section class="tp-panel"><div class="tp-panel-heading"><h2>{{__('visibility.trend')}}</h2></div>@if($trend->isEmpty())<x-empty-state :title="__('visibility.no_data')" :description="__('visibility.formula')"/>@else<div class="tp-visibility-chart" data-visibility-chart='@json(['current'=>$trend,'previous'=>$previousTrend])'></div>@endif</section><section class="tp-panel"><div class="tp-panel-heading"><h2>{{__('visibility.distribution')}}</h2></div><div class="tp-distribution">@foreach($distribution as $key=>$count)<div><span>{{__('visibility.range_labels.'.$key)}}</span><i style="--count:{{$count}}"></i><strong>{{$count}}</strong></div>@endforeach</div></section></div>
<div class="tp-two-columns">@foreach(['winners'=>$winners,'losers'=>$losers] as $title=>$items)<section class="tp-panel"><div class="tp-panel-heading"><h2>{{__('visibility.'.$title)}}</h2></div><div class="table-responsive"><table class="table tp-data-table"><thead><tr><th>{{__('visibility.keyword')}}</th><th>{{__('visibility.previous_rank')}}</th><th>{{__('visibility.current_rank')}}</th><th>{{__('visibility.point_change')}}</th></tr></thead><tbody>@forelse($items as $item)<tr><td><a href="{{route('rankings.keywords.show',$item['keyword'])}}">{{$item['keyword']->phrase}}</a><small class="d-block text-body-secondary">{{$item['project']->name}}</small></td><td>{{$item['previous']?'#'.$item['previous']:'100+'}}</td><td>{{$item['current']?'#'.$item['current']:'100+'}}</td><td class="{{$item['delta']>0?'tp-rank-up':'tp-rank-down'}}">{{$item['delta']>0?'+':''}}{{$item['delta']}}</td></tr>@empty<tr><td colspan="4">{{__('visibility.no_comparison')}}</td></tr>@endforelse</tbody></table></div></section>@endforeach</div>
</x-customer-shell></x-layouts.app>
