@extends('layouts.app')
@section('title', 'Contacts')

@section('content')
<div class="space-y-4" x-data="bulkSelect">

    <div class="flex flex-wrap items-center justify-between gap-3">
        <form method="GET" class="flex flex-wrap items-center gap-2">
            <input type="search" name="q" value="{{ request('q') }}" placeholder="Search name, email, company…" class="input w-56">
            <select name="status" class="input w-36">
                <option value="">All statuses</option>
                @foreach (\App\Models\Contact::STATUSES as $status)
                    <option value="{{ $status }}" @selected(request('status') === $status)>{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                @endforeach
            </select>
            <select name="list" class="input w-40">
                <option value="">All lists</option>
                @foreach ($lists as $list)
                    <option value="{{ $list->id }}" @selected(request('list') == $list->id)>{{ $list->name }}</option>
                @endforeach
            </select>
            <select name="country" class="input w-36">
                <option value="">All countries</option>
                @foreach ($countries as $country)
                    <option value="{{ $country }}" @selected(request('country') === $country)>{{ $country }}</option>
                @endforeach
            </select>
            <select name="industry" class="input w-36">
                <option value="">All industries</option>
                @foreach ($industries as $industry)
                    <option value="{{ $industry }}" @selected(request('industry') === $industry)>{{ $industry }}</option>
                @endforeach
            </select>
            <button class="btn-secondary">Filter</button>
            @if (request()->hasAny(['q', 'status', 'list', 'country', 'industry']))
                <a href="{{ route('contacts.index') }}" class="btn-ghost">Clear</a>
            @endif
        </form>
        <div class="flex gap-2">
            @can('export contacts')
                <a href="{{ route('contacts.export', request()->query()) }}" class="btn-secondary">Export CSV</a>
            @endcan
            @can('manage contacts')
                <a href="{{ route('imports.create') }}" class="btn-secondary">Import</a>
                <a href="{{ route('contacts.create') }}" class="btn-primary">Add contact</a>
            @endcan
        </div>
    </div>

    {{-- Bulk action bar --}}
    @can('manage contacts')
        <div x-cloak x-show="selected.length > 0" x-transition
             class="card flex flex-wrap items-center gap-3 p-3">
            <span class="text-sm font-medium" x-text="selected.length + ' selected'"></span>
            <form method="POST" action="{{ route('contacts.bulk') }}" class="flex flex-wrap items-center gap-2"
                  @submit="if ($event.submitter.dataset.confirm && !confirm($event.submitter.dataset.confirm)) $event.preventDefault()">
                @csrf
                <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                <select name="list_id" class="input w-44">
                    <option value="">Choose list…</option>
                    @foreach ($lists as $list)
                        <option value="{{ $list->id }}">{{ $list->name }}</option>
                    @endforeach
                </select>
                <button name="action" value="assign_list" class="btn-secondary">Add to list</button>
                <button name="action" value="suppress" class="btn-secondary"
                        data-confirm="Suppress all selected contacts? They will never receive campaigns again until manually released.">Suppress</button>
                <button name="action" value="delete" class="btn-danger"
                        data-confirm="Delete all selected contacts? This can be undone only from the database.">Delete</button>
            </form>
        </div>
    @endcan

    @if ($contacts->isEmpty())
        <x-empty-state title="No contacts found" description="Import a LeadFinder CSV/XLSX file or add contacts manually to get started.">
            @can('manage imports')<a href="{{ route('imports.create') }}" class="btn-primary">Import contacts</a>@endcan
        </x-empty-state>
    @else
        <div class="table-wrap">
            <table class="table">
                <thead>
                <tr>
                    @can('manage contacts')
                        <th class="w-10"><input type="checkbox" class="rounded border-slate-300"
                            @change="toggleAll($event, {{ $contacts->pluck('id')->toJson() }})" aria-label="Select all"></th>
                    @endcan
                    @php($dir = request('dir') === 'asc' ? 'desc' : 'asc')
                    <th><a href="{{ request()->fullUrlWithQuery(['sort' => 'email_normalized', 'dir' => $dir]) }}" class="hover:text-slate-700">Email ↕</a></th>
                    <th><a href="{{ request()->fullUrlWithQuery(['sort' => 'full_name', 'dir' => $dir]) }}" class="hover:text-slate-700">Name ↕</a></th>
                    <th><a href="{{ request()->fullUrlWithQuery(['sort' => 'company', 'dir' => $dir]) }}" class="hover:text-slate-700">Company ↕</a></th>
                    <th><a href="{{ request()->fullUrlWithQuery(['sort' => 'country', 'dir' => $dir]) }}" class="hover:text-slate-700">Country ↕</a></th>
                    <th>Status</th>
                    <th><a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'dir' => $dir]) }}" class="hover:text-slate-700">Added ↕</a></th>
                    <th class="w-20"></th>
                </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                @foreach ($contacts as $contact)
                    <tr>
                        @can('manage contacts')
                            <td><input type="checkbox" class="rounded border-slate-300" :checked="selected.includes('{{ $contact->id }}')"
                                       @change="$event.target.checked ? selected.push('{{ $contact->id }}') : selected = selected.filter(id => id !== '{{ $contact->id }}')"
                                       aria-label="Select {{ $contact->email }}"></td>
                        @endcan
                        <td><a href="{{ route('contacts.show', $contact) }}" class="font-medium text-brand-600 hover:underline dark:text-brand-400">{{ $contact->email }}</a></td>
                        <td>{{ $contact->displayName() }}</td>
                        <td class="max-w-40 truncate">{{ $contact->company }}</td>
                        <td>{{ $contact->country }}</td>
                        <td><x-status-badge :status="$contact->status"/></td>
                        <td class="text-slate-500">{{ $contact->created_at->format('d M Y') }}</td>
                        <td class="text-right">
                            @can('manage contacts')
                                <a href="{{ route('contacts.edit', $contact) }}" class="text-sm text-slate-500 hover:text-brand-600">Edit</a>
                            @endcan
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        {{ $contacts->links() }}
    @endif
</div>
@endsection