@extends('layouts.app')
@section('title', 'سجل الإشعارات - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">سجل الإشعارات</h1>
        <p class="page-subtitle">عرض جميع الإشعارات المرسلة والفاشلة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('notifications.settings') }}" class="btn btn-secondary"><i class="fas fa-cog"></i> الإعدادات</a>
    </div>
</div>

<div class="card">
    <div class="filter-bar">
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <select name="type" class="form-select">
                    <option value="">كل الأنواع</option>
                    @foreach(\App\Models\NotificationSetting::TYPE_LABELS as $key => $label)
                        <option value="{{ $key }}" {{ request('type') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-group">
                <select name="status" class="form-select">
                    <option value="">كل الحالات</option>
                    <option value="sent" {{ request('status') == 'sent' ? 'selected' : '' }}>تم الإرسال</option>
                    <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>فشل</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>قيد الإرسال</option>
                </select>
            </div>
            <div class="filter-group">
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-input" placeholder="من تاريخ">
            </div>
            <div class="filter-group">
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-input" placeholder="إلى تاريخ">
            </div>
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> بحث</button>
            @if(request()->hasAny(['type', 'status', 'date_from', 'date_to']))
                <a href="{{ route('notifications.logs') }}" class="btn btn-secondary"><i class="fas fa-times"></i> مسح</a>
            @endif
        </form>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>التاريخ والوقت</th>
                    <th>نوع الإشعار</th>
                    <th>المستلم</th>
                    <th>الموضوع</th>
                    <th>الحالة</th>
                    <th>رسالة الخطأ</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                <tr>
                    <td>
                        <div>{{ $log->created_at->format('Y/m/d') }}</div>
                        <small style="color: var(--text-muted)">{{ $log->created_at->format('H:i:s') }}</small>
                    </td>
                    <td>{{ $log->type_label }}</td>
                    <td>
                        <span dir="ltr" style="font-size: 0.9em">{{ $log->recipient_email ?? '—' }}</span>
                    </td>
                    <td>{{ $log->subject ?? '—' }}</td>
                    <td>
                        @php
                            $badgeClass = match($log->status) {
                                'sent'    => 'status-active',
                                'failed'  => 'status-expired',
                                'pending' => 'status-pending',
                                default   => '',
                            };
                        @endphp
                        <span class="status-badge {{ $badgeClass }}">{{ $log->status_label }}</span>
                    </td>
                    <td>
                        @if($log->error_message)
                            <small style="color: var(--danger)" title="{{ $log->error_message }}">{{ Str::limit($log->error_message, 50) }}</small>
                        @else
                            <span style="color: var(--text-muted)">—</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <i class="fas fa-inbox"></i>
                            <h3>لا توجد سجلات</h3>
                            <p>لم يتم إرسال أي إشعارات بعد</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($logs->hasPages())
    <div class="pagination-wrap">{{ $logs->withQueryString()->links() }}</div>
    @endif
</div>
@endsection