@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
    <style>
        .operations-status-container {
            max-width: 220px;
            max-height: 150px;
            overflow-y: auto;
            font-size: 0.85em;
        }

        .operation-item {
            padding: 3px 5px;
            margin-bottom: 3px;
            border: 1px solid #e9ecef;
            border-radius: 3px;
            background-color: #f8f9fa;
        }

        .operation-item:last-child {
            margin-bottom: 0;
        }

        .operations-status-container .badge {
            font-size: 0.75em;
            padding: 0.25em 0.5em;
        }

        .operations-status-container small {
            font-size: 0.75em;
        }

        /* تحسين شريط التمرير */
        .operations-status-container::-webkit-scrollbar {
            width: 4px;
        }

        .operations-status-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .operations-status-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        .operations-status-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .btn-purple {
            background-color: #6f42c1;
            border-color: #6f42c1;
            color: #fff;
        }
        .btn-purple:hover {
            background-color: #5a32a3;
            border-color: #5a32a3;
            color: #fff;
        }
        .badge-purple {
            background-color: #6f42c1;
            color: #fff;
        }

        /*   @media (max-width: 767.98px) {*/
        /* fix table layout so widths apply predictably */


        /*    table#orders th.col-product,*/
        /*    table#orders td.col-product {*/
        /*        width: 50% !important;*/
        /*        max-width: 50% !important;*/
        /*        overflow: hidden;*/
        /*        text-overflow: ellipsis;*/
        /*        white-space: nowrap;*/
        /*    }*/

        /* allow other cells to wrap if needed */
        /*    table#orders td {*/
        /*        white-space: normal;*/
        /*        word-break: break-word;*/
        /*    }*/
        /*}*/
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> الألعاب </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row -->
    <div id='gameId'>

        {{-- FILTERS --}}
        <div class="row">
            <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                <form id="filters">
                    <div class="card">
                        <div class="card-body">
                            <div class="row row-sm">
                                @canadmin('users_show')
                                <div class="col-lg-4 mt-2">
                                    <label class="mt-0"> مستخدم </label>
                                    <select name="user_id" id='userFilter' class="form-control select2">
                                        <option value="" selected> اختر مستخدم </option>
                                        @foreach (\App\Models\User::get() as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @endcanadmin

                                @include('admin.filters.gaproduct')
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> رقم الطلب أو معلومات اللاعب </label>
                                    <input type="text" id="idFilter" class="form-control"
                                        placeholder="ابحث برقم الطلب أو معلومات اللاعب...">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0">فلتر حالة العمليات </label>
                                    <select id="typeFilter" class="form-control">
                                        <option value="">كل الحالات</option>
                                        <option value="1">طلبات بدون عمليات</option>
                                        <option value="2">طلبات بعمليات معلقة (pending)</option>
                                        <option value="3">طلبات بعمليات مكتملة (completed)</option>
                                        <option value="4">طلبات بعمليات فاشلة (failed)</option>
                                        <option value="5">طلبات بعمليات ملغية (cancelled)</option>
                                        <option value="6">طلبات بعمليات خطأ (error)</option>
                                    </select>
                                </div>


                                <div class="col-lg-4 mt-2">
                                    <button type="button" id="refresh" class="btn btn-primary"> تحديث </button>
                                </div>
                            </div>

                        </div>

                    </div>

                </form>
            </div>
        </div>

        {{-- FILTERS --}}

        <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">
                                <h4 class="card-title mg-b-0"> الطلبات </h4>
                            </div>

                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm text-md-nowrap" style="font-size: 14px" id="orders">
                                    <thead>
                                        <tr>
                                            <th style="disable:none"> ID</th>

                                            <th class="col-product"> المنتج </th>
                                            <th> اي دي اللاعب</th>
                                            @canadmin('users_show')
                                            <th> المستخدم </th>
                                            @endcanadmin
                                            <th> القيمة </th>
                                            <th> الكميه </th>
                                            <th> حالة العمليات </th>
                                            <th> ملاحظات </th>
                                            <th> الحالة </th>
                                            <th> رقم الطلب </th>
                                            <th> اجراءات </th>
                                            <th> التوقيت </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @include('admin.order.infomodel')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    @include('admin.order.partials.operations-scripts')
    <script>
        $(function() {
            // const tablehead = ['id', 'product', 'gamer_data', 'user', 'price', 'count',
            //     'operations_status', 'method', 'status', 'order_number', 'action', 'created_at'
            // ];
            @php
                $tablehead = ['id', 'product', 'gamer_data'];
            @endphp

            @canadmin('users_show')
            @php $tablehead[] = 'user'; @endphp
        @endcan

        @php
            $tablehead = array_merge($tablehead, ['price', 'count', 'operations_status', 'notes', 'status', 'order_number', 'action', 'created_at']);
        @endphp

        const tablehead = @json($tablehead);

        const filterdata = ['user', 'game', 'product', 'id', 'type']
        const table = initFilteredDatatable({
            selector: '#orders',
            url: "{{ route('admin.orders.wait') }}",
            columns: tablehead,
            extraOptions: {
                "columnDefs": [{
                        "targets": [0],
                        "visible": false
                    } // 2 تعني العمود الثالث
                ]
            },

            filters: filterdata,
            refreshSelector: '#refresh',
            redrawDebounce: 200,
        });

        // Handle approve button click
        $('#orders tbody').on('click', '.approve', function() {
            var orderId = $(this).attr("value");

            Swal.fire({
                title: 'تأكيد قبول الطلب',
                text: 'هل أنت متأكد من قبول هذا الطلب؟',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#d33',
                confirmButtonText: 'نعم، قبول',
                cancelButtonText: 'إلغاء',
                html: `
                        <div class="mb-3">
                            <label for="swal-code" class="form-label">الكود (اختياري)</label>
                            <input type="text" id="swal-code" class="form-control" placeholder="أدخل الكود...">
                        </div>
                        <div class="mb-3">
                            <label for="swal-note" class="form-label">ملاحظة (اختيارية)</label>
                            <textarea id="swal-note" class="form-control" placeholder="ملاحظة..." rows="3"></textarea>
                        </div>
                    `,
                focusConfirm: false,
                preConfirm: () => {
                    return {
                        code: document.getElementById('swal-code').value,
                        note: document.getElementById('swal-note').value
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.orders.accepted') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: orderId,
                            code: result.value.code || null,
                            note: result.value.note || ''
                        },
                        success: function(response) {
                            if (response.err === false) {
                                Swal.fire('تم!', response.message, 'success');
                            } else {
                                Swal.fire('خطأ!', response.message, 'error');
                            }
                            table.draw();
                        },
                        error: function(xhr) {
                            let message = 'حدث خطأ أثناء معالجة الطلب';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            Swal.fire('خطأ!', message, 'error');
                        }
                    });
                }
            });
        });

        // Handle reject button click
        $('#orders tbody').on('click', '.reject', function() {
            var orderId = $(this).attr("value");

            Swal.fire({
                title: 'تأكيد رفض الطلب',
                text: 'هل أنت متأكد من رفض هذا الطلب؟ سيتم إرجاع المبلغ للمستخدم.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'نعم، رفض',
                cancelButtonText: 'إلغاء',
                input: 'textarea',
                inputPlaceholder: 'سبب الرفض (مطلوب)...',
                inputAttributes: {
                    'aria-label': 'سبب الرفض'
                }

            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.orders.reject') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: orderId,
                            note: result.value
                        },
                        success: function(response) {
                            if (response.err === false) {
                                Swal.fire('تم!', response.message, 'success');
                            } else {
                                Swal.fire('خطأ!', response.message, 'error');
                            }
                            table.draw();
                        },
                        error: function(xhr) {
                            let message = 'حدث خطأ أثناء معالجة الطلب';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            Swal.fire('خطأ!', message, 'error');
                        }
                    });
                }
            });
        });


        // Handle transactions button click
        $('#orders tbody').on('click', '.transactions', function() {
            const orderId = $(this).attr("value");
            showOrderTransactions(orderId, "{{ route('admin.orders.orderTransactionDetails') }}",
                "{{ csrf_token() }}", $(this));
        });

        // Handle resend operation button click
        handleOperationResend("{{ route('admin.operations.resend') }}");

        // Handle close modal
        // setupModalKeyboardShortcuts();

        // Handle order resend button click (معاجه button in actions)
        $('#orders tbody').on('click', '.resend', function() {
            var orderId = $(this).attr("value");

            Swal.fire({
                title: 'تأكيد إعادة الإرسال',
                text: 'هل أنت متأكد من إعادة إرسال هذا الطلب؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#ffc107',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'نعم، إعادة إرسال',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Add loading state
                    var button = $('[value="' + orderId + '"].resend');
                    button.prop('disabled', true).html(
                        `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جارٍ الإرسال...`);

                    $.ajax({
                        url: "{{ route('admin.orders.resend') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: orderId
                        },
                        success: function(response) {
                            if (response.err === false) {
                                Swal.fire('تم!', response.message, 'success');
                                // table.draw();
                            } else {
                                Swal.fire('خطأ!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            let message = 'حدث خطأ أثناء إعادة الإرسال';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            Swal.fire('خطأ!', message, 'error');
                        },
                        complete: function() {
                            // Remove loading state
                            button.prop('disabled', false).html('معاجه');
                        }
                    });
                }
            });
        });


        // Handle request client response button click
        $('#orders tbody').on('click', '.request-response', function() {
            var orderId = $(this).attr("value");

            Swal.fire({
                title: 'طلب رد من العميل',
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#6f42c1',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'إرسال الطلب',
                cancelButtonText: 'إلغاء',
                html: `
                    <div class="text-right" dir="rtl">
                        <div class="mb-3">
                            <label for="swal-admin-note" class="form-label"><strong>ملاحظة للعميل <span class="text-danger">*</span></strong></label>
                            <textarea id="swal-admin-note" class="form-control" placeholder="اكتب ملاحظتك للعميل..." rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="swal-auto-action" class="form-label"><strong>الإجراء التلقائي</strong></label>
                            <select id="swal-auto-action" class="form-control">
                                <option value="none">لا يوجد إجراء تلقائي</option>
                                <option value="cancel">إلغاء تلقائي بعد المدة</option>
                                <option value="complete">إكمال تلقائي بعد المدة</option>
                            </select>
                        </div>
                        <div class="mb-3" id="swal-hours-container" style="display:none;">
                            <label for="swal-auto-hours" class="form-label"><strong>المدة بالساعات <span class="text-danger">*</span></strong></label>
                            <input type="number" id="swal-auto-hours" class="form-control" placeholder="مثال: 24" min="1" max="720">
                            <small class="text-muted">الحد الأقصى 720 ساعة (30 يوم)</small>
                        </div>
                    </div>
                `,
                didOpen: () => {
                    document.getElementById('swal-auto-action').addEventListener('change', function() {
                        var container = document.getElementById('swal-hours-container');
                        container.style.display = this.value === 'none' ? 'none' : 'block';
                    });
                },
                preConfirm: () => {
                    const adminNote = document.getElementById('swal-admin-note').value;
                    const autoAction = document.getElementById('swal-auto-action').value;
                    const autoHours = document.getElementById('swal-auto-hours').value;

                    if (!adminNote || adminNote.trim() === '') {
                        Swal.showValidationMessage('الملاحظة مطلوبة');
                        return false;
                    }
                    if (autoAction !== 'none' && (!autoHours || autoHours < 1)) {
                        Swal.showValidationMessage('المدة الزمنية مطلوبة عند تحديد إجراء تلقائي');
                        return false;
                    }

                    return {
                        admin_note: adminNote,
                        auto_action: autoAction,
                        auto_action_hours: autoAction !== 'none' ? autoHours : null
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.orders.requestResponse') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: orderId,
                            admin_note: result.value.admin_note,
                            auto_action: result.value.auto_action,
                            auto_action_hours: result.value.auto_action_hours
                        },
                        success: function(response) {
                            if (response.err === false) {
                                Swal.fire('تم!', response.message, 'success');
                            } else {
                                Swal.fire('خطأ!', response.message, 'error');
                            }
                            table.draw();
                        },
                        error: function(xhr) {
                            let message = 'حدث خطأ أثناء معالجة الطلب';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                            Swal.fire('خطأ!', message, 'error');
                        }
                    });
                }
            });
        });


        });
    </script>
    <script>
        $(function() {
            $('.select2').select2()
        });
    </script>
@endsection