@{
    ViewData["Title"] = "Products & Services";
}

@using Pulsa.Texts
@using WebPortal.Models
@using WebPortal.Controllers
@using WebPortal.Extensions
@using WebService
@using Microsoft.AspNetCore.Http

@{
    //wsLoginResponse userInfo = Context.Session.GetComplexData<wsLoginResponse>("userInfo");
    String msisdn = Context.Session.GetString("account");
    String isdn = "";
    if (msisdn == null || msisdn.Length == 0)
    {
        msisdn = ViewBag.msisdn;
    }
    if (msisdn != null && msisdn.Length > BaseController.CountryCode.Length)
    {
        isdn = msisdn.Substring(BaseController.CountryCode.Length);
    }
}

@Html.Partial("_TopBanner")

<div class="pathway pt-5">
    <div class="container">
        <a href="https://telemor.tl" class="f14 breadcrumb breadcrumb-back">
            <img src="/image/recharge/left.png"> @Lang.Back
        </a>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="https://telemor.tl">Home</a></li>
            <li class="breadcrumb-item active">@Lang.Recharge</li>
        </ul>
    </div>
</div>

<div class="recharge">

    <div class="container aos-init" data-aos="fade-up">
        <div class="row">
            <div class="col-md-5 d-none d-md-block">
                <h3 class="f20 mb-4 tab-recharge active" order="1">@Lang.RechargeScratch</h3>
                <h3 class="f20 mb-4 tab-recharge" order="2">@Lang.RechargeUssd</h3>
                <h3 class="f20 mb-4 tab-recharge" order="3">@Lang.RechargeKakoak</h3>
                <h3 class="f20 mb-4 tab-recharge" order="4">@Lang.RechargeMosan</h3>
            </div>
            <div class="col-md-7 col-12 content-recharge">
                <h3 class="f20 mb-4 tab-recharge active d-md-none" order="1">@Lang.RechargeScratch</h3>
                <div class="box" order="1">
                    <form class="formstyle">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="@Lang.PhoneNumber *" id="phoneNumber2" value="@msisdn">
                            <p class="invalid-feedback" id="recharge-phoneNumberError2"></p>
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" placeholder="@Lang.EnterScratchCode" id="scratchCode2" maxlength="13">
                            <p class="invalid-feedback" id="recharge-scratchCodeError2"></p>
                            @*</div>*@
                        </div>
                        <div class="form-group">
                            <div class="d-flex align-items-center">
                                <div id="captcha-topup"></div>
                            </div>

                        </div>
                        <div class="form-group recharge-action">
                            <a class="btn-white text-center heg42" onclick="clearData();" id="btn-clear">@Lang.Reset</a>
                            <a class="btn-blue btn-regis text-center heg42" onclick="recharge2();" id="btn-recharge2">@Lang.Recharge</a>
                        </div>
                        <div class="row collapse-action">
                            <div class="col-12 text-center">
                                <img src="~/image/recharge/collapse.png" />
                            </div>
                        </div>
                    </form>
                </div>

                <h3 class="f20 mb-4 tab-recharge d-md-none" order="2">@Lang.RechargeUssd</h3>
                <div class="box d-none" order="2">
                    <h3 class="text-center mb-5">Dial On Your Phone</h3>
                    <div class="row">
                        <div class="col-6">
                            <p class="font-weight-bold">Recharge Pulsa:</p>
                            <p class="text-blue">*120*[code on scratch card]#</p>
                            <br />
                            <p class="font-weight-bold">Check Pulsa Balance:</p>
                            <p class="text-blue">*122#</p>
                        </div>
                        <div class="col-6">
                            <img src="~/image/recharge/recharge_ussd.png" />
                        </div>
                    </div>
                    <div class="row collapse-action">
                        <div class="col-12 text-center">
                            <img src="~/image/recharge/collapse.png" />
                        </div>
                    </div>
                </div>

                <h3 class="f20 mb-4 tab-recharge d-md-none" order="3">@Lang.RechargeKakoak</h3>
                <div class="box d-none" order="3">

                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row">
                                    <div class="col-lg-8 col-6 text-right">
                                        <img src="~/image/recharge/kakoak.png" />
                                    </div>
                                    <div class="col-lg-4 col-6 text-right">
                                        <h5>
                                            @Lang.DownloadSupperApp
                                        </h5>
                                        <a href="https://play.google.com/store/apps/details?id=com.telemor.superapp" target="_blank" class="d-block mb-3">
                                            <img src="~/image/google-play.svg" alt="google" style="max-width: 118px; height: auto">
                                        </a>
                                        <a href="https://apps.apple.com/vn/app/kakoak-care-more/id1603869621" target="_blank" class="d-block">
                                            <img src="~/image/app-store.svg" alt="app" style="max-width: 118px; height: auto">
                                        </a>
                                    </div>
                                    <div class="col-12 text-center description">
                                        <a class="register">@Lang.Login</a>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row">
                                    <div class="col-lg-8 col-6 text-right">
                                        <img src="~/image/recharge/kakoak2.png" />
                                    </div>
                                    <div class="col-lg-4 col-6 text-right">
                                        <h5>
                                            @Lang.DownloadSupperApp
                                        </h5>
                                        <a href="https://play.google.com/store/apps/details?id=com.telemor.superapp" target="_blank" class="d-block mb-3">
                                            <img src="~/image/google-play.svg" alt="google" style="max-width: 118px; height: auto">
                                        </a>
                                        <a href="https://apps.apple.com/vn/app/kakoak-care-more/id1603869621" target="_blank" class="d-block">
                                            <img src="~/image/app-store.svg" alt="app" style="max-width: 118px; height: auto">
                                        </a>
                                    </div>
                                    <div class="col-12 text-center description">
                                        <a class="register">@Lang.Login</a>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row">
                                    <div class="col-lg-8 col-6 text-right">
                                        <img src="~/image/recharge/kakoak3.png" />
                                    </div>
                                    <div class="col-lg-4 col-6 text-right">
                                        <h5>
                                            @Lang.DownloadSupperApp
                                        </h5>
                                        <a href="https://play.google.com/store/apps/details?id=com.telemor.superapp" target="_blank" class="d-block mb-3">
                                            <img src="~/image/google-play.svg" alt="google" style="max-width: 118px; height: auto">
                                        </a>
                                        <a href="https://apps.apple.com/vn/app/kakoak-care-more/id1603869621" target="_blank" class="d-block">
                                            <img src="~/image/app-store.svg" alt="app" style="max-width: 118px; height: auto">
                                        </a>
                                    </div>
                                    <div class="col-12 text-center description">
                                        <a class="register">@Lang.Recharge</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">@Lang.Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">@Lang.Next</span>
                        </a>
                    </div>

                    <div class="row collapse-action">
                        <div class="col-12 text-center">
                            <img src="~/image/recharge/collapse.png" />
                        </div>
                    </div>
                </div>

                <h3 class="f20 mb-4 tab-recharge d-md-none" order="4">@Lang.RechargeMosan</h3>
                <div class="box d-none" order="4">

                    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">

                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators2" data-slide-to="1" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row">
                                    <div class="col-lg-8 col-6 text-right">
                                        <img src="~/image/recharge/mosan.png" />
                                    </div>
                                    <div class="col-lg-4 col-6 text-right">
                                        <h5>
                                            @Lang.DownloadMosanApp
                                        </h5>
                                        <a href="https://play.google.com/store/apps/details?id=com.mosan.eu" target="_blank" class="d-block mb-3">
                                            <img src="~/image/google-play.svg" alt="google" style="max-width: 118px; height: auto">
                                        </a>
                                        <a href="https://apps.apple.com/vn/app/mosan-telemor/id1641630920" target="_blank" class="d-block">
                                            <img src="~/image/app-store.svg" alt="app" style="max-width: 118px; height: auto">
                                        </a>
                                    </div>
                                    <div class="col-12 text-center description">
                                        <a class="register">@Lang.Login</a>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row">
                                    <div class="col-lg-8 col-6 text-right">
                                        <img src="~/image/recharge/mosan2.png" />
                                    </div>
                                    <div class="col-lg-4 col-6 text-right">
                                        <h5>
                                            @Lang.DownloadMosanApp
                                        </h5>
                                        <a href="https://play.google.com/store/apps/details?id=com.mosan.eu" target="_blank" class="d-block mb-3">
                                            <img src="~/image/google-play.svg" alt="google" style="max-width: 118px; height: auto">
                                        </a>
                                        <a href="https://apps.apple.com/vn/app/mosan-telemor/id1641630920" target="_blank" class="d-block">
                                            <img src="~/image/app-store.svg" alt="app" style="max-width: 118px; height: auto">
                                        </a>
                                    </div>
                                    <div class="col-12 text-center description">
                                        <a class="register">@Lang.Recharge</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">@Lang.Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">@Lang.Next</span>
                        </a>
                    </div>

                    <div class="row collapse-action">
                        <div class="col-12 text-center">
                            <img src="~/image/recharge/collapse.png" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<link rel="stylesheet" type="text/css" href="~/css/recharge.css">

@section Scripts{
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer>
    </script>

    <script>
        $(".collapse-action").click(function () {
            $(".tab-recharge").removeClass("active");
            $(".recharge .box").addClass("d-none");
        })

        $('.tab-recharge').click(function () {
            $(".tab-recharge").removeClass("active");
            let order = $(this).attr("order");
            console.log("order = " + order);
            $(".tab-recharge[order=" + order + "]").addClass("active");
            //$(".recharge .box").removeClass("show");
            $(".recharge .box").addClass("d-none");
            $(".recharge .box[order=" + order + "]").removeClass("d-none");
        })
    </script>

    <script>
        // Restricts input for the set of matched elements to the given inputFilter function.
        (function ($) {
            $.fn.inputFilter = function (callback, errMsg) {
                return this.on("input keydown keyup mousedown mouseup select contextmenu drop focusout", function (e) {
                    if (callback(this.value)) {
                        // Accepted value
                        if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                            $(this).removeClass("input-error");
                            this.setCustomValidity("");
                        }
                        this.oldValue = this.value;
                        this.oldSelectionStart = this.selectionStart;
                        this.oldSelectionEnd = this.selectionEnd;
                    } else if (this.hasOwnProperty("oldValue")) {
                        // Rejected value - restore the previous one
                        $(this).addClass("input-error");
                        this.setCustomValidity(errMsg);
                        this.reportValidity();
                        this.value = this.oldValue;
                        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                    } else {
                        // Rejected value - nothing to restore
                        this.value = "";
                    }
                });
            };
        }(jQuery));

    $(document).ready(function () {
        $("#scratchCode2").inputFilter(function (value) {
            return /^\d*$/.test(value);    // Allow digits only, using a RegExp
        }, "Only digits allowed");
    });
    </script>

    <script>

        var widgetId1;
        var onloadCallback = function () {
            widgetId1 = grecaptcha.render(
                'captcha-topup',
                {
                    'sitekey': '@BaseController.CaptchaSiteKey'
                });
            };

        function clearData() {
            $("#scratchCode2").val("");
            grecaptcha.reset(widgetId1);
        }

        var updating2 = false;
        function recharge2() {
            if (updating2) {
                return;
            }
            console.log("recharge2");
            var token = $('input[name=__RequestVerificationToken]').val();
            var msisdn = $('#phoneNumber2').val();
            var code = $('#scratchCode2').val();

            // validate
            if (!msisdn || msisdn == "") {
                $("#recharge-phoneNumberError2").html("@Lang.PhonenumberRequired");
                $("#recharge-phoneNumberError2").show();
                $('#phoneNumber2').addClass("is-invalid");
                return;
            }

            if (!code || code == "") {
                $("#recharge-scratchCodeError2").html("@Lang.ScratchCodeRequired");
                $("#recharge-scratchCodeError2").show();
                $('#scratchCode2').addClass("is-invalid");
                return;
            }

            if (code.length != 13) {
                $("#recharge-scratchCodeError2").html("@Lang.ScratchCodeInvalid");
                $("#recharge-scratchCodeError2").show();
                $('#scratchCode2').addClass("is-invalid");
                return;
            }

            //$("#btn-recharge2").prop('disabled', true);
            startSpinner("btn-recharge2");
            updating2 = true;
            var formData = new FormData();
            formData.append('__RequestVerificationToken', token);
            formData.append('msisdn', msisdn);
            formData.append('code', code);
            formData.append('captcharesponse', grecaptcha.getResponse(widgetId1));

            $.ajax({
                type: "POST",
                url: ("/Home/RechargeScratch"),
                headers: { 'RequestVerificationToken': token },
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    updating2 = false;
                    grecaptcha.reset(widgetId1);
                    //$("#btn-recharge2").prop('disabled', false);
                    stopSpinner("btn-recharge2");
                    console.log(result);
                    hideModal("Recharge");
                    $("#scratchCode2").val("");
                    if (result.error == '0') {
                        $('#message-success').html(result.content);
                        showModal("modalSuccess");
                    } else {
                        showModal("modalFail");
                        $('#message-error').html(result.content);
                    }
                },
                error: function (err) {
                    updating2 = false;
                    $("#scratchCode2").val("");
                    grecaptcha.reset(widgetId1);
                    //$("#btn-recharge2").prop('disabled', false);
                    stopSpinner("btn-recharge2");
                    hideModal("Recharge");
                    showModal("modalFail");
                    $('#message-error').html(err.statusText);
                }
            });

        }

    </script>



}