@extends('layouts.auth')

@section('title')
    Verify OTP
@endsection

@section('content')
    <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
        <div class="card card-plain">
            <div class="card-header pb-0 text-start">
                <h4 class="font-weight-bolder">Verify OTP</h4>
                <h5 class="font-weight-bolder">Check your email</h5>
                <p class="mb-0">We've sent a 6-digit code to your email</p>
            </div>
            <div class="card-body">
                <form role="form" id="otpForm" method="POST" action="{{ route('verify-otp') }}">
                    @csrf
                    <input type="hidden" name="ref_no" value="{{ $ref_no }}">

                    <div class="mb-3">
                        <label for="otp" class="form-label">Enter 6-Digit OTP</label>
                        <input type="text" name="otp" id="otp" maxlength="6"
                            class="form-control form-control-lg text-center @error('otp') is-invalid @enderror"
                            placeholder="000000" aria-label="OTP" value="{{ old('otp') }}"
                            style="font-size: 24px; letter-spacing: 10px; font-weight: 600;">
                        @error('otp')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-clock me-1"></i> Code expires in 5 minutes
                        </small>
                    </div>

                    <div class="text-center">
                        <button type="submit" id="verifyBtn" class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">
                            <span class="btn-text">Verify OTP</span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2" role="status"
                                    aria-hidden="true"></span>
                                Verifying...
                            </span>
                        </button>
                    </div>

                    <div class="text-center mt-3">
                        <a href="{{ route('forgot-password') }}" class="text-primary text-gradient font-weight-bold">
                            <i class="fas fa-arrow-left me-1"></i> Request New OTP
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div
        class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
        <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
            style="background-image: url('{{ asset('img/cover.png') }}'); background-size: cover;">
            <span class="mask"></span>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Auto-format OTP input (numbers only)
            $('#otp').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });

            // Handle form submission
            $('#otpForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                clearErrors();

                // Validate OTP
                var otp = $('#otp').val();
                if (otp.length !== 6) {
                    displayError('Please enter a valid 6-digit OTP');
                    return;
                }

                // Show loading state
                showLoading(true);

                // Submit form
                this.submit();
            });

            // Clear errors when user starts typing
            $('#otp').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').remove();
                $('.alert-danger').remove();
            });

            function clearErrors() {
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').remove();
                $('.alert-danger').remove();
            }

            function displayError(message) {
                var input = $('#otp');
                input.addClass('is-invalid');
                input.after('<div class="invalid-feedback d-block">' + message + '</div>');
            }

            function showLoading(show) {
                if (show) {
                    $('#verifyBtn').prop('disabled', true);
                    $('.btn-text').addClass('d-none');
                    $('.btn-loading').removeClass('d-none');
                } else {
                    $('#verifyBtn').prop('disabled', false);
                    $('.btn-text').removeClass('d-none');
                    $('.btn-loading').addClass('d-none');
                }
            }
        });
    </script>
@endsection