@extends('layouts.app')
@section('title', 'سجل العمليات')
@section('page_title', 'سجل العمليات والتدقيق')
@section('page_subtitle', 'كل عملية مسجلة: مين عمل إيه وإمتى ومن أي جهاز')

@section('content')
<ul class="nav nav-tabs mb-3">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-activity">سجل العمليات</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-logins">سجل الدخول</button></li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="tab-activity">
        <div class="card mb-3">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-3">
                        <select class="form-select form-select-sm" id="filterUser">
                            <option value="">كل المستخدمين</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="date" class="form-control form-control-sm" id="filterDate">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-hover w-100" id="activityTable">
                    <thead>
                        <tr><th>#</th><th>المستخدم</th><th>العملية</th><th>السجل</th><th>الوصف</th><th>IP</th><th>التاريخ</th></tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="tab-logins">
        <div class="card">
            <div class="card-body table-responsive">
                <table class="table table-hover w-100" id="loginsTable">
                    <thead>
                        <tr><th>#</th><th>المستخدم</th><th>النتيجة</th><th>السبب</th><th>IP</th><th>التاريخ</th></tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const activity = MR.table('#activityTable', '{{ route('activity.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'user_label', orderable: false },
        { data: 'action', name: 'action' },
        { data: 'model_label', orderable: false },
        { data: 'description', orderable: false, defaultContent: '—' },
        { data: 'ip_address', orderable: false, defaultContent: '—' },
        { data: 'created', name: 'created_at' }
    ], {
        filters: function () {
            return { user_id: $('#filterUser').val(), date_from: $('#filterDate').val() };
        }
    });

    $('#filterUser, #filterDate').on('change', function () { activity.ajax.reload(); });

    MR.table('#loginsTable', '{{ route('activity.logins') }}', [
        { data: 'id', name: 'id' },
        { data: 'user_label', orderable: false },
        { data: 'result_badge', orderable: false, searchable: false },
        { data: 'reason', defaultContent: '—' },
        { data: 'ip_address', defaultContent: '—' },
        { data: 'created', name: 'created_at' }
    ]);
});
</script>
@endpush