@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection
@include('admin.helper.tittle', ['title' => 'العمليات الخارجية'])
@section('content')
    <!-- row -->
    <div id='blogId'>
        <div>
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <div class="d-flex justify-content-between align-items-center">
                                <h4 class="card-title mg-b-0">العمليات الخارجية</h4>
                                <small class="text-muted">إدارة العمليات المرسلة للمواقع الخارجية</small>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Statistics Cards -->
                            <div class="row mb-4">
                                <div class="col-md-3">
                                    <div class="card bg-primary text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['total'] ?? 0 }}</h4>
                                                    <small>إجمالي العمليات</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-settings width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-warning text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['pending'] ?? 0 }}</h4>
                                                    <small>العمليات المعلقة</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-clock width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-success text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['completed'] ?? 0 }}</h4>
                                                    <small>العمليات المكتملة</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-check width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-danger text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['failed'] ?? 0 }}</h4>
                                                    <small>العمليات الفاشلة</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-x width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Statistics Row -->
                            <div class="row mb-4">
                                <div class="col-md-3">
                                    <div class="card bg-secondary text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['cancelled'] ?? 0 }}</h4>
                                                    <small>العمليات الملغية</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-ban width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="card bg-info text-white">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <h4 class="mb-0">{{ $stats['error'] ?? 0 }}</h4>
                                                    <small>العمليات بحالة خطأ</small>
                                                </div>
                                                <div class="align-self-center">
                                                    <x-lucide-alert-triangle width="32" height="32" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="col-md-6">-->
                                <!--   <-->
                                <!--</div>-->

                            </div>

                            <!-- Filters Section -->
                            <div class="row row-sm mb-3">
                                @include('admin.filters.userwithgames')

                                <!-- Status Filter -->
                                <div class="col-lg-3 mt-2">
                                    <label for="statusFilter">الحالة</label>
                                    <select class="form-control select2" id="statusFilter" name="status">
                                        <option value="">جميع الحالات</option>
                                        <option value="pending">معلق</option>
                                        <option value="completed">مكتمل</option>
                                        <option value="failed">فشل</option>
                                        <option value="cancelled">ملغي</option>
                                        <option value="error">خطأ</option>
                                    </select>
                                </div>

                                <!-- Date Range Filter with a default value past month  -->
                                <div class="col-lg-3 mt-2">
                                    <label for="date_fromFilter">من تاريخ</label>
                                    <input type="date" class="form-control" id="date_fromFilter" name="date_from"
                                        value="{{ request('date_from', \Carbon\Carbon::now()->subDays(30)->toDateString()) }}">
                                </div>

                                <div class="col-lg-3 mt-2">
                                    <label for="date_toFilter">إلى تاريخ</label>
                                    <input type="date" class="form-control" id="date_toFilter" name="date_to"
                                        value="{{ request('date_to', \Carbon\Carbon::now()->toDateString()) }}">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> player </label>
                                    <input type="text" id="player" class="form-control">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label for="order_pendingFilter">حالة الطلب</label>
                                    <select class="form-control select2" id="order_pendingFilter" name="order_pending">
                                        <option value="">جميع الطلبات</option>
                                        <option value="0">جميع الطلبات</option>
                                        <option value="1">الطلبات المعلقة فقط</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label for="order_numberFilter">رقم الطلب</label>
                                    <input type="text" class="form-control" id="order_numberFilter" name="order_number">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> chargeCode </label>
                                    <input type="text" id="chargeCodeFilter" class="form-control">
                                </div>
                                <div class="col-lg-3 mt-2 d-flex align-items-end flex-wrap">
                                    <button type="button" id="refresh" class="btn btn-primary me-2 mb-2">
                                        <x-lucide-refresh-cw width="20" height="20" /> تحديث
                                    </button>
                                    <button type="button" id="clearFilters" class="btn btn-secondary mb-2">
                                        <x-lucide-x width="20" height="20" /> مسح
                                    </button>
                                    @if (!empty($canBulkResend))
                                        <button type="button" id="bulkResendVisible" class="btn btn-warning mb-2">
                                            <x-lucide-redo-2 width="20" height="20" /> إعادة إرسال الظاهر
                                        </button>
                                    @endif
                                </div>
                            </div>

                            <!-- Operations Table -->
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="operationsTable">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>المعرف</th>
                                            <th>المستخدم</th>
                                            <th>رقم الطلب</th>
                                            <th>اللعبة</th>
                                            <th>المنتج</th>
                                            <th>الحالة</th>
                                            <th> الكود</th>

                                            <th>ملاحظات</th>
                                            <th>الإجراءات</th>
                                            <th>تاريخ الإنشاء</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Operation Details Modal -->
    <div class="modal fade" id="operationDetailsModal" tabindex="-1" aria-labelledby="operationDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="operationDetailsModalLabel">تفاصيل العملية</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="operationDetailsContent">
                    <!-- Content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(function() {
            // Initialize DataTable
            const tablehead = ['id', 'user', 'order_number', 'game', 'product', 'status', 'chargeCode', 'notes',
                'action',
                'time'
            ];
            const filterdata = ['user', 'game', 'product', 'status', 'date_from', 'date_to', 'player',
                'order_pending', 'order_number', 'chargeCode'
            ];

            const table = initUrlSyncedDatatable({
                selector: '#operationsTable',
                url: "{{ route('admin.operations.index') }}",
                columns: tablehead,
                extraOptions: {},
                filters: filterdata,
                refreshSelector: '#refresh',
                redrawDebounce: 200,
            });

            // Clear filters

            @if (!empty($canBulkResend))
                // Resend all visible operations based on current filters/page
                $('#bulkResendVisible').on('click', function() {
                    const tokenElement = document.head.querySelector('meta[name="csrf-token"]');
                    const csrfToken = tokenElement ? tokenElement.content : null;

                    if (!csrfToken) {
                        Swal.fire({
                            title: 'خطأ!',
                            text: 'تعذر العثور على رمز الحماية. يرجى إعادة تحميل الصفحة.',
                            icon: 'error'
                        });
                        return;
                    }

                    const ids = Array.from(new Set(
                        $('#operationsTable tbody .resend')
                        .map(function() {
                            return $(this).data('id');
                        })
                        .get()
                        .filter(Boolean)
                    ));

                    if (!ids.length) {
                        Swal.fire({
                            title: 'لا توجد عمليات',
                            text: 'لا توجد عمليات قابلة لإعادة الإرسال في الصفحة الحالية.',
                            icon: 'info'
                        });
                        return;
                    }

                    Swal.fire({
                        title: 'إعادة إرسال العمليات الظاهرة؟',
                        html: `سيتم إعادة إرسال ${ids.length} عملية.<div id="bulk-resend-status" class="mt-3 text-start small"></div>`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'نعم، أعد الإرسال',
                        cancelButtonText: 'إلغاء',
                        showLoaderOnConfirm: true,
                        allowOutsideClick: () => !Swal.isLoading(),
                        preConfirm: () => {
                            const statusEl = Swal.getHtmlContainer() ?
                                Swal.getHtmlContainer().querySelector('#bulk-resend-status') :
                                null;

                            if (statusEl) {
                                statusEl.textContent = 'جاري إعادة إرسال العمليات...';
                            }

                            const request = $.ajax({
                                url: '{{ route('admin.operations.bulk-resend') }}',
                                type: 'POST',
                                data: {
                                    _token: csrfToken,
                                    ids
                                }
                            });

                            request.fail(function(xhr) {
                                const responseJSON = xhr && xhr.responseJSON ? xhr
                                    .responseJSON : null;
                                const message = responseJSON && responseJSON.message ?
                                    responseJSON.message : 'حدث خطأ غير متوقع';
                                if (statusEl) {
                                    statusEl.textContent = message;
                                }
                                Swal.showValidationMessage(message);
                            });

                            return request;
                        }
                    }).then((result) => {
                        if (!result.isConfirmed || !result.value) {
                            return;
                        }

                        const response = result.value;
                        const summary = response.summary || {
                            total: ids.length,
                            success: 0,
                            failed: ids.length
                        };

                        let html = `<p>تمت إعادة إرسال ${summary.success} عملية بنجاح.</p>`;

                        if (summary.failed) {
                            html += `<p>فشل إعادة إرسال ${summary.failed} عملية.</p>`;
                            if (Array.isArray(response.results) && response.results.length) {
                                const failures = response.results.filter(item => !item.success)
                                    .slice(0,
                                        3);
                                if (failures.length) {
                                    html += '<ul class="text-start">';
                                    failures.forEach((failure) => {
                                        html +=
                                            `<li>العملية ${failure.id}: ${failure.message}</li>`;
                                    });
                                    if (summary.failed > failures.length) {
                                        html +=
                                            `<li>أخطاء إضافية: ${summary.failed - failures.length}</li>`;
                                    }
                                    html += '</ul>';
                                }
                            }
                        }

                        Swal.fire({
                            title: response.success ? 'تم بنجاح' : 'اكتملت مع أخطاء',
                            html,
                            icon: response.success ? 'success' : 'warning'
                        });

                        table.draw(false);
                    });
                });
            @endif


            // Resend operation
            $('#operationsTable tbody').on('click', '.resend', function() {
                const operationId = $(this).data('id');
                const tokenElement = document.head.querySelector('meta[name="csrf-token"]');

                Swal.fire({
                    title: 'إعادة إرسال العملية؟',
                    text: 'هل أنت متأكد من إعادة إرسال هذه العملية؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، أعد الإرسال',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const data = {
                            '_token': tokenElement.content,
                            'id': operationId,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('admin.operations.resend') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                Swal.hideLoading();
                                if (response.success) {
                                    Swal.fire({
                                        title: 'تم بنجاح!',
                                        text: response.message,
                                        icon: 'success',
                                        timer: 2000
                                    });
                                    // table.draw();
                                } else {
                                    Swal.fire({
                                        title: 'خطأ!',
                                        text: response.message,
                                        icon: 'error'
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.hideLoading();
                                const response = xhr.responseJSON;
                                Swal.fire({
                                    title: 'خطأ!',
                                    text: response ? response.message :
                                        'حدث خطأ غير متوقع',
                                    icon: 'error'
                                });
                            }
                        });
                    }
                });
            });

            // Delete operation
            $('#operationsTable tbody').on('click', '.delete', function() {
                const operationId = $(this).data('id');
                const tokenElement = document.head.querySelector('meta[name="csrf-token"]');

                Swal.fire({
                    title: 'حذف العملية؟',
                    text: 'هل أنت متأكد من حذف هذه العملية؟ لا يمكن التراجع عن هذا الإجراء!',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'نعم، احذف',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const data = {
                            '_token': tokenElement.content,
                            'id': operationId,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('admin.operations.delete') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                Swal.hideLoading();
                                if (response.success) {
                                    Swal.fire({
                                        title: 'تم الحذف!',
                                        text: response.message,
                                        icon: 'success',
                                        timer: 2000
                                    });
                                    table.draw(); // Refresh the table
                                } else {
                                    Swal.fire({
                                        title: 'خطأ!',
                                        text: response.message,
                                        icon: 'error'
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.hideLoading();
                                const response = xhr.responseJSON;
                                Swal.fire({
                                    title: 'خطأ!',
                                    text: response ? response.message :
                                        'حدث خطأ غير متوقع',
                                    icon: 'error'
                                });
                            }
                        });
                    }
                });
            });

            // Refund operation codes
            $('#operationsTable tbody').on('click', '.refund-codes', function() {
                const operationId = $(this).data('id');
                const tokenElement = document.head.querySelector('meta[name="csrf-token"]');

                Swal.fire({
                    title: 'استرداد رمز الشحن؟',
                    text: 'هل أنت متأكد من استرداد رمز الشحن لهذه العملية؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم، استرد الرمز',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const data = {
                            '_token': tokenElement.content,
                            'id': operationId,
                        };

                        Swal.showLoading();

                        $.ajax({
                            url: '{{ route('admin.operations.refund.codes') }}',
                            type: 'POST',
                            data: data,
                            success: function(response) {
                                Swal.hideLoading();
                                if (response.success) {
                                    Swal.fire({
                                        title: 'تم الاسترداد!',
                                        text: response.message,
                                        icon: 'success',
                                        timer: 2000
                                    });
                                    table.draw(); // Refresh the table
                                } else {
                                    Swal.fire({
                                        title: 'خطأ!',
                                        text: response.message,
                                        icon: 'error'
                                    });
                                }
                            },
                            error: function(xhr) {
                                Swal.hideLoading();
                                const response = xhr.responseJSON;
                                Swal.fire({
                                    title: 'خطأ!',
                                    text: response ? response.message :
                                        'حدث خطأ غير متوقع',
                                    icon: 'error'
                                });
                            }
                        });
                    }
                });
            });

            // View operation details
            $('#operationsTable tbody').on('click', '.view-details', function() {
                const operationId = $(this).data('id');
                const tokenElement = document.head.querySelector('meta[name="csrf-token"]');

                $.ajax({
                    url: '{{ route('admin.operations.details') }}',
                    type: 'POST',
                    data: {
                        '_token': tokenElement.content,
                        'id': operationId
                    },
                    success: function(response) {
                        if (response.success) {
                            showOperationDetails(response.data);
                        } else {
                            Swal.fire({
                                title: 'خطأ!',
                                text: response.message,
                                icon: 'error'
                            });
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        Swal.fire({
                            title: 'خطأ!',
                            text: response ? response.message : 'حدث خطأ غير متوقع',
                            icon: 'error'
                        });
                    }
                });
            });

            function showOperationDetails(data) {
                const detailsHtml = `
                    <div class="row">
                        <div class="col-md-6">
                            <h6>معلومات أساسية</h6>
                            <table class="table table-sm">
                                <tr><td><strong>المعرف:</strong></td><td>${data.id}</td></tr>
                                <tr><td><strong>UUID:</strong></td><td>${data.uuid}</td></tr>
                                <tr><td><strong>المستخدم:</strong></td><td>${data.user}</td></tr>
                                <tr><td><strong>رقم الطلب:</strong></td><td>${data.order_id}</td></tr>
                                <tr><td><strong>الحالة:</strong></td><td><span class="badge badge-${data.status_badge}">${data.status}</span></td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>تفاصيل المنتج</h6>
                            <table class="table table-sm">
                                <tr><td><strong>اللعبة:</strong></td><td>${data.game}</td></tr>
                                <tr><td><strong>المنتج:</strong></td><td>${data.product}</td></tr>
                                <tr><td><strong>السعر الخارجي:</strong></td><td>${data.external_price}</td></tr>
                                <tr><td><strong>كود الشحن:</strong></td><td>${data.charge_code}</td></tr>
                                <tr><td><strong>الجهاز المحلي:</strong></td><td>${data.local_device}</td></tr>
                            </table>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>معلومات إضافية</h6>
                            <table class="table table-sm">
                                <tr><td><strong>بيانات اللاعب:</strong></td><td>${data.gamer_data}</td></tr>
                                <tr><td><strong>معرف الطلب الخارجي:</strong></td><td>${data.external_order_id}</td></tr>
                                <tr><td><strong>الملاحظات:</strong></td><td>${data.notes}</td></tr>
                                <tr><td><strong>تاريخ الإنشاء:</strong></td><td>${data.created_at}</td></tr>
                                <tr><td><strong>تاريخ التحديث:</strong></td><td>${data.updated_at}</td></tr>
                            </table>
                        </div>
                    </div>
                `;

                $('#operationDetailsContent').html(detailsHtml);
                $('#operationDetailsModal').modal('show');
            }
        });

        // Initialize Select2
        $(function() {
            $('.select2').select2({
                placeholder: "اختر...",
                allowClear: true
            });
        });
    </script>
@endsection