@extends('layouts.dashboard')

@section('title', trans('dashboard.nav_customers'))
@section('header_title', trans('dashboard.nav_customers'))

@section('content')
<div class="space-y-6">
    <div class="p-4 rounded-2xl bg-navy-900 border border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
        <form method="GET" class="flex items-center gap-3 w-full sm:w-auto">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="{{ trans('dashboard.search_customers') }}" class="rounded-xl bg-navy-950 border border-slate-700 text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none w-64">
            <button type="submit" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-bold">{{ trans('dashboard.filter_btn') }}</button>
        </form>
        <a href="{{ route('dashboard.customers.create') }}" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-bold">
            {{ trans('dashboard.add_customer') }}
        </a>
    </div>

    <div class="bg-navy-900 border border-slate-800 rounded-2xl overflow-hidden">
        <table class="w-full text-xs">
            <thead class="bg-navy-950/60 text-slate-400 border-b border-slate-800">
                <tr>
                    <th class="p-4 text-start">{{ trans('dashboard.buyer_name') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.buyer_vat') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.customer_email') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.customer_invoices') }}</th>
                    <th class="p-4 text-start">{{ trans('dashboard.action') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/60 text-slate-300">
                @forelse($customers as $customer)
                    <tr>
                        <td class="p-4 font-semibold text-white">{{ $customer->name }}</td>
                        <td class="p-4 code-font">{{ $customer->vat_number ?: '—' }}</td>
                        <td class="p-4">{{ $customer->email ?: '—' }}</td>
                        <td class="p-4">{{ $customer->invoices_count }}</td>
                        <td class="p-4">
                            <div class="flex items-center gap-3">
                                <a href="{{ route('dashboard.customers.edit', $customer->uuid) }}" class="text-brand-400 font-semibold hover:underline">{{ trans('dashboard.edit') }}</a>
                                <form method="POST" action="{{ route('dashboard.customers.destroy', $customer->uuid) }}" onsubmit="return confirm('{{ trans('dashboard.confirm_delete') }}')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-rose-400 font-semibold hover:underline">{{ trans('dashboard.delete') }}</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center py-12 text-slate-500">{{ trans('dashboard.no_customers') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        @if($customers->hasPages())
            <div class="p-4 border-t border-slate-800">{{ $customers->links() }}</div>
        @endif
    </div>
</div>
@endsection