@extends('reseller.layouts.master')
@push('styles')
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
    <!--suppress ALL -->
    <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">
        <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: #f9a825">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title" style="color: #fff">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-3">
                                    <label style="font-weight: bolder;margin-top: 5px">One Time Pin</label>
                                </div>
                                <div class="col-md-4">
                                    <input value="" type="text" id="inputOTP" class="form form-control">
                                </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>

{{--                                    <button id="cmk" style="float: left ; background-color: #f9a825; color: white" onclick="generateOTP()" type="button" class="btn btn-default"> Resend  </button>--}}
{{--                                    <button id="cmk" style="float: left ; background-color: #006890; color: white" onclick="verifyOTP()" type="button" class="btn btn-default"> Confirm</button>--}}
                            </div>
                            <br>


{{--                            <form method="post" action="{{route('buynowReseller')}}">--}}
{{--                            <form>--}}
                                @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>Mobile Money Number</label>
                                    <input name="phone" id="number" onkeyup="process_tel()" class="form form-control" type="number">
                                </div>
                                <br>

                                    <label>Payment Type</label>
                                        <select id="type" class="form-control select">
                                            <option value="SMS" selected>SMS</option>
                                        </select>

                                <br>
                                <div id="amt1" style="display:block;">
                                    <label>Amount</label>
                                    <input onkeyup="process_amount()" id="amount" step="0.01" class="form form-control" type="number">
                                </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>
        // generateOTP();

        function generateOTP() {
            $('.cmkotp').prop('disabled',true);
            $.get("{{route('sendOTPCode')}}", function (data, status) {
                $('.cmkotp').prop('disabled',false);
                console.log(data);
                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 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();
            network = network.trim();
            voucher = "1";


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

//        alert(number);
            if (v_amount == true && v_number == true && v_network == true) {

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

                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");


            $.post("{{route('api.make_payment')}}",
                {
                    msisdn: msisdn,
                    amount: amount,
                    description: "Deywuro",
                    user_id: "npdeywuro",
                    password: "hdgt2314",
                    username: username,
                    network: network,
                    voucher_number: voucher_number
                },

                function (response) {

                    if (response.code == 0 || response =="") {

                        $("#warning").html("<b>Check your phone for a confirmation prompt</b>");
                        $("#warning").css("color", "#4CAF50");
                        console.log(response,'Hello');

                    } else {

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

                    }
                }
            );
        }

        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("");
        }

        function done() {

        }

    </script>

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

    <script>
        $(".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