@extends('layouts.auth')

@section('title')
    Login
@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">Reset Password Check Point</h4>
            </div>
            <div class="card-body">
                <form role="form" id="passwordResetForm" method="POST" action="{{ route('verify-otp') }}">
                    @csrf
                    <div class="mb-3">
                        <input type="hidden" name="ref_no" id="ref_no" value="{{ $ref_no }}">
                        <input type="text" name="otp" id="otp"
                            class="form-control form-control-lg @error('otp') is-invalid @enderror" placeholder="OTP"
                            aria-label="Otp">
                        @error('otp')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="text-center">
                        <button type="submit" id="loginBtn" 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 OTP...
                            </span>
                        </button>
                    </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() {
            // Handle form submission
            $('#passwordResetForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                clearErrors();

                // Show loading state
                showLoading(true);

                // Get form data
                var formData = {
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                // Submit form via AJAX
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {},
                    error: function(xhr) {
                        showLoading(false);

                        if (xhr.status === 422) {
                            // Validation errors
                            var errors = xhr.responseJSON.errors;
                            displayErrors(errors);
                        } else if (xhr.status === 419) {
                            // CSRF token mismatch
                            displayError(
                                'Session expired. Please refresh the page and try again.');
                        } else {
                            // Other errors
                            displayError('An error occurred. Please try again.');
                        }
                    }
                });
            });

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

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

            function displayErrors(errors) {
                $.each(errors, function(field, messages) {
                    var input = $('#' + field);
                    input.addClass('is-invalid');

                    // Remove existing error message
                    input.siblings('.invalid-feedback').remove();

                    // Add new error message
                    input.after('<div class="invalid-feedback d-block">' + messages[0] + '</div>');
                });
            }

            function displayError(message) {
                // Display general error message
                if ($('.alert-danger').length === 0) {
                    $('#passwordResetForm').prepend(
                        '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                        message +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                        '</div>');
                } else {
                    $('.alert-danger').text(message);
                }
            }

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