@extends('admin.layouts.layout-login')
@section('content')
    <div class="bg-soft-primary">
        <div class="row">
            <div class="col-7">
                <div class="text-primary p-4">
                    <h5 class="text-primary">Welcome Back !</h5>
                    <p>Sign in to continue to {{ \Config::get('settings.company_name') }}.</p>
                </div>
            </div>
            <div class="col-5 align-self-end">
                <img src="assets/images/profile-img.png" alt="" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="card-body pt-0">
        <div>
            <a href="javascript:void(0)">
                <div class="avatar-md profile-user-wid mb-4">
                    <span class="avatar-title rounded-circle bg-light">
                        <img src="{{ asset('front/assets/images/logo-small.png') }}" alt="" class="rounded-circle"
                            height="34">
                    </span>
                </div>
            </a>
        </div>
        <div class="p-2">
            <div class="mb-3">
                @include('admin.components.messages')
            </div>
            <!-- Login with Password Form -->
            <form method="POST" action="{{ route('login') }}" id="loginForm">
                @csrf
                {{-- <h4 class="text-center mb-4">Login to your account</h4> --}}

                <div class="form-group mb-4">
                    <label for="email" class="form-label">Enter your email/mobile number</label>
                    <input id="email" type="text"
                        class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email"
                        value="{{ old('email') }}" required autofocus>
                    {{-- @if ($errors->has('email'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('email') }}</strong>
                        </span>
                    @endif --}}
                </div>

                <div class="form-group mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <label for="password" class="form-label">Enter your password</label>
                        <a href="{{ route('password.request') }}" class="text-primary text-decoration-none">Forgot
                            Password?</a>
                    </div>
                    <div class="input-group">
                        <input id="password" type="password"
                            class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password"
                            required>
                        <span class="input-group-text bg-transparent">
                            <i class="far fa-eye" id="togglePassword"></i>
                        </span>
                        @if ($errors->has('password'))
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('password') }}</strong>
                            </span>
                        @endif
                    </div>
                </div>

                @if (\Config::get('settings.recaptcha_site_key'))
                    <div class="form-group mb-4">
                        <div id="recaptcha-container" class="d-flex align-items-center rounded">
                            <div id="g-recaptcha" class="g-recaptcha"
                                data-sitekey="{{ \Config::get('settings.recaptcha_site_key') }}"
                                data-callback="onRecaptchaSuccess" data-expired-callback="onRecaptchaExpired"></div>
                            <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                        </div>
                        @error('g-recaptcha-response')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                @endif

                <div class="d-grid gap-2 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        Login
                    </button>
                </div>
            </form>

            <!-- OTP Login Form (Initially Hidden) -->
            <form method="POST" action="{{ route('login.otp.verify') }}" id="otpLoginForm" style="display: none;">
                @csrf
                {{-- <h4 class="text-center mb-4">Login with OTP</h4> --}}

                <div class="form-group mb-4">
                    <label for="otp_email" class="form-label">Enter your email/mobile number</label>
                    <div class="input-group">
                        <input id="otp_email" type="text" class="form-control" name="email" required>
                        <button type="button" class="btn btn-outline-primary" id="sendOtpBtn">Send OTP</button>
                    </div>
                </div>

                <div class="form-group mb-4">
                    <label class="form-label">Enter OTP</label>
                    <div class="d-flex justify-content-between otp-input-group">
                        @for ($i = 1; $i <= 6; $i++)
                            <input type="text" class="form-control text-center otp-digit mx-1" maxlength="1"
                                name="otp[]" id="otp-{{ $i }}"
                                data-next="{{ $i < 6 ? 'otp-' . ($i + 1) : '' }}"
                                data-prev="{{ $i > 1 ? 'otp-' . ($i - 1) : '' }}" disabled required pattern="[0-9\.]"
                                inputmode="decimal" oninput="this.value = this.value.replace(/[^0-9.]/g, '').slice(0, 1);">
                        @endfor
                    </div>
                    <input type="hidden" id="otp" name="otp" value="">
                </div>

                <div class="d-grid gap-2 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg" id="loginWithOtpBtn" disabled>
                        Login
                    </button>
                </div>
            </form>

            <div class="text-center">
                <a href="#" id="toggleLoginMethod" class="text-decoration-none">
                    or Login with OTP <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
@endsection
@push('page_script')
    <script>
        var recaptchaSiteKey = '{!! \Config::get('settings.recaptcha_site_key') !!}';
    </script>
    <script src="{{ asset('admin-form-plugins/admin-login.js') }}"></script>
    <!-- Google reCAPTCHA -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush