@php
    /** @var \Illuminate\Support\Collection<int, \App\Models\Partnership> $reminderPartnerships */
@endphp

@if($reminderPartnerships->isNotEmpty())
    <div
        class="mb-6 space-y-2"
        x-data="{
            dismissed: [],
            initDismissed() {
                try {
                    const raw = localStorage.getItem('collabs_reminder_dismissed');
                    this.dismissed = raw ? JSON.parse(raw) : [];
                    if (! Array.isArray(this.dismissed)) this.dismissed = [];
                } catch (e) {
                    this.dismissed = [];
                }
            },
            isHidden(id) {
                return this.dismissed.includes(Number(id));
            },
            dismiss(id) {
                const n = Number(id);
                if (this.dismissed.includes(n)) return;
                this.dismissed.push(n);
                localStorage.setItem('collabs_reminder_dismissed', JSON.stringify(this.dismissed));
            },
        }"
        x-init="initDismissed()"
    >
        @foreach($reminderPartnerships as $p)
            <div
                x-show="!isHidden({{ $p->id }})"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="relative overflow-hidden rounded-2xl border border-accent/20 bg-gradient-to-r from-accent/10 via-accent/5 to-transparent p-3 sm:p-4"
                x-cloak
            >
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-3">
                    <div class="flex min-w-0 flex-1 items-start gap-3 sm:items-center">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-accent/15">
                            <svg class="h-5 w-5 text-accent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-semibold text-foreground">
                                {{ __('Did you go to :name? 👀', ['name' => $p->restaurant_name]) }}
                            </p>
                            <p class="mt-0.5 text-xs text-muted-foreground">
                                {{ __('Scheduled for :date', ['date' => $p->scheduled_date->format('D j M')]) }}@if($p->scheduled_time){{ ' '.__('at :time', ['time' => $p->scheduled_time]) }}@endif
                            </p>
                        </div>
                    </div>
                    <div class="flex shrink-0 flex-wrap items-center justify-end gap-1.5 sm:justify-start">
                        @can('update', $p)
                            <button
                                type="button"
                                wire:click="openEdit({{ $p->id }})"
                                class="inline-flex items-center gap-1 rounded-xl px-3 py-2 text-xs font-semibold text-accent transition-colors hover:bg-accent/10"
                            >
                                {{ __('Edit') }}
                                <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                            <button
                                type="button"
                                wire:click="moveToStatus({{ $p->id }}, 'completed')"
                                class="inline-flex items-center gap-1.5 rounded-xl bg-accent px-3 py-2 text-xs font-semibold text-accent-foreground shadow-sm transition-opacity hover:opacity-90"
                            >
                                <svg class="h-3.5 w-3.5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                {{ __('Already went') }}
                            </button>
                        @endcan
                        <button
                            type="button"
                            class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                            x-on:click="dismiss({{ $p->id }})"
                            aria-label="{{ __('Dismiss reminder') }}"
                        >
                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif