@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
    <style>
        .tx-11 {
            font-size: 11px;
        }

        .tx-12 {
            font-size: 12px;
        }

        .tx-13 {
            font-size: 13px;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">توكنات الوصول (API)</h4>
                <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ الأمان</span>
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <a href="{{ route('admin.security.login-logs.index') }}" class="btn btn-outline-primary btn-sm">
                <x-lucide-list class="me-1" width="20" height="20" /> سجلات الدخول
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="card-title mb-1">إدارة توكنات الوصول</h4>
                    <p class="text-muted tx-12 mb-0">
                        عرض وإدارة توكنات Sanctum المستخدمة في تطبيقات الموبايل
                    </p>
                </div>
                <div class="card-body">
                    {{-- الفلاتر --}}
                    <div class="row mb-4">
                        {{-- المستخدم --}}
                        <div class="col-lg-3 col-md-6 mb-3">
                            <label class="form-label">المستخدم</label>
                            <select id="user_idFilter" class="form-control select2">
                                <option value="">الكل</option>
                                @foreach ($users ?? [] as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- من تاريخ --}}
                        <div class="col-lg-2 col-md-6 mb-3">
                            <label class="form-label">من تاريخ</label>
                            <input type="date" id="date_fromFilter" class="form-control">
                        </div>

                        {{-- إلى تاريخ --}}
                        <div class="col-lg-2 col-md-6 mb-3">
                            <label class="form-label">إلى تاريخ</label>
                            <input type="date" id="date_toFilter" class="form-control">
                        </div>

                        {{-- بحث --}}
                        <div class="col-lg-3 col-md-6 mb-3">
                            <label class="form-label">بحث</label>
                            <input type="text" id="searchFilter" class="form-control"
                                placeholder="اسم التوكن أو المستخدم...">
                        </div>

                        {{-- أزرار --}}
                        <div class="col-lg-2 col-md-6 mb-3 d-flex align-items-end gap-2">
                            <button type="button" id="resetFilters" class="btn btn-outline-secondary">
                                <x-lucide-refresh-cw width="20" height="20" />
                            </button>
                            <button type="button" id="bulkDeleteBtn" class="btn btn-danger">
                                <x-lucide-trash-2 class="me-1" width="20" height="20" /> حذف بالفلتر
                            </button>
                        </div>
                    </div>

                    {{-- الجدول --}}
                    <div class="table-responsive">
                        <table id="accessTokensTable" class="table table-bordered table-hover text-nowrap">
                            <thead class="bg-light">
                                <tr>
                                    <th style="width: 60px;">#</th>
                                    <th>المستخدم</th>
                                    <th>اسم التوكن</th>
                                    <th>تاريخ الإنشاء</th>
                                    <th>آخر استخدام</th>
                                    <th>تاريخ الانتهاء</th>
                                    <th style="width: 80px;">إجراءات</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            // تفعيل Select2
            $('.select2').select2({
                minimumResultsForSearch: 0,
                allowClear: true,
                placeholder: 'اختر مستخدم...',
                width: '100%'
            });

            const filterdata = ['q', 'user_id', 'date_from', 'date_to'];
            const tablehead = ['id', 'user', 'name', 'created_at', 'last_used_at', 'expires_at', 'action'];

            // تهيئة DataTable
            const table = initFilteredDatatable({
                selector: '#accessTokensTable',
                url: "{{ url('/admin/security/access-tokens') }}",
                columns: tablehead,
                extraOptions: {
                    pageLength: 25,
                    lengthMenu: [
                        [10, 25, 50, 100],
                        [10, 25, 50, 100]
                    ],
                    order: [
                        [3, 'desc']
                    ],
                },
                filters: filterdata,
                refreshSelector: '#resetFilters',
                redrawDebounce: 300,
            });

            // Reset Filters
            $('#resetFilters').on('click', function() {
                $('#user_idFilter').val('').trigger('change');
                $('#date_fromFilter').val('');
                $('#date_toFilter').val('');
                $('#searchFilter').val('');
                table.draw();
            });

            // حذف توكن واحد
            $(document).on('click', '.delete-token', function() {
                const tokenId = $(this).data('id');

                Swal.fire({
                    title: 'تأكيد الحذف',
                    text: 'هل أنت متأكد من حذف هذا التوكن؟ سيتم تسجيل خروج المستخدم من الجهاز المرتبط.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: `/admin/security/access-tokens/${tokenId}`,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('تم!', response.message, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                Swal.fire('خطأ', 'حدث خطأ أثناء الحذف', 'error');
                            }
                        });
                    }
                });
            });

            // حذف بالفلتر
            $('#bulkDeleteBtn').on('click', function() {
                const userId = $('#user_idFilter').val();
                const dateFrom = $('#date_fromFilter').val();
                const dateTo = $('#date_toFilter').val();

                if (!userId && !dateFrom && !dateTo) {
                    Swal.fire('تنبيه', 'يجب تحديد فلتر واحد على الأقل (مستخدم أو تاريخ) قبل الحذف الجماعي',
                        'warning');
                    return;
                }

                let filterDesc = [];
                if (userId) {
                    const userName = $('#user_idFilter option:selected').text();
                    filterDesc.push(`المستخدم: ${userName}`);
                }
                if (dateFrom) filterDesc.push(`من: ${dateFrom}`);
                if (dateTo) filterDesc.push(`إلى: ${dateTo}`);

                Swal.fire({
                    title: 'تأكيد الحذف الجماعي',
                    html: `
                        <p>سيتم حذف جميع التوكنات المطابقة للفلاتر التالية:</p>
                        <ul class="text-start">${filterDesc.map(f => `<li>${f}</li>`).join('')}</ul>
                        <p class="text-danger mt-3"><strong>تحذير:</strong> سيتم تسجيل خروج جميع المستخدمين المتأثرين!</p>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، احذف الكل',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'جاري الحذف...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading()
                        });

                        $.ajax({
                            url: "{{ url('/admin/security/access-tokens/bulk-delete') }}",
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                user_id: userId,
                                date_from: dateFrom,
                                date_to: dateTo
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire('تم!', response.message, 'success');
                                    table.draw();
                                } else {
                                    Swal.fire('خطأ', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                const msg = xhr.responseJSON?.message ||
                                    'حدث خطأ أثناء الحذف';
                                Swal.fire('خطأ', msg, 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection