@extends('layouts.app') @section('title','Klijenti') @section('content')
<div class="top"><div><div class="eyebrow">Partneri, oglašivači i naručitelji</div><h1>Klijenti</h1></div><a class="btn" href="{{ route('clients.create') }}">+ Novi klijent</a></div>
<form class="toolbar" method="get" style="margin-bottom:15px"><input name="q" value="{{ request('q') }}" placeholder="Pretraži po nazivu…" style="max-width:360px"><button class="btn secondary">Traži</button></form>
<table><thead><tr><th>Naziv</th><th>Kategorija</th><th>OIB</th><th>Kontakt</th><th>Mjesto</th><th></th></tr></thead><tbody>@forelse($clients as $client)<tr><td><a class="client-edit-link" href="{{ route('clients.edit',$client) }}" title="Uredi klijenta"><strong>{{ $client->name }}</strong></a></td><td>{{ $client->category ?: '—' }}</td><td>{{ $client->oib ?: '—' }}</td><td>{{ $client->email ?: $client->phone ?: '—' }}</td><td>{{ trim(($client->postal_code ? $client->postal_code.' ' : '').($client->city ?: '')) ?: '—' }}@if(($client->country_code ?: 'HR') !== 'HR')<br><small>{{ config('european_countries.'.$client->country_code, $client->country_code) }}</small>@endif</td><td><div class="client-actions"><a title="Uredi" aria-label="Uredi klijenta" href="{{ route('clients.edit',$client) }}">✎</a></div></td></tr>@empty<tr><td colspan="6">Nema pronađenih klijenata.</td></tr>@endforelse</tbody></table>
@if($clients->hasPages())
<div class="client-pagination">
    <div class="client-pagination__summary">Prikazano {{ $clients->firstItem() }}–{{ $clients->lastItem() }} od ukupno {{ $clients->total() }} klijenata</div>
    <nav class="client-pagination__pages" aria-label="Stranice klijenata">
        @if($clients->onFirstPage())<span class="page-button disabled">‹ Prethodna</span>@else<a class="page-button" href="{{ $clients->previousPageUrl() }}" rel="prev">‹ Prethodna</a>@endif
        @if($clients->currentPage()>3)<a class="page-number" href="{{ $clients->url(1) }}">1</a><span class="page-dots">…</span>@endif
        @foreach($clients->getUrlRange(max(1,$clients->currentPage()-2),min($clients->lastPage(),$clients->currentPage()+2)) as $page=>$url)
            @if($page===$clients->currentPage())<span class="page-number current">{{ $page }}</span>@else<a class="page-number" href="{{ $url }}">{{ $page }}</a>@endif
        @endforeach
        @if($clients->currentPage()<$clients->lastPage()-2)<span class="page-dots">…</span><a class="page-number" href="{{ $clients->url($clients->lastPage()) }}">{{ $clients->lastPage() }}</a>@endif
        @if($clients->hasMorePages())<a class="page-button" href="{{ $clients->nextPageUrl() }}" rel="next">Sljedeća ›</a>@else<span class="page-button disabled">Sljedeća ›</span>@endif
    </nav>
</div>
@else
<div class="client-pagination client-pagination--single"><div class="client-pagination__summary">Ukupno {{ $clients->total() }} klijenata</div></div>
@endif
<style>
.client-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}.client-pagination__summary{font-size:13px;color:var(--muted)}.client-pagination__pages{display:flex;align-items:center;gap:5px}.page-button,.page-number{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:700}.page-button{padding:0 12px}.page-number{min-width:36px;padding:0 8px}.page-dots{padding:0 3px;color:var(--muted)}.page-button:hover,.page-number:hover{border-color:var(--brand);color:var(--brand)}.page-number.current{background:var(--brand);border-color:var(--brand);color:#fff}.page-button.disabled{opacity:.42;cursor:not-allowed}.client-pagination--single{justify-content:flex-start}@media(max-width:700px){.client-pagination{align-items:stretch;flex-direction:column}.client-pagination__pages{overflow-x:auto;padding-bottom:2px}.page-button{white-space:nowrap}}
.client-edit-link,.client-edit-link:hover{color:inherit;text-decoration:none}.client-edit-link:hover{color:var(--brand)}.client-actions{display:flex;justify-content:center}.client-actions a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--brand);font-size:17px;text-decoration:none}
</style>
@endsection