@extends('layouts.admin')
@section('title', 'Companies')
@section('header-title', 'Companies')
@section('content')
    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <form method="GET" class="flex flex-col gap-3 border-b border-slate-100 p-4 lg:flex-row lg:items-center">
            <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 company, contact person, mobile or email">@if(request('search'))<a href="{{ route('admin.companies.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.companies.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 company</a>
        </form>
        @if ($companies->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="M4 21V5l8-3 8 3v16M9 21v-5h6v5"/></svg></span><h2 class="mt-4 font-bold text-slate-900">No companies found</h2><p class="mt-1 text-sm text-slate-500">Add a company and its first fixed pricing agreement.</p></div></div>
        @else
            <div class="overflow-x-auto"><table class="w-full min-w-[950px] 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">Company</th><th class="px-6 py-4">Contact person</th><th class="px-6 py-4">Agreement</th><th class="px-6 py-4">Rates</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 ($companies as $company)<tr class="hover:bg-slate-50/70">
                    <td class="px-6 py-4 font-semibold text-slate-400">{{ $companies->firstItem() + $loop->index }}</td>
                    <td class="px-6 py-4"><a href="{{ route('admin.companies.show', $company) }}" class="font-semibold text-slate-900 hover:text-blue-600">{{ $company->name }}</a><p class="mt-1 text-xs text-slate-500">{{ $company->preferred_invoice_email ?: $company->email ?: 'No email' }}</p></td>
                    <td class="px-6 py-4"><p>{{ $company->contact_person }}</p><p class="mt-1 text-xs text-slate-500">{{ $company->mobile }}</p></td>
                    <td class="px-6 py-4 text-slate-600">@if ($company->agreement_start_date){{ $company->agreement_start_date->format('d M Y') }} – {{ $company->agreement_end_date?->format('d M Y') ?: 'Open' }}@else — @endif</td>
                    <td class="px-6 py-4"><span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ $company->pricing_agreements_count }} vehicle {{ Str::plural('rate', $company->pricing_agreements_count) }}</span></td>
                    <td class="px-6 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {{ $company->status === 'active' ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-100 text-slate-600' }}">{{ ucfirst($company->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="{{ $company->contact_person }}" data-whatsapp-mobile="{{ $company->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.companies.show', $company) }}" title="View company" 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.companies.edit', $company) }}" title="Edit company" 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.companies.destroy', $company) }}" onsubmit="return confirm('Delete this company and all pricing agreements?')">@csrf @method('DELETE')<button title="Delete company" 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">{{ $companies->firstItem() }}</span> to <span class="font-semibold text-slate-700">{{ $companies->lastItem() }}</span> of <span class="font-semibold text-slate-700">{{ $companies->total() }}</span> entries</p>
                @include('admin.partials.pagination', ['paginator' => $companies])
            </div>
        @endif
    </section>
    @include('admin.partials.whatsapp-modal')
@endsection