@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@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')
                                @include('admin.filters.userwithgames')
                                @endcanadmin
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> رقم الطلب </label>
                                    <input type="text" id="idFilter" class="form-control">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label for="statusFilter" class="mt-0"> الحالة </label>
                                    <select class="form-control select2" id="statusFilter" name="status">
                                        <option value=""> جميع الحالات </option>
                                        <option value="accepted"> مقبول </option>
                                        <option value="rejected"> مرفوض </option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label for="date_fromFilter" class="mt-0"> من تاريخ </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" class="mt-0"> إلى تاريخ </label>
                                    <input type="date" class="form-control" id="date_toFilter" name="date_to"
                                        value="{{ request('date_to', \Carbon\Carbon::now()->toDateString()) }}">
                                </div>
                                @include('admin.filters.curr')
                                <div class="col-lg-4 mt-2">
                                    <button type="button" id="refresh" class="btn btn-primary"> تحديث </button>
                                    <button type="button" id="exportBtn" class="btn btn-success ml-2">
                                        <x-lucide-download width="20" height="20" /> تصدير Excel
                                    </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 text-md-nowrap"style="font-size: 10px" id="orders">
                                    <thead>
                                        <tr>
                                            <th> ID</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>
                                            <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', 'order_number', 'user', 'game', 'product', 'price', 'count', 'gamer_data',
            //     'notes',
            //     'method', 'status', 'action', 'created_at'
            // ];
            @php
                $tablehead = ['id', 'order_number'];
            @endphp

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

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

        const tablehead = @json($tablehead);
        const filterdata = ['user', 'game', 'product', 'id', 'status', 'date_from', 'date_to', 'currency']

        const table = initUrlSyncedDatatable({
            selector: '#orders',
            url: "{{ route('admin.orders.index') }}",
            columns: tablehead,
            extraOptions: {
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100, 500, 1000, -1],
                    [10, 25, 50, 100, 500, 1000, 'الكل']
                ]
            },
            filters: filterdata,
            refreshSelector: '#refresh',
            redrawDebounce: 200,
        });

        // 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 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.acceptedafter') }}",
                        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');
                                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');
                        }
                    });
                }
            });
        });

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

        // 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.rejectedafter') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: orderId,
                            note: result.value
                        },
                        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');
                        }
                    });
                }
            });
        });

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

        // Handle close modal
        // setupModalKeyboardShortcuts();

        $('#exportBtn').on('click', function() {
            const button = $(this);
            const originalHtml = button.html();
            const loaderHtml = `{!! svg('lucide-loader-2', ['class' => 'animate-spin', 'width' => 20, 'height' => 20])->toHtml() !!}`;

            button.prop('disabled', true).html(loaderHtml + ' جاري التحضير...');

            const filters = {
                user: $('#userFilter').val() || '',
                game: $('#gameFilter').val() || '',
                product: $('#productFilter').val() || '',
                id: $('#idFilter').val() || '',
                status: $('#statusFilter').val() || '',
                date_from: $('#date_fromFilter').val() || '',
                date_to: $('#date_toFilter').val() || '',
                currency: $('#currencyFilter').val() || '',
                type: $('#typeFilter').val() || ''
            };

            const baseUrl = "{{ route('admin.orders.export') }}";
            const params = new URLSearchParams();
            Object.keys(filters).forEach(key => {
                if (filters[key] && filters[key] !== '') {
                    params.append(key, filters[key]);
                }
            });
            const exportUrl = baseUrl + (params.toString() ? '?' + params.toString() : '');

            $.get(exportUrl)
                .done(function(data) {
                    if (data.success && data.export_id) {
                        button.html(loaderHtml + ` جاري التصدير (${data.count} طلب)...`);
                        pollExportStatus(data.export_id, button, originalHtml, loaderHtml);
                    } else {
                        toastr.error(data.error || 'حدث خطأ');
                        button.prop('disabled', false).html(originalHtml);
                    }
                })
                .fail(function(xhr) {
                    const msg = xhr.responseJSON?.error || 'حدث خطأ أثناء التصدير';
                    toastr.error(msg);
                    button.prop('disabled', false).html(originalHtml);
                });
        });

        function pollExportStatus(exportId, button, originalHtml, loaderHtml) {
            const statusUrl = "{{ route('admin.orders.export.status', ':id') }}".replace(':id', exportId);
            const downloadUrl = "{{ route('admin.orders.export.download', ':id') }}".replace(':id', exportId);

            const interval = setInterval(function() {
                $.get(statusUrl)
                    .done(function(data) {
                        if (data.status === 'completed') {
                            clearInterval(interval);
                            toastr.success('تم تحضير الملف بنجاح! جاري التحميل...');
                            button.prop('disabled', false).html(originalHtml);
                            window.location.href = downloadUrl;
                        } else if (data.status === 'failed') {
                            clearInterval(interval);
                            toastr.error(data.error || 'فشل التصدير');
                            button.prop('disabled', false).html(originalHtml);
                        } else {
                            button.html(loaderHtml + ' جاري معالجة الملف...');
                        }
                    })
                    .fail(function() {
                        clearInterval(interval);
                        toastr.error('فشل في التحقق من حالة التصدير');
                        button.prop('disabled', false).html(originalHtml);
                    });
            }, 3000);
        }


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

        // دالة toggle للملاحظات
        function toggleNotes(uniqueId) {
            const hiddenDiv = document.getElementById(uniqueId + '-hidden');
            const buttonText = document.getElementById(uniqueId + '-text');

            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
                buttonText.textContent = 'إخفاء الملاحظات الإضافية';
            } else {
                hiddenDiv.style.display = 'none';
                // احسب عدد الملاحظات المخفية
                const hiddenNotesCount = hiddenDiv.querySelectorAll('.mb-1').length;
                buttonText.textContent = 'عرض ' + hiddenNotesCount + ' ملاحظة أخرى';
            }
        }
    </script>
@endsection