@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss') {{-- formscss removed: no rich form editors needed --}}
    <style>
        .user-info,
        .method-info,
        .amount-info {
            font-size: 0.9em;
        }

        .badge {
            font-size: 0.8em;
        }

        .filters-card {
            margin-bottom: 20px;
        }

        .attachment-image {
            max-width: 100px;
            max-height: 60px;
            object-fit: cover;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .attachment-image:hover {
            transform: scale(1.05);
        }

        .modal-image {
            max-width: 200px;
            max-height: 150px;
            object-fit: cover;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .modal-image:hover {
            transform: scale(1.05);
        }

        .attachment-container {
            margin-bottom: 10px;
        }

        /* تحسين عرض الجدول عند وجود صور */
        #credit-requests-table td {
            vertical-align: top;
            padding: 8px;
        }

        #credit-requests-table .attachment-image {
            display: block;
            margin: 5px 0;
        }

        /* تحسين عرض عمود الحقول الإضافية */
        #credit-requests-table td:nth-child(8) {
            min-width: 150px;
            max-width: 200px;
        }

        /* تحسين عرض أعمدة معرف الدفع ورقم العملية */
        #credit-requests-table td:nth-child(5),
        #credit-requests-table td:nth-child(6) {
            min-width: 100px;
            max-width: 150px;
            word-break: break-word;
        }

        /* Currency badge styling */
        .currency-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.85em;
            color: #fff;
            letter-spacing: 0.5px;
        }

        /* Swal currency display */
        .swal-currency-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin: 15px 0;
            padding: 15px;
            border-radius: 10px;
            background: #f8f9fa;
            border: 2px solid #dee2e6;
        }

        .swal-currency-amount {
            font-size: 1.8em;
            font-weight: 800;
            color: #333;
        }

        .swal-currency-name {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 800;
            font-size: 1.3em;
            color: #fff;
        }
    </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 my-auto mb-0">طلبات شحن الرصيد</h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <!-- row -->
    <div class="row">
        <!-- Filters Card -->
        <div class="col-xl-12">
            <div class="card filters-card">
                <div class="card-header">
                    <h5 class="card-title">فلاتر البحث</h5>
                </div>
                <div class="card-body">
                    <form id="filters-form">
                        <div class="row">

                            <div class="col-md-3">
                                <label>الحالة</label>
                                <select name="status" class="form-control" id="status-filter">
                                    <option value="all">جميع الحالات</option>
                                    <option selected value="pending">في الانتظار</option>
                                    <option value="approved">مقبول</option>
                                    <option value="rejected">مرفوض</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>وسيلة الشحن</label>
                                <select name="method_id" class="form-control" id="method-filter">
                                    <option value="">جميع الوسائل</option>
                                    @foreach ($chargeMethods as $method)
                                        <option value="{{ $method->id }}">{{ $method->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>العملة</label>
                                <select name="currency_id" class="form-control" id="currency-filter">
                                    <option value="">جميع العملات</option>
                                    @foreach ($currencies as $currency)
                                        <option value="{{ $currency->id }}">
                                            {{ $currency->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>رقم العملية</label>
                                <input type="text" name="operation_number" class="form-control"
                                    id="operation-number-filter" placeholder="ابحث برقم العملية">
                            </div>
                        </div>
                        <div class="row mt-3">
                            @include('admin.filters.users')
                            <div class="col-md-3">
                                <label>معرف الدفع</label>
                                <input type="text" name="payment_id" class="form-control" id="payment-id-filter"
                                    placeholder="ابحث بمعرف الدفع">
                            </div>
                            <div class="col-md-3">
                                <label>من تاريخ</label>
                                <input type="date" name="date_from" class="form-control" id="date-from-filter">
                            </div>
                            <div class="col-md-3">
                                <label>إلى تاريخ</label>
                                <input type="date" name="date_to" class="form-control" id="date-to-filter">
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-3 d-flex align-items-end">
                                <div class="form-group w-100">
                                    <button type="button" class="btn btn-secondary w-100" id="reset-filters">
                                        <x-lucide-undo-2 width="20" height="20" /> إعادة تعيين
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Table -->
        <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>
                            <a href="#" id="export-excel-btn" class="btn btn-success btn-sm ml-2"
                                title="تصدير إلى Excel">
                                <x-lucide-download width="16" height="16" /> تصدير Excel
                            </a>
                            <span class="badge bg-info" id="total-count">إجمالي: {{ $totalRequests ?? '-' }}</span>
                            <span class="badge bg-warning" id="pending-count">في الانتظار:
                                {{ $pendingRequests ?? '-' }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="text-md-nowrap table" id="credit-requests-table">
                            <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>
    <!-- row closed -->

    <!-- Show Details Modal -->
    <div class="modal fade" id="showDetailsModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">تفاصيل طلب الشحن</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body-content">
                    <!-- سيتم ملء المحتوى هنا -->
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts') {{-- formscripts removed: only DataTable + basic selects used --}}
    @include('vue')
    <script>
        $(function() {
            // Currency color palette - each currency ID maps to a consistent color
            const currencyPalette = [
                '#2196F3', // Blue
                '#4CAF50', // Green
                '#FF9800', // Orange
                '#9C27B0', // Purple
                '#E91E63', // Pink
                '#00BCD4', // Cyan
                '#795548', // Brown
                '#607D8B', // Blue Grey
            ];

            function getCurrencyColor(currencyId) {
                const index = (parseInt(currencyId) - 1) % currencyPalette.length;
                return currencyPalette[index >= 0 ? index : 0];
            }

            function hexToRgba(hex, alpha) {
                const r = parseInt(hex.slice(1, 3), 16);
                const g = parseInt(hex.slice(3, 5), 16);
                const b = parseInt(hex.slice(5, 7), 16);
                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
            }

            function colorizeCurrencyBadges() {
                $('.currency-badge').each(function() {
                    const cid = $(this).data('currency-id');
                    if (cid) {
                        $(this).css('background-color', getCurrencyColor(cid));
                    }
                });
            }

            const tablehead = ['id', 'user', 'method', 'status', 'payment_id', 'operation_number', 'currency',
                'attachments', 'amount',
                'action', 'time', 'currency_id'
            ];

            // Use default selected filters on first load
            const initialQuery = $('#filters-form').serialize();
            const table = initDatatable(
                '#credit-requests-table',
                "{{ route('admin.payments.requests') }}?" + initialQuery,
                tablehead, {
                    columnDefs: [{
                            visible: false,
                            targets: 11
                        } // hide currency_id column
                    ],
                    createdRow: function(row, data) {
                        const cid = data.currency_id;
                        if (cid) {
                            $(row).css('background-color', hexToRgba(getCurrencyColor(cid), 0.1));
                            $(row).css('border-right', '4px solid ' + getCurrencyColor(cid));
                        }
                    }
                }
            );

            // Initialize tooltips + colorize badges after DataTable draws
            table.on('draw', function() {
                $('[data-toggle="tooltip"]').tooltip();
                colorizeCurrencyBadges();
            });

            const reloadWithFilters = () => {
                const formData = $('#filters-form').serialize();
                table.ajax.url("{{ route('admin.payments.requests') }}?" + formData).load();
            };

            // Auto reload on change (selects, date inputs) / typing (text inputs) with debounce
            let autoFilterTimer = null;
            $('#filters-form').on('change', 'select, input[type="date"]', function() {
                reloadWithFilters();
            });
            $('#filters-form').on('keyup', 'input', function() {
                clearTimeout(autoFilterTimer);
                autoFilterTimer = setTimeout(reloadWithFilters, 400);
            });
            // In case select2 is used
            $(document).on('select2:select select2:clear', '#userFilter', function() {
                reloadWithFilters();
            });

            // Reset filters
            $('#reset-filters').on('click', function() {
                $('#filters-form')[0].reset();
                $('#operation-number-filter').val('');
                $('#payment-id-filter').val('');
                $('#date-from-filter').val('');
                $('#date-to-filter').val('');
                $('#userFilter').val('').trigger('change');
                table.ajax.url("{{ route('admin.payments.requests') }}").load();
            });

            // Approve request
            $('#credit-requests-table tbody').on('click', '.approve', function() {
                const requestId = $(this).data('id');
                const currencyName = $(this).data('currency-name');
                const currencyId = $(this).data('currency-id');
                const amount = $(this).data('amount');
                const color = getCurrencyColor(currencyId);

                Swal.fire({
                    title: 'تأكيد الموافقة',
                    html: `
                        <p>هل أنت متأكد من الموافقة على هذا الطلب؟</p>
                        <div class="swal-currency-info">
                            <span class="swal-currency-amount">${amount}</span>
                            <span class="swal-currency-name" style="background-color: ${color};">${currencyName}</span>
                        </div>
                    `,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، أوافق',
                    cancelButtonText: 'إلغاء'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('admin.payments.approveCredit') }}",
                            type: 'POST',
                            data: {
                                '_token': "{{ csrf_token() }}",
                                'id': requestId
                            },
                            beforeSend: function() {
                                Swal.showLoading();
                            },
                            success: function(response) {
                                Swal.close();
                                if (response.err === false) {
                                    Swal.fire('نجح!', response.message, 'success');
                                    table.ajax.reload();
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                Swal.close();
                                const response = xhr.responseJSON;
                                Swal.fire('خطأ!', response?.message ||
                                    'حدث خطأ غير متوقع', 'error');
                            }
                        });
                    }
                });
            });

            // Reject request
            $('#credit-requests-table tbody').on('click', '.reject', function() {
                const requestId = $(this).data('id');
                const currencyName = $(this).data('currency-name');
                const currencyId = $(this).data('currency-id');
                const amount = $(this).data('amount');
                const color = getCurrencyColor(currencyId);

                Swal.fire({
                    title: 'تأكيد الرفض',
                    html: `
                        <div class="swal-currency-info">
                            <span class="swal-currency-amount">${amount}</span>
                            <span class="swal-currency-name" style="background-color: ${color};">${currencyName}</span>
                        </div>
                        <p>هل أنت متأكد من رفض هذا الطلب؟</p>
                        <div class="form-group text-right mt-3">
                            <label for="rejection-reason" class="d-block text-right mb-2">سبب الرفض (اختياري):</label>
                            <textarea id="rejection-reason" class="form-control" rows="4" maxlength="1000" placeholder="أدخل سبب الرفض هنا..." style="direction: rtl;"></textarea>
                            <small class="text-muted d-block text-right mt-1"><span id="char-count">0</span>/1000 حرف</small>
                        </div>
                    `,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'نعم، أرفض',
                    cancelButtonText: 'إلغاء',
                    didOpen: () => {
                        const textarea = document.getElementById('rejection-reason');
                        const charCount = document.getElementById('char-count');
                        textarea.addEventListener('input', function() {
                            charCount.textContent = this.value.length;
                        });
                    },
                    preConfirm: () => {
                        return document.getElementById('rejection-reason').value;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const reason = result.value;
                        $.ajax({
                            url: "{{ route('admin.payments.rejectCredit') }}",
                            type: 'POST',
                            data: {
                                '_token': "{{ csrf_token() }}",
                                'id': requestId,
                                'reason': reason
                            },
                            beforeSend: function() {
                                Swal.showLoading();
                            },
                            success: function(response) {
                                Swal.close();
                                if (response.err === false) {
                                    Swal.fire('تم!', response.message, 'success');
                                    table.ajax.reload();
                                } else {
                                    Swal.fire('خطأ!', response.message, 'error');
                                }
                            },
                            error: function(xhr) {
                                Swal.close();
                                const response = xhr.responseJSON;
                                Swal.fire('خطأ!', response?.message ||
                                    'حدث خطأ غير متوقع', 'error');
                            }
                        });
                    }
                });
            });

            // Show details
            $('#credit-requests-table tbody').on('click', '.show', function() {
                const requestId = $(this).data('id');
                $.ajax({
                    // build URL via url() and append id to avoid route() requiring a parameter at render time
                    url: "{{ url('admin/payments/requests') }}/" + requestId,
                    type: 'GET',
                    beforeSend: function() {
                        $('#modal-body-content').html(
                            `<div class="text-center">{!! svg('lucide-loader-2', ['class' => 'animate-spin', 'width' => 20, 'height' => 20])->toHtml() !!} جاري التحميل...</div>`
                        );
                        $('#showDetailsModal').modal('show');
                    },
                    success: function(response) {
                        $('#modal-body-content').html(response);
                    },
                    error: function() {
                        $('#modal-body-content').html(
                            '<div class="alert alert-danger">حدث خطأ في تحميل البيانات</div>'
                        );
                    }
                });
            });

            // For backwards compatibility
            $('#credit-requests-table tbody').on('click', '.accept', function() {
                $(this).trigger('click');
            });

            // Export to Excel
            $('#export-excel-btn').on('click', function(e) {
                e.preventDefault();
                const formData = $('#filters-form').serialize();
                window.location.href = "{{ route('admin.creditRequests.export') }}?" + formData;
            });

            // Toggle resend button handler (in modal)
            $(document).on('click', '.toggle-resend-btn', function() {
                const btn = $(this);
                const requestId = btn.data('id');

                $.ajax({
                    url: "{{ route('admin.creditRequests.toggleResend') }}",
                    type: 'POST',
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'id': requestId
                    },
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(`{!! svg('lucide-loader-2', ['class' => 'animate-spin', 'width' => 20, 'height' => 20])->toHtml() !!} جاري التنفيذ...`);
                    },
                    success: function(response) {
                        if (response.err === false) {
                            Swal.fire('تم!', response.message, 'success');
                            // Reload modal content
                            $.ajax({
                                url: "{{ url('admin/payments/requests') }}/" +
                                    requestId,
                                type: 'GET',
                                success: function(modalResponse) {
                                    $('#modal-body-content').html(modalResponse);
                                }
                            });
                            // Reload table
                            table.ajax.reload(null, false);
                        } else {
                            Swal.fire('خطأ!', response.message, 'error');
                            btn.prop('disabled', false);
                        }
                    },
                    error: function(xhr) {
                        const response = xhr.responseJSON;
                        Swal.fire('خطأ!', response?.message || 'حدث خطأ غير متوقع', 'error');
                        btn.prop('disabled', false);
                    }
                });
            });
        });
    </script>
    <script>
        $(function() {
            $('.select2').select2()
        });
    </script>
@endsection