<x-layouts.app :title="__('losers.title')"><x-customer-shell>
<header class="tp-page-header"><div><p>{{__('customer.reports')}}</p><h1>{{__('losers.title')}}</h1><span>{{__('losers.description')}}</span></div></header>
<section class="tp-panel mb-3"><form method="get" class="tp-losers-filters">
<input class="form-control" name="q" value="{{request('q')}}" placeholder="{{__('losers.search')}}">
<select class="form-select" name="project"><option value="">{{__('losers.all_projects')}}</option>@foreach($projects as $p)<option value="{{$p->ulid}}" @selected(request('project')===$p->ulid)>{{$p->name}}</option>@endforeach</select>
<select class="form-select" name="range">@foreach(['7d'=>'last7','30d'=>'last30','90d'=>'last90','this_month'=>'this_month','last_month'=>'last_month','custom'=>'custom'] as $v=>$label)<option value="{{$v}}" @selected(request('range','30d')===$v)>{{__('visibility.'.$label)}}</option>@endforeach</select>
<select class="form-select" name="country"><option value="">{{__('visibility.country')}}</option>@foreach($countries as $v=>$label)<option value="{{$v}}" @selected(request('country')===$v)>{{$label}}</option>@endforeach</select>
<select class="form-select" name="language"><option value="">{{__('visibility.language')}}</option>@foreach($languages as $v=>$label)<option value="{{$v}}" @selected(request('language')===$v)>{{$label}}</option>@endforeach</select>
<select class="form-select" name="device"><option value="">{{__('visibility.device')}}</option>@foreach(\App\Enums\KeywordDevice::cases() as $v)<option value="{{$v->value}}" @selected(request('device')===$v->value)>{{$v->label()}}</option>@endforeach</select>
<select class="form-select" name="engine"><option value="">{{__('visibility.engine')}}</option>@foreach(\App\Enums\SearchEngine::cases() as $v)<option value="{{$v->value}}" @selected(request('engine')===$v->value)>{{$v->label()}}</option>@endforeach</select>
<input class="form-control" type="number" min="1" max="100" name="min_lost" value="{{request('min_lost')}}" placeholder="{{__('losers.min_lost')}}"><input class="form-control" type="date" name="from" value="{{request('from')}}"><input class="form-control" type="date" name="to" value="{{request('to')}}"><button class="btn btn-primary">{{__('losers.filter')}}</button></form></section>
<div class="tp-metric-grid tp-losers-metrics mb-3"><x-metric-card :label="__('losers.ranking_losers')" :value="$summary['losers']" icon="↘"/><x-metric-card :label="__('losers.total_lost')" :value="$summary['lost']" icon="−"/><x-metric-card :label="__('losers.top3')" :value="$summary['top3']" icon="3"/><x-metric-card :label="__('losers.top10')" :value="$summary['top10']" icon="10"/><x-metric-card :label="__('losers.top100')" :value="$summary['top100']" icon="100"/><x-metric-card :label="__('losers.visibility_loss')" :value="$summary['visibility_loss']===null?null:number_format($summary['visibility_loss'],2).'%'" :description="$summary['visibility_loss']===null?__('losers.no_comparison'):null" icon="%"/></div>
@if($critical->isNotEmpty())<section class="tp-panel tp-critical-losses mb-3"><h2 class="h5">{{__('losers.critical')}}</h2>@foreach($critical as $row)<a class="badge text-bg-danger text-decoration-none me-2" href="{{route('rankings.keywords.show',$row['keyword']->ulid)}}">{{$row['keyword']->phrase}} · {{__('losers.categories.'.$row['category'])}}</a>@endforeach</section>@endif
<section class="tp-panel mb-3"><div class="table-responsive"><table class="table tp-data-table"><thead><tr><th>{{__('losers.keyword')}}</th><th>{{__('losers.project')}}</th><th>{{__('losers.previous')}}</th><th>{{__('losers.current')}}</th><th>{{__('losers.lost')}}</th><th>{{__('losers.visibility_loss')}}</th><th>{{__('losers.category')}}</th><th>{{__('losers.target')}}</th><th>{{__('losers.device')}}</th><th>{{__('losers.last_check')}}</th><th></th></tr></thead><tbody>
@forelse($rows as $row)<tr><td>{{$row['keyword']->phrase}}</td><td><a href="{{route('projects.show',$row['project']->ulid)}}">{{$row['project']->name}}</a></td><td>{{$row['previous']}}</td><td>{{$row['dropped_out']?__('losers.dropped_out_label'):$row['current']}}</td><td class="tp-loser">{{$row['lost']===null?'—':'−'.$row['lost']}}</td><td>{{number_format($row['visibility_loss'],2)}}%</td><td><span class="badge text-bg-danger">{{__('losers.categories.'.$row['category'])}}</span></td><td>{{$row['keyword']->country_code}} / {{$row['keyword']->language_code}}</td><td>{{$row['keyword']->device->label()}}</td><td>{{$row['checked_at']->format('d.m.Y H:i')}}</td><td><a href="{{route('rankings.keywords.show',$row['keyword']->ulid)}}">{{__('losers.view')}}</a></td></tr>@empty<tr><td colspan="11" class="text-center py-4 text-body-secondary">{{__('losers.empty')}}</td></tr>@endforelse</tbody></table></div>{{$rows->links()}}</section>
<section class="tp-panel"><h2 class="h5">{{__('losers.distribution')}}</h2><div class="tp-distribution">@foreach($distribution as $key=>$count)<div><span>{{__('losers.ranges.'.$key)}}</span><i class="tp-loss-bar" style="--count:{{$count}}"></i><strong>{{$count}}</strong></div>@endforeach</div></section>
</x-customer-shell></x-layouts.app>
