@extends('admin.layouts.master')
@section('css')
    <!-- Internal Data table 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'>
        <div>

            <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="main-content-label mg-b-5">
                                    تصفية البيانات
                                </div>
                                <div class="row row-sm">
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">اسم المستخدم</label>
                                        <input type="text" id="nameFilter" class="form-control" placeholder="أدخل الاسم">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">البريد الإلكتروني</label>
                                        <input type="text" id="emailFilter" class="form-control"
                                            placeholder="أدخل البريد الإلكتروني">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0"> رقم الهاتف </label>
                                        <input type="text" id="mobileFilter" class="form-control">
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">الحالة</label>
                                        <select id="statusFilter" class="form-control">
                                            <option value="">جميع الحالات</option>
                                            <option value="1">نشط</option>
                                            <option value="0">غير نشط</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0"> فلتر سالب </label>
                                        <select id="balanceFilter" class="form-control">
                                            <option value="">جميع الحالات</option>
                                            <option value="1"> دائن</option>
                                            <option value="0"> مدين </option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 mt-2">
                                        <label class="mt-0">ترتيب الرصيد</label>
                                        <select id="balance_sortFilter" class="form-control">
                                            <option value="">الافتراضي</option>
                                            <option value="desc">من الأعلى للأقل</option>
                                            <option value="asc">من الأقل للأعلى</option>
                                        </select>
                                    </div>
                                    @include('admin.filters.curr')
                                    @if (isset($vendors) && $vendors->count())
                                        <div class="col-lg-3 mt-2">
                                            <label class="mt-0">التاجر</label>
                                            <select id="vendorFilter" class="form-control select2">
                                                <option value="">كل التجار</option>
                                                <option value="none">بدون تاجر</option>
                                                @foreach ($vendors as $vendor)
                                                    <option value="{{ $vendor->id }}">
                                                        {{ $vendor->name() }} _
                                                        {{ $vendor->user->currency->symbol ?? ' ' }} _
                                                        {{ $vendor->user->profit_rate ?? ' ' }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </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>
                                    @if (can_admin('users_delete'))
                                        <a href="{{ route('admin.users.trashed') }}" class="btn btn-warning btn-sm ml-2">
                                            <x-lucide-trash-2 width="20" height="20" /> المستخدمين المحذوفين
                                        </a>
                                    @endif
                                    @if (can_admin('users_show'))
                                        <a href="{{ route('admin.users.export') }}" class="btn btn-success btn-sm ml-2">
                                            <x-lucide-download width="20" height="20" /> تصدير المستخدمين
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div id="balanceStats" class="row mt-3" style="display:none">
                            <div class="col-md-3 col-sm-6 mb-2">
                                <div class="alert alert-success py-2 px-3 mb-0">
                                    <strong>اجمالي الارصدة الموجبة:</strong>
                                    <span id="sumPositive">0</span>
                                    <span id="sumPositiveCur"></span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-2">
                                <div class="alert alert-danger py-2 px-3 mb-0">
                                    <strong>اجمالي الارصدة السالبة:</strong>
                                    <span id="sumNegative">0</span>
                                    <span id="sumNegativeCur"></span>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap" id="users">
                                    <thead>
                                        <tr>
                                            <th> id</th>
                                            <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>
    <div class="modal fade" id="userDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content" id="userDetailsModalContent">
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('vue')
    <script>
        $(function() {
            $(document).ready(function() {
                const filterdata = ['name', 'email', 'status', 'currency', 'mobile', 'vendor', 'balance']
                filterdata.push('balance_sort');
                const tablehead = ['id', 'name', 'curr', 'vendor', 'email', 'mobile', 'status', 'balance',
                    'min_balance_col', 'action', 'time'
                ]
                const table = initDatatable(
                    '#users',
                    "{{ route('admin.users.index') }}",
                    tablehead, {},
                    filterdata
                );
                $('#nameFilter,#mobileFilter, #emailFilter, #statusFilter, #currencyFilter, #vendorFilter,#balanceFilter,#balance_sortFilter')
                    .on(
                        'keyup change',
                        function() {
                            table.draw();
                            fetchBalanceStats();
                        });

            });
            $('.select2').select2();

            // جعل البحث تلقائي عند تغيير المدخلات            // إضافة أو سحب رصيد
            $('#users tbody').on('click', '.mony', function() {
                let id = $(this).attr("value");
                let curr = $(this).attr("data-cur");
                let maxAddBalance = parseFloat($(this).attr("data-max")) || 0;
                let maxNote = maxAddBalance > 0 ? `<small class="text-muted d-block mt-1">الحد الأقصى للإضافة: ${maxAddBalance} ${curr}</small>` : '';
                let maxAttr = maxAddBalance > 0 ? `max="${maxAddBalance}"` : '';

                Swal.fire({
                    title: `إدارة الرصيد بعملة ${curr}`,
                    html: `
                        <div class="mb-3">
                            <label class="form-label">نوع العملية:</label>
                            <select id="operation-type" class="form-control">
                                <option value="add">إضافة رصيد</option>
                                <option value="dis">سحب رصيد</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">المبلغ:</label>
                            <input id="amount-input" class="form-control" type="number" step="0.01" min="0" ${maxAttr} placeholder="أدخل المبلغ">
                            <span id="max-note">${maxNote}</span>
                        </div>
                    `,
                    focusConfirm: false,
                    showCancelButton: true,
                    confirmButtonText: 'تنفيذ',
                    cancelButtonText: 'إلغاء',
                    didOpen: () => {
                        const opSelect = document.getElementById('operation-type');
                        const amountInput = document.getElementById('amount-input');
                        const maxNoteEl = document.getElementById('max-note');
                        opSelect.addEventListener('change', function() {
                            if (this.value === 'dis') {
                                amountInput.removeAttribute('max');
                                maxNoteEl.innerHTML = '';
                            } else {
                                if (maxAddBalance > 0) {
                                    amountInput.setAttribute('max', maxAddBalance);
                                    maxNoteEl.innerHTML = `<small class="text-muted d-block mt-1">الحد الأقصى للإضافة: ${maxAddBalance} ${curr}</small>`;
                                }
                            }
                        });
                    },
                    preConfirm: () => {
                        const operationType = document.getElementById('operation-type').value;
                        const amount = document.getElementById('amount-input').value;

                        if (!amount || amount <= 0) {
                            Swal.showValidationMessage('يرجى إدخال مبلغ صحيح');
                            return false;
                        }

                        if (operationType === 'add' && maxAddBalance > 0 && parseFloat(amount) > maxAddBalance) {
                            Swal.showValidationMessage(`الحد الأقصى لإضافة الرصيد في المرة الواحدة هو ${maxAddBalance} ${curr}`);
                            return false;
                        }

                        return {
                            operationType,
                            amount
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const {
                            operationType,
                            amount
                        } = result.value;

                        Swal.fire({
                            title: 'جارٍ المعالجة...',
                            allowOutsideClick: false,
                            didOpen: () => Swal.showLoading(),
                        });

                        const data = {
                            '_token': "{{ csrf_token() }}",
                            'id': id,
                            'type': operationType,
                            'amount': amount,
                        };

                        adawe('{{ route('admin.users.addbalance') }}', data)
                            .then(() => {
                                $('#users').DataTable().draw();
                                Swal.close();
                            })
                            .catch(() => {
                                Swal.fire('خطأ', 'حدث خطأ أثناء معالجة العملية', 'error');
                            });
                    }
                });
            });


            const URL = '{{ route('admin.users.simplechange') }}';
            const TOKEN = '{{ csrf_token() }}';
            // كل الأنواع المسموح بيها (لو عايز تمنع أي تايب غريب)
            const ALLOWED_TYPES = [
                'status',
                'canRequestBalance',
                'canTransferBalance'
            ];
            // هاندلر واحد لكل الأزرار
            $('#users tbody').on('click', '.toggle', function() {
                const $btn = $(this);
                const id = $btn.data('id') || $btn.attr('value');
                const type = $btn.data('type') || $btn.attr('class').split(' ')[0];
                // لو فيه تايب مش مسموح بيه اخرج بدري
                if (!ALLOWED_TYPES.includes(type)) return;
                Swal.fire({
                    title: 'هل أنت متأكد من تغيير الحالة؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء',
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    // نافذة تحميل صغيرة
                    Swal.fire({
                        title: 'جارٍ التغيير...',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading(),
                    });

                    // الطلب AJAX (الدالة adawe بتاعتك)
                    adawe(URL, {
                            _token: TOKEN,
                            id,
                            type
                        })
                        .then(() => {
                            $('#users').DataTable().ajax.reload(null,
                                false); // من غير ما يرجع لأول صفحة
                            Swal.close();
                        })
                        .catch(() => {
                            Swal.fire('خطأ', 'حدث خطأ أثناء الحفظ', 'error');
                        });
                });
            });

            // زر تغيير حالة التحقق
            const VERIFY_URL = '{{ route('admin.users.toggleVerification') }}';
            $('#users tbody').on('click', '.toggle-verify', function() {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'تغيير حالة التحقق؟',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    Swal.fire({
                        title: 'جارٍ التنفيذ...',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                    $.post(VERIFY_URL, {
                        _token: TOKEN,
                        id
                    }).done(() => {
                        $('#users').DataTable().ajax.reload(null, false);
                        Swal.close();
                    }).fail(() => {
                        Swal.fire('خطأ', 'تعذر تغيير حالة التحقق', 'error');
                    });
                });
            });

            // زر حظر/رفع حظر إرسال الأكواد
            $('#users tbody').on('click', '.toggle-code-ban', function() {
                const id = $(this).data('id');
                const banned = $(this).data('banned') == 1;
                const actionText = banned ? 'رفع الحظر عن إرسال الأكواد؟' :
                    'حظر إرسال الأكواد لهذا المستخدم؟';
                Swal.fire({
                    title: actionText,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'نعم',
                    cancelButtonText: 'إلغاء'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    Swal.fire({
                        title: 'جارٍ التنفيذ...',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                    $.post(URL, {
                            _token: TOKEN,
                            id,
                            type: 'codeBan'
                        })
                        .done(() => {
                            $('#users').DataTable().ajax.reload(null, false);
                            Swal.close();
                        })
                        .fail(() => {
                            Swal.fire('خطأ', 'تعذر تغيير حالة الحظر', 'error');
                        });
                });
            });

            // زر حذف المستخدم (soft delete)
            $('#users tbody').on('click', '.delete-user', function() {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'هل تريد حذف هذا المستخدم؟',
                    text: 'يمكنك استعادته لاحقاً من صفحة المستخدمين المحذوفين',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، حذف',
                    cancelButtonText: 'إلغاء'
                }).then((r) => {
                    if (!r.isConfirmed) return;
                    Swal.fire({
                        title: 'جارٍ الحذف...',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                    $.ajax({
                        url: "{{ url('admin/users/delete') }}/" + id,
                        type: 'DELETE',
                        data: { _token: TOKEN },
                        success: function(res) {
                            if (res.err === false) {
                                Swal.fire('تم', res.msg, 'success');
                                $('#users').DataTable().ajax.reload(null, false);
                            } else {
                                Swal.fire('خطأ', res.msg || 'حدث خطأ', 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('خطأ', 'تعذر حذف المستخدم', 'error');
                        }
                    });
                });
            });

            $('#currency').change(function() {
                table.draw();
                fetchBalanceStats();
            });
            $('#refresh').click(function() {
                table.draw();
                fetchBalanceStats();
            });
            const userDetailsModalElement = document.getElementById('userDetailsModal');
            const userDetailsModal = (typeof bootstrap !== 'undefined' && userDetailsModalElement) ?
                new bootstrap.Modal(userDetailsModalElement) :
                null;

            function showLoadingModal() {
                if (!userDetailsModal) {
                    return;
                }
                $('#userDetailsModalContent').html(`
                    <div class="modal-header">
                        <h5 class="modal-title">جاري التحميل...</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center py-5">
                        <div class="spinner-border text-primary" role="status"></div>
                    </div>
                `);
                userDetailsModal.show();
            }

            function showErrorModal(message) {
                if (!userDetailsModal) {
                    return;
                }
                $('#userDetailsModalContent').html(`
                    <div class="modal-header">
                        <h5 class="modal-title">تعذر تحميل البيانات</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" role="alert">${message}</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                    </div>
                `);
                userDetailsModal.show();
            }

            $('#users tbody').on('click', '.show-user-details', function() {
                const url = $(this).data('url');
                if (!url || !userDetailsModal) {
                    return;
                }
                showLoadingModal();
                $.get(url)
                    .done(function(response) {
                        if (response && response.err === false && response.html) {
                            $('#userDetailsModalContent').html(response.html);
                        } else {
                            showErrorModal('تعذر تحميل تفاصيل المستخدم.');
                        }
                    })
                    .fail(function() {
                        showErrorModal('حدث خطأ أثناء جلب البيانات.');
                    });
            });

            $(document).on('click', '.js-recalculate-summary', function() {
                const $btn = $(this);
                const url = $btn.data('url');
                const refreshUrl = $btn.data('refreshUrl');
                const modalWasVisible = !!(userDetailsModal && userDetailsModalElement &&
                    userDetailsModalElement.classList.contains('show'));
                const reopenModalIfNeeded = () => {
                    if (modalWasVisible && userDetailsModal) {
                        userDetailsModal.show();
                    }
                };
                const alertThenReopen = (title, text, icon) => {
                    Swal.fire(title, text, icon).then(() => {
                        reopenModalIfNeeded();
                    });
                };

                if (!url) {
                    return;
                }

                $btn.prop('disabled', true);

                if (modalWasVisible) {
                    userDetailsModal.hide();
                }

                Swal.fire({
                    title: 'جارٍ تحديث الملخص...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading(),
                });

                $.post(url, {
                        _token: TOKEN
                    })
                    .done(function(response) {
                        const message = response && response.msg ? response.msg :
                            'تم تحديث الملخص بنجاح.';

                        if (refreshUrl) {
                            $.get(refreshUrl)
                                .done(function(showResponse) {
                                    if (showResponse && showResponse.err === false && showResponse
                                        .html) {
                                        $('#userDetailsModalContent').html(showResponse.html);
                                        alertThenReopen('تم', message, 'success');
                                    } else {
                                        alertThenReopen('خطأ',
                                            'تم التحديث لكن تعذر إعادة تحميل التفاصيل.', 'error'
                                        );
                                    }
                                })
                                .fail(function() {
                                    alertThenReopen('خطأ',
                                        'تم التحديث لكن تعذر إعادة تحميل التفاصيل.',
                                        'error');
                                });
                        } else {
                            alertThenReopen('تم', message, 'success');
                        }
                    })
                    .fail(function() {
                        alertThenReopen('خطأ', 'تعذر تحديث الملخص. حاول مرة أخرى.', 'error');
                    })
                    .always(function() {
                        $btn.prop('disabled', false);
                    });
            });
            // دالة لجلب الإحصائيات
            function fetchBalanceStats() {
                const params = {
                    name: $('#nameFilter').val() || '',
                    email: $('#emailFilter').val() || '',
                    mobile: $('#mobileFilter').val() || '',
                    status: $('#statusFilter').val() || '',
                    currency: $('#currencyFilter').val() || '',
                    vendor: $('#vendorFilter').val() || '',
                    balance: $('#balanceFilter').val() || '',
                    balance_sort: $('#balance_sortFilter').val() || '',
                };
                $.ajax({
                    url: "{{ route('admin.users.stats') }}",
                    data: params,
                    method: 'GET',
                    success: function(res) {
                        if (res && res.err === false) {
                            const d = res.data;
                            const pos = Number(d.positive || 0).toFixed(2);
                            const neg = Number(d.negative || 0).toFixed(2);
                            $('#sumPositive').text(pos);
                            $('#sumNegative').text(neg);
                            if (d.currency_symbol) {
                                $('#sumPositiveCur, #sumNegativeCur').text(' ' + d.currency_symbol);
                            } else {
                                $('#sumPositiveCur, #sumNegativeCur').text('');
                            }
                            $('#balanceStats').show();
                        }
                    },
                    error: function() {
                        // في حال الخطأ نخفي البوكسات لتفادي عرض بيانات قديمة
                        $('#balanceStats').hide();
                    }
                });
            }

        });
    </script>
@endsection

{{-- TODO::التاكد من ان رقم التليفون سونيك ف الداتا بيز --}}