@php
    use App\Models\TestSmsLog;
    $ids = $logs->getCollection()->map(fn ($m) => (string) $m->Id)->values();
@endphp
<x-layouts.app title="SMS log" subtitle="Lead-alert messages queued for, and reported back by, the SMS-gateway app."
               :breadcrumbs="['Leads & Messaging' => null, 'SMS log' => null]">
    <x-slot:actions>
        <a href="{{ route('sms.logs.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')

    <div class="mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
        <x-stat label="Waiting (new)" :value="number_format($stats['new'])" icon="heroicon-o-clock" tone="blue" :href="route('sms.logs.index', ['status' => '1'])" :hint="number_format($stats['total']).' in log'" />
        <x-stat label="Sent today" :value="number_format($stats['sent'])" icon="heroicon-o-paper-airplane" tone="green" />
        <x-stat label="Failed today" :value="number_format($stats['failed'])" icon="heroicon-o-exclamation-triangle" tone="red" />
        <x-stat label="Cancelled today" :value="number_format($stats['cancelled'])" icon="heroicon-o-pause-circle" tone="gray" />
        <x-stat label="Deleted today" :value="number_format($stats['deleted'])" icon="heroicon-o-trash" tone="gray" />
    </div>

    <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 number, message, SIM mobile, campaign…">
                <x-select name="status" :options="TestSmsLog::statusOptions() + ['none' => 'Not defined']" :value="request('status')" placeholder="Any status" class="w-44" />
            </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
                <button type="button" class="ml-2 text-xs text-brand-700 hover:underline dark:text-brand-300" @click="selected = []; all = false">Clear</button>
            </div>
            <form method="POST" action="{{ route('sms.logs.destroy') }}" x-data="confirmSubmit('Permanently delete the selected log entries?')" @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 ($logs->isEmpty())
            <x-empty-state title="No log entries" icon="heroicon-o-chat-bubble-bottom-center-text" message="Nothing matches these filters." />
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <thead>
                        <tr>
                            <th class="w-10"><input type="checkbox" class="form-checkbox" aria-label="Select all on this page" :checked="all" @click="toggleAll(@js($ids))"></th>
                            <th><x-sort-link column="status" label="Status" /></th>
                            <th><x-sort-link column="number" label="Number" /></th>
                            <th class="min-w-[18rem]">Message</th>
                            <th><x-sort-link column="user" label="User" /></th>
                            <th><x-sort-link column="time" label="Time taken" /></th>
                            <th><x-sort-link column="sim" label="SIM" /></th>
                            <th><x-sort-link column="campaign" label="Campaign" /></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($logs as $m)
                            <tr :class="selected.includes('{{ $m->Id }}') && 'bg-brand-50/60 dark:bg-brand-500/5'">
                                <td><input type="checkbox" class="form-checkbox" value="{{ $m->Id }}" x-model="selected" aria-label="Select entry {{ $m->Id }}"></td>
                                <td>@include('sms.partials.status', ['value' => $m->MessageStatusId])</td>
                                <td class="whitespace-nowrap font-medium text-ink-900 tabular-nums dark:text-white">{{ $m->Number ?: '—' }}</td>
                                <td>
                                    <button type="button" class="line-clamp-2 max-w-md text-left text-ink-600 hover:text-ink-900 dark:text-ink-300 dark:hover:text-white"
                                            @click="$dispatch('show-sms', { number: @js((string) $m->Number), text: @js((string) $m->Message) })">{{ $m->Message ?: '—' }}</button>
                                </td>
                                <td class="whitespace-nowrap text-ink-600 dark:text-ink-300">{{ $m->user_name ?? ($m->UserId ? '#'.$m->UserId : '—') }}</td>
                                <td class="whitespace-nowrap text-xs text-ink-500 tabular-nums">{{ $m->TimeTaken ?: '—' }}@if ($m->SentOnDate)<div class="text-[11px] text-ink-400">{{ $m->SentOnDate }}</div>@endif</td>
                                <td class="whitespace-nowrap text-xs text-ink-500">{{ $m->SimName ?: '—' }}@if ($m->SimNo)<div class="text-[11px] text-ink-400 tabular-nums">{{ $m->SimNo }}</div>@endif</td>
                                <td class="whitespace-nowrap text-xs text-ink-500">{{ $m->Campaign ?: '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$logs" />
        @endif
    </x-card>

    @include('sms.partials.message-modal')
</x-layouts.app>