@extends('layouts.app')

@section('title', 'سجل النشاطات')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">سجل النشاطات</h4>
            <p class="text-muted mb-0">تتبع جميع العمليات على النظام</p>
        </div>
        <a href="{{ route('iqamas.index') }}" class="btn btn-label-secondary">
            <i class='bx bx-arrow-back'></i> العودة للإقامات
        </a>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class='bx bx-filter-alt me-2'></i>الفلاتر</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('activities.index') }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">البحث</label>
                        <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="ابحث في الوصف...">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">نوع العملية</label>
                        <select class="form-select" name="action">
                            <option value="">الكل</option>
                            <option value="create" {{ request('action') == 'create' ? 'selected' : '' }}>إضافة</option>
                            <option value="update" {{ request('action') == 'update' ? 'selected' : '' }}>تعديل</option>
                            <option value="delete" {{ request('action') == 'delete' ? 'selected' : '' }}>حذف</option>
                            <option value="import" {{ request('action') == 'import' ? 'selected' : '' }}>استيراد</option>
                            <option value="export" {{ request('action') == 'export' ? 'selected' : '' }}>تصدير</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">من تاريخ</label>
                        <input type="date" class="form-control" name="date_from" value="{{ request('date_from') }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">إلى تاريخ</label>
                        <input type="date" class="form-control" name="date_to" value="{{ request('date_to') }}">
                    </div>
                    <div class="col-md-3 d-flex align-items-end gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class='bx bx-search'></i> بحث
                        </button>
                        <a href="{{ route('activities.index') }}" class="btn btn-label-secondary">
                            <i class='bx bx-reset'></i> إعادة تعيين
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Activities Timeline -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class='bx bx-history me-2'></i>النشاطات</h5>
            <span class="badge bg-primary">{{ $activities->total() }} نشاط</span>
        </div>
        <div class="card-body">
            @forelse($activities as $activity)
                <div class="d-flex mb-4 pb-3 border-bottom">
                    <div class="flex-shrink-0">
                        <div class="avatar bg-label-{{ $activity->action_color }}" style="width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                            <i class='bx {{ $activity->action_icon }}' style="font-size: 1.25rem;"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">
                                    <span class="badge bg-{{ $activity->action_color }}">{{ $activity->action_name }}</span>
                                    {{ $activity->description }}
                                </h6>
                                <small class="text-muted">
                                    <i class='bx bx-user me-1'></i>{{ $activity->performed_by }}
                                    <span class="mx-2">|</span>
                                    <i class='bx bx-time me-1'></i>{{ $activity->created_at->format('Y-m-d H:i:s') }}
                                    <span class="mx-2">|</span>
                                    <i class='bx bx-globe me-1'></i>{{ $activity->ip_address ?? 'غير معروف' }}
                                </small>
                            </div>
                            @if($activity->model_id)
                                <a href="{{ route('activities.show', $activity) }}" class="btn btn-sm btn-label-primary">
                                    <i class='bx bx-show'></i> التفاصيل
                                </a>
                            @endif
                        </div>

                        @if($activity->action == 'update' && $activity->new_values)
                            <div class="mt-2">
                                <small class="text-muted">التغييرات:</small>
                                <div class="d-flex flex-wrap gap-1 mt-1">
                                    @foreach($activity->new_values as $field => $value)
                                        @if($field != 'updated_at')
                                            <span class="badge bg-label-info">{{ $field }}</span>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="text-center py-5">
                    <i class='bx bx-history' style="font-size: 4rem; color: #d9dee3;"></i>
                    <p class="text-muted mt-3">لا توجد نشاطات مسجلة</p>
                </div>
            @endforelse

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $activities->appends(request()->all())->links() }}
            </div>
        </div>
    </div>
</div>
@endsection