@php($ids = $messages->getCollection()->map(fn ($m) => (string) $m->id)->values())
<x-layouts.app title="Incoming SMS" subtitle="Messages received on the phones running the SMS-gateway app."
               :breadcrumbs="['Leads & Messaging' => null, 'Incoming SMS' => null]">
    <x-slot:actions>
        <a href="{{ route('sms.incoming.export', request()->except('page')) }}" class="btn btn-secondary"><x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Export</a>
    </x-slot:actions>

    @include('sms.partials.tabs')

    <x-card :padded="false" x-data="bulkSelect()">
        <div class="border-b border-ink-100 p-4 dark:border-ink-800">
            <x-filter-bar placeholder="Search sender, message, date…">
                <x-select name="user" :options="$users->all()" :value="request('user')" placeholder="Any receiving user" class="w-48" />
            </x-filter-bar>
        </div>

        <div x-cloak x-show="selected.length" x-transition
             class="flex flex-wrap items-center justify-between gap-3 border-b border-brand-200 bg-brand-50/70 px-5 py-2.5 text-sm dark:border-brand-500/20 dark:bg-brand-500/10">
            <div class="font-medium text-brand-900 dark:text-brand-200"><span x-text="selected.length"></span> selected</div>
            <form method="POST" action="{{ route('sms.incoming.destroy') }}" x-data="confirmSubmit('Permanently delete the selected messages?')" @submit="submit">
                @csrf @method('DELETE')
                <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                <button class="btn btn-danger btn-sm"><x-heroicon-m-trash class="h-4 w-4" /> Delete</button>
            </form>
        </div>

        @if ($messages->isEmpty())
            <x-empty-state title="{{ $total ? 'No messages match' : 'No incoming SMS yet' }}" icon="heroicon-o-envelope-open"
                           message="{{ $total ? 'Try a different search.' : 'Messages appear here once the gateway app posts them to /api/sms/incoming.' }}" />
        @else
            <ul class="divide-y divide-ink-100 dark:divide-ink-800">
                @foreach ($messages as $m)
                    <li class="flex items-start gap-4 px-5 py-4" :class="selected.includes('{{ $m->id }}') && 'bg-brand-50/60 dark:bg-brand-500/5'">
                        <input type="checkbox" class="form-checkbox mt-1" value="{{ $m->id }}" x-model="selected" aria-label="Select message {{ $m->id }}">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400"><x-heroicon-o-chat-bubble-left class="h-5 w-5" /></div>
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-baseline justify-between gap-2">
                                <span class="font-medium text-ink-900 tabular-nums dark:text-white">{{ $m->sender_no ?: 'Unknown sender' }}</span>
                                <span class="text-xs text-ink-400 tabular-nums">{{ $m->date ?: $m->updateby_date }}</span>
                            </div>
                            <p class="mt-1 text-sm break-words whitespace-pre-line text-ink-600 dark:text-ink-300">{{ $m->message }}</p>
                            <p class="mt-1 text-xs text-ink-400">Received on {{ $m->user_name ?? ($m->user_id ? 'user #'.$m->user_id : 'unknown phone') }}</p>
                        </div>
                    </li>
                @endforeach
            </ul>
            <div class="flex items-center gap-2 border-t border-ink-100 px-5 py-2 text-xs text-ink-500 dark:border-ink-800">
                <input type="checkbox" class="form-checkbox" :checked="all" @click="toggleAll(@js($ids))" id="select-all-incoming">
                <label for="select-all-incoming">Select all on this page</label>
            </div>
            <x-pagination-bar :paginator="$messages" />
        @endif
    </x-card>
</x-layouts.app>