@extends('backend.layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-6 col-lg-3 mb-6">
        <div class="card card-border-shadow-primary h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar me-4">
                        <span class="avatar-initial rounded bg-label-primary"><i class="ri-car-line ri-24px"></i></span>
                    </div>
                    <h4 class="mb-0">$ {{ $totalRevenue }}</h4>
                </div>
                <h6 class="mb-0 fw-normal">TOTAL EARNED</h6>
                <!-- <p class="mb-0">
                    <span class="me-1 fw-medium">+18.2%</span>
                    <small class="text-muted">than last week</small>
                </p> -->
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3 mb-6">
        <div class="card card-border-shadow-warning h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar me-4">
                        <span class="avatar-initial rounded bg-label-warning"><i class="ri-alert-line ri-24px"></i></span>
                    </div>
                    <h4 class="mb-0">$ {{ $totalRequested }}</h4>
                </div>
                <h6 class="mb-0 fw-normal">PENDING PAYMENT</h6>
                <!-- <p class="mb-0">
                    <span class="me-1 fw-medium">-8.7%</span>
                    <small class="text-muted">than last week</small>
                </p> -->
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3 mb-6">
        <div class="card card-border-shadow-danger h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar me-4">
                        <span class="avatar-initial rounded bg-label-danger"><i class="ri-route-line ri-24px"></i></span>
                    </div>
                    <h4 class="mb-0">$ {{ $balanecPayment }}</h4>
                </div>
                <h6 class="mb-0 fw-normal">AVAILABLE BALANCE</h6>
                <!-- <p class="mb-0">
                    <span class="me-1 fw-medium">+4.3%</span>
                    <small class="text-muted">than last week</small>
                </p> -->
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3 mb-6">
        <div class="card card-border-shadow-info h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <div class="avatar me-4">
                        <span class="avatar-initial rounded bg-label-info"><i class="ri-time-line ri-24px"></i></span>
                    </div>
                    <h4 class="mb-0">$ {{ $totalApproved }}</h4>
                </div>
                <h6 class="mb-0 fw-normal">TOTAL GAINS</h6>
                <p class="mb-0">
                    <!-- <span class="me-1 fw-medium">-2.5%</span>
                    <small class="text-muted">than last week</small> -->
                </p>
            </div>
        </div>
    </div>
</div>
<h4 class="py-3 mb-4">
    @lang('messages.payments.payments_list')
</h4>
<div class="card">
    <div class="card-datatable table-responsive datatable-roles">
        <div class="text-end m-4">
            @if(auth()->user()->hasRole('Publisher') || auth()->user()->hasPermissionTo('Create Payment'))
                <a href="javascript:;" class="btn btn-primary me-4 px-4" data-bs-target="#requestPaymentModel" data-bs-toggle="modal"><i class="ri-add-line"></i> @lang('messages.payments.payment_request')</a>
            @endif
            @if(auth()->user()->hasRole('Publisher') || auth()->user()->hasPermissionTo('Create Payment Method') || auth()->user()->hasPermissionTo('Update Payment Method'))
                <a href="javascript:;" class="btn btn-primary me-4 px-4" data-bs-target="#paymentMethodModel" data-bs-toggle="modal"><i class="ri-add-line"></i> @lang('messages.payments.payment_method')</a>
            @endif
        </div>
        <table class="datatables-menus table" id="dataTablePaymentList">
            <thead>
                <tr>
                    <th>@lang('messages.payments.inv_no')</th>
                    <th>@lang('messages.payments.user')</th>
                    <th>@lang('messages.payments.payment_method')</th>
                    <th>@lang('messages.payments.amount')</th>
                    <th>@lang('messages.payments.requested')</th>
                    <th>@lang('messages.payments.approved')</th>
                    <th>@lang('messages.payments.status')</th>
                    <th>@lang('messages.payments.action')</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body content goes here -->
            </tbody>
        </table>
    </div>
</div>

@include('backend.payments.paymentRequest')
@include('backend.payments.paymentMethod', $paymentMethod)

<!-- / Content -->
@endsection

@section('footer_scripts')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $("#dataTablePaymentList").DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            order: [[0, 'desc']],
            ajax: "{{ route('payments.index') }}",
            columns: [
                {data: "DT_RowIndex", name: "id"},
                {data: "user.first_name"},
                {data: "payment_method"},
                {data: "amount"},
                {data: "created_at"},
                {data: "approved_at"},
                {data: "payment_status"},
                {data: "action"},
            ],
            columnDefs: [
                {
                    target: [{{$target}}],
                    visible: false
                }
            ]
        });

        $("#paymentMethodModelForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                payoneer: {
                    email: true,
                },
                payppal: {
                    email: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $("#paymentMethodModel").modal('hide');
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#paymentMethodModel").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join(
                                "<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                });
                return false;
            }
        });

        $("#requestPaymentForm").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                payment_method: {
                    required: true,
                },
                amount: {
                    required: true,
                    digits: true,
                    min: {{ env('REQUESTPAYMENT', 10) }}
                },
            },
            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            $(form)[0].reset();
                            $("#requestPaymentModel").modal('hide');
                            table.ajax.reload(null, false);
                            // // Refresh user_details div
                        } else {
                            $("#requestPaymentModel").modal('hide');
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'error',
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        var jsonResponse = JSON.parse(xhr.responseText);
                        var locale = '{{ app()->getLocale() }}'; // Get the current application locale
                        $("#requestPaymentModel").modal('hide');
                        if (locale == 'en') {
                            // English error messages
                            var errorMessage = "Validation failed";
                        } else if (locale == 'ro') {
                            // Romanian error messages
                            errorMessage = "Validarea a eșuat";
                        } else if (locale == 'ar') {
                            // Arabic error messages
                            errorMessage = "فشل التحقق من الصحة";
                        } else {
                            // Default to English
                            // errorMessage += Object.values(errors).join(", ");
                        }
                        if (jsonResponse.errors) {
                            errorMessage += ":<br> ";
                            errorMessage += Object.values(jsonResponse.errors).join("<br>");
                            Swal.fire('', errorMessage, 'error')
                        }
                    }
                });
                return false;
            }
        });

    });
</script>
@endsection