@extends('web_site.layouts.master')

@php($locale = app()->getLocale())

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.notifications.title') }}</h1>
        </div>
    </section>

    <section class="space-top space-md-bottom">
        <div class="container" style="max-width: 860px;">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h4 mb-0">{{ 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="link-btn border-0 bg-transparent">{{ trans('site.notifications.mark_all_read') }}</button>
                    </form>
                @endif
            </div>

            @forelse ($notifications as $notification)
                <a href="{{ route('clinic.notifications.open', $notification->id) }}"
                   class="d-block p-4 mb-3 rounded-3 text-reset {{ $notification->read_at ? 'bg-white border' : 'bg-light border border-info' }}">
                    <div class="d-flex justify-content-between gap-3">
                        <strong class="{{ $notification->read_at ? '' : 'text-theme1' }}">{{ data_get($notification->data, "title_$locale") ?? data_get($notification->data, 'title') }}</strong>
                        <small class="text-muted text-nowrap">{{ $notification->created_at?->diffForHumans() }}</small>
                    </div>
                    <p class="mb-0 mt-2">{{ data_get($notification->data, "message_$locale") ?? data_get($notification->data, 'message') }}</p>
                </a>
            @empty
                <p class="text-center text-muted py-5">{{ trans('site.notifications.empty') }}</p>
            @endforelse

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

@endsection