@extends("agentportal.layouts.layout")

@section("title", 'Bnb CashApp')

@section("page_style")
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <style>
        .hidden{
            display: none;
        }
    </style>

@endsection

<div id="loading"  style="display:none;">
    <div id="image-loader">
        <img  src="{{ url('img/loading.gif')}}" alt="Loading..." />
    </div>
</div>

@section("content")
<script type="text/javascript">
    // DO NOT DELETE THIS VAR
    var txnSenderName = '';
    var txnAmount = 0;
    var txnFees = 0;
    var txnTotal = 0;
</script>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b">
                        <div class="card-header">
                            <div class="card-title">
                                <h3 class="card-label">Bnb CashApp - {{ __('message_lang.LBL_CASHIN') }}</h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <!--begin::Example-->
                                <div class="example-preview">
                                    <form method="post" name="form_agent_cashin" id="form_agent_cashin" action="{{ url('agentportal/cashin/store') }}" enctype="multipart/form-data">

                                        @csrf

                                        <div>
                                            <div class="row">
                                                <div class="form-group col-md-8">
                                                    <label class="" for="searchParam">{{ trans('message_lang.LBL_SEARCH_CUSTOMER_CO') }} <span style="color:red;">*</span></label>
                                                    <input class="form-control @error('searchParam') is-invalid @enderror custom-field" id="searchParam" type="text" value="" name="searchParam" placeholder="{{ trans('message_lang.BTN_SEARCH') }}" >
                                                    <span class="errorNoUser no-user-found" role="alert">
                                                        <strong>{{ trans("message_lang.USER_DETAIL_NOT_FOUND") }}</strong>
                                                    </span>
                                                </div>

                                                <div class="form-group col-md-8">
                                                    <button type="button" id="searchCustomer" class="btn btn-info btn-lg btn-block">{{ trans('message_lang.BTN_SEARCH') }}</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="txnDetails" style="display: none;">
                                            <div class="row">
                                                <div class="form-group col-md-8">
                                                    <b><span class="fw-600">{!! __("message_lang.LBL_CUSTOMER") !!}: </span></b> &nbsp;<span class="sender_name"></span>
                                                </div>
    
                                                <div class="form-group col-md-8">
                                                    <label for="co_amount">{{ trans('message_lang.LBL_AMOUNT') }} <span style="color:red;">*</span></label>
                                                    <input onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')" type="text" name="amount" placeholder=""  id="co_amount" class="form-control @error('co_amount') is-invalid @enderror" />
                                                    <span class="txn-limit-reached errClass" style="display: none;">{{trans('message_lang.TXN_LIM_REACHED')}}</span>
                                                </div>
                                
                                                <div class="form-group col-md-8">
                                                    <div class="row">
                                                        <div class="col-5">
                                                            <b><span class="fw-600">{!! __("message_lang.LBL_FEES") !!}: </span></b> &nbsp;<span class="sendingFee"></span>
                                                        </div>
                                                        <div class="col-5">
                                                            <b><span class="fw-600">{!! __("message_lang.LBL_TOTAL") !!}: </span></b> &nbsp;<span class="totalAmount"></span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group col-md-8 mt-4">
                                                    <button type="button" class="btn btn-primary btn-lg btn-block btn-submit" data-enabled="{!! Auth::guard('agentportal')->user()->agentLocation ? Auth::guard('agentportal')->user()->agentLocation->agentCountry->enable_passcode : 0 !!}">{{ trans('message_lang.BUTTON_CONTINUE') }}
                                                        <span id="submitLoader"></span>
                                                    </button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    
                                        <input type="hidden" name="agent_country_id" id="agent_country_id" value="{{ isset($agentCountryId) ? $agentCountryId : 0 }}">
                                        <input type="hidden" name="user_id" id="user_id" value="">
                                        <input type="hidden" name="fees" id="co_fees">
                                        
                                    </form>

                                </div>
                            <!--end::Example-->
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->
</div>
@endsection

@section("page_vendors")
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/jquery.validate.js') }}"></script>
<script src="{{ asset('ex_plugins/jquery-validation-1.19.1/dist/additional-methods.js') }}"></script>
<script src="{{ asset('ex_plugins/toastr/js/toastr.min.js') }}"></script>
<link href="{{ URL::to('/') }}/ex_plugins/toastr/css/toastr.min.css" rel="stylesheet">

<script src="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>

<!-- BootstrapFormHelpers -->
<link href="{{ URL::to('/') }}/ex_plugins/bootstrap-form-helpers/dist/css/bootstrap-formhelpers.min.css" rel="stylesheet">
<script src="{{ URL::to('/') }}/ex_plugins/bootstrap-form-helpers/dist/js/bootstrap-formhelpers.min.js" type='text/javascript'></script>

@endsection

@section("page_script")
<script type="text/javascript">

    var currency = "{{ $currency }}"
    var fees = @json($fees);
    var min = 0; var max = 0;
    if (fees != undefined && fees.length !== 0){
        min = Math.min(...fees.map(item => item.minimum_amount));
        max = Math.max(...fees.map(item => item.maximum_amount));
    }
    var balance = "{{ auth()->user()->agentLocation->network->balance ?? auth()->user()->agentLocation->balance}}";
    var bnbOwned = "{{ auth()->user()->agentLocation->network->bnb_owned ?? auth()->user()->agentLocation->bnb_owned}}";

    $(document).ready(function() {

        $("#form_agent_cashin").validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            errorPlacement: function (error, element) { // render error placement for each input type
                // Custom position: first name
                // $("#errUserId").text(error);
            },
            ignore: "",
            rules: {
                user_id: {
                    required: true
                },
                amount: {
                    required: true
                },
                fees: {
                    required: true
                },
            },
            messages: {
                user_id: {
                    required: '{{ trans('message_lang.PLEASE_SELECT_CUSTOMER') }}'
                },
                amount: {
                    required: '{{ trans('message_lang.PLEASE_ENTER_SENDING_AMOUNT') }}'
                },
                fees: {
                    required: 'Fees required'
                },
            },
            invalidHandler: function (event, validator) { //display error alert on form submit
                //successHandler1.hide();
                //errorHandler1.show();
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element).closest('.form-group').removeClass('has-error');
            },
            success: function (label, element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
            },
            // submitHandler: function (frmadd) {
            // }
        });

        $("#searchCustomer").on("click", function() {
            $(".txnDetails").hide();
            $(".errorNoUser").hide();
            $("#loading").show();
            var searchParam = $("#searchParam").val();

            if(searchParam != "") {
                var formData = new FormData();
                formData.append("searchParam", searchParam);
                formData.append('_token', '{{csrf_token()}}');
                formData.append('agent_country_id', $("#agent_country_id").val());
                $.ajax({
                    type:'POST',
                    url: "{{ route('agentportal.send-money.searchCustomer')}}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: (data) => {
                        $("#loading").hide();
                        if(data.success == true) {
                            var customerData = data.data;

                            $("#user_id").val(customerData.id);
                            $(".first_name").html(customerData.first_name);
                            $(".last_name").html(customerData.last_name);
                            $(".first_name").val(customerData.first_name);
                            $(".last_name").val(customerData.last_name);

                            var senderFullName = customerData.first_name;
                            if(customerData.last_name != null) {
                                senderFullName += " "+customerData.last_name
                            }
                            $(".sender_name").html(senderFullName);
                            txnSenderName = senderFullName;

                            $(".en_user_id").html(customerData.en_user_id);

                            var internalUrl = "agentportal/send-money/customers/"+customerData.en_user_id+"/beneficiaries/create";
                            var addBnfUrl = "