@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">

    <style>
        @font-face {
            /*font-family: "MTNFontWorkSan";*/
            font-family: "MTNBrighterSans-Regular";
            {{-- src: url("{!! asset('css/WorkSans.ttf') !!}"); --}} src: url("{!! asset('css/MTNBrighterSans-Regular.otf') !!}");
        }

        h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: MTNBrighterSans-Regular !important;
            /*font-family: MTNFontWorkSan !important;*/
        }

        body {
            font-family: MTNBrighterSans-Regular !important;
            /*font-family: MTNFontWorkSan !important;*/
        }

        input,
        label {
            font-family: MTNBrighterSans-Regular !important;
        }
    </style>
@endpush

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

@section('page_content')
    <div class="page-content padding-30 container-fluid"
        style="color: #000; font-family: MTNBrighterSans-Regular !important;">
        <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: #ffcb05; color: #000;">
                        {{--                        <button type="button" class="close" data-dismiss="modal">&times;</button> --}}
                        <h4 class="modal-title" style="color: #000;">Purchase SMS Credit Here</h4>
                    </div>
                    <div class="modal-body" id="modalbody">
                        <div class="row" style="padding: 10px;background-color: #4d4d4d;">
                            <div class="col-md-3">
                                <label style="font-weight: bolder;margin-top: 5px; color: #ffcb05;">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: #808080; color: #fff;"> Get OTP </button> --}}
                                <button id="cmkconf" onclick="verifyOTP()" type="button"
                                    class="btn btn-default btn-sm cmkotp"
                                    style="float: left ; background-color: #ffcb05; color: #000;"> Confirm</button>
                            </div>
                        </div>
                        <div class="row mt-2" style="display: flex; justify-content:center; margin-top: 10px;">
                            <a href="#" id="cmk" onclick="generateOTP()" type="button" class=""> Resend
                            </a>
                        </div>
                        <br>


                        {{--                            <form method="post" action="{{route('buynow')}}"> --}}
                        {{ csrf_field() }}
                        <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" readonly>
                            </div>
                            <br>

                            <label>Payment Type</label>
                            <select id="type" class="form-control select">
                                <option value="">-- Select Type --</option>
                                <option value="SMS">SMS / Email</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: #ffcb05; color: white" onclick="make_payment()" type="button" class="btn btn-default">Make Payment</button> --}}
                                <button type="button" style="background-color: #ffcb05; color: #000;"
                                    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);
                alert(
                    "An OTP has been sent to {{ Auth::user()->company->mobile_money_number ?? Auth::user()->phone_number }}, 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->mobile_money_number }}");
                    $("#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 == '059') {
                        $("#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 == '233059') {
                    $("#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 = voucher.trim();


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

                let reseller_client = '{{ $is_reseller_client }}';
                console.log('IS Reseller ', 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') }}',
                socail_endpoint = '{{ route('api.make_payment') }}',
                final_endpoint = option === 'SMS' ? sms_endpoint : socail_endpoint;


            console.log('hello');
            $.post(final_endpoint, {
                    msisdn: msisdn,
                    amount: amount,
                    description: "MTNM",
                    user_id: reseller_client ? 'mtnmessengersec' : 'mtnmessenger',
                    password: reseller_client ? 'npontu@02' : 'mtnmessenger',
                    username: username,
                    network: network,
                    voucher_number: voucher_number,
                    option: option
                },
                function(response) {

                    console.log(response);
                    console.log('hello');

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

                    $("#warning").html(
                        "<b>Payment request sent successfully. Check your phone for a confirmation prompt</b>");
                    $("#warning").css("color", "#4CAF50");

                    setTimeout(function() {
                        window.location.replace(window.location.href.replace('/new-purchase', '/dashboard'));
                    }, 6000); // 6 seconds


                    // } 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()->username }}',
                route = '{{ route('onua.balance', ['username' => 'name']) }}';
            route = route.replace('name', onuas_username);

            $.get(route, function(data) {
                console.log(data, amount);
                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