@extends('layouts.app')

@section('title', 'تفاصيل الإشعار - DOTS HR Pro')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0;
    }
    .btn-back {
        background: #fff;
        color: #1B2A4A;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all .2s;
    }
    .btn-back:hover { background: #f8fafc; color: #1B2A4A; border-color: #cbd5e1; }
    .btn-danger {
        background: #ef4444;
        color: #fff;
        border: 1px solid #ef4444;
        border-radius: 8px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s;
    }
    .btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
    .card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .card-title {
        font-size: 16px;
        font-weight: 700;
        color: #1B2A4A;
        margin: 0 0 16px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
        margin-bottom: 20px;
    }
    .info-item label {
        font-size: 12px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        display: block;
        margin-bottom: 4px;
    }
    .info-item span {
        font-size: 15px;
        font-weight: 600;
        color: #1B2A4A;
    }
    .notif-body {
        font-size: 15px;
        color: #334155;
        line-height: 1.8;
        padding: 16px;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }
    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .badge-success { background: rgba(16, 185, 129, .12); color: #059669; }
    .badge-warning { background: rgba(245, 158, 11, .12); color: #d97706; }
    .badge-danger { background: rgba(239, 68, 68, .12); color: #dc2626; }
    .badge-info { background: rgba(59, 130, 246, .12); color: #2563eb; }
    .badge-secondary { background: rgba(100, 116, 139, .12); color: #475569; }
    .recipients-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .recipient-chip {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 13px;
        color: #334155;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
@php $notification = $notification ?? null; $recipients = $recipients ?? []; @endphp

<div class="page-header">
    <h1><i class="fa-solid fa-bell" style="color:#E8502F;margin-left:8px;"></i> تفاصيل الإشعار</h1>
    <a href="{{ route('internal-notifications.index') }}" class="btn-back"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
</div>

@if($notification)
@php
    $typeLabels = ['info'=>'معلومات','warning'=>'تحذير','success'=>'نجاح','danger'=>'تنبيه'];
    $typeBadges = ['info'=>'badge-info','warning'=>'badge-warning','success'=>'badge-success','danger'=>'badge-danger'];
    $priorityLabels = ['low'=>'منخفض','normal'=>'عادي','high'=>'عالي','urgent'=>'عاجل'];
    $targetLabels = ['all'=>'الجميع','department'=>'قسم محدد','specific'=>'موظفين محددين'];
@endphp
<div class="card">
    <div class="card-title" style="font-size:20px;">{{ $notification->title }}</div>
    <div class="info-grid">
        <div class="info-item">
            <label>النوع</label>
            <span class="badge {{ $typeBadges[$notification->type] ?? 'badge-secondary' }}">{{ $typeLabels[$notification->type] ?? $notification->type }}</span>
        </div>
        <div class="info-item">
            <label>الأولوية</label>
            <span>{{ $priorityLabels[$notification->priority] ?? $notification->priority ?? 'عادي' }}</span>
        </div>
        <div class="info-item">
            <label>الجهة المستهدفة</label>
            <span>{{ $targetLabels[$notification->target] ?? $notification->target }}</span>
        </div>
        <div class="info-item">
            <label>تاريخ الإرسال</label>
            <span>{{ $notification->created_at }}</span>
        </div>
        <div class="info-item">
            <label>الحالة</label>
            <span>{{ $notification->read_at ? 'مقروء' : 'غير مقروء' }}</span>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-title"><i class="fa-solid fa-message" style="color:#1B2A4A;"></i> نص الإشعار</div>
    <div class="notif-body">{{ $notification->message }}</div>
</div>

@if(count($recipients) > 0)
<div class="card">
    <div class="card-title"><i class="fa-solid fa-users" style="color:#1B2A4A;"></i> المستلمون</div>
    <div class="recipients-list">
        @foreach($recipients as $r)
            <span class="recipient-chip"><i class="fa-solid fa-user" style="margin-left:4px;font-size:11px;color:#94a3b8;"></i> {{ $r->name ?? $r->id }}</span>
        @endforeach
    </div>
</div>
@endif

<form action="{{ route('internal-notifications.destroy', $notification->id) }}" method="POST" style="margin-top:10px;">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn-danger" onclick="return confirm('هل أنت متأكد من حذف هذا الإشعار؟')"><i class="fa-solid fa-trash"></i> حذف الإشعار</button>
</form>
@else
<div class="card">
    <div style="text-align:center;padding:40px;color:#94a3b8;">
        <i class="fa-solid fa-bell-slash" style="font-size:36px;margin-bottom:12px;color:#cbd5e1;"></i>
        <p>الإشعار غير موجود</p>
    </div>
</div>
@endif
@endsection