@php
use App\CompanyInfo;
  $companyinfo = CompanyInfo::where('id' , '1')->first();
@endphp

 <link rel="stylesheet" type="text/css" href="/css/jquery.countdownTimer.css" />

@extends('layouts.app')
<style>
    .login-body{
        background-color: #171a2b;
    }
    .login-heading{
        color: #FFFFFF;
    }
    label{
        color: #FFFFFF;
    }
    .bt-outline:hover{
        border: 1px solid;
        border-color:#ffc106; 
        background:none !important;
    }
</style>

 
       
        
  
@section('content')
    @if( Session::has('error'))
        <div class="alert alert-danger alert-dismissible">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Error!</strong> {{ Session::get('error') }}
        </div>
    @endif
   <a href="{{ route('website') }}">
            <img src="{{ asset($companyinfo->logo) }}" class="img-responsive" style="width: 150px;
margin: auto;" >
          </a>
    <h3 class="login-heading">Sign in</h3>


 <div class="countdown" id="counter"> Time Remains</div>
   

    @if( Session::has('success'))
    <div class="alert alert-danger alert-dismissible">
    	<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    	 {{ Session::get('success') }}
    </div>
    @endif

    <div class="login-form">
        <ul class="nav nav-pills nav-justified mb-3" id="pills-tab" role="tablist">
          <li class="nav-item active" role="presentation">
            <a class="nav-link active" id="mpm_user-tab" data-toggle="pill" href="#mpm_user" role="tab" aria-controls="pills-home" aria-selected="true" style="">MPM User</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link bt-outline" id="non_mpm_user-tab" data-toggle="pill" href="#non_mpm_user" role="tab" aria-controls="non_mpm_user" aria-selected="false">Admin</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade active in" id="mpm_user" role="tabpanel" aria-labelledby="mpm_user-tab">
            <form data-toggle="validator" method="POST" action="{{ route('postLogin') }}">
            {{ csrf_field() }}
    
            <input type="hidden" name="type" id="type_login" value="otp">
            <div class="code-login" style="display: none;">
                <div class="form-group">
                    <label for="lmcode" class="control-label">Enter Member Code</label>
                    <input type="text" name="email" class="form-control">
                </div>

                <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                    <label for="password" class="control-label">Password</label>

                    <input id="password" class="form-control" type="password" name="password" minlength="6" data-msg-minlength="Password must be 6 characters or more." data-msg-required="Please enter your password." required>
                    @if ($errors->has('password'))
                        <span class="help-block">
                            <strong>{{ $errors->first('password') }}</strong>
                        </span>
                    @endif
                </div>
                
            </div>
            

            <div class="phone-login" >
                <div class="form-group">
                    <label for="phone" class="control-label">Enter Contact No.</label>
                    <div class="input-group">
                        <input type="text" name="phone" class="form-control" id="phone" pattern="[0-9]{10}">
                        <div class="input-group-btn">
                            <span class="btn btn-default" id="send_otp_span">
                                Send OTP
                            </span>
                        </div>
                    </div>
                </div>


                <div class="form-group rx_otp" style="display:none;">
                    <label for="otp" class="control-label">Enter OTP</label>
                    <input id="otp" type="text" class="form-control" name="otp">
                </div>
                </div>
                

                {{-- 
                  <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                <label for="email" class="control-label">Enter LM Code</label>
                <input id="email" type="text" class="form-control" name="email" value="{{ old('email') }}" required >
                @if ($errors->has('phone'))
                <span class="help-block">
                <strong>{{ $errors->first('phone') }}</strong>
            </span>
            @endif
        </div>
        --}}

        <div class="form-group">
            <button class="btn btn-primary btn-block" style="background:#ffc106;color:#171a2b;border-color:#ffc106" type="submit">Sign in</button>
        </div>

        <div class="form-group">
            <ul class="list-inline">
                 {{-- <li><a href="{{ route('password.request') }}">Forgot password?</a></li>  --}}
                <li>
                    <button type="button" class="btn btn-link btn-phone" style="display: none;">
                        Login With Registered Phone
                    </button>
                </li>
                <li>
                    <button type="button" class="btn btn-link btn-code" >
                        Login With Member Code
                    </button>
                </li>
            </ul>
        </div>
        </form>

          </div>
          <div class="tab-pane fade" id="non_mpm_user" role="tabpanel" aria-labelledby="non_mpm_user-tab">
            <form data-toggle="validator" method="POST" action="{{ route('postLogin') }}">
                {{ csrf_field() }}
                <div class="phone-login" >
                    <div class="form-group">
                        <label for="phone" class="control-label">User ID.</label>
                        <input type="text" name="phone" class="form-control" id="phone" pattern="[0-9]{6}">
                    </div>
                    <div class="form-group">
                        <label for="otp" class="control-label">Password</label>
                        <input id="otp" type="text" class="form-control" name="otp" pattern="[0-9]{4}">
                    </div>
                </div>
                
                <div class="form-group">
                    <button class="btn btn-primary btn-block" style="background:#ffc106;color:#171a2b;border-color:#ffc106;" type="submit">Sign in</button>
                </div>
                <li style="text-align: center;"><a href="{{ route('password.request') }}">Forgot password?</a></li> 
            </form>
          </div>
        </div>
</div>

@endsection
@section('footer-links')
    {{-- <li><a class="link-muted" href="{{ route('register') }}">Sign up</a></li> --}}
@endsection


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){
            $('#counter').hide();
          $('#send_otp_span').click( function(){
            var phone = $("#phone").val();
            if(phone != ''){
            $.ajax({
                     url: '/send_otp/'+ phone,
                     method: "GET",
                     cache: false,
                     success: function(html){
                        if(html.status == 'success'){

                        if(html.exist == true)
                        {
                            alert(html.message);
                        }
                        else if(html.exist == false)
                        {
                            let bal = html.result.split(',');
                            if(bal[1] != "InsufficientBalance"){
                                $('.rx_otp').show();
                                $('#counter').show();

                                $('#send_otp_span').hide();
                                var timer2 = "01:01";
                                var interval = setInterval(function() {


                                  var timer = timer2.split(':');
                                  //by parsing integer, I avoid all extra string processing
                                  var minutes = parseInt(timer[0], 10);
                                  var seconds = parseInt(timer[1], 10);
                                  --seconds;
                                  minutes = (seconds < 0) ? --minutes : minutes;
                                  if (minutes < 0) clearInterval(interval);
                                  seconds = (seconds < 0) ? 59 : seconds;
                                  seconds = (seconds < 10) ? '0' + seconds : seconds;
                                  //minutes = (minutes < 10) ?  minutes : minutes;
                                 var counttimer =  $('.countdown').html(minutes + ':' + seconds);

                                  timer2 = minutes + ':' + seconds;
                                   // alert(timer2);
                                     if(timer2 == '-1:59' || timer2 < '0' ){
                                         $('#counter').hide();
                                         $('#send_otp_span').show();
                                        $('#send_otp_span').text('Resend');
                                       }
                                }, 1000);
                            }else{
                                alert('Error 3.  OTP can\'t be sent');
                            }
                        }
                    }
                    return;
                 },
                 error: function(error){
                    alert('Sorry, something went wrong');
                 }
           });

      }else{
        alert('Kindly, enter your valid phone number');
      }
          

      });


    });
 

</script>