@extends('layouts.app')
@section('title', 'سجل التدقيق - DOTS HR Pro')

@push('styles')
<style>
    .audit-event { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
    .audit-event.created { background: #e6f9ee; color: #1a7a3a; }
    .audit-event.updated { background: #e8f0fe; color: #1a56db; }
    .audit-event.deleted { background: #fce8e8; color: #c62828; }
    .audit-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
    .filter-form .filter-group { display: flex; flex-direction: column; gap: 4px; }
    .filter-form .filter-group label { font-size: 12px; color: #6b7280; font-weight: 600; }
    .reset-link { color: #6b7280; font-size: 13px; text-decoration: none; align-self: flex-end; padding: 8px; }
    .reset-link:hover { color: #E8502F; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-history" style="color: #E8502F;"></i> سجل التدقيق</h1>
        <p class="page-subtitle">{{ $logs->total() }} سجل نشاط</p>
    </div>
</div>

<div class="filter-bar">
    <form method="GET" class="filter-form">
        <div class="filter-group">
            <label>من تاريخ</label>
            <input type="date" name="date_from" class="form-input" value="{{ $filters['date_from'] ?? '' }}">
        </div>
        <div class="filter-group">
            <label>إلى تاريخ</label>
            <input type="date" name="date_to" class="form-input" value="{{ $filters['date_to'] ?? '' }}">
        </div>
        <div class="filter-group">
            <label>المستخدم</label>
            <select name="user_id" class="form-select">
                <option value="">كل المستخدمين</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ ($filters['user_id'] ?? '') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label>النموذج</label>
            <select name="subject_type" class="form-select">
                <option value="">كل النماذج</option>
                @foreach($modelLabels as $class => $label)
                    <option value="{{ $class }}" {{ ($filters['subject_type'] ?? '') == $class ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label>نوع الحدث</label>
            <select name="event" class="form-select">
                <option value="">كل الأحداث</option>
                @foreach($eventLabels as $event => $label)
                    <option value="{{ $event }}" {{ ($filters['event'] ?? '') == $event ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-secondary"><i class="fas fa-filter"></i> تصفية</button>
        @if(array_filter($filters))
            <a href="{{ route('audit-log.index') }}" class="reset-link"><i class="fas fa-times"></i> إعادة ضبط</a>
        @endif
    </form>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>التاريخ والوقت</th>
                    <th>المستخدم</th>
                    <th>الحدث</th>
                    <th>النموذج</th>
                    <th>الوصف</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($logs as $log)
                <tr>
                    <td>{{ $log->id }}</td>
                    <td>
                        <div>{{ $log->created_at->format('Y/m/d') }}</div>
                        <div class="audit-meta">{{ $log->created_at->format('H:i:s') }}</div>
                    </td>
                    <td>
                        @if($log->causer)
                            <div class="user-cell">
                                <div class="user-avatar-sm">{{ mb_substr($log->causer->name ?? '?', 0, 1) }}</div>
                                <span>{{ $log->causer->name }}</span>
                            </div>
                        @else
                            <span style="color: #9ca3af;">النظام</span>
                        @endif
                    </td>
                    <td>
                        <span class="audit-event {{ $log->event }}">
                            @switch($log->event)
                                @case('created') <i class="fas fa-plus-circle"></i> إنشاء @break
                                @case('updated') <i class="fas fa-edit"></i> تعديل @break
                                @case('deleted') <i class="fas fa-trash"></i> حذف @break
                                @default {{ $log->event }}
                            @endswitch
                        </span>
                    </td>
                    <td>{{ $modelLabels[$log->subject_type] ?? class_basename($log->subject_type ?? '—') }}</td>
                    <td>{{ Str::limit($log->description, 60) }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('audit-log.show', $log) }}" class="action-btn" title="عرض التفاصيل"><i class="fas fa-eye"></i></a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7">
                        <div class="empty-state">
                            <i class="fas fa-history"></i>
                            <h3>لا توجد سجلات نشاط</h3>
                            <p>سيتم تسجيل جميع العمليات تلقائياً عند إجراء أي تعديل في النظام</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($logs->hasPages())
        <div class="pagination-wrap">{{ $logs->links() }}</div>
    @endif
</div>
@endsection