@extends('admin.layouts.layout-login')
@section('content')
    <div class="d-flex justify-content-center align-items-center min-vh-100" style="min-height:100vh;">
        <div class="card shadow border-0" style="max-width:400px;width:100%;">
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <h5 class="text-primary mb-1">Welcome Back !</h5>
                    <p class="text-muted mb-3" style="font-size:15px;">Please verify your identity to continue.</p>
                    <span class="avatar-title rounded-circle bg-light d-inline-block mb-3" style="width:64px;height:64px;">
                        <img src="{{ asset('front/assets/images/favicon.ico') }}" alt="" class="rounded-circle"
                            height="48">
                    </span>
                </div>
                <form method="POST" action="{{ route('verify.guest.user.submit') }}" id="otpLoginForm">
                    @csrf
                    <input type="hidden" name="location_id" value="{{ $location_id }}" id="location_id">
                    <input type="hidden" name="application_number" value="{{ $application_number }}"
                        id="application_number">
                    <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 autofocus>
                            <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 mb-2">
                            @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" style="width:48px;height:48px;font-size:1.5rem;">
                            @endfor
                        </div>
                        <input type="hidden" id="otp" name="otp" value="">
                    </div>
                    <div class="d-grid mb-3">
                        <button type="submit" class="btn btn-primary btn-lg" id="loginWithOtpBtn" disabled>
                            Verify
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('page_script')
    <script src="{{ asset('admin-form-plugins/verify-login.js') }}"></script>
@endpush