@php $fmt = app(\App\Services\Formatter::class); @endphp

<div>
    <x-ui.page-header
        title="Announcements"
        subtitle="Shown as a banner inside every shop's dashboard. Use them sparingly — a permanent banner is invisible."
    />

    <x-resource.toolbar placeholder="Title or text…" create-label="New announcement" :can-create="$this->canManage()" />

    <x-ui.card :padded="false">
        @if ($rows->isEmpty())
            <x-ui.empty icon="info" title="Nothing published" message="Announcements you publish reach every shop without a deploy." />
        @else
            <x-ui.table>
                <x-slot:head>
                    <tr>
                        <x-ui.th sortable="{{ $sortField }}" field="title" :direction="$sortDirection">Announcement</x-ui.th>
                        <th>Level</th>
                        <th>Audience</th>
                        <th>Runs</th>
                        <th>State</th>
                        <th></th>
                    </tr>
                </x-slot:head>

                @foreach ($rows as $row)
                    @php
                        $live = $row->is_active
                            && (! $row->starts_at || $row->starts_at->isPast())
                            && (! $row->ends_at || $row->ends_at->isFuture());
                    @endphp

                    <tr>
                        <td>
                            <p class="font-medium">{{ $row->title }}</p>
                            <p class="line-clamp-1 text-xs text-slate-500">{{ $row->body }}</p>
                        </td>

                        <td>
                            <x-ui.badge :color="match ($row->level) {
                                'success' => 'green', 'warning' => 'amber', 'danger' => 'red', default => 'blue',
                            }">{{ ucfirst($row->level) }}</x-ui.badge>
                        </td>

                        <td class="text-xs">{{ $row->product?->name ?? 'Every product' }}</td>

                        <td class="text-xs">
                            {{ $row->starts_at ? $fmt->date($row->starts_at) : 'Now' }}
                            →
                            {{ $row->ends_at ? $fmt->date($row->ends_at) : 'No end' }}
                        </td>

                        <td>
                            @if (! $row->is_active)
                                <x-ui.badge color="gray">Off</x-ui.badge>
                            @elseif ($live)
                                <x-ui.badge color="green">Live</x-ui.badge>
                            @else
                                <x-ui.badge color="amber">Scheduled / ended</x-ui.badge>
                            @endif
                        </td>

                        <td>
                            <x-resource.row-actions :id="$row->id"
                                                    :can-edit="$this->canManage()"
                                                    :can-delete="$this->canManage()" />
                        </td>
                    </tr>
                @endforeach
            </x-ui.table>

            <x-resource.pagination :rows="$rows" />
        @endif
    </x-ui.card>

    <x-ui.modal show="showForm" :title="$editingId ? 'Edit announcement' : 'New announcement'" close-action="closeForm">
        <div class="space-y-3">
            <x-ui.input label="Title" wire:model="form.title" required :error="$errors->first('form.title')" />

            <x-ui.textarea label="Message" wire:model="form.body" rows="3" :error="$errors->first('form.body')"
                           placeholder="One or two sentences. Shop owners read this between serving customers." />

            <div class="grid gap-3 sm:grid-cols-2">
                <x-ui.select label="Level" wire:model="form.level" :options="$levels"
                             :error="$errors->first('form.level')" />

                <x-ui.select label="Audience" wire:model="form.saas_product_id" :options="$products"
                             placeholder="Every product" :error="$errors->first('form.saas_product_id')" />

                <x-ui.input label="Show from" type="datetime-local" wire:model="form.starts_at"
                            hint="Leave blank to start immediately." :error="$errors->first('form.starts_at')" />

                <x-ui.input label="Stop showing" type="datetime-local" wire:model="form.ends_at"
                            hint="Leave blank to run until switched off." :error="$errors->first('form.ends_at')" />
            </div>

            <div class="grid gap-3 sm:grid-cols-2">
                <x-ui.toggle wire:model="form.is_active" label="Active" />
                <x-ui.toggle wire:model="form.is_dismissible" label="Shops can dismiss it"
                             hint="Turn this off only for something they must not miss." />
            </div>
        </div>

        <x-slot:footer>
            <x-ui.button wire:click="closeForm">Cancel</x-ui.button>
            <x-ui.button variant="primary" wire:click="saveResource" loading="saveResource">Save</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>

    <x-resource.delete-confirm label="announcement" />
</div>