@extends('layouts.app')
@section('content')
@php
    $typeClass = match($notification->type_id) {
        1, 2 => 'bg-type-booking',
        3 => 'bg-type-chat',
        4, 6 => 'bg-type-cancel',
        5 => 'bg-type-system',
        default => 'bg-type-default'
    };
    $typeIcon = match($notification->type_id) {
        1, 2 => 'fa-calendar-check',
        3 => 'fa-comments',
        4, 6 => 'fa-ban',
        5 => 'fa-cogs',
        default => 'fa-bell'
    };
    $isRead = $notification->getRawOriginal('is_read') == 1;
@endphp
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <a href="{{ route('notifications.report.index') }}" class="btn btn-outline-secondary rounded-pill shadow-sm mb-3">
                    <i class="fas fa-arrow-right mr-1"></i> العودة لقائمة الإشعارات
                </a>
            </div>
        </div>
    </div>
</section>
<div class="content px-3 pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card ticket-card">
                <!-- 🎨 Header -->
                <div class="ticket-header {{ $typeClass }}">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge badge-light text-dark mb-2 px-3 py-1 rounded-pill shadow-sm">
                                إشعار رقم #{{ $notification->id }}
                            </span>
                            <h3>{{ $notification->title }}</h3>
                        </div>
                        <div>
                            @if($isRead)
                                <span class="status-badge bg-white text-success shadow-sm">
                                    <i class="fas fa-check-double mr-1"></i> مقروء
                                </span>
                            @else
                                <span class="status-badge bg-white text-warning shadow-sm">
                                    <i class="fas fa-envelope mr-1"></i> لم يُقرأ
                                </span>
                            @endif
                        </div>
                    </div>
                    <i class="fas {{ $typeIcon }} ticket-icon"></i>
                </div>
                <!-- 📝 Body -->
                <div class="ticket-body">
                    <!-- 📖 تفاصيل الرسالة -->
                    <div class="mb-5">
                        <h6 class="ticket-section-title">محتوى الإشعار</h6>
                        <div class="message-content shadow-sm">
                            @if($notification->description)
                                {!! nl2br(e($notification->description)) !!}
                            @else
                                <span class="text-muted font-italic">لا يوجد تفاصيل إضافية لهذا الإشعار (اعتمد على العنوان فقط).</span>
                            @endif
                        </div>
                    </div>
                    <h6 class="ticket-section-title">البيانات المرتبطة</h6>
                    <div class="row">
                        <!-- 👤 المستلم -->
                        <div class="col-md-4 mb-3">
                            <div class="info-box-custom" style="border-color: #0dcaf0;">
                                <div class="label"><i class="fas fa-user text-info mr-1"></i> المستخدم المستلم</div>
                                <div class="value mt-2">
                                    @if($notification->user)
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2">
                                                <strong>{{ $notification->user->full_name }}</strong>
                                                <div class="text-muted small">ID: {{ $notification->to_user_id }}</div>
                                            </div>
                                            <a href="{{ route('tblUsers.show', ['tblUser' => $notification->to_user_id]) }}" class="btn btn-sm btn-info rounded-circle ml-auto" title="زيارة الملف">
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>
                                        </div>
                                    @else
                                        <span class="text-muted">مستخدم غير معروف (ID: {{ $notification->to_user_id }})</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- 📅 الحجز -->
                        <div class="col-md-4 mb-3">
                            <div class="info-box-custom" style="border-color: #198754;">
                                <div class="label"><i class="fas fa-book text-success mr-1"></i> الحجز المرتبط</div>
                                <div class="value mt-2">
                                    @if($notification->booking_id)
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2">
                                                <strong>حجز رقم #{{ $notification->booking_id }}</strong>
                                                <div class="text-muted small">نوع الحجز: {{ $notification->booking_type ?: 'غير محدد' }}</div>
                                            </div>
                                            <a href="{{ route('tblBookingResorts.show', ['tblBookingResort' => $notification->booking_id]) }}" class="btn btn-sm btn-success rounded-circle ml-auto" title="عرض الحجز">
                                                <i class="fas fa-external-link-alt"></i>
                                            </a>
                                        </div>
                                    @else
                                        <span class="text-muted">غير مرتبط بحجز</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <!-- 🕒 التوقيت -->
                        <div class="col-md-4 mb-3">
                            <div class="info-box-custom" style="border-color: #ffc107;">
                                <div class="label"><i class="fas fa-clock text-warning mr-1"></i> توقيت الإرسال</div>
                                <div class="value mt-2 text-left" dir="ltr">
                                    <strong>{{ \Carbon\Carbon::parse($notification->created_on)->format('Y-m-d') }}</strong>
                                    <div class="text-muted small">{{ \Carbon\Carbon::parse($notification->created_on)->format('h:i A') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- ⚙️ بيانات إضافية (اختياري / Admin Only) -->
                    <hr class="my-4">
                    <h6 class="ticket-section-title">معلومات إضافية</h6>
                    <div class="d-flex flex-wrap text-muted small">
                        <div class="mr-4 mb-2"><i class="fas fa-tag mr-1"></i> نوع الإشعار (DB): <strong>{{ $notification->type_label }} ({{ $notification->type_id }})</strong></div>
                        <div class="mr-4 mb-2"><i class="fas fa-user-shield mr-1"></i> أُرسل بواسطة (ID): <strong>{{ $notification->created_by_id ?: 'System' }}</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection