@php($active = \App\Enums\SosStatus::Active)
<x-admin.layout :title="__('SOS Alerts')">
    <x-admin.page-header :title="__('SOS Alerts')" :subtitle="__('Emergency alerts from riders and drivers. Their emergency contacts were texted a live location link.')" />

    <x-admin.tabs :tabs="$tabs" :current="$tab" />

    <x-admin.card :padding="false">
        @if ($alerts->isEmpty())
            <x-admin.empty :message="__('No SOS alerts here.')" icon="shield-check" />
        @else
            <div class="overflow-x-auto">
                <table class="table-base">
                    <thead><tr><th>{{ __('Raised') }}</th><th>{{ __('From') }}</th><th>{{ __('Ride') }}</th><th>{{ __('Location') }}</th><th>{{ __('Emergency contacts') }}</th><th>{{ __('Status') }}</th><th></th></tr></thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        @foreach ($alerts as $alert)
                            <tr @class(['bg-red-50 dark:bg-red-500/10' => $alert->status === $active])>
                                <td class="whitespace-nowrap text-sm">{{ $alert->created_at->toDayDateTimeString() }}<span class="block text-xs text-gray-400">{{ $alert->created_at->diffForHumans() }}</span></td>
                                <td><x-admin.user-link :user="$alert->user" /></td>
                                <td>
                                    @if ($alert->ride)
                                        <a href="{{ route('admin.rides.show', $alert->ride) }}" class="text-brand-600 hover:underline dark:text-brand-400">{{ $alert->ride->booking_number }}</a>
                                        <span class="block"><x-admin.status :value="$alert->ride->status" /></span>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($alert->map_url)
                                        <a href="{{ $alert->map_url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1 text-sm text-brand-600 hover:underline dark:text-brand-400"><x-heroicon-o-map-pin class="size-4" />{{ __('Open map') }}</a>
                                    @else
                                        <span class="text-gray-400">—</span>
                                    @endif
                                </td>
                                <td class="text-sm">
                                    @forelse ($alert->user?->emergencyContacts ?? [] as $contact)
                                        <div class="mb-1 last:mb-0">
                                            {{ $contact->name }}@if ($contact->relationship) <span class="text-gray-400">({{ $contact->relationship }})</span>@endif
                                            <span class="block text-xs text-gray-400">{{ full_phone($contact->country_code, $contact->phone) }}</span>
                                        </div>
                                    @empty
                                        <span class="text-gray-400">{{ __('None added') }}</span>
                                    @endforelse
                                </td>
                                <td>
                                    <x-admin.status :value="$alert->status" :color="$alert->status === $active ? 'red' : null" />
                                    @if ($alert->handler)<span class="block text-xs text-gray-400">{{ $alert->handler->name }}</span>@endif
                                    @if ($alert->admin_notes)<span class="block max-w-56 truncate text-xs text-gray-400" title="{{ $alert->admin_notes }}">{{ $alert->admin_notes }}</span>@endif
                                </td>
                                <td class="text-end">
                                    @can('sos.manage')
                                        @if (in_array($alert->status, \App\Enums\SosStatus::open(), true))
                                            <div class="flex flex-wrap justify-end gap-1">
                                                @if ($alert->status === $active)
                                                    <form method="POST" action="{{ route('admin.sos.acknowledge', $alert) }}">@csrf
                                                        <x-admin.button type="submit" size="sm" variant="secondary" icon="hand-raised">{{ __('Acknowledge') }}</x-admin.button>
                                                    </form>
                                                @endif
                                                <x-admin.button size="sm" icon="check" @click="$dispatch('open-modal', 'close-sos-{{ $alert->id }}')">{{ __('Close') }}</x-admin.button>
                                            </div>

                                            <x-admin.modal :name="'close-sos-'.$alert->id" :title="__('Close SOS alert')">
                                                <form method="POST" action="{{ route('admin.sos.close', $alert) }}" class="space-y-4 text-start">
                                                    @csrf
                                                    <input type="hidden" name="_modal" value="close-sos-{{ $alert->id }}">
                                                    <x-admin.select name="outcome" :id="'outcome-'.$alert->id" :label="__('Outcome')" :options="$outcomes" required />
                                                    <x-admin.textarea name="notes" :id="'notes-'.$alert->id" :label="__('Notes (optional)')" rows="3" maxlength="1000" />
                                                    <div class="flex justify-end gap-2">
                                                        <x-admin.button variant="secondary" @click="open = false">{{ __('Cancel') }}</x-admin.button>
                                                        <x-admin.button type="submit">{{ __('Close alert') }}</x-admin.button>
                                                    </div>
                                                </form>
                                            </x-admin.modal>
                                        @endif
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-800">{{ $alerts->links() }}</div>
        @endif
    </x-admin.card>
</x-admin.layout>