@extends('layout.front.front')
@section('content')
<style type="text/css">
    .panel-heading {
        padding: 0;
        border:0;
    }
    .panel-title>a, .panel-title>a:active{
        display:block;
        padding:15px;
        color:#555;
        font-size:16px;
        letter-spacing:1px;
        word-spacing:3px;
        text-decoration:none;

    }
    table tr td {
        padding:5px;
    }



</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<section id="blog" class="blog">
      <div class="container aos-init aos-animate" data-aos="fade-up">

        <div class="row">

          <div class="col-lg-12 entries">

            <article class="entry entry-single">

             

          <div class="row">
    <div class="col-md-12">
    
<!-- Page Banner -->
<div class="page-banner about-banner container-fluid no-padding">
    <!-- Container -->
    <div class="container">
        <div class="col-md-5 no-padding">
            <h3  class="table_otp">OTP VERIFICATION</h3>
            <p></p>
        </div>
       
    </div><!-- Container /- -->
</div><!-- Page Banner /- -->

<!-- About One Section -->
<div id="aboutone-section" class="aboutone-section container-fluid no-padding blog-page-content">
    <div class="section-padding"></div>
    <!-- Container -->
    <div class="container">     
        <div class="section-header">
            <!--<h5>Right To Appeal By Litigant</h5>-->
            <!--<h3>A genuine people of attorney Lawyers working for the society</h3>-->
        </div>
        <div class="row">

            <div class="wrapper center-block">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                             
                                <table>
                                    <tr  class="table_otp">
                                        <td>Mobile No.</td>
                                        <td><input type="text" class="form-control numeric" maxlength="10" id="mobile" name="mobile"  autocomplete="off"/></td>
                                    </tr>
                                    <tr class="otprow table_otp">
                                        <td>Enter OTP.</td>
                                        <td><input type="password" class="form-control" maxlength="4"  id="otp" name="otp" /></td>
                                    </tr>
									
                                    <tr class="table_otp">
                                        <td></td>
                                        <td><input type="button"  class="btn btn-sm btn-primary send" id="sendotp" value="SEND OTP" />
                                            <input type="button"  class="btn btn-sm btn-primary confirm" id="verifyotp" value="CONFIRM OTP" /></td>
                                    </tr>
									<tr class="otprow">
                                        <div id="rti_list">
</div>

                                    </tr>
									
                                </table>   


                            
                        </div>




                    </div>



                </div> <!-- id accordion end -->


            </div>
        </div><!-- Container /- -->
        <div class="section-padding"></div>
    </div><!-- About One Section /- -->

</div>








    </div>
  </div>
         

              <div class="entry-content">
             
                <p>
                
                </p>

              </div>

     

            </article><!-- End blog entry -->

   

            <div class="blog-comments">

       

              
              

        

            </div><!-- End blog comments -->

          </div><!-- End blog entries list -->

   

        </div>

      </div>
    </section>





<script type="text/javascript">
function applyAppeal(dataFromFirstRequest) {
        var dataToSend = {
            rti_id: dataFromFirstRequest,
            _token: "{{ csrf_token() }}"            
        };

        var form = $("<form></form>");
        form.attr("method", "post");
        form.attr("action", "https://erp.mphc.gov.in/online_rti_appeal/get-detail-rti");

        $.each(dataToSend, function (name, value) {
            var input = $("<input type='hidden'>");
            input.attr("name", name);
            input.val(value);
            form.append(input);
        });

        form.appendTo("body");
        form.submit();
    }



    $(document).ready(function () {
        $(".numeric").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $(".errmsg").html("Digits Only").show().fadeOut("slow");
                    return false;
                }
            });
			
			 
        $(".otprow").hide();
        $("#verifyotp").hide();

        $("#sendotp").click(function () {
            var mobile = $("#mobile").val();
//            $( '#mobile' ).val( "********" );

            if (mobile == "") {
                alert("Enter Mobile No");
                $("#mobile").focus();
                return false;
            } else {
                var phoneno = /^\d{10}$/;
                if (mobile.match(phoneno)) {
                } else {
                    alert("Enter only numbers");
                    $("#mobile").focus();
                    return false;
                }

                if (mobile.length != 10) {
                    alert("Mobile No must be 10 digits");
                    $("#mobile").focus();
                    return false;
                }
            }


           
            var districtUrl = "{{ url('getOtp')}}";
            $("#sendotp").hide();
            $.post(districtUrl,
                    {mobile: mobile, "_token": "{{ csrf_token() }}"},
                    function (data) {
                        // data = data.split("|");
                        // alert("The requested OTP is : " + data[1]);
                        alert(data);
                        if(data != 'error'){
                        $(".otprow").show();
                        $("#verifyotp").show();
                        $("#otp").focus();
                    }
//                        $("#reotp").val(data[1]);
                    }
            );
        });

        $("#verifyotp").click(function () {
            var mobile = $("#mobile").val();
            var otp = $("#otp").val();
            if (otp == "") {
                alert("Enter OTP");
                $("#otp").focus();
                return false;
            } else if (otp.length != 4) {
                alert("OTP must be 4 digits");
                $("#otp").focus();
                return false;
            }
            var districtUrl = "{{ url('verifyOtpeFil')}}";
            $("#verifyotp").hide();
            $.post(districtUrl,
                    {mobile: mobile, otp: otp, "_token": "{{ csrf_token() }}"},
                    function (data) {
						
                        if (data == 1) {  
//						alert("this block is working");
            var districtUrl = "{{ url('online_rti_appeal/apply')}}";

//            var districtUrl = "{{ url('getOtp')}}";

            $("#sendotp").hide();
            $.post(districtUrl,
                    {
						
					"_token": "{{ csrf_token() }}"},
                    function (data) {
                        // data = data.split("|");
                        // alert("The requested OTP is : " + data[1]);
                       // alert(data);
                        if(data != 'error'){
                        $(".otprow").show();
                        $("#verifyotp").show();
                        $("#otp").focus();
                        $("#rti_list").html(data);
                        $("#otp_verification").css("display","none");
                        $("#table_otp").css("display","none");
                        $(".table_otp").css("display","none");
                        

                    }
//                        $("#reotp").val(data[1]);
                    }
            );

                   //=>         window.location.href = "{{ url('online_rti_appeal/apply')}}";
                        } else {
                            alert("OTP is incorrect");
                            $("#otp").val("");
                            $("#otp").focus();
                            $("#verifyotp").show();
                        }
                    }
            );
        });

        $('.panel-collapse').on('show.bs.collapse', function () {
            $(this).siblings('.panel-heading').addClass('active');
        });

        $('.panel-collapse').on('hide.bs.collapse', function () {
            $(this).siblings('.panel-heading').removeClass('active');
        });
    });
</script>