@extends('vendors.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')
    <div id="paymentsPage">
        <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>

                        <!-- Filters -->
                        <div class="row">
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0">المستخدم</p>
                                <select id="userFilter" class="form-control">
                                    <option value="">جميع المستخدمين</option>
                                    @if (Auth::user()->is_vendor && Auth::user()->vendorProfile)
                                        @foreach (Auth::user()->vendorProfile->managedUsers as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    @endif
                                    <option value="{{ Auth::user()->id }}">{{ Auth::user()->name }} (أنت)</option>
                                </select>
                            </div>
                              <div class="col-lg-2 mt-2">
                                <p class="mt-0"> العمليه </p>
                                <select id="type" class="form-control">
                                    <option value="">  </option>
                                    <option value="charge">  شجن </option>
                                    <option value="withdraw"> سحب </option>
                                    <option value="transfer"> تحويل </option>
                                      <option value="refund">استرداد</option>
                                       <option value="order">طلب</option>
                                </select>
                            </div>
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0">من تاريخ</p>
                                <input type="date" id="fromDate" class="form-control">
                            </div>
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0">إلى تاريخ</p>
                                <input type="date" id="toDate" class="form-control">
                            </div>
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0">رقم الطلب</p>
                                <input type="text" id="orderFilter" class="form-control" placeholder="رقم الطلب">
                            </div>
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0">المبلغ</p>
                                <input type="text" id="amountFilter" class="form-control" placeholder="المبلغ">
                            </div>
                            <div class="col-lg-2 mt-2">
                                <p class="mt-0 text-white">.</p>
                                <button type="button" id="filterBtn" class="btn btn-primary btn-block">
                                    <x-lucide-search /> بحث
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="paymentsTable" class="table key-buttons text-md-nowrap">
                                <thead>
                                    <tr>
                                        <th class="border-bottom-0">#</th>
                                        <th class="border-bottom-0">نوع العملية</th>
                                        <th class="border-bottom-0">المبلغ</th>
                                        <th class="border-bottom-0">المرسل</th>
                                        <th class="border-bottom-0">رصيد المرسل قبل</th>
                                        <th class="border-bottom-0">رصيد المرسل بعد</th>
                                        <th class="border-bottom-0">المستقبل</th>
                                        <th class="border-bottom-0">رصيد المستقبل قبل</th>
                                        <th class="border-bottom-0">رصيد المستقبل بعد</th>
                                        <th class="border-bottom-0">التاريخ</th>
                                        <th class="border-bottom-0">العمليات</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment Details Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="paymentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">تفاصيل العملية المالية</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="paymentDetails">
                    <!-- Payment details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(document).ready(function() {
            var table = $('#paymentsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('vendor.payments.index') }}",
                    data: function(d) {
                        d.user = $('#userFilter').val();
                        d.from = $('#fromDate').val();
                        d.to = $('#toDate').val();
                        d.order = $('#orderFilter').val();
                         d.type = $('#type').val();
                        d.amount = $('#amountFilter').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'payment_type',
                        name: 'payment_type'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'sender_name',
                        name: 'sender_name'
                    },
                    {
                        data: 'sender_balance_before',
                        name: 'sender_balance_before'
                    },
                    {
                        data: 'sender_balance_after',
                        name: 'sender_balance_after'
                    },
                    {
                        data: 'receiver_name',
                        name: 'receiver_name'
                    },
                    {
                        data: 'receiver_balance_before',
                        name: 'receiver_balance_before'
                    },
                    {
                        data: 'receiver_balance_after',
                        name: 'receiver_balance_after'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                language: {
                    "sProcessing": "جارٍ التحميل...",
                    "sLengthMenu": "أظهر _MENU_ مدخلات",
                    "sZeroRecords": "لم يعثر على أية سجلات",
                    "sInfo": "إظهار _START_ إلى _END_ من أصل _TOTAL_ مدخل",
                    "sInfoEmpty": "يعرض 0 إلى 0 من أصل 0 سجل",
                    "sInfoFiltered": "(منتقاة من مجموع _MAX_ مُدخل)",
                    "sInfoPostFix": "",
                    "sSearch": "ابحث:",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "الأول",
                        "sPrevious": "السابق",
                        "sNext": "التالي",
                        "sLast": "الأخير"
                    }
                }
            });

            // Filter button click
            $('#filterBtn').click(function() {
                table.draw();
            });

            // Reset filters on input clear
            $('#userFilter,#type, #fromDate, #toDate, #orderFilter, #amountFilter').on('change keyup', function() {
                if ($(this).val() === '') {
                    table.draw();
                }
            });
        });

        // View payment details
        function viewPayment(id) {
            $.ajax({
                url: "{{ route('vendor.payments.show') }}",
                type: 'GET',
                data: {
                    id: id
                },
                success: function(response) {
                    if (response.success) {
                        var payment = response.payment;
                        var detailsHtml = `
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>معلومات العملية:</h6>
                                    <p><strong>نوع العملية:</strong> ${getPaymentTypeText(payment.payment_type)}</p>
                                    <p><strong>المبلغ:</strong> ${formatNumber(payment.amount)}</p>
                                    <p><strong>التاريخ:</strong> ${formatDate(payment.created_at)}</p>
                                    ${payment.order_id ? '<p><strong>رقم الطلب:</strong> ' + payment.order_id + '</p>' : ''}
                                    ${payment.notes ? '<p><strong>ملاحظات:</strong> ' + payment.notes + '</p>' : ''}
                                </div>
                                <div class="col-md-6">
                                    <h6>تفاصيل الأرصدة:</h6>
                                    <div class="mb-3">
                                        <strong>المرسل:</strong> ${payment.sender ? payment.sender.name : 'النظام'}
                                        <br><small>الرصيد قبل: ${formatNumber(payment.sender_balance_before)} | بعد: ${formatNumber(payment.sender_balance_after)}</small>
                                    </div>
                                    <div>
                                        <strong>المستقبل:</strong> ${payment.receiver ? payment.receiver.name : 'النظام'}
                                        <br><small>الرصيد قبل: ${formatNumber(payment.receiver_balance_before)} | بعد: ${formatNumber(payment.receiver_balance_after)}</small>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#paymentDetails').html(detailsHtml);
                        $('#paymentModal').modal('show');
                    } else {
                        toastr.error(response.error || 'حدث خطأ أثناء تحميل البيانات');
                    }
                },
                error: function(xhr) {
                    var response = xhr.responseJSON;
                    toastr.error(response.error || 'حدث خطأ أثناء تحميل البيانات');
                }
            });
        }

        // Helper functions
        function getPaymentTypeText(type) {
            var types = {
                'charge': 'شحن',
                'withdraw': 'سحب',
                'transfer': 'تحويل',
                'refund': 'استرداد',
                'order': 'طلب'
            };
            return types[type] || type;
        }

        function formatNumber(number) {
            return parseFloat(number).toLocaleString('ar-EG', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function formatDate(dateString) {
            var date = new Date(dateString);
            return date.toLocaleDateString('ar-EG') + ' ' + date.toLocaleTimeString('ar-EG');
        }
    </script>
@endsection