@extends('components.dashboard.layouts.master')

@section('title', __('dashboard.show_model', ['model' => __('messages.models.notification')]))

@section('content')

    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="content-wrapper">

            <div class="content-body">

                <x-dashboard.layouts.breadcrumb now="{{ __('dashboard.show_model', ['model' => __('messages.models.notification')]) }}">
                    <li class="breadcrumb-item">{{ __('dashboard.notifications') }}</li>
                </x-dashboard.layouts.breadcrumb>

                <div class="col-12 mt-3">
                    <div class="card shadow-sm border-0 rounded-2">

                        <div class="card-header text-dark">
                            <h4 class="mb-0">{{ __('dashboard.show_model', ['model' => __('messages.models.notification')]) }}</h4>
                        </div>

                        <div class="card-body">

                            @php
                                $data = is_array($firstNotification->data)
                                    ? $firstNotification->data
                                    : json_decode($firstNotification->data, true);
                                $locale = app()->getLocale();
                            @endphp

                            {{-- Title --}}
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('dashboard.title') }}:</label>
                                <div class="border p-2 rounded">{{ $data['title'][$locale] ?? '--' }}</div>
                            </div>

                            {{-- Body --}}
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('dashboard.content') }}:</label>
                                <div class="border p-2 rounded">{{ $data['body'][$locale] ?? '--' }}</div>
                            </div>

                            <hr>

                            {{-- Receivers --}}
                            <h6 class="fw-semibold">{{ __('dashboard.receivers') }}</h6>
                            <ul class="list-group list-group-flush">
                                @foreach($users as $user)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $user->name }}
                                        @php
                                            $read = $relatedNotifications->firstWhere('notifiable_id', $user->id)->read_at;
                                        @endphp
                                        @if($read)
                                            <span class="badge bg-success">{{ __('dashboard.read') }}</span>
                                        @else
                                            <span class="badge bg-secondary">{{ __('dashboard.unread') }}</span>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>

                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>

@endsection