@extends('layouts.app')
@section('content')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<!-- Flatpickr RTL (optional for Arabic) -->
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h2 class="text-dark font-weight-bold"><i class="fas fa-chart-bar text-primary mr-2"></i> تقرير إشعارات المستخدمين</h2>
            </div>
        </div>
    </div>
</section>
<div class="content px-3">
    <!-- 📊 KPI Cards -->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="kpi-card bg-primary">
                <div class="inner">
                    <h3>{{ number_format($totalCount) }}</h3>
                    <p>إجمالي الإشعارات (للفلتر الحالي)</p>
                </div>
                <div class="icon"><i class="fas fa-bell"></i></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="kpi-card bg-success">
                <div class="inner">
                    <h3>{{ number_format($readCount) }}</h3>
                    <p>الإشعارات المقروءة</p>
                </div>
                <div class="icon"><i class="fas fa-check-double"></i></div>
            </div>
        </div>
        <div class="col-lg-4 col-md-12">
            <div class="kpi-card bg-warning text-dark">
                <div class="inner">
                    <h3 class="text-dark">{{ number_format($unreadCount) }}</h3>
                    <p class="text-dark">الإشعارات غير المقروءة</p>
                </div>
                <div class="icon text-dark"><i class="fas fa-envelope"></i></div>
            </div>
        </div>
    </div>
    <!-- 🔍 فلاتر البحث (Collapsible) -->
    <div class="card filter-card mb-4">
        <div class="card-header bg-white" data-toggle="collapse" data-target="#filterCollapse" style="cursor: pointer;">
            <h5 class="card-title mb-0 font-weight-bold text-secondary">
                <i class="fas fa-filter mr-2"></i> فلاتر البحث المتقدمة
            </h5>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
        </div>
        <!-- سيتم طي الفلاتر إذا لم يكن هناك أي فلتر مستخدم، وتكون مفتوحة إذا كان هناك فلتر -->
        @php
            $hasFilters = request()->except('page');
        @endphp
        <div id="filterCollapse" class="collapse {{ !empty($hasFilters) ? 'show' : '' }}">
            <div class="card-body bg-light">
                <form method="GET" action="{{ route('notifications.report.index') }}">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">رقم الإشعار</label>
                            <input type="text" name="id" class="form-control" placeholder="بحث بالرقم..." value="{{ request('id') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">رقم الحجز</label>
                            <input type="text" name="booking_id" class="form-control" placeholder="رقم الحجز المرتبط..." value="{{ request('booking_id') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">رقم المستخدم المستلم</label>
                            <input type="text" name="to_user_id" class="form-control" placeholder="ID المستخدم..." value="{{ request('to_user_id') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">اسم المستخدم المستلم</label>
                            <input type="text" name="user_name" class="form-control" placeholder="اسم المستخدم..." value="{{ request('user_name') }}">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">نص العنوان/الرسالة</label>
                            <input type="text" name="title" class="form-control" placeholder="جزء من النص..." value="{{ request('title') }}">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">نوع الإشعار</label>
                            <select name="type_id" class="form-control">
                                <option value="">-- عرض الكل --</option>
                                @foreach(\App\Models\TblNotification::TYPE_MAP_AR as $key => $label)
                                    <option value="{{ $key }}" {{ request('type_id') == (string)$key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">حالة القراءة</label>
                            <select name="is_read" class="form-control">
                                <option value="">-- عرض الكل --</option>
                                <option value="1" {{ request('is_read') == '1' ? 'selected' : '' }}>مقروء</option>
                                <option value="0" {{ request('is_read') == '0' ? 'selected' : '' }}>غير مقروء</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="text-muted font-weight-bold small">تاريخ الإضافة</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white"><i class="fas fa-calendar-alt"></i></span>
                                </div>
                                <input type="text" name="created_on" id="created_on_filter" class="form-control bg-white" placeholder="اختر التاريخ..." value="{{ request('created_on') }}">
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 text-right">
                        <a href="{{ route('notifications.report.index') }}" class="btn btn-outline-secondary mr-2">
                            <i class="fas fa-undo mr-1"></i> إعادة تعيين
                        </a>
                        <button type="submit" class="btn btn-primary px-4 shadow-sm">
                            <i class="fas fa-search mr-1"></i> تصفية النتائج
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 📄 جدول الإشعارات -->
    <div class="card shadow-sm border-0 mb-5">
        <div class="card-header bg-white py-3">
            <h5 class="card-title text-dark font-weight-bold mb-0">سجل الإشعارات</h5>
        </div>
        <div class="card-body p-0 table-responsive">
            <table class="table table-hover table-modern text-center mb-0">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th width="25%">الرسالة والتفاصيل</th>
                        <th width="15%">المستلم</th>
                        <th width="12%">نوع الإشعار</th>
                        <th width="12%">رقم الحجز</th>
                        <th width="10%">الحالة</th>
                        <th width="15%">التاريخ</th>
                        <th width="6%">خيارات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($notifications as $n)
                        @php
                            $isRead = $n->getRawOriginal('is_read') == 1;
                        @endphp
                        <tr>
                            <td class="font-weight-bold text-muted">{{ $n->id }}</td>
                            <td class="text-right">
                                <div class="font-weight-bold text-dark">{{ \Illuminate\Support\Str::limit($n->title, 40) }}</div>
                                @if($n->description)
                                    <div class="text-muted small mt-1">{{ \Illuminate\Support\Str::limit($n->description, 50) }}</div>
                                @endif
                            </td>
                            <td>
                                @if($n->user)
                                    <a href="{{ route('tblUsers.show', ['tblUser' => $n->to_user_id]) }}" class="btn btn-sm btn-outline-info rounded-pill py-0 px-2" target="_blank" title="عرض الملف الشخصي">
                                        <i class="fas fa-user-circle mr-1"></i> {{ \Illuminate\Support\Str::limit($n->user->full_name, 15) }}
                                    </a>
                                @else
                                    <span class="text-muted small">ID: {{ $n->to_user_id }}</span>
                                @endif
                            </td>
                            <td>
                                @php
                                    $typeClass = match($n->type_id) {
                                        1, 2 => 'badge-soft-primary', // حجوزات
                                        3 => 'badge-soft-info', // محادثة
                                        4, 6 => 'badge-soft-danger', // الغاء
                                        5 => 'badge-soft-warning', // نظام
                                        default => 'badge-soft-secondary'
                                    };
                                    $typeIcon = match($n->type_id) {
                                        1, 2 => 'fa-calendar-check',
                                        3 => 'fa-comments',
                                        4, 6 => 'fa-ban',
                                        5 => 'fa-cogs',
                                        default => 'fa-bell'
                                    };
                                @endphp
                                <span class="badge {{ $typeClass }}">
                                    <i class="fas {{ $typeIcon }} mr-1"></i> {{ $n->type_label }}
                                </span>
                            </td>
                            <td>
                                @if($n->booking_id)
                                    <a href="{{ route('tblBookingResorts.show', ['tblBookingResort' => $n->booking_id]) }}" class="btn btn-sm btn-outline-secondary rounded py-0 px-2" target="_blank">
                                        #{{ $n->booking_id }}
                                    </a>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                @if($isRead)
                                    <span class="badge badge-soft-success"><i class="fas fa-check-double"></i> مقروء</span>
                                @else
                                    <span class="badge badge-soft-warning"><i class="fas fa-envelope"></i> غير مقروء</span>
                                @endif
                            </td>
                            <td dir="ltr">
                                <span class="small text-muted font-weight-bold">
                                    {{ \Carbon\Carbon::parse($n->created_on)->format('Y-m-d H:i') }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('notifications.report.show', $n->id) }}" class="btn btn-sm btn-primary rounded-circle" title="عرض التفاصيل الكاملة">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-5">
                                <div class="text-center text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3 text-light"></i>
                                    <h5>لا توجد إشعارات تطابق معايير البحث</h5>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($notifications->hasPages())
            <div class="card-footer bg-white border-top d-flex justify-content-center pt-3 pb-0">
                {{ $notifications->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>
<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ar.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Flatpickr للتاريخ فقط
        flatpickr("#created_on_filter", {
            dateFormat: "Y-m-d",
            locale: "ar",
            allowInput: true
        });
    });
</script>
@endsection