@extends("agentportal.layouts.layout")

@section("title", trans("message_lang.LBL_CASHAPP_BALANCE_ADJUSTMENT"))

@section("page_style")
<link rel="stylesheet" type="text/css" href="{{ url('css/select2.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url('css/sweetalert2.min.css') }}">
<style type="text/css">
    .select2-container--default .select2-selection--single {
        min-height: 38px;
        max-height: 38px;
    }
</style>
@endsection

@section("content")
@php
    $location_id = $request->location_id ? base64_decode($request->location_id) : '';
@endphp
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Subheader-->
    <!--end::Subheader-->
    <!--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 example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                {!! trans("message_lang.LBL_CASHAPP_BALANCE_ADJUSTMENT") !!}
                            </h3>
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                @if(!in_array("", [$location_id]))
                                    <a href="{{ url('agentportal/summary/location/'.$request->location_id.'/statement') }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                @else
                                    <a href="{{ url('agentportal/bnbwallet/accounting-request') }}" class="btn btn-primary font-weight-bolder">{{ trans('message_lang.BTN_BACK') }}</a>
                                @endif
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--begin::Form-->
                        <form method="post" name="form" id="form"

                        @if(!in_array("", [$location_id]))
                            action="{{ url('agentportal/summary/location/'.base64_encode($location_id).'/adjustment-update') }}"
                        @else
                            action="{{ url('agentportal/bnbwallet/accounting-request/store') }}"
                        @endif

                        enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <div class="card-body">

                                <div class="form-group row">
                                    <ul class="list-group" style="color: red; padding: 15px 50px; background: rgb(225, 172, 172); width: 100%; display: none;" id="erroBlock" name=errorBlock>

                                    </ul>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="countryIso3">{!! trans("message_lang.LBL_COUNTRY") !!} <span style="color:red;">*</span></label>
                                        <select name="countryIso3" id="countryIso3" class="form-control @error('countryIso3') is-invalid @enderror custom-field">
                                            <option value="">{!! trans('message_lang.PLACEHOLDER_SELECT') !!}</option>
                                            @foreach ($countries as $key => $country)
                                            <option value="{{ $country['country_code'] }}"  @if (old('countryIso3') == $country['country_code']) selected @endif>{{ $country['country_name'] }}</option>
                                            @endforeach
                                        </select>
                                        @error('countryIso3')
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>

                                    <div class="col-md-4">
                                        <label class="" for="userPhoneNo">{!! trans("message_lang.LBL_PHONE_NUMBER") !!} <span style="color:red;">*</span></label>
                                        <input onkeyup="this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')" type="text" name="userPhoneNo" placeholder="{!! trans("message_lang.LBL_PHONE_NUMBER") !!}" value="{{ old('userPhoneNo') }}" id="userPhoneNo" class="form-control @error('userPhoneNo') is-invalid @enderror custom-field" />
                                        @error('userPhoneNo')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="col-md-2">
                                        <label class="" for="country_id"> .</label>
                                        <button type="button" id='btnAddCountry' class="form-control btn btn-secondary mr-2" >{{ __('message_lang.BTN_SEARCH') }}</button>
                                    </div>
                                </div>

                                <div class="row col-md-12" style="text-align: center; width: 100%;">
                                    <label style="text-align: center; width: 100%; font-weight: bold; font-size: 15px; text-transform: uppercase; margin-bottom: 20px" id="sCustomer" name="sCustomer"></label>
                                    <hr>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="" for="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="{!! trans("message_lang.LBL_AMOUNT") !!}" value="{{ old('amount') }}" oninput="checkRequirements()" id="amount" class="form-control @error('amount') is-invalid @enderror custom-field" />
                                        @error('amount')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    
                                    <div class="col-md-6 adjust_type_field">
                                        <label for="adjust_type">Type <span class="text-danger">*</span></label>
                                        <select name="adjust_type" id="adjust_type" class="form-control" onchange="checkRequirements()">
                                            <option value=""></option>
                                            <option value="1">Credit</option>
                                            <option value="2">Debit</option>
                                        </select>
                                        @error('adjust_type')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label for="adjustment_reason">Reason <span class="text-danger">*</span></label>
                                        <textarea name="adjustment_reason" id="adjustment_reason" cols="10" rows="3" class="form-control"
                                        value="{{ old('adjustment_reason', @$details->adjustment_reason) }}"
                                        placeholder="Enter adjustment reason" oninput="checkRequirements()" required></textarea>
                                        @error('adjustment_reason')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" id="saveBtn" class="btn btn-primary mr-2" disabled data-confirm="{!! trans("message_lang.CONF_BALANCE_ADJUSTMENT") !!} {{ number_format(0.00, 2) }}?">{{ trans('message_lang.BTN_SUBMIT') }}</button>
                                <a href="{{ url('agentportal/bnbwallet/accounting-request') }}" class="btn btn-secondary">{{ trans('message_lang.BUTTON_CANCEL') }}</a>
                            </div>
                        </form>
                        <!--end::Form-->
                    </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="{{ url('js/select2.min.js') }}"></script>
@endsection

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

    function checkRequirements()
    {
        // disable the submit button
        $("#saveBtn").prop("disabled", true);

        // get the values for the required fields
        const amount = $("#amount").val()
        const adjReason = $("#adjustment_reason").val()
        const adjust_type = $("#adjust_type").val()

        // making sure this fields are not empty before activating the submit button
        if(amount != "" && adjust_type != "" && adjReason != ""){
            $("#saveBtn").prop("disabled", false);
        }
    }


    $(document).ready(function () {
        $('#agent_location_id').select2({
            allowClear: true,
            placeholder: '{!! trans("message_lang.PLACEHOLDER_SELECT_LOCATION") !!}',
        });

        $('#amount').on('keyup', function () {
            let amount = number_format($(this).val() || 0.00);
            console.log(amount);
            $('#save').data('confirm', `{!! trans("message_lang.CONF_BALANCE_ADJUSTMENT") !!} ${amount}?`);
        });

        $('#accounting_type').on('change',function(){
            if(jQuery(this).val() == "adjustment"){
                jQuery("#adjust_type[value='debit']").prop('checked', false);
                jQuery(".adjust_type_field").show();
            } else {
                jQuery("#adjust_type[value='debit']").prop('checked', true);
                jQuery(".adjust_type_field").hide();
            }
        }).change();


        mCustomer = null;

        $('#btnAddCountry').on('click', function (e) 
        {
            mCustomer = null;
            console.log('in searchCustomer')
            // evt.preventDefault();

            const countryIso3 = $("#countryIso3").val()
            console.log('countryIso3', countryIso3)

            const userPhoneNo = $("#userPhoneNo").val()
            console.log('userPhoneNo', userPhoneNo)

            if(countryIso3 == "" || userPhoneNo == "") {
                alert("{{ __('message_lang.SELECT_COUNTRY_AND_ENTER_PHONE_NUMBER') }}")
                return;
            }

            $.ajax({
                url: "{{ url('agentportal/bnbwallet/accounting-request/search-customer') }}",
                type: "POST",
                // dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: {
                    countryIso3: countryIso3,
                    userPhoneNo: userPhoneNo,
                },
                success: function (response) {
                    console.log('response', response)
                    if(response.status == 'SUCCESS') {
                        mCustomer = response.customer;
                        $("#sCustomer").html(response.customer.name + '  (' + number_format(response.customer.balance, 2) + ' ' + response.customer.currency + ')');
                    }
                    else {
                        alert(response.message)
                        // alert("{{ __('message_lang.CUSTOMER_NOT_FOUND') }}")
                        return;
                    }
                }
            });

        });

        $('#saveBtn').on('click', function (e) 
        {
            var html = "";
            $("#erroBlock").hide();

            console.log('mCustomer', mCustomer)
            if(mCustomer == null) {
                html += "<li class='list-group-item1' > <span> Search and find customer </span> </li>" 
            }

            const amount = $("#amount").val()
            console.log('amount', amount)
            if(amount == "") {
                html += "<li class='list-group-item1' > <span> Please enter amount </span> </li>" 
            }

            const adjust_type = $("#adjust_type").val()
            console.log('adjust_type', adjust_type)
            if(adjust_type == "") {
                html += "<li class='list-group-item1' > <span> Please select adjustment type </span> </li>" 
            }

            const adjustment_reason = $("#adjustment_reason").val()
            console.log('adjustment_reason', adjustment_reason)
            if(adjustment_reason == "") {
                html += "<li class='list-group-item1' > <span> Please enter adjustment reason </span> </li>" 
            }

            $("#erroBlock").html(html);

            if(html != "") {
                $("#erroBlock").show();
                e.preventDefault();
                return;
            }

            if(adjust_type == 1) { adjust_type_text = 'Credit'; new_amount = Number(mCustomer.balance) + Number(amount) } else { adjust_type_text = 'Debit'; new_amount = Number(mCustomer.balance) - Number(amount) }

            e.preventDefault();
            var title = "Confirmation";
            var html = "";
            html += "<br>Current Balance: <b>"+ number_format(mCustomer.balance || 0.00) + "</b><br>";
            html += "Adjustment Amount: <b>"+ number_format(amount || 0.00)  + "</b><br>";
            html += "Transaction Type: <b>"+ adjust_type_text  + "</b><br>";
            html += "New Balance: <b>" +  number_format(new_amount || 0.00) + "</b><br>";
            html += "Adjustment Reason: <b>" +  adjustment_reason + "</b><br>";

            Swal.fire({
                title: title,
                confirmButtonText: 'Submit',
                showCancelButton: true,
                html: html,
                }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.value) {
                    $("#saveBtn").prop("disabled", true);
                    jQuery(this).parents("form").submit();
                }
            });
        });


        $('#countryIdd').on('change', function() {
            var country_id = $(this).val();
            $.ajax({
                url: "{{ url('agentportal/accounts/ajaxNetwork') }}",
                type: "POST",
                // dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: {
                    country_id: country_id
                },
                success: function (response) {
                    $('#agent_location_id').html(response);
                }
            });
        });
    });

    const number_format = (num, decimals) => parseFloat(num).toLocaleString('en', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#logoImg').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection