@extends('app')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta http-equiv="refresh" content="6000">
@endpush

@section('page_title')
    Deywuro, Your Gateway To Bulk SMS Communication
@endsection

@section('page_content')
    <div class="page-content padding-30 container-fluid" style="margin-top: 5em">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #212121">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" style="color: #ffc107">PURCHASE SMS / SOCIAL MEDIA CREDIT HERE </h4>
                    </div>
                    <div class="modal-body" id="modalbody">
                        <div class="row" style="padding: 10px;background-color: #fae6df">
                            <div class="col-md-2">
                                <label style="font-weight: bolder;margin-top: 5px">One Time Pin</label>
                            </div>
                            <div class="col-md-5">
                                <input value="" type="text" id="inputOTP" class="form form-control" placeholder="Enter OTP sent to registered phone number">
                            </div>
                            <div class="col-md-5">
                                <button id="cmkotp"  onclick="generateOTP()" type="button" class="btn btn-default btn-sm  bounceIn animate cmkotp" style="float: left ; background-color: #f9a825; color: white"> Get OTP  </button>
                                <button id="cmk"  onclick="generateOTP()" type="button" class="btn btn-default btn-sm cmkotp" style="float: left ; background-color: #f9a825; color: white"> Resend  </button>
                                <button id="cmkconf"  onclick="verifyOTP()"   type="button" class="btn btn-default btn-sm cmkotp" style="float: left ; background-color: #006890; color: white"> Confirm</button>
                            </div>
                        </div>
                        <br>


                        {{--                            <form method="post" action="{{route('buynow')}}">--}}
                        @csrf
                        <div id="wrapMyData" style="display: none">
                            <div>
                                <label>Username</label>
                                <input name="username" value="{{Auth::user()->username}}" type="text" id="username" class="form form-control" readonly>
                            </div>
                            <br>

                            <div>
                                <label for="number">Mobile Money Number</label>
                                <input name="phone" id="number" onkeyup="process_tel()" class="form form-control" type="number" readonly>
                            </div>
                            <br>

                            <label for="type">Payment Type</label>
                            <select id="type" class="form-control select">
                                <option value="">-- Select Type --</option>
                                <option value="SMS">SMS</option>
                                {{--                                            <option value="Social Media">Social Media</option>--}}
                            </select>

                            <br>
                            <div id="amt1" style="display: none;">
                                <label>Amount</label>
                                <input onkeyup="process_amount()" id="amount" step="0.01" class="form form-control" type="number">
                            </div>

                            <div id="amt2" style="display: none;">
                                <label>Social Media Amount</label>
                                <input  id="smamount" value="{{$price}}" class="form form-control" type="number" style="color:#212121" readonly>
                            </div>
                            <br>

                            <div>
                                <label>Network</label>
                                <input onkeyup="to_capitals()" name="network" readonly id="network" class="form form-control">
                            </div>
                            <div>
                                <input type="checkbox" id="ported" onclick="port()"> Ported
                            </div>
                            <br>

                            {{--                                <div hidden id="voucher_div">--}}
                            {{--                                    <label>Voucher</label>--}}
                            {{--                                    <input type="number" name="voucher" id="voucher" class="form form-control">--}}
                            {{--                                </div>--}}

                            {{--Warning--}}
                            <p id="warning"></p>
                            {{--Warning--}}
                            <p id="warning"></p>
                            <div class="modal-footer">
                                {{--<button id="mk" style="background-color: #f9a825; color: white" onclick="make_payment()" type="button" class="btn btn-default">Make Payment</button>--}}
                                <button type="submit" style="background-color: #f9a825; color: white" onclick="make_payment()"  class="btn btn-default">Make Payment</button>
                            </div>
                        </div>

                        {{--                            </form>--}}
                    </div>
                </div>

            </div>


        </div>

    </div>
@endsection

@push('scripts')
    <script>
        function generateOTP() {
            $('.cmkotp').prop('disabled',true);
            $.get("{{route('sendOTPCode')}}", function (data, status) {
                $('.cmkotp').prop('disabled',false);
                alert( "An OTP has been sent to {{ auth()->user()->company->contact_person_phone }}, kindly confirm to proceed. OTP expires in 5 minutes !!!");
            });
        }


        function verifyOTP() {
            var code = $("#inputOTP").val();
            $.post("{{route('verifyOTPCode')}}",{
                _token: token,
                otp:code
            }, function (data, status) {
                if (data.trim()==='Verified'){
                    $("#wrapMyData").css("display","block");
                    $("#number").val("{{ auth()->user()->company->contact_person_phone}}");
                    $("#inputOTP").val('');
                    process_tel();
                }else{
                    alert("Invalid code provided");
                }
            });
        }
    </script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        $(function () {
            function getUrlParameter(sParam) {
                var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                    sURLVariables = sPageURL.split('&'),
                    sParameterName,
                    i;

                for (i = 0; i < sURLVariables.length; i++) {
                    sParameterName = sURLVariables[i].split('=');

                    if (sParameterName[0] === sParam) {
                        return sParameterName[1] === undefined ? true : sParameterName[1];
                    }
                }
            };

        });

    </script>

    {{--Mobile Money Integration--}}
    <script type="text/javascript">

        function process_tel() {

            var first, tel, substring, prefix, prefix2;

            tel = $("#number").val();

            tel = tel.trim();

            tel = tel.split("+");

            tel = tel.join("");

            //mma = $("#mobile_money_account");

            if (tel.length !== 0) {

                first = tel.charAt(0);

                if (first === '0') {

//                $("#network").html("");
                    first = '233';
                    substring = tel.substring(1, 10);
                    prefix = tel.substring(0, 3);

                    //alert(prefixh2);

                    $("#number").val(first + substring);

                    if (prefix == '024' || prefix == '054' || prefix == '055' || prefix  =='053' || prefix == '059'  || prefix == '025') {
                        $("#network").val("MTN");
                    }

                    else if (prefix == '027' || prefix == '057') {
                        $("#network").val("TIGO");
                    }

                    else if (prefix == '020' || prefix == '050') {
                        $("#network").val("VODAFONE");
                        $("#voucher_div").show();
                    }

                    else if (prefix == '026' || prefix == '056') {
                        $("#network").val("AIRTEL");
                    }

                    else {
                        $("#mobile_money_account").val("");
                    }
                }
            }

            if (first == '2') {

//            $("#telplus").html("");
                prefix2 = tel.substring(0, 5);

                //alert(prefix2);
                if (prefix2 == '23324' || prefix2 == '23354' || prefix2 == '23355' || prefix2  =='23353' || prefix2 == '23359'  || prefix2 == '23325') {
                    $("#network").val("MTN");
                    $("#voucher_div").hide();
                }

                else if (prefix2 == '23327' || prefix2 == '23357') {
                    $("#network").val("TIGO");
                    $("#voucher_div").hide();
                }

                else if (prefix2 == '23320' || prefix2 == '23350') {
                    $("#network").val("VODAFONE");
                    $("#voucher_div").show();
                }

                else if (prefix2 == '23326' || prefix2 == '23356') {
                    $("#network").val("AIRTEL");
                    $("#voucher_div").hide();
                }

                else {
                    $("#network").val("");
                    $("#voucher_div").hide();
                }
            }

            if (tel.length < 12 || tel.length > 12) {
                $("#number").css("border-color", "red");


            } else {
                $("#number").css("border-color", "#4CAF50");

            }
        }

        function process_amount() {
            var amount = $("#amount").val();

            if (amount < 0.5) {
                $("#amount").css("border-color", "red");
            } else {
                $("#amount").css("border-color", "#4CAF50");
            }
        }

        function port() {

//        IF IS PORTED
            if (document.getElementById('ported').checked) {

                document.getElementById("network").readOnly = false;
//IF NOT PORTED
            } else {

                document.getElementById("network").readOnly = true;
                process_tel();

            }
        }

        function to_capitals() {
            var t = $("#network").val();
            var r = t.toUpperCase();
            $("#network").val(r);

            ported_vodafone();
        }

        function ported_vodafone() {
            if (document.getElementById('ported').checked && $("#network").val() === "VODAFONE") {
                $("#voucher_div").show();
            } else {
                $("#voucher_div").hide();
            }
        }

        function close_modal() {
            $("#modal").modal("hide");
            reset();
        }

        function make_payment() {
            var username = $("#username").val();
            var number   = $("#number").val();
            var amount   = $("#amount").val();
            var smamount = $("#smamount").val();
            var stype    = $("#type").val();
            var network  = $("#network").val();
            var voucher  = $("#voucher").val();


            var v_number  = false;
            var v_amount  = false;
            var v_network = false;
            var v_voucher = false;

            username = username.trim();
            number   = number.trim();

            amount   = amount.trim();
            smamount = smamount.trim();
            network  = network.trim();
            voucher  = "1";

            amount = stype === 'SMS' ? amount : smamount;


            if (network === "VODAFONE" && voucher === "") {
                $("#warning").html("Warning: Your voucher is invalid");
                $("#warning").css("color", "crimson");
            } else {
                v_voucher = true;
            }

            if (network === "MTN" || network === "TIGO" || network === "VODAFONE" || network === "AIRTEL") {
                v_network = true;
            } else {
                $("#warning").html("Warning: The network is invalid");
                $("#warning").css("color", "crimson");
            }

            if (amount === "" || amount < 0.5) {
                $("#warning").html("Warning: The minimum amount allowed is GHC 0.50");
                $("#warning").css("color", "crimson");
            } else {
                v_amount = true;
            }

            if (number === "" || number.length > 12 || number.length < 12) {
                $("#warning").html("Warning: Your mobile money number is invalid");
                $("#warning").css("color", "crimson");
            } else {
                v_number = true;
            }

            if (v_amount === true && v_number === true && v_network === true) {
                $("#warning").html("");
                let reseller_client = '{{$is_reseller_client}}';
                reseller_client ? checkOnuasBalance(number, amount, username, network, voucher) : transact(number, amount, username, network, voucher)
            }
        }

        function transact(msisdn, amount, username, network, voucher_number) {

            $("#mk").hide();

            $("#warning").html("<b>Processing Request. Please wait</b>");
            $("#warning").css("color", "#3F51B5");

            let reseller_client = '{{$is_reseller_client}}',
                option =   $('#type').val(),
                sms_endpoint    = '{{route('api.make_payment')}}',
                social_endpoint = '{{route('media.payment')}}',
                final_endpoint  = (option === 'SMS' || option === '') ? sms_endpoint : social_endpoint;



            $.post(final_endpoint,
                {
                    msisdn: msisdn,
                    amount: amount,
                    description: "Deywuro",
                    uid: "{{auth()->user()->id}}",
                    uname: "{{auth()->user()->username}}",
                    user_id:  reseller_client ? 'npdeywuro' : 'npdeywuro',
                    password:  reseller_client ? 'hdgt2314' : 'hdgt2314',
                    username: username,
                    network: network,
                    voucher_number: voucher_number,
                    option: option
                },

                function (response) {
                    // response = JSON.parse(response);
                    if (response.code === 0 || response ==="") {

                        $("#warning").html("<b>Didn't get the Momo prompt? Just dial your Momo code and approve the transaction.</b>");
                        $("#warning").css("color", "#4CAF50");

                    }else if (response.status === 'success')
                    {
                        $("#warning").html("<b>Didn't get the Momo prompt? Just dial your Momo code and approve the transaction.</b>");
                        $("#warning").css("color", "#4CAF50");

                    }

                    else {

                        $("#warning").html("<b>Payment could not be initiated. Please try again later.</b>");
                        $("#warning").css("color", "crimson");

                    }
                }
            );
        }

        function checkOnuasBalance(number, amount, username, network, voucher) {
            let onuas_username  = '{{\Illuminate\Support\Facades\Auth::user()->created_by}}',
                route = '{{route('onua.balance',['username'=>'name'])}}';
            route = route.replace('name',onuas_username);

            $.get(route,function (data) {
                parseFloat(data) > parseFloat(amount) ?
                    transact(number, amount, username, network, voucher)
                    :
                    alert('Reseller does not have enough balance. Please contact your reseller to top up before initiating transaction');
            })

        }

        function reset() {
            $("#mk").show();
            $("#warning").html("");

            $("#number").css("border-color", "#eee");

            $("#amount").css("border-color", "#eee");
            $("#amount").val("");

            $("#voucher").css("border-color", "#eee");
            $("#voucher").val("");
//        window.location.reload();
        }


    </script>

    <script>
        $(".barChart_div").mouseover(function () {
            $(this).animate({
                width: '150px'
            });
        });

        $(".barChart_div").mouseout(function () {
            $(this).animate({
                width: '40px'
            });
        });
    </script>

    <script>
        $(document).ready(function () {

            $('#type').on('change',function () {

                var opt=$(this).find(":selected").val();

                if(opt === 'SMS'){
                    // alert('Helllo');
                    $('#amt1').css('display','block');
                    $('#amt2').css('display','none');
                    $('#amount').attr('name','amount');

                }else {
                    // alert('Hi');
                    $('#amt1').css('display','none');
                    $('#amt2').css('display','block');
                    $('#smamount').attr('name','amount');
                }

            });

        });
    </script>


@endpush