@extends('web_site.account.layout')

@php
    $locale = app()->getLocale();
    // Group this page's notifications by day: Today, Yesterday, then the date.
    $groups = $notifications->getCollection()->groupBy(function ($notification) {
        $day = $notification->created_at;

        return $day?->isToday() ? trans('site.notifications.today')
            : ($day?->isYesterday() ? trans('site.notifications.yesterday') : $day?->translatedFormat('j F Y'));
    });
@endphp

@section('account_title', trans('site.notifications.title'))

@section('account_content')
    <div class="account-card">
        <div class="account-card__head">
            <h2 class="account-card__title">{{ trans('site.notifications.title') }}</h2>
            @if ($notifications->where('read_at', null)->isNotEmpty())
                <form action="{{ route('clinic.notifications.read-all') }}" method="POST">
                    @csrf
                    <button type="submit" class="booking-action booking-action--soft"><i class="far fa-check-double"></i> {{ trans('site.notifications.mark_all_read') }}</button>
                </form>
            @endif
        </div>

        @forelse ($groups as $label => $items)
            <h3 class="notification-day">{{ $label }}</h3>
            @foreach ($items as $notification)
                <a href="{{ route('clinic.notifications.open', $notification->id) }}" class="notification-row {{ $notification->read_at ? '' : 'is-unread' }}">
                    <span class="notification-row__icon"><i class="far fa-bell"></i></span>
                    <span class="notification-row__body">
                        <strong>{{ data_get($notification->data, "title_$locale") ?? data_get($notification->data, 'title') }}</strong>
                        <span>{{ data_get($notification->data, "message_$locale") ?? data_get($notification->data, 'message') }}</span>
                    </span>
                    <small>{{ $notification->created_at?->translatedFormat('h:i A') }}</small>
                </a>
            @endforeach
        @empty
            <div class="account-empty">
                <i class="far fa-bell-slash"></i>
                <p class="mb-0">{{ trans('site.notifications.empty') }}</p>
            </div>
        @endforelse

        <div class="mt-4">{{ $notifications->links() }}</div>
    </div>
@endsection