@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='paymentId'>

        {{-- 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">
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> المستخدم (مرسل أو مستقبل) </label>
                                    <select name="user_id" id='userFilter' class="form-control select2">
                                        <option value="" selected> اختر مستخدم </option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> المرسل </label>
                                    <select name="sender_id" id='senderFilter' class="form-control select2">
                                        <option value="" selected> اختر المرسل </option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> المستقبل </label>
                                    <select name="receiver_id" id='receiverFilter' class="form-control select2">
                                        <option value="" selected> اختر المستقبل </option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> نوع العملية </label>
                                    <select name="payment_type" id='paymentTypeFilter' class="form-control select2">
                                        <option value="" selected> اختر نوع العملية </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-3 mt-2">
                                    <label class="mt-0"> رقم الطلب </label>
                                    <input type="text" id="orderIdFilter" class="form-control" placeholder="رقم الطلب">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> رقم العملية </label>
                                    <input type="text" id="paymentNumberFilter" class="form-control"
                                        placeholder="رقم العملية">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> من تاريخ </label>
                                    <input type="date" id="fromFilter" class="form-control"
                                        value="{{ now()->startOfMonth()->toDateString() }}">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> إلى تاريخ </label>
                                    <input type="date" id="toFilter" class="form-control"
                                        value="{{ now()->toDateString() }}">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> المبلغ من </label>
                                    <input type="number" id="amountFromFilter" class="form-control" placeholder="المبلغ من"
                                        step="0.01">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> المبلغ إلى </label>
                                    <input type="number" id="amountToFilter" class="form-control" placeholder="المبلغ إلى"
                                        step="0.01">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> العملة </label>
                                    <select name="currency" id='currencyFilter' class="form-control select2">
                                        <option value="" selected> اختر العملة </option>
                                        @foreach ($currencies as $currency)
                                            <option value="{{ $currency->id }}">{{ $currency->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> البحث في المبلغ </label>
                                    <input type="text" id="amountFilter" class="form-control"
                                        placeholder="البحث في المبلغ">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <button type="button" id="refresh" class="btn btn-primary"> تحديث </button>
                                    <button type="button" id="clearFilters" class="btn btn-secondary"> مسح الفلاتر
                                    </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>
                                <button type="button" id="exportPayments" class="btn btn-success btn-sm"
                                    title="تصدير مباشر">
                                    <x-lucide-file-spreadsheet width="20" height="20" /> تصدير مباشر
                                </button>
                            </div>

                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table text-md-nowrap small" id="payments">
                                    <thead>
                                        <tr>
                                            <th>المعرف</th>
                                            <th>رقم العملية</th>
                                            <th>نوع العملية</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>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    <script>
        $(function() {
            const tablehead = ['id', 'payment_number', 'payment_type', 'amount', 'sender_name',
                'receiver_name', 'order_id', 'sender_balance_before', 'sender_balance_after',
                'receiver_balance_before', 'receiver_balance_after', 'created_at'
            ];

            const filterdata = ['user', 'sender', 'receiver', 'paymentType', 'orderId', 'paymentNumber', 'from',
                'to',
                'amountFrom', 'amountTo', 'currency', 'amount'
            ];

            const table = initUrlSyncedDatatable({
                selector: '#payments',
                url: "{{ route('admin.payments.index') }}",
                columns: tablehead,
                filters: filterdata,
                redrawDebounce: 300,
            });

            // Clear filters functionality
            $('#clearFilters').on('click', function() {
                $('#orderIdFilter, #paymentNumberFilter, #fromFilter, #toFilter, #amountFromFilter, #amountToFilter, #amountFilter')
                    .val('');
                $('#userFilter, #senderFilter, #receiverFilter, #paymentTypeFilter, #currencyFilter').val(
                    '').trigger('change');
            });
            // Export payments
            $('#exportPayments').on('click', function() {
                const params = new URLSearchParams({
                    user: $('#userFilter').val() || '',
                    sender: $('#senderFilter').val() || '',
                    receiver: $('#receiverFilter').val() || '',
                    paymentType: $('#paymentTypeFilter').val() || '',
                    orderId: $('#orderIdFilter').val() || '',
                    paymentNumber: $('#paymentNumberFilter').val() || '',
                    from: $('#fromFilter').val() || '',
                    to: $('#toFilter').val() || '',
                    amountFrom: $('#amountFromFilter').val() || '',
                    amountTo: $('#amountToFilter').val() || '',
                    currency: $('#currencyFilter').val() || '',
                    amount: $('#amountFilter').val() || '',
                });
                window.location.href = "{{ route('admin.payments.export') }}?" + params.toString();
            });

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