@extends('adminlayout.admin')
@section('content')
<style>
    #loading {
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        opacity: 0.7;
        background-color: #fff;
        z-index: 11111;
    }

    #loading-image {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        height: 100%;
        width: 100%;
    }

    .radio-custom:checked~label {
        color: black;
    }
    .card-shadows{
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    margin-top: 15px;
    border-radius: 4px;
    }
</style>
<div id="loading" style="display: none;">
    <img id="loading-image" src="{{ asset('assets/images/bbps/loading2.gif') }}" alt="Loading..." />
</div>


<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <br><br><br>
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Recharge Service</h3>
                        <div class="nk-block-des text-soft">
                            <!-- @if ($errors->any())
    <p class="text-danger">
                                                {{ implode('', $errors->all(':message')) }}
                                             </p>
    @endif -->
                        </div>
                    </div>
                    <div class="nk-block-head-content">
                        <div class="toggle-wrap nk-block-tools-toggle">
                            <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1"  data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                            <div class="toggle-expand-content" data-content="pageMenu">
                                <ul class="nk-block-tools g-3">
                                    <li class="nk-block-tools-opt">
                                        <div class="drodown">
                                            <a href="{{ route('dashboard') }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- .toggle-wrap -->
                    </div><!-- .nk-block-head-content -->
                    <!-- .nk-block-head-content -->
                </div>
                <!-- .nk-block-between -->
            </div>
            <!-- .nk-block-head -->

            <div class="row">
                <div class="col-md-6">
                    <!-- <div class="card card-preview">
                        <div class="card-inner">
                            <ul class="nav nav-tabs mt-n3">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#tabItem1">Personal</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#tabItem2">Security</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="tabItem1">
                                    <label class="border border-dark p-2" style="width: 100%; border-radius: 10px;">
                                        <input type="radio" name="plan" class="radio-custom">
                                        <div class="row">
                                            <div class="col-6" style="text-align: left;">251 &#8377;</div>
                                            <div class="col-6" style="text-align: right;">28 days</div>
                                            <div class="col-12">
                                                <p>50GB Data Pack validity for 28 days.</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                <div class="tab-pane" id="tabItem2">
                                    <label class="border border-dark p-2" style="width: 100%; border-radius: 10px;">
                                        <input type="radio" name="plan" class="radio-custom">
                                        <div class="row">
                                            <div class="col-6" style="text-align: left;">251 &#8377;</div>
                                            <div class="col-6" style="text-align: right;">28 days</div>
                                            <div class="col-12">
                                                <p>50GB Data Pack validity for 28 days.</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div> -->



                    <div class="card card-shadows">
                        <div class="card-header">
                            <h4 class="card-title">Mobile Recharge</h4>
                        </div>
                        <div class="card-body" id="mobileBody">
                            {{-- <form action="{{ route('do_hlrCheck') }}" method="post">
                                @csrf
                                <div class="form-group">
                                    <label for="number">Mobile Number</label>
                                    <input type="number" id="numberHlrCheck" name="number" class="form-control" required>
                                    <p class="text-danger">
                                        <b id="mobReError"></b>
                                    </p>
                                    <p class="text-success">
                                        <b id="mobReSuccess"></b>
                                    </p>
                                </div>
                            </form> --}}
                            <form action="" method="post">
                                <div class="form-group">
                                    <label for="number">Mobile Number</label>
                                    <input type="number" id="numberHlrCheck" name="number" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label for="number">Operator</label>
                                    <select name="operator" id="operatorHlrCheck" class="form-control" required>
                                        <option value="Airtel">Airtel</option>
                                        <option value="Aircel">Aircel</option>
                                        <option value="Bsnl">Bsnl</option>
                                        <option value="Tata Docomo">Tata Docomo</option>
                                        <option value="Tata Indicom">Tata Indicom</option>
                                        <option value="Jio">Jio</option>
                                        <option value="Vodafone">Vodafone</option>
                                        <option value="Idea">Idea</option>
                                        <option value="MTS">MTS</option>
                                        <option value="MTNL">MTNL</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="number">Circle</label>
                                    <select name="circle" id="circleHlrCheck" class="form-control" required>
                                        <option value="Andhra Pradesh Telangana">Andhra Pradesh Telangana</option>
                                        <option value="Assam">Assam</option>
                                        <option value="Bihar Jharkhand">Bihar Jharkhand</option>
                                        <option value="Chennai">Chennai</option>
                                        <option value="Delhi NCR">Delhi NCR</option>
                                        <option value="Gujarat">Gujarat</option>
                                        <option value="Haryana">Haryana</option>
                                        <option value="Himachal Pradesh">Himachal Pradesh</option>
                                        <option value="Jammu Kashmir">Jammu Kashmir</option>
                                        <option value="Karnataka">Karnataka</option>
                                        <option value="Kerala">Kerala</option>
                                        <option value="Kolkata">Kolkata</option>
                                        <option value="Madhya Pradesh Chhattisgarh">Madhya Pradesh Chhattisgarh</option>
                                        <option value="Maharashtra Goa">Maharashtra Goa</option>
                                        <option value="Mumbai">Mumbai</option>
                                        <option value="North East">North East</option>
                                        <option value="Orissa">Orissa</option>
                                        <option value="Punjab">Punjab</option>
                                        <option value="Rajasthan">Rajasthan</option>
                                        <option value="Tamil Nadu">Tamil Nadu</option>
                                        <option value="UP East">UP East</option>
                                        <option value="UP West">UP West</option>
                                        <option value="West Bengal">West Bengal</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <p class="text-danger">
                                        <b id="mobReError"></b>
                                    </p>
                                    <p class="text-success">
                                        <b id="mobReSuccess"></b>
                                    </p>
                                    <input type="button" class="btn btn-success" id="brosePlan" value="submit">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card card-shadows">
                        <div class="card-header">
                            <h4 class="card-title">DTH Recharge</h4>
                        </div>
                        <div class="card-body">
                            <form action="">
                                <div class="form-group">
                                    <label for="operator">Operator</label>
                                    <select name="operator" id="operatorDth" class="form-control" onchange="clearData()">
                                        <option value="Airteldth">Airtel Digital TV</option>
                                        <option value="TataSky">Tata Sky</option>
                                        <option value="Videocon">Videocon D2H</option>
                                        <option value="Sundirect">Sun Direct</option>
                                        <option value="Dishtv">Dish TV</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="number">Customer ID</label>
                                    <input type="number" name="number" id="numberDth" class="form-control" required>
                                    <p class="text-danger">
                                        <b id="numberError"></b>
                                    </p>
                                </div>
                                <div class="form-group">
                                    <button type="button" onclick="checkDthInfo()" class="btn btn-success">Proceed</button>
                                </div>
                            </form>
                            <div id="responseDth" class="mt-2">

                            </div>
                        </div>
                    </div>
                    
                    <br><br>
                    
                    <div class="card card-shadows">
                        <div class="card-header">
                            <h4 class="card-title">Status Enquiry</h4>
                        </div>
                        <div class="card-body">
                            <form action="">
                                <div class="form-group">
                                    <label for="reference">Referance ID</label>
                                    <input type="text" name="reference" id="reference" class="form-control" required>
                                    <p class="text-danger">
                                        <b id="numberError"></b>
                                    </p>
                                </div>
                                <div class="form-group">
                                    <button type="button" onclick="rechargeStatusEnquiry()" class="btn btn-success">Process</button>
                                </div>
                            </form>
                            <div id="responseStatusEnquery" class="mt-2">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function changeText(value) {
        document.getElementById('amount').value = value;
        document.getElementById('submit-button').innerHTML = 'Recharge';
        document.getElementById("do-recharge").action = "{{ route('doRecharge') }}";
    }

    function clearData() {
        jQuery('#responseDth').html();
    }

    function checkDthInfo() {
        var operator = $("#operatorDth").val();
        var number = $("#numberDth").val();
        if (operator != '' && number != '') {
            var url = "{{ route('do_dthinfo') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'number': number,
                    'operator': operator
                },
                context: this,
                success: function(response) {
                    var response = JSON.parse(response);
                    console.log(response);
                    var html = '';
                    html = `<div class="card">
                                    <div class="card-body border border-dark" style="border-radius: 10px;">`;
                    if (response.response_code == 1) {
                        var info = '';
                        $.each(response.info, function(k, v) {
                            info = v;
                        });
                        html += `<form action="{{ route('doRecharge') }}" method="post">
                                            @csrf
                                            <input type="hidden" name="operator" value="` + operator + `">
                                            <input type="hidden" name="canumber" value="` + number + `">
                                            <div class="row">
                                                <div class="col-sm-6">Customer Name : </div>
                                                <div class="col-sm-6">` + info.customerName + `</div>
                                                <div class="col-sm-6">Balance : </div>
                                                <div class="col-sm-6">` + info.Balance + `</div>
                                                <div class="col-sm-6">Monthly Recharge : </div>
                                                <div class="col-sm-6">` + info.MonthlyRecharge + `</div>
                                                <div class="col-sm-6">Next Recharge Date : </div>
                                                <div class="col-sm-6">` + info.NextRechargeDate + `</div>
                                                <div class="col-sm-6">Status : </div>
                                                <div class="col-sm-6">` + info.status + `</div>
                                                <div class="col-12">
                                                    <div class="form-group mb-2 mt-2">
                                                        <input type="number" class="form-control" name="amount" id="amount" placeholder="Enter amount...">
                                                    </div>
                                                </div>
                                                <div class="col-12 text-center">
                                                    <button type="submit" class="btn btn-success plnrecharbtn">Recharge</button>
                                                </div>
                                            </div>
                                        </form>`;
                    } else {
                        html += `<h5>` + response.message + `</h5>`;
                    }
                    html += `</div>
                                </div>`;

                    jQuery('#responseDth').html(html);
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        }
    }

    function rechargeStatusEnquiry() {
        var reference = $("#reference").val();
        if (reference != '') {
            var url = "{{ route('do_rechargeStatusEnquiry') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'reference': reference
                },
                context: this,
                success: function(response) {
                    var response = JSON.parse(response);
                    console.log(response);
                    var html = '';
                    html = `<div class="card">
                                    <div class="card-body border border-dark" style="border-radius: 10px;">`;
                    if (response.status == true) {
                        html += `<div class="row">
                                    <div class="col-md-6 text-left" >Customer ID : </div>
                                    <div class="col-md-6 text-right" >` + response.data.canumber + `</div>
                                    <div class="col-md-6 text-left" >Operator : </div>
                                    <div class="col-md-6 text-right" >` + response.data.operatorname + `</div>
                                    <div class="col-md-6 text-left" >Amount : </div>
                                    <div class="col-md-6 text-right" >` + response.data.amount + `</div>
                                    <div class="col-md-6 text-left" >TDS : </div>
                                    <div class="col-md-6 text-right" >` + response.data.tds + `</div>
                                    <div class="col-md-6 text-left" >Referance ID</div>
                                    <div class="col-md-6 text-right" >` + response.data.refid + `</div>
                                    <div class="col-md-6 text-left" >Status</div>
                                    <div class="col-md-6 text-right" >` + response.data.status + `</div>
                                    <div class="col-md-6 text-left" >Date Added</div>
                                    <div class="col-md-6 text-right" >` + response.data.dateadded + `</div>
                                    <div class="col-md-12 text-center" >` + response.message + `</div>
                                </div>`;
                    } else {
                        html += `<h5>` + response.message + `</h5>`;
                    }
                    html += `</div>
                                </div>`;

                    jQuery('#responseStatusEnquery').html(html);
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        }
    }

    $(function() {
        $('#brosePlan').click(function() {
            $('#brosePlan').hide();
            $('#mobReSuccess').html('Please wait...');
            $('#mobReError').html('');
            var number      = $('#numberHlrCheck').val();
            var circle      = $('#circleHlrCheck').val();
            var operator    = $('#operatorHlrCheck').val();
            var url = "{{ route('browsePlan') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'circle': circle,
                    'op': operator
                },
                context: this,
                success: function(result) {
                    console.log(result);
                    var result = JSON.parse(result);
                    // alert();
                    var html1 = '';
                    var html2 = '';
                    if (result.response_code == 1 && result.status == true) {

                        var i = 1;
                        jQuery.each(result.info, function(arrKey, arrVal) {
                            if (arrVal != null) {
                                if (i == 1) {
                                    html1 += `<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
                                        </li>`;
                                } else {
                                    html1 += `<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
                                        </li>`;
                                }

                                if (i == 1) {
                                    html2 += `<div class="tab-pane active" id="tab` + i + `">`;
                                } else {
                                    html2 += `<div class="tab-pane " id="tab` + i + `">`;
                                }

                                var j = 1;
                                jQuery.each(arrVal, function(arrKey2, arrVal2) {
                                    html2 += `<a href="#" class="text-dark" data-toggle="modal" data-target="#rechargeTab` + i + j + `">
                                        <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
                                            <div class="row">
                                                <div class="col-sm-6" style="text-align: left;">Amount: </div>
                                                <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
                                                <div class="col-sm-6" style="text-align: left;">Validate: </div>
                                                <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
                                                <div class="col-12">
                                                    <p>` + arrVal2.desc + `</p>
                                                </div>
                                            </div>
                                        </label>
                                        </a>`;
                                    html2 += `<div class="modal fade" id="rechargeTab` + i + j + `" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                                        <div class="modal-content">
                                                            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                                                            <div class="modal-body modal-body-md">
                                                                <h5 class="add-notice">Recharge</h5>
                                                                <div class="tab-content">
                                                                    <div class="tab-pane active" id="personal-document">
                                                                    <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
                                                                        <div class="row">
                                                                            <div class="col-sm-6" style="text-align: left;">Amount: </div>
                                                                            <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
                                                                            <div class="col-sm-6" style="text-align: left;">Validate: </div>
                                                                            <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
                                                                            <div class="col-12">
                                                                                <p>` + arrVal2.desc + `</p>
                                                                            </div>
                                                                        </div>
                                                                    </label>
                                                                        <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
                                                                            @csrf
                                                                            <input type="hidden" name="operator" class="operat" value="` + operator + `">
                                                                            <input type="hidden" name="canumber" class="cnmobile" value="` + number + `">
                                                                            <input type="hidden" name="amount" value="` + arrVal2.rs + `">

                                                                            <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
                                                                                <li>
                                                                                    <button type="submit" class="btn btn-lg btn-success plnrecharbtn">Recharge</button>
                                                                                </li>
                                                                                <li>
                                                                                    <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
                                                                                </li>
                                                                            </ul>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>`;
                                    j++;
                                });

                                html2 += `</div>`;
                                i++;
                            }
                        });

                        var html = `<div class="card card-preview">
                                        <div class="card-inner">
                                            <div class="row mb-2">
                                                <div class="col-sm-6">Circle: <b>` + circle + `</b></div>
                                                <div class="col-sm-6">Operator: <b>` + operator + `</b></div>
                                            </div>
                                            <ul class="nav nav-tabs mt-n3">
                                                ` + html1 + `
                                            </ul>
                                            <div class="tab-content">
                                                ` + html2 + `
                                            </div>
											<div>  <button type="button" class="btn btn-lg btn-success" onclick="otheramountHandler()" >Other Amount</button></div>
                                        </div>
                                    </div>`;


                        jQuery('#mobileBody').html(html);
                    } else {
                        $('#mobReError').html('Somthing else, please try again');
                        $('#mobReSuccess').html('');
                        alert('Somthing else, please try again!');
                    }




                    // LOADING HIDE *******************
                    // $('#loading').hide();
                    $('#mobReSuccess').html('');
                    // LOADING HIDE *******************


                    // alert('success');
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
        });
    });

    // $(function() {
    //     // alert('Document is ready');
    //     $('#numberHlrCheck').keyup(function() {
    //         // alert('keyup');
    //         if ($("#numberHlrCheck").val().length > 9) {
    //             // LOADING HIDE *******************
    //             // $('#loading').show();
    //             $('#mobReSuccess').html('Please wait...');
    //             $('#mobReError').html('');
    //             // LOADING HIDE *******************

    //             var number = $("#numberHlrCheck").val();
    //             var url = "{{ route('do_hlrCheck') }}";
    //             $.ajax({
    //                 url: url,
    //                 headers: {
    //                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //                 },
    //                 type: "POST",
    //                 data: {
    //                     'number': number
    //                 },
    //                 context: this,
    //                 success: function(response) {
    //                     console.log(response);
    //                     // alert(response);
    //                     var response = JSON.parse(response);


    //                     if (response.response_code == 1 && response.status == true) {
    //                         let circle      = response.info.circle;
    //                         let operator    = response.info.operator;

    //                         var url = "{{ route('browsePlan') }}";
    //                         // alert(url);
    //                         $.ajax({
    //                             url: url,
    //                             headers: {
    //                                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
    //                             },
    //                             type: "POST",
    //                             data: {
    //                                 'circle': circle,
    //                                 'op': operator
    //                             },
    //                             context: this,
    //                             success: function(result) {
    //                                 console.log(result);
    //                                 var result = JSON.parse(result);
    //                                 // alert();
    //                                 var html1 = '';
    //                                 var html2 = '';
    //                                 if (result.response_code == 1 && result.status == true) {

    //                                     var i = 1;
    //                                     jQuery.each(result.info, function(arrKey, arrVal) {
    //                                         if (arrVal != null) {
    //                                             if (i == 1) {
    //                                                 html1 += `<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
    //                                                     </li>`;
    //                                             } else {
    //                                                 html1 += `<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tab` + i + `">` + arrKey + `</a>
    //                                                     </li>`;
    //                                             }

    //                                             if (i == 1) {
    //                                                 html2 += `<div class="tab-pane active" id="tab` + i + `">`;
    //                                             } else {
    //                                                 html2 += `<div class="tab-pane " id="tab` + i + `">`;
    //                                             }

    //                                             var j = 1;
    //                                             jQuery.each(arrVal, function(arrKey2, arrVal2) {
    //                                                 html2 += `<a href="#" class="text-dark" data-toggle="modal" data-target="#rechargeTab` + i + j + `">
    //                                                     <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
    //                                                         <div class="row">
    //                                                             <div class="col-sm-6" style="text-align: left;">Amount: </div>
    //                                                             <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
    //                                                             <div class="col-sm-6" style="text-align: left;">Validate: </div>
    //                                                             <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
    //                                                             <div class="col-12">
    //                                                                 <p>` + arrVal2.desc + `</p>
    //                                                             </div>
    //                                                         </div>
    //                                                     </label>
    //                                                     </a>`;
    //                                                 html2 += `<div class="modal fade" id="rechargeTab` + i + j + `" role="dialog">
    //                                                                 <div class="modal-dialog modal-dialog-centered modal-md" role="document">
    //                                                                     <div class="modal-content">
    //                                                                         <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
    //                                                                         <div class="modal-body modal-body-md">
    //                                                                             <h5 class="add-notice">Recharge</h5>
    //                                                                             <div class="tab-content">
    //                                                                                 <div class="tab-pane active" id="personal-document">
    //                                                                                 <label class="border border-dark p-2 mb-2" style="width: 100%; border-radius: 10px;">
    //                                                                                     <div class="row">
    //                                                                                         <div class="col-sm-6" style="text-align: left;">Amount: </div>
    //                                                                                         <div class="col-sm-6" style="text-align: right;">` + arrVal2.rs + ` &#8377;</div>
    //                                                                                         <div class="col-sm-6" style="text-align: left;">Validate: </div>
    //                                                                                         <div class="col-sm-6" style="text-align: right;">` + arrVal2.validity + `</div>
    //                                                                                         <div class="col-12">
    //                                                                                             <p>` + arrVal2.desc + `</p>
    //                                                                                         </div>
    //                                                                                     </div>
    //                                                                                 </label>
    //                                                                                     <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
    //                                                                                         @csrf
    //                                                                                         <input type="hidden" name="operator" value="` + operator + `">
    //                                                                                         <input type="hidden" name="canumber" value="` + number + `">
    //                                                                                         <input type="hidden" name="amount" value="` + arrVal2.rs + `">

    //                                                                                         <ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
    //                                                                                             <li>
    //                                                                                                 <button type="submit" class="btn btn-lg btn-success plnrecharbtn">Recharge</button>
    //                                                                                             </li>
    //                                                                                             <li>
    //                                                                                                 <a href="#" data-dismiss="modal" class="link link-light">Cancel</a>
    //                                                                                             </li>
    //                                                                                         </ul>
    //                                                                                     </form>
    //                                                                                 </div>
    //                                                                             </div>
    //                                                                         </div>
    //                                                                     </div>
    //                                                                 </div>
    //                                                             </div>`;
    //                                                 j++;
    //                                             });

    //                                             html2 += `</div>`;
    //                                             i++;
    //                                         }
    //                                     });

    //                                     var html = `<div class="card card-preview">
    //                                                     <div class="card-inner">
    //                                                         <div class="row mb-2">
    //                                                             <div class="col-sm-6">Circle: <b>` + circle + `</b></div>
    //                                                             <div class="col-sm-6">Operator: <b>` + operator + `</b></div>
    //                                                         </div>
    //                                                         <ul class="nav nav-tabs mt-n3">
    //                                                             ` + html1 + `
    //                                                         </ul>
    //                                                         <div class="tab-content">
    //                                                             ` + html2 + `
    //                                                         </div>
    //                                                     </div>
    //                                                 </div>`;


    //                                     jQuery('#mobileBody').html(html);
    //                                 } else {
    //                                     $('#mobReError').html('Somthing else, please try again');
    //                                     $('#mobReSuccess').html('');
    //                                     alert('Somthing else, please try again!');
    //                                 }




    //                                 // LOADING HIDE *******************
    //                                 // $('#loading').hide();
    //                                 $('#mobReSuccess').html('');
    //                                 // LOADING HIDE *******************


    //                                 // alert('success');
    //                             },
    //                             error: function(error) {
    //                                 console.log(error.responseText);
    //                             }
    //                         });
    //                     } else {
    //                         $('#mobReError').html('Somthing else, please try again');
    //                         $('#mobReSuccess').html('');
    //                         alert('Somthing else, please try again!');
    //                     }


    //                 },
    //                 error: function(error) {
    //                     console.log(error.responseText);
    //                 }
    //             });

    //         }
    //     });
    // });

    

    $(window).load(function() {
        $('#loading').hide();
    });
	function otheramountHandler()
	{
		$('#otheramount').modal('show');
		$('#otheroprtor').val($('.operat').val());
		$('#othercannumber').val($('.cnmobile').val());
		
	}
</script>
<div class="modal fade" id="otheramount" role="dialog">
                                                    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                                        <div class="modal-content">
                                                            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
                                                            <div class="modal-body modal-body-md">
                                                                <h5 class="add-notice">Recharge</h5>
                                                                <div class="tab-content">
                                                                    <div class="tab-pane active" id="personal-document">
                                                                   
                                                                        <form action="{{ route('doRecharge') }}" method="post" enctype="multipart/form-data">
                                                                            @csrf
                                                                            <input type="hidden" id="otheroprtor" name="operator" value="">
                                                                            <input type="hidden" id="othercannumber" name="canumber" value="">
                                                                            <input type="number" name="amount" id="customamount" value="" required>

                                                                      <button type="submit"   class="btn btn-lg btn-success rechargebtn">Recharge</button>
                                                                        </form>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
	<div class="loader" style="display: none;"><img src="https://www.globaltax.in/assets/images/loadingtrans.gif"></div>
	<div class="mask" style="display: none;"></div>
<style>
.loader{
	position: fixed;
    left: 45%;
    top: 33%;
	z-index: 9999;
}
.mask{ position:fixed; background:#000; left:0px; top:0px; right:0px; bottom:0px; opacity:0.6; z-index:99; }
</style>	
<script>

 $("body").on("click",".rechargebtn", function(event){
	
	 if($('#customamount').val()!='')
	 {
		$('.loader').show();
		$('.mask').show();
		$('.rechargebtn').hide();
	 }
 });
 $("body").on("click",".plnrecharbtn", function(event){
	
	$('.loader').show();
		$('.mask').show();
		$('.plnrecharbtn').hide();
 });
</script>												
@endsection