@extends('layouts.app')
@extends('layouts.navbar-alt')
@section('content')
<div class="container logi-container mt-lg-1 mt-sm-1">
    <div class="row mt-2 p-2">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="card shadow-lg">
                <div class="card-body align-contents-center">
                    <div class="col-md-12 col-lg-12 mb-4 mt-2 login-column">
                        <div class="col-md-12 col-lg-12 text-center mb-4">
                            <h3><strong>{{ __('Login with OTP') }}</strong></h3>
                        </div>
                        <div class="px-2 mb-3">
                            <div class="alert alert-danger mb-2" id="error"></div>
                            <div class="alert alert-success mb-2" id="successAuth"></div>
                            <div class="alert alert-success mb-2" id="successOtpAuth"></div>
                        </div>
                        <div class="col-md-12 col-lg-4 px-2 mb-3" id="phoneNumber">
                            <label for="phone_number">{{ __("Phone Number") }}</label>
                            <input class="form-control text-dark" id="phone_number" min="0" type="number" placeholder="Enter your Registered WhatsApp Number">
                            <div class="mt-2" id="recaptcha-container"></div>
                            <button class="btn get-fare-btn my-2" id="sendOTP">
                                <span class="spinner-border spinner-border-sm hidden" id="sendSpin" role="status" aria-hidden="true"></span>
                                {{ __('Send OTP') }}
                            </button>
                        </div>
                        <div class="col-md-12 col-lg-12 px-2 mb-3 text-center hidden" id="loadingSpinner">
                            <div class="spinner-border" style="width: 5rem; height: 5rem;" role="status"></div>
                        </div>
                        <div class="col-md-12 col-lg-4 px-2 mb-3" id="verifyOTP">
                            <label for="verify_otp">{{ __("Enter OTP") }}</label>
                            <input class="form-control text-dark" id="entered_otp" maxlength="6" type="number">
                            <button class="btn get-fare-btn my-2" id="verifyOTP">
                                <span class="spinner-border spinner-border-sm hidden" id="loginSpin" role="status" aria-hidden="true"></span>
                                {{ __('Login') }}
                            </button>
                        </div>
                        <div class="col-md-12 col-lg-4 px-2 mb-3">
                            <div class="row mt-4">
                                <div class="col-md-12 text-center">
                                    <a class="h5 text-dark text-decoration-none" href="{{ route('register') }}"><strong>{{ __('New User? Register') }}</strong></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection