@extends('layouts.admin')

@section('title', 'Customers')
@section('header-title', 'Customers')

@section('content')
    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <form class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center" method="GET">
            <label class="flex shrink-0 items-center gap-2 text-sm text-slate-500">
                Show
                <select name="per_page" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2.5 py-2 text-sm font-semibold text-slate-700 outline-none focus:border-blue-500">
                    @foreach ([10, 25, 50, 100] as $size)<option value="{{ $size }}" @selected((int) request('per_page', 10) === $size)>{{ $size }}</option>@endforeach
                </select>
                entries
            </label>
            <div class="relative flex-1">
                <svg class="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                <input name="search" value="{{ request('search') }}" data-live-search autocomplete="off" class="w-full rounded-xl border border-slate-200 py-2.5 pl-10 pr-10 text-sm outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100" placeholder="Live search name, mobile, email or tax number">
                @if(request('search'))<a href="{{ route('admin.customers.index', ['per_page' => request('per_page', 10)]) }}" title="Clear search" class="absolute right-3 top-1/2 -translate-y-1/2 text-lg text-slate-400 hover:text-slate-700">×</a>@endif
            </div>
            <a href="{{ route('admin.customers.create') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>Add customer</a>
        </form>

        @if ($customers->isEmpty())
            <div class="grid min-h-80 place-items-center p-8 text-center">
                <div>
                    <span class="mx-auto grid size-14 place-items-center rounded-2xl bg-blue-50 text-blue-500">
                        <svg class="size-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM19 8v6M16 11h6"/></svg>
                    </span>
                    <h2 class="mt-4 font-bold text-slate-900">No customers found</h2>
                    <p class="mt-1 text-sm text-slate-500">Add your first individual customer to get started.</p>
                </div>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="w-full min-w-[850px] text-left text-sm">
                    <thead class="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
                        <tr><th class="w-16 px-6 py-4">S.No</th><th class="px-6 py-4">Customer</th><th class="px-6 py-4">Contact</th><th class="px-6 py-4">Tax number</th><th class="px-6 py-4">Status</th><th class="px-6 py-4 text-right">Actions</th></tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach ($customers as $customer)
                            <tr class="hover:bg-slate-50/70">
                                <td class="px-6 py-4 font-semibold text-slate-400">{{ $customers->firstItem() + $loop->index }}</td>
                                <td class="px-6 py-4">
                                    <a href="{{ route('admin.customers.show', $customer) }}" class="font-semibold text-slate-900 hover:text-blue-600">{{ $customer->name }}</a>
                                    <p class="mt-1 max-w-xs truncate text-xs text-slate-500">{{ $customer->address ?: 'No address provided' }}</p>
                                </td>
                                <td class="px-6 py-4"><p>{{ $customer->mobile }}</p><p class="mt-1 text-xs text-slate-500">{{ $customer->email ?: 'No email' }}</p></td>
                                <td class="px-6 py-4 text-slate-600">{{ $customer->tax_number ?: '—' }}</td>
                                <td class="px-6 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $customer->status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">{{ ucfirst($customer->status) }}</span></td>
                                <td class="px-6 py-4">
                                    <div class="flex justify-end gap-2">
                                        <button type="button" data-whatsapp-contact data-whatsapp-name="{{ $customer->name }}" data-whatsapp-mobile="{{ $customer->mobile }}" title="Send WhatsApp message" aria-label="Send WhatsApp message" class="grid size-9 place-items-center rounded-xl shadow-sm transition hover:brightness-95 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2" style="background-color: #25D366; color: #ffffff;"><i class="fa-brands fa-whatsapp" style="font-size: 18px; line-height: 1;" aria-hidden="true"></i></button>
                                        <a href="{{ route('admin.customers.show', $customer) }}" title="View customer" class="grid size-9 place-items-center rounded-lg bg-blue-50 text-blue-600 transition hover:bg-blue-100">
                                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>
                                        </a>
                                        <a href="{{ route('admin.customers.edit', $customer) }}" title="Edit customer" class="grid size-9 place-items-center rounded-lg bg-amber-50 text-amber-600 transition hover:bg-amber-100">
                                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z"/></svg>
                                        </a>
                                        <form method="POST" action="{{ route('admin.customers.destroy', $customer) }}" onsubmit="return confirm('Delete this customer? This action cannot be undone.')">
                                            @csrf @method('DELETE')
                                            <button title="Delete customer" class="grid size-9 place-items-center rounded-lg bg-red-50 text-red-600 transition hover:bg-red-100">
                                                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v6M14 11v6"/></svg>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="flex flex-col items-center justify-between gap-4 border-t border-slate-100 px-6 py-4 sm:flex-row">
                <p class="text-sm text-slate-500">Showing <span class="font-semibold text-slate-700">{{ $customers->firstItem() }}</span> to <span class="font-semibold text-slate-700">{{ $customers->lastItem() }}</span> of <span class="font-semibold text-slate-700">{{ $customers->total() }}</span> entries</p>
                @include('admin.partials.pagination', ['paginator' => $customers])
            </div>
        @endif
    </section>
    @include('admin.partials.whatsapp-modal')
@endsection