@extends('layouts.account')
@section('title', __('Notifications'))
@section('account')
@php $m = $shop->money; @endphp
<h1 class="mb-6 text-2xl font-extrabold text-primary">{{ __('Notifications') }}</h1>
@forelse ($items as $n)
    @php $d = $n->data; $isNew = $n->read_at === null; @endphp
    <article class="mb-4 rounded-[32px] border p-6 {{ $isNew ? 'border-tertiary bg-tertiary-container/40' : 'border-surface-variant bg-white' }}">
        @if ($n->type === 'coupon' && !empty($d['code']))
            @php
            $what = match ($d['discount_type'] ?? '') {
                'percent' => __(':n% off', ['n' => rtrim(rtrim(number_format((float) $d['discount_value'], 2, '.', ''), '0'), '.')]),
                'fixed' => __(':amount off', ['amount' => $m->format((float) $d['discount_value'])]),
                default => __('Free delivery'),
            };
            @endphp
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <p class="text-xs font-extrabold uppercase tracking-wider text-on-surface-variant">{{ $isNew ? __('New') . ' · ' : '' }}{{ __('A coupon for you') }}</p>
                    <p class="mt-1 text-2xl font-extrabold text-primary">{{ $what }}</p>
                    <p class="mt-1 text-sm text-on-surface-variant">
                        @if (!empty($d['min_order'])){{ __('On orders over :amount.', ['amount' => $m->format((float) $d['min_order'])]) }} @endif
                        @if (!empty($d['expires_at'])){{ __('Valid until :date.', ['date' => \Illuminate\Support\Str::limit((string) $d['expires_at'], 10, '')]) }}@endif
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <code class="rounded-full border-2 border-dashed border-primary px-5 py-2 text-lg font-extrabold tracking-wider text-primary" id="code-{{ $n->id }}">{{ $d['code'] }}</code>
                    <button type="button" class="min-h-[44px] rounded-full bg-surface-mid px-4 text-sm font-bold text-primary" data-copy="code-{{ $n->id }}" data-done="{{ __('Copied') }}">{{ __('Copy') }}</button>
                </div>
            </div>
            <div class="mt-4"><x-btn :href="route('shop')">{{ __('Shop now') }} <x-icon name="arrow" class="h-4 w-4"/></x-btn></div>
        @else
            <p class="font-extrabold text-primary">{{ $n->title }}</p><p class="mt-1 text-on-surface-variant">{{ $n->body }}</p>
        @endif
        <p class="mt-3 text-xs text-outline">{{ $n->created_at }}</p>
    </article>
@empty
    <x-empty :title="__('No notifications yet')"/>
@endforelse
@include('partials.pagination', ['result' => $result])
@push('scripts')
<script>
document.querySelectorAll('[data-copy]').forEach(b => b.addEventListener('click', async () => {
  const t = document.getElementById(b.dataset.copy).textContent.trim();
  try { await navigator.clipboard.writeText(t); b.textContent = b.dataset.done; } catch (e) { window.prompt('', t); }
}));
</script>
@endpush
@endsection