@extends("agentportal.layouts.layout")

@section("title", "Agent Topup")

@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

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

@section("content")
<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 example1 example1-compact">
                        <div class="card-header">
                            <h3 class="card-title">
                                Agent Topup
                            </h3>
                            <div class="card-toolbar">
                                <!--begin::Button-->
                                <a href="{{ url('agentportal/accounts') }}" class="btn btn-primary font-weight-bolder">{{ __('message_lang.BTN_BACK') }}</a>
                                <!--end::Button-->
                            </div>
                        </div>
                        <!--begin::Form-->
                        <form method="post" name="form" id="AgentTopupForm" action="{{ url('agentportal/accounts/topup-agent') }}" enctype="multipart/form-data" autocomplete="off">
                            @csrf
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label class="" for="location_code">{{ __('message_lang.LBL_LOCATION_CODE') }} <span style="color:red;">*</span></label>
                                                <input type="text" name="location_code" placeholder="{{ __('message_lang.LBL_LOCATION_CODE') }}" value="{{ old('location_code') }}" id="location_code" class="form-control @error('location_code') is-invalid @enderror custom-field" />
                                                @error('location_code')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-12">
                                                <label class="" for="amount">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="Amount" value="{{ old('amount') }}" id="amount" class="form-control @error('amount') is-invalid @enderror custom-field" />
                                                <span class="txn-alert-amount errClass" style="display: none;"></span>
                                                @error('amount')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="form-group col-md-12">
                                                <label class="" for="notes">Notes <span style="color:red;">*</span></label>
                                                <input type="text" name="notes" placeholder="Notes" value="{{ old('notes') }}" id="notes" class="form-control @error('notes') is-invalid @enderror custom-field" />
                                                @error('notes')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card mt-8 mt-md-0">
                                            <div class="card-header">
                                                <h6 class="mb-0 py-1">{!! trans('message_lang.LBL_SUMMARY') !!}</h6>
                                            </div>
                                            <ul class="list-group list-group-flush text-md">
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_LOCATION_CODE") !!}</span>
                                                    <span class="locationCodeSpan"></span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_LOCATION_NAME") !!}</span>
                                                    <span class="locationNameSpan"></span>
                                                </li>
                                                <li class="list-group-item d-flex justify-content-between fs-14">
                                                    <span class="fw-600">{!! trans("message_lang.LBL_AMOUNT") !!}</span>
                                                    <span class="amountSpan"></span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="card-footer">
                                <input type="hidden" name="agent_location_id" value="" id="agent_location_id" required/>
                                <button type="button" id="save" class="btn btn-primary mr-2" data-enabled="{!! Auth::guard('agentportal')->user()->agentLocation ? Auth::guard('agentportal')->user()->agentLocation->agentCountry->enable_passcode : 0 !!}">{{ trans('message_lang.BTN_SUBMIT') }}</button>
                                <button type="reset" id="reset" class="btn btn-secondary">{{ trans('message_lang.BUTTON_CANCEL') }}</button>
                            </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>
<script src="{{ url('js/sweetalert2.min.js') }}"></script>
@endsection

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

    var currency = "{{ auth()->user()->agentLocation->currency }}"
    var balance = "{{ auth()->user()->agentLocation->network->balance ?? auth()->user()->agentLocation->balance}}"
    var bnbOwned = "{{ auth()->user()->agentLocation->bnb_owned }}"
    var messageContinue = "{{trans("message_lang.CONF_TOPUP_INITIATE")}}"

    $(document).ready(function () {

        //Init Form (case redirect back)
        $('.locationCodeSpan').html($('#location_code').val())
        $('.amountSpan').html($('#amount').val())
        if ($('#location_code').val() != null && $('#location_code').val() != ''){
            getLocation($('#location_code').val())
        }

        $('#amount').on('keyup', function () {
            let amountVal = $(this).val() || 0.00;
            let amount = number_format(amountVal);
            $('.amountSpan').html(amount)

            if(!bnbOwned) {
                if (parseFloat(amountVal) > parseFloat(balance)){
                    $('.txn-alert-amount').show()
                    $('.txn-alert-amount').html("{{ __('message_lang.INSUFFICIENT_BALANCE') }}")
                } else {
                    $('.txn-alert-amount').hide()
                    $('.txn-alert-amount').html('')
                }
            }
        });

        $('#location_code').on('keyup', function () {
            $('.locationCodeSpan').html($(this).val())
            $('.locationNameSpan').html()
        });

        $("#location_code").on("focusout", function() {
            var locationCode = $("#location_code").val();
            if (locationCode != null && locationCode.trim() != ''){
                getLocation(locationCode)
            }
        });

        $('#save').on('click', function (e) {
            var amount = $('#amount').val();
            if (isNaN(amount) || amount == 0){
                alert('{{ __('message_lang.PLEASE_ENTER_AMOUNT') }}');
                return;
            }
            if(!bnbOwned) {
                if (parseFloat(amount) > parseFloat(balance)){
                    alert('{{ __('message_lang.INSUFFICIENT_BALANCE') }}');
                    return;
                }
            }
            var locationCode = $("#location_code").val();
            if (locationCode == null || locationCode.trim() == ''){
                alert('{{ __('message_lang.PLEASE_ENTER_LOCATION_CODE') }}');
                return;
            }
            var html = "";
            html += "<br>Agent Location: "+ jQuery("#location_code").val() + "<br>";
            html += "Amount: " +  number_format(jQuery("#amount").val() || 0.00) + "<br>";
            html += "Notes: " +  jQuery("#notes").val() + "<br>";;

            Swal.fire({
                title: "Agent Topup",
                confirmButtonText: 'Submit',
                showCancelButton: true,
                html: html,
                }).then((result) => {
                if (result.isConfirmed) {
                    if($("#save").data('enabled') == "1") {
                        send_otp(false);
                    } else {
                        $(this).attr("disabled", true);
                        jQuery(this).parents("form").submit();
                        $(this).removeAttr("disabled");
                    }
                }
            });
        });

        $('#reset').on('click', function (e) {
            $('.amountSpan').html('')
            $('.locationCodeSpan').html('')
            $('.locationNameSpan').html('')
            return;
        });

    });

    function getLocation(locationCode) {
        $('#agent_location_id').val('')
        $("#loading").show();
        var url = "{{url('agentportal/locations/code')}}";
        $.ajax({
            "url": url +'/'+ locationCode,
            "type": "GET",
            success: function (response) {
                $("#loading").hide();
                if (response.name == undefined) {
                    toastr.error('{{ __('message_lang.LBL_UNKNOWN_LOCATION') }}', 'Error');
                    $('.locationNameSpan').html('')
                } else {
                    var text = response.name
                    if (response.parent != undefined){
                        text += ' (' +response.parent+ ')'
                    }
                    $('.locationNameSpan').html(text)
                    $('#agent_location_id').val(response.id)
                }
            },
            error: function (error) {
                $("#loading").hide();
                $('.locationNameSpan').html('')
                console.log(error);
            }
        });
    }

    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]);
        }
    }

    // create the function to show the passcode validation popup
    function send_otp(){
        let timerInterval
                    Swal.fire({
                        title: '{{ trans('message_lang.LBL_ENTER_PASSCODE_FOR_VERIFICATION') }}',
                        html:
                            '<input id="swal-input" type="password" inputmode="numeric" autocomplete="one-time-code" pattern="\d{6}" class="swal2-input"> <br>' +
                            '<small>\{{ trans('message_lang.LBL_FORGOT_PASSCODE') }} <a href="\{{ url('agentportal/signature/create') }}">{{ trans('message_lang.LBL_HERE') }}</a></small>',

                        showCancelButton: true,
                        confirmButtonText: "{{ trans('message_lang.BUTTON_VERIFY') }}",
                        cancelButtonText: "{{ trans('message_lang.BUTTON_CANCEL') }}",
                        showLoaderOnConfirm: true,
                        confirmButtonText: 'Verify',
                        preConfirm: () => {
                                // Validate input
                                if ($('#swal-input').val() == '') {
                                    swal.showValidationMessage("{{ trans('message_lang.LBL_ENTER_PASSCODE') }}"); // Show error when validation fails.
                                    $('#swal-input').val("");
                                    swal.enableButtons(); // Enable the confirm button again.
                                } else {
                                    swal.showValidationMessage(); // Reset the validation message.
                                    validatePasscode($('#swal-input').val());
                                }
                        },
                        onOpen: function () {
                            $('#swal-input').focus()
                        }
                    }).then((result) => {
                        // If validation fails, the value is undefined. Break out here.
                        if (typeof(result.value) == 'undefined') {
                            return false;
                        }
                    });
    }

    function validatePasscode(passcode) {
        $('#loading').show();
        $.ajax({
            url: "{{ url('agentportal/validatePasscode') }}",
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                'passcode': passcode
            },
            success: function (response) {
                if(response.success) {
                    Swal.resetValidationMessage();
                    Swal.close();
                    jQuery("#AgentTopupForm").submit();
                } else {
                    Swal.showValidationMessage("{{ trans('message_lang.LBL_INVALID_PASSCODE_HEADER') }}");
                    $('#loading').hide();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#loading').hide();
                console.log(textStatus, errorThrown);
                toastr.error('Something went wrong.', 'Error');
            }
        });
    }
</script>
@endsection