{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The user's notifications page: filter tabs, the list
     (each row marks itself read and follows its link), and
     "mark all read".
=====================================================
--}}

@extends('layouts.user')

@section('title', __('notifications.user.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('front.dashboard.breadcrumb'), 'url' => route('account.dashboard')],
        ['label' => __('notifications.user.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('notifications.user.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('notifications.user.subtitle') }}</p>
        </div>
        @if ($unread > 0)
            <form method="POST" action="{{ route('account.notifications.read-all') }}">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 rounded-xl border-[1.5px] border-[#e4ddf7] bg-white px-5 py-2.5 text-[13.5px] font-bold text-primary-600 transition hover:bg-[#f4f1fc]">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                    {{ __('notifications.user.mark_all') }}
                </button>
            </form>
        @endif
    </div>

    {{-- Filter tabs --}}
    <div class="mb-5 inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
        @foreach (__('notifications.user.filters') as $key => $label)
            <a href="{{ route('account.notifications', ['filter' => $key === 'all' ? null : $key]) }}"
               @class([
                   'rounded-[9px] px-4 py-2 text-[13px] font-bold transition',
                   'bg-white text-primary-600 shadow-sm' => $filter === $key,
                   'text-ink-muted hover:text-primary-600' => $filter !== $key,
               ])>{{ $label }}</a>
        @endforeach
    </div>

    <div class="overflow-hidden rounded-2xl border border-line bg-white">
        @forelse ($items as $item)
            <form method="POST" action="{{ route('account.notifications.read', $item) }}" class="border-b border-[#f5f4f9] last:border-0">
                @csrf
                <button type="submit" class="block w-full text-right transition hover:bg-[#f7f6fc]">
                    <x-notif.row :notification="$item" />
                </button>
            </form>
        @empty
            <div class="px-5 py-16 text-center">
                <span class="mx-auto mb-3 flex size-14 items-center justify-center rounded-2xl bg-[#efeafb] text-primary-600">
                    <x-notif.icon name="bell" class="size-7" />
                </span>
                <p class="text-sm text-ink-muted">{{ __('notifications.user.empty') }}</p>
            </div>
        @endforelse
    </div>

    @if ($items->hasPages())
        <div class="mt-5">{{ $items->links() }}</div>
    @endif
@endsection