@extends('backend.layouts.app')

@section('content')
<div class="row">
    <div class="col-lg-3 col-sm-12">
        <div class="widget widget-stats bg-gradient-blue m-b-10">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
            <div class="stats-content">
                <div class="stats-title">TOTAL EARNED</div>
                <div class="stats-number">$ {{ $totalRevenue }}</div>
                <!-- <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 40.5%;"></div>
                </div>
                <div class="stats-desc">Better than last week (40.5%)</div> -->
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-12">
        <div class="widget widget-stats bg-gradient-teal m-b-10">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
            <div class="stats-content">
                <div class="stats-title">PENDING PAYMENT</div>
                <div class="stats-number">$ {{ $totalRequested }}</div>
                <!-- <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 70.1%;"></div>
                </div>
                <div class="stats-desc">Better than last week (70.1%)</div> -->
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-12">
        <div class="widget widget-stats bg-gradient-purple m-b-10">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
            <div class="stats-content">
                <div class="stats-title">AVAILABLE BALANCE</div>
                <div class="stats-number">$ {{ $balanecPayment }}</div>
                <!-- <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 40.5%;"></div>
                </div>
                <div class="stats-desc">Better than last week (40.5%)</div> -->
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-12">
        <div class="widget widget-stats bg-gradient-orange m-b-10">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
            <div class="stats-content">
                <div class="stats-title">TOTAL GAINS</div>
                <div class="stats-number">$ {{ $totalApproved }}</div>
                <!-- <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 40.5%;"></div>
                </div>
                <div class="stats-desc">Better than last week (40.5%)</div> -->
            </div>
        </div>
    </div>
</div>
<h1 class="page-header">
    @lang('messages.payments.payments_list')
    <div class="float-right">
        <div class="text-end m-4">
            @if(auth()->user()->hasRole('Publisher') || auth()->user()->hasPermissionTo('Create Payment'))
                <a href="javascript:;" class="btn btn-primary" data-target="#requestPaymentModel" data-toggle="modal"><i class="fa fa-plus-circle"></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" data-target="#paymentMethodModel" data-toggle="modal"><i class="fa fa-plus-circle"></i> @lang('messages.payments.payment_method')</a>
            @endif
        </div>
    </div>
</h1>
<div class="panel panel-inverse">
    <div class="panel-heading">
        <h4 class="panel-title">
            @lang('messages.payments.payments_list')
        </h4>
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success reload" data-id="dataTablePaymentList"><i class="fa fa-redo"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <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,
            order: [[0, 'desc']],
            ajax: "{{ route('payments.index') }}",
            columns: [
                {data: "DT_RowIndex", name: "id"},
                {data: "username"},
                {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: 50
                },
            },

            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();
                            // // 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