@extends('layouts.app')
@section('title', __('Clients'))
@section('page-title', __('Clients'))
@section('page-subtitle', __('Company files for every business you analyse.'))

@php
    $f = $filters ?? [];
    $hasFilters = collect($f)->reject(fn ($v) => $v === '' || $v === null)->isNotEmpty();
@endphp

@section('content')
<div class="w-full">

{{-- ── Header strip ────────────────────────────────────────────────── --}}
<div class="mb-5 flex items-center justify-between gap-3 flex-wrap">
    <div class="inline-flex items-center gap-1 bg-slate-100 dark:bg-slate-800 rounded-full p-1">
        <a href="{{ route('tenant.clients.index') }}"
           class="px-3 py-1.5 rounded-full text-xs font-medium transition
                  {{ ! $archived ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white'
                                 : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white' }}">
            {{ __('Active') }}
        </a>
        <a href="{{ route('tenant.clients.index', ['archived' => 1]) }}"
           class="px-3 py-1.5 rounded-full text-xs font-medium transition
                  {{ $archived ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-950 dark:text-white'
                               : 'text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white' }}">
            {{ __('Archived') }}
        </a>
    </div>

    <div class="flex items-center gap-2">
        <a href="{{ route('tenant.clients.create') }}?tab=bulk" class="btn-secondary text-sm inline-flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0l-4 4m4-4v12"/></svg>
            {{ __('Bulk import') }}
        </a>
        <a href="{{ route('tenant.clients.create') }}" class="btn-primary text-sm inline-flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
            {{ __('New company file') }}
        </a>
    </div>
</div>

@if(session('status'))
    <div class="mb-4 px-4 py-2 rounded-xl bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 text-sm">{{ session('status') }}</div>
@endif
@if(session('error'))
    <div class="mb-4 px-4 py-2 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm">{{ session('error') }}</div>
@endif

{{-- ── Search + advanced filters ───────────────────────────────────── --}}
<form method="GET" action="{{ route('tenant.clients.index') }}"
      x-data="{ open: {{ $hasFilters ? 'true' : 'false' }} }"
      class="card p-4 mb-5">
    @if($archived)<input type="hidden" name="archived" value="1">@endif

    <div class="flex flex-col sm:flex-row gap-3">
        <label class="relative flex-1">
            <svg class="absolute start-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <input type="search" name="q" value="{{ $f['q'] ?? '' }}"
                   placeholder="{{ __('Search by name, VAT, registration, email, contact, city…') }}"
                   class="form-input ps-9 w-full">
        </label>
        <select name="sort" class="form-select sm:w-48 text-sm">
            <option value="recent" @selected(($f['sort'] ?? 'recent') === 'recent')>{{ __('Recently updated') }}</option>
            <option value="name"   @selected(($f['sort'] ?? '') === 'name')>{{ __('Name (A → Z)') }}</option>
            <option value="old"    @selected(($f['sort'] ?? '') === 'old')>{{ __('Oldest first') }}</option>
        </select>
        <button class="btn-primary text-sm sm:shrink-0">{{ __('Search') }}</button>
        <button type="button" @click="open = !open"
                class="btn-secondary text-sm sm:shrink-0 inline-flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
            {{ __('Filters') }}
        </button>
    </div>

    <div x-show="open" x-cloak x-transition.opacity class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
        <div>
            <label class="form-label">{{ __('Sector') }}</label>
            <select name="sector" class="form-select w-full text-sm">
                <option value="">{{ __('Any sector') }}</option>
                @foreach($sectors as $k => $label)
                    <option value="{{ $k }}" @selected(($f['sector'] ?? '') === $k)>{{ __($label) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">{{ __('Legal form') }}</label>
            <input type="text" name="legal_form" value="{{ $f['legal_form'] ?? '' }}" placeholder="{{ __('e.g. SRL') }}" class="form-input text-sm">
        </div>
        <div>
            <label class="form-label">{{ __('Size') }}</label>
            <select name="size" class="form-select w-full text-sm">
                <option value="">{{ __('Any size') }}</option>
                @foreach($sizes as $k => $label)
                    <option value="{{ $k }}" @selected(($f['size'] ?? '') === $k)>{{ __($label) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">{{ __('Country') }}</label>
            <select name="country_code" class="form-select w-full text-sm">
                <option value="">{{ __('Any country') }}</option>
                @foreach($countries as $code => $cfg)
                    <option value="{{ $code }}" @selected(($f['country_code'] ?? '') === $code)>{{ __($cfg['label']) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="form-label">{{ __('Currency') }}</label>
            <select name="primary_currency" class="form-select w-full text-sm">
                <option value="">{{ __('Any currency') }}</option>
                @foreach($currencies as $code => $label)
                    <option value="{{ $code }}" @selected(($f['primary_currency'] ?? '') === $code)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
    </div>

    @if($hasFilters)
        <div class="mt-3 text-xs">
            <a href="{{ route('tenant.clients.index', $archived ? ['archived' => 1] : []) }}" class="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                {{ __('Clear filters') }}
            </a>
        </div>
    @endif
</form>

{{-- ── Client list ─────────────────────────────────────────────────── --}}
@if($clients->isEmpty())
    <div class="card p-12 text-center">
        <div class="mx-auto w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 flex items-center justify-center mb-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 5h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </div>
        <div class="text-sm text-slate-700 dark:text-slate-200 font-medium">{{ $archived ? __('Nothing archived yet.') : __('No company files yet.') }}</div>
        @if(! $archived)
            <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ __('Create your first company file to start tracking analyses chronologically.') }}</div>
            <a href="{{ route('tenant.clients.create') }}" class="btn-primary text-xs mt-4 inline-flex items-center gap-1.5">{{ __('New company file') }}</a>
        @endif
    </div>
@else
    <div class="card overflow-hidden">
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
            @foreach($clients as $c)
                @php $latest = $c->submissions->first(); @endphp
                <li class="px-5 sm:px-6 py-4 hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
                    <div class="flex items-start gap-4">
                        <div class="w-11 h-11 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center font-semibold text-sm shrink-0">
                            {{ $c->initials() }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <a href="{{ route('tenant.clients.show', $c) }}"
                                   class="text-sm font-semibold text-slate-900 dark:text-white truncate hover:underline">{{ $c->name }}</a>
                                @if($c->isArchived())
                                    <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-md bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200">{{ __('Archived') }}</span>
                                @endif
                                @if($c->sector)
                                    <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{{ __($c->sectorLabel()) }}</span>
                                @endif
                                @if($c->legal_form)
                                    <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">{{ $c->legal_form }}</span>
                                @endif
                            </div>
                            <div class="mt-1 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-x-4 gap-y-1 flex-wrap">
                                @if($c->vat_number)<span>{{ __('VAT') }}: <span class="font-mono">{{ $c->vat_number }}</span></span>@endif
                                @if($c->registration_number)<span>{{ $c->registrationLabel() }}: <span class="font-mono">{{ $c->registration_number }}</span></span>@endif
                                @if($c->shortAddress())<span>{{ $c->shortAddress() }}</span>@endif
                                @if($c->primary_currency)<span class="font-mono">{{ $c->primary_currency }}</span>@endif
                            </div>
                        </div>
                        <div class="text-end shrink-0">
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __(':n analyses', ['n' => $c->submissions_count]) }}</div>
                            <div class="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">
                                @if($latest)
                                    {{ __('Last') }}: {{ $latest->created_at->diffForHumans() }}
                                @else
                                    {{ __('No analysis yet') }}
                                @endif
                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="mt-4">{{ $clients->links() }}</div>
@endif

</div>
@endsection