@extends('dashboard.layouts.base')

@section('content')

<style>
    /* ✅ إزالة الخط السفلي من الهيدر */
    .card-header::after {
        content: none !important;
    }

    /* ✅ توسيط النصوص في الجدول */
    #example2 th,
    #example2 td {
        vertical-align: middle;
        text-align: center;
    }

    /* ✅ يخلي الجدول قابل للتمرير أفقي بدون ما يخرج */
    .table-responsive {
        overflow-x: auto;
    }

    /* ✅ يخلي الاتجاه بالكامل RTL */
    .card,
    .card-body,
    .card-header {
        direction: rtl;
    }

    /* ✅ يمنع السايدبار من الظهور الزائد عند وجود Scroll */
    .content-wrapper {
        overflow-x: hidden;
    }

</style>

<div class="col-12">
    <div class="card">
        <div class="card-header d-flex flex-row-reverse justify-content-between align-items-center w-100">
            <h3 class="card-title mb-0">سجل الإشعارات المرسلة</h3>
        </div>

        <div class="card-body">
            <!-- Filter Form -->
            <form method="GET" action="{{ route('dashboard.notification-history.index') }}" class="mb-4">
                <div class="row align-items-end">
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label>البحث</label>
                        <input type="text" name="search" class="form-control" placeholder="ابحث في العنوان أو المحتوى" value="{{ request('search') }}">
                    </div>

                    <div class="col-lg-2 col-md-6 mb-3">
                        <label>المشرف</label>
                        <select name="admin_id" class="form-control">
                            <option value="">الكل</option>
                            @foreach($admins as $admin)
                            <option value="{{ $admin->id }}" {{ request('admin_id') == $admin->id ? 'selected' : '' }}>
                                {{ $admin->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-lg-2 col-md-6 mb-3">
                        <label>من تاريخ</label>
                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                    </div>

                    <div class="col-lg-2 col-md-6 mb-3">
                        <label>إلى تاريخ</label>
                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                    </div>

                    <div class="col-lg-2 col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                @if(request()->hasAny(['search', 'admin_id', 'notification_type', 'date_from', 'date_to']))
                <div class="row">
                    <div class="col-12">
                        <a href="{{ route('dashboard.notification-history.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times"></i> مسح الفلاتر
                        </a>
                    </div>
                </div>
                @endif
            </form>

            <!-- Notifications Table -->
            <div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
                <div class="table-responsive">
                    <table id="example2" class="table table-bordered table-hover text-center" role="grid">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>العنوان</th>
                                <th>المحتوى</th>
                                <th>المرسل إليه</th>
                                {{-- <th>النوع</th> --}}
                                <th>المشرف المرسل</th>
                                <th>تاريخ الإرسال</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($notifications as $index => $notification)
                            <tr>
                                <td>{{ $notifications->firstItem() + $index }}</td>
                                <td>
                                    @if(isset($notification->data->title_translations->ar))
                                    {{ Str::limit($notification->data->title_translations->ar, 50) }}
                                    @else
                                    {{ Str::limit($notification->data->title ?? '-', 50) }}
                                    @endif
                                </td>
                                <td>
                                    @if(isset($notification->data->body_translations->ar))
                                    {{ Str::limit($notification->data->body_translations->ar, 60) }}
                                    @else
                                    {{ Str::limit($notification->data->body ?? '-', 60) }}
                                    @endif
                                </td>
                                <td>
                                    @if($notification->notifiable_id && isset($notification->recipient))
                                    @if(isset($notification->recipient->provider))
                                    <a href="{{ route('dashboard.technical.show', $notification->recipient->provider->id) }}" class="text-primary">
                                        <i class="fas fa-user"></i>
                                        {{ $notification->recipient->first_name }} {{ $notification->recipient->last_name }}
                                        <br><small class="text-muted">(مقدم خدمة)</small>
                                    </a>
                                    @else
                                    <a href="{{ route('dashboard.users.show', $notification->recipient->id) }}" class="text-primary">
                                        <i class="fas fa-user"></i>
                                        {{ $notification->recipient->first_name }} {{ $notification->recipient->last_name }}
                                        <br><small class="text-muted">(مستخدم)</small>
                                    </a>
                                    @endif
                                    @else
                                    <span class="badge badge-info">إرسال جماعي</span>
                                    @endif
                                </td>
                                {{-- <td>
                                    @if(isset($notification->data->type))
                                        @if($notification->data->type == 'user')
                                            <span class="badge badge-primary">مستخدم</span>
                                        @elseif($notification->data->type == 'provider')
                                            <span class="badge badge-success">مقدم خدمة</span>
                                        @else
                                            <span class="badge badge-secondary">{{ $notification->data?->type }}</span>
                                @endif
                                @else
                                <span class="badge badge-secondary">-</span>
                                @endif
                                </td> --}}
                                <td>
                                    @if(isset($notification->admin))
                                    <a href="{{ route('dashboard.admin.show', $notification->admin->id) }}" class="text-info">
                                        <i class="fas fa-user-shield"></i>
                                        {{ $notification->admin?->name }}
                                    </a>
                                    @else
                                    <span class="text-muted">النظام</span>
                                    @endif
                                </td>
                                <td>
                                    <small>
                                        {{ \Carbon\Carbon::parse($notification->created_at)->format('Y-m-d') }}
                                        <br>
                                        {{ \Carbon\Carbon::parse($notification->created_at)->format('h:i A') }}
                                    </small>
                                </td>
                                <td>
                                    <a href="{{ route('dashboard.notification-history.show', $notification->id) }}" class="btn btn-info btn-sm" title="عرض التفاصيل">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-muted">لا توجد إشعارات مرسلة</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pagination -->
            <div class="row mt-4">
                <div class="col-12 overflow-auto">
                    {{ $notifications->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection