@extends('frontend.layouts.partials.app')

@section('title', 'Account Opening::' . $accountType->name)

@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

@section('content')
    {{-- Hero Section --}}
    <section class="lg:h-[350px] h-[250px] p-6 md:p-10 text-white bg-gradient-to-r from-[#004d6e] to-[#00accc]">
        <div class="h-full flex flex-col justify-center space-y-3 md:space-y-4">
            <h1 class="text-2xl md:text-4xl font-bold">Account Opening Form ({{ $accountType->name }})</h1>
            <p class="text-sm md:text-lg font-medium">Please fill out your details to open your account.</p>
        </div>
    </section>

    {{-- Form Section --}}
    <section class="-mt-12 md:-mt-16 mb-12 px-4 md:px-6 flex justify-center">
        <div class="w-full max-w-7xl bg-white shadow-2xl rounded-xl p-5 md:p-10 space-y-8">
            {{-- Form --}}
            <form id="accountForm" action="{{ route('createAccountForm.store') }}" method="POST" enctype="multipart/form-data"
                class="space-y-6 px-0 md:px-8 lg:px-12">
                @csrf

                @include('frontend.layouts.accountOpening.partials.form')

                {{-- reCAPTCHA --}}
                @error('g-recaptcha-response')
                    <p class="text-red-600 text-sm">{{ $message }}</p>
                @enderror

                <div id="recaptcha" class="g-recaptcha mt-4" data-expired-callback="expiredCaptcha()"
                    data-error-callback="expiredCaptcha()" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}">
                </div>
                <p id="recaptcha-error" class="text-red-600 text-sm mt-1"></p>

                {{-- Submit Button --}}
                <div class="pt-4 flex justify-start">
                    <button type="submit" id="submitBtn"
                        class="bg-brandBlue text-white px-6 py-2.5 rounded-md font-semibold transition-all hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] focus:outline-none focus:ring-2 focus:ring-blue-300">
                        Proceed
                    </button>
                </div>
            </form>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        // reCAPTCHA expired callback
        function expiredCaptcha() {
            document.getElementById('recaptcha-error').innerText = 'Captcha expired. Please complete the captcha again.';
        }

        document.getElementById('accountForm').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission

            document.getElementById('recaptcha-error').innerText = '';

            var recaptchaResponse = grecaptcha.getResponse();
            if (recaptchaResponse.length === 0) {
                document.getElementById('recaptcha-error').innerText = 'Please complete the captcha.';
                return false;
            }

            // Frontend validation
            var firstName = document.querySelector('input[name="first_name"]').value;
            if (!firstName) {
                var firstNameInput = document.getElementById('first_name');
                firstNameInput.classList.add('border-red-500');
                firstNameInput.nextElementSibling.innerText = 'First name is required.';
                return false;
            }

            this.submit(); // Proceed to submit the form
        });

        // jQuery Validation
        $(document).ready(function() {

            $.validator.addMethod("lettersWithSpaces", function(value, element) {
                return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
            }, "Only letters and spaces are allowed");

            $.validator.addMethod("nepalPhone", function(value, element) {
                return this.optional(element) || /^(98|97|96)[0-9]{8}$|^01[0-9]{7}$/.test(value);
            }, "Please enter a valid Nepali phone number");

            // Initialize validation
            $("#accountForm").validate({
                rules: {
                    first_name: {
                        required: true,
                        lettersWithSpaces: true,
                        minlength: 3
                    },
                    middle_name: {
                        lettersWithSpaces: true,
                        minlength: 3
                    },
                    last_name: {
                        required: true,
                        lettersWithSpaces: true,
                        minlength: 3
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    phone_no: {
                        required: true,
                        digits: true,
                        nepalPhone: true,
                        minlength: 9,
                        maxlength: 10
                    },
                    branch_id: {
                        required: true
                    },
                    agreed_terms: {
                        required: true
                    }
                },
                messages: {
                    first_name: {
                        required: "Please enter your first name",
                        lettersWithSpaces: "Only letters and spaces are allowed"
                    },
                    middle_name: {
                        lettersWithSpaces: "Only letters and spaces are allowed"
                    },
                    last_name: {
                        required: "Please enter your last name",
                        lettersWithSpaces: "Only letters and spaces are allowed"
                    },
                    email: {
                        required: "Please enter your email address",
                        email: "Please enter a valid email address"
                    },
                    phone_no: {
                        required: "Please enter your phone number",
                        digits: "Only numbers are allowed",
                        nepalPhone: "Please enter a valid Nepali phone number",
                        minlength: "Nepali phone number must be at least 9 digits long",
                        maxlength: "Nepali phone number can be at most 10 digits long"
                    },
                    branch_id: {
                        required: "Please select a branch. At least one branch should be selected"
                    },
                    agreed_terms: {
                        required: "You should agree to the terms and conditions to create an account"
                    }
                },

                onkeyup: function(element) {
                    this.element(element);
                },

                errorPlacement: function(error, element) {
                    error.addClass('text-[#ff0000] text-xs');
                    error.insertAfter(element);
                },

                highlight: function(element) {
                    $(element).css({
                        "border-color": "#f44336 ",
                        "box-shadow": "0 0 0 0.2rem rgba(244, 67, 54, 0.25)"
                    });
                },
                unhighlight: function(element) {
                    $(element).css({
                        "border-color": "#4CAF50 ",
                        "box-shadow": "0 0 0 0.2rem rgba(76, 175, 80, 0.25)"
                    });
                },
            });
        });
    </script>
@endpush