@extends('admin.layouts.master')
@section('title', 'سجل النشاطات')
@section('page_title', 'سجل النشاطات')
@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('admin.dashboard') }}</a></li>
    <li class="breadcrumb-item active">سجل النشاطات</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-history"></i> سجل النشاطات (Audit Trail)</h3>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-2">
                <label class="small mb-1">الموديول</label>
                <select class="form-control form-control-sm filter-input" id="filter_log">
                    <option value="">—</option>
                    @foreach($logNames as $l)<option value="{{ $l }}">{{ $l }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">العملية</label>
                <select class="form-control form-control-sm filter-input" id="filter_event">
                    <option value="">—</option>
                    <option value="created">إضافة</option>
                    <option value="updated">تعديل</option>
                    <option value="deleted">حذف</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="small mb-1">المستخدم</label>
                <select class="form-control form-control-sm filter-input" id="filter_user">
                    <option value="">—</option>
                    @foreach($users as $u)<option value="{{ $u->id }}">{{ $u->name }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="small mb-1">من</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_from">
            </div>
            <div class="col-md-2">
                <label class="small mb-1">إلى</label>
                <input type="date" class="form-control form-control-sm filter-input" id="filter_to">
            </div>
        </div>
        <table id="logTable" class="table table-bordered table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>#</th><th>الوقت</th><th>المستخدم</th>
                    <th>الموديول</th><th>العملية</th><th>الكيان</th>
                    <th>الوصف</th><th>التغييرات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#filter_user').select2({ width: '100%', allowClear: true, placeholder: '—' });

    const table = $('#logTable').DataTable({
        processing: true, serverSide: true, responsive: true, order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.activity-log.data') }}',
            data: d => {
                d.log_name  = $('#filter_log').val();
                d.event     = $('#filter_event').val();
                d.causer_id = $('#filter_user').val();
                d.date_from = $('#filter_from').val();
                d.date_to   = $('#filter_to').val();
            }
        },
        language: { url: '{{ app()->getLocale() === "ar" ? "https://cdn.datatables.net/plug-ins/1.13.7/i18n/ar.json" : "" }}' },
        columns: [
            { data: 'id', width: '60px' },
            { data: 'created_at', name: 'created_at' },
            { data: 'causer_name', name: 'causer.name' },
            { data: 'log_name', name: 'log_name' },
            { data: 'event', name: 'event' },
            { data: 'subject_label', name: 'subject_type', orderable: false },
            { data: 'description', name: 'description' },
            { data: 'changes', name: 'changes', orderable: false, searchable: false },
        ]
    });

    $('.filter-input').on('change', () => table.ajax.reload());
});
</script>
@endpush