@extends('Website.Layout.App')
@push('css')
    <link href="{{ asset('assets/css/custom/login.css') }}" rel="stylesheet">
@endpush

@section('content')

<div class="containe mt-5">
    <div class="row d-flex justify-content-center">
        <div class="col-11 col-md-4">
            
            <div class="card shadow-lg bg-light border-0 login-card">
                <div class="card-header login-card-header">
                    Sign In
                </div>
               
                <div class="card-body login-card-body p-3">

                    <div class="flash-message">
                        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                            @if (Session::has('alert-' . $msg))
                                <p class="alert alert-{{ $msg }} d-flex justify-content-between p-2">
                                    <b>{{ Session::get('alert-' . $msg) }}</b>
                                    <i class="fa fa-times-circle close" aria-hidden="true" data-dismiss="alert" aria-label="close"></i>
                                </p>
                                {{ session()->forget('alert-' . $msg) }}
                            @endif
                        @endforeach
                    </div>
                    
                   
                    <form action="{{ url('/auth/login/verify') }}" method="post">
                        @csrf
                        <div class="mt-3">
                            <label for="" class="form-label">Mobile No</label>
                            <div class="input-group">
                                <input type="text" class="form-control mobileNoInput" 
                                        id="mobile_no" 
                                        name="mobile_no" 
                                        minlength="10"
                                        maxlength="10"
                                        value="{{ isset($mobile_no) ? $mobile_no : NULL }}"
                                        @if(isset($mobile_no)) readonly @endif
                                >              
                            </div>
                        </div>
                         
                        <div class="mt-4">
                            <label for="" class="form-label">OTP</label>
                            <input type="text" class="form-control otpInput" 
                                    id="otp" 
                                    name="otp"
                                    minlength="6"
                                    maxlength="6"
                                    >
                        </div>

                        <div class="row mt-4">
                            <div class="col-6 col-md-6">
                                <div class="mb-3 form-check remember-me">
                                    <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
                                    <label class="form-check-label" for="remember_me">Remember Me</label>
                                  </div>          
                            </div>
                            <div class="col-6 col-md-6 forget-password">
                                <span id="timer" class="text-muted" style="display: inline;">Resend in 30 sec</span>
                                <button type="submit"
                                        id="resend_otp_button"
                                        name="button_type"
                                        value="RESEND_OTP"
                                        class="resend-otp-button">
                                    Resend OTP
                                </button>
                            </div>
                        </div>
                                   
                        <div class="d-flex justify-content-center">
                            <button type="submit"
                                    name="button_type"
                                    value="SIGN_IN" 
                                    class="sign-in-button">
                                    Sign In
                            </button>
                        </div>

                        <div class="mt-4 new-to-taxoero text-center">
                            New to Taxoreo? <span><a href="{{ url('auth/registration') }}">Create an account</a></span>
                        </div>

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


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

@endsection 

@push('scripts')
<script>
$(document).ready(function() {
    $('#resend_otp_button').hide();
    var timerDuration = 30;
    var interval = setInterval(function() {
        if (timerDuration <= 0) {
            clearInterval(interval);
            $('#timer').hide();
            $('#resend_otp_button').fadeIn('fast'); 
        } else {
            $('#timer').text('Resend in ' + timerDuration + ' sec');
        }
        timerDuration--;
    }, 1000); 
});
</script>
@endpush