@extends('frontend.user-dashboard.layout.app')

@section('header')
    @include('frontend.user-dashboard.include.header')
    @include('frontend.user-dashboard.include.sidebar')
@endsection

@section('content')
@php 
    $residence_choose = '';
    $settings = Session::has('settings') ? Session::get('settings')[0] : [];
    $delivery_date = date("F j, Y", strtotime(data_get($settings,'delivery_date')));
    $max_age = Session::get('max_age'); 
@endphp

<div class="dashboard_wrapper">
    @if(isset($iscompletedApplication))
    <div class="topbar">
        <h3>{{ __('form.Hi') }}, <strong>{{ auth()->user()->name }}</strong></h3>
        
        <h6>{{ __('form.successHeadermsg.1') }} {{@$settings->current_year}} {{ __('form.successHeadermsg.2') }}</h6>
        <p style="font-size: 30px !important;">{{ __('form.Application') }}: {{@$iscompletedApplication->id}}</p>
        <div class="progress_bar">
            <p>{{ __('form.SuccessMessage') }} {{ \Carbon\Carbon::parse($settings->last_date_of_application_submission)->format('F d, Y') }}
            </p>
        </div>
    </div>
    @else
    <div class="topbar">
        <h3>{{ __('form.Hi') }}, <strong>{{ auth()->user()->name }}</strong></h3>
        <h5>{{ __('form.headerMsg') }}</h5>
        <div class="progress_block">
            <div class="progress_count" style="left: calc(9% - 16px)">
                <span id="progressspanid">9%</span>
            </div>
            <div class="progress_bar">
                <span class="main_progress" style="width: 9%;"></span>
            </div>
        </div>
    </div>
    @endif
    <div class="lang_block">
        <div class="inner">
            <div class="icon_box">
                <img src="{{asset('/frontend')}}/user-assets/img/translation_icon.svg" alt="">
            </div>
            <label for="">Language:</label>
            <select name="" class="right-container" id="lang-change">
                @foreach (config('app.allowed_languages') as $ln_key => $ln_value)
                    <option class="text-black" value="{{ $ln_key }}" {{ App::getLocale() == $ln_key ? 'selected' : '' }}>{{ $ln_value }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="content_area">
        <form method="post" action="{{ route('user.questions.StepTwoStore') }}">
            @csrf
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Step 4: Question 5 -->
            <div class="content_box step" id="step-1">
                <div class="question_box">
                    <div class="main_question">
                        <h2>{{ __('form.question6') }}<span class="important" style="color:red;">*</span></h2>
                        <h5>({{ __('form.question6_desc') }})</h5>
                        @php
                        $nameParts = explode(' ', Auth::user()->name);
                        $firstName = array_shift($nameParts);  // Take the first part as the first name
                        $lastName = implode(' ', $nameParts);  // Join the rest as the last name
                        @endphp
                        
                        <div class="row fix-row fix-row">
                            <div class="col-12 col-md-6 fix-col">
                                <div class="form-group mb-4">
                                    <input type="text" class="form-control" placeholder="{{ __('form.q6_placeholder1') }}" name="first_name" value="{{ old('first_name', isset($isApplicationForm->first_name) ? $isApplicationForm->first_name : $firstName) }}"
                                    autocomplete="off">
                                    @error('first_name')
                                    <div class="error" style="color:red;">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-12 col-md-6 fix-col">
                                <div class="form-group mb-4">
                                    <input type="text" class="form-control" placeholder="{{ __('form.q6_placeholder2') }}" name="last_name" value="{{ old('last_name', isset($isApplicationForm->last_name) ? $isApplicationForm->last_name : $lastName) }}" autocomplete="off">
                                    @error('last_name')
                                    <div class="error" style="color:red;">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn_row">
                    <button type="button" class="site_btn site_btn_success" onclick="showNextStep(2)"><span>{{ __('form.NextStep') }} </span></button>
                </div>
            </div>
            <!-- Step 6: Question 6 -->
            <div class="content_box step" id="step-2" style="display: none;">
                <div class="question_box">
                    <div class="main_question">
                        <h2>{{ __('form.question7') }}<span class="important" style="color:red;">*</span></h2>
                        <div class="left-space">
                            <input type="text" class="form-control" placeholder="{{ __('form.question7') }}" id="contact_no" name="contact_no" value="{{@$isApplicationForm->contact_no}}" maxlength="12" autocomplete="off">
                            @error('contact_no')
                            <div class="error" style="color:red;">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="btn_row">
                    <button type="button" class="site_btn site_btn_success" onclick="showPreviousStep(1)"><span>{{ __('form.PreStep') }}</span></button>
                    <button type="button" class="site_btn site_btn_success" onclick="showNextStep(3)"><span>{{ __('form.NextStep') }}</span></button>
                </div>
            </div>
            <!-- Step 7: Question 8 -->
            <div class="content_box step" id="step-3" style="display: none;">
                <div class="question_box">
                    <div class="main_question">
                        <h2>{{ __('form.question8') }}<span class="important" style="color:red;">*</span></h2>

                        <div class="left-space remove-space-for-desktop">
                            <input type="text" class="form-control" placeholder="{{ __('form.question8') }}" name="email" value="{{ old('email', isset($isApplicationForm->email) ? $isApplicationForm->email : Auth::user()->email) }}" id="email_id" autocomplete="off">
                            <div class="email_err" style="color:red;"></div>
                            @error('email')
                            <div class="error" style="color:red;">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="btn_row">
                    <button type="button" class="site_btn site_btn_success" onclick="showPreviousStep(2)"><span>{{ __('form.PreStep') }}</span></button>
                    <button type="submit" class="site_btn site_btn_success"><span>{{ __('form.submit') }}</span></button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('footer')
    @include('frontend.user-dashboard.include.footer')

    <script>
        // Function to format contact number
        document.addEventListener('DOMContentLoaded', function () {
            const contactNoInput = document.getElementById('contact_no');

            // Function to format the input value
            function formatContactNo(value) {
                let input = value.replace(/\D/g, ''); // Remove all non-numeric characters
                if (input.length > 3 && input.length <= 6) {
                    input = input.replace(/(\d{3})(\d{1,3})/, '$1-$2');
                } else if (input.length > 6) {
                    input = input.replace(/(\d{3})(\d{3})(\d{1,4})/, '$1-$2-$3');
                }
                return input;
            }

            // Format input on page load if there is existing data
            if (contactNoInput.value) {
                contactNoInput.value = formatContactNo(contactNoInput.value);
            }

            // Format input as the user types
            contactNoInput.addEventListener('input', function (e) {
                e.target.value = formatContactNo(e.target.value);
            });
        });

        function showNextStep(step) {
            if (!validateStep(step - 1)) {
                return;
            }
            document.querySelectorAll('.step').forEach(step => step.style.display = 'none');
            document.getElementById('step-' + step).style.display = 'block';

            // Update progress bar and percentage display
            const progress = step * 9; // Each step increases the progress by 9%
            document.querySelector('.main_progress').style.width = progress + '%';

            // Update progress_count style left calculation
            const progressLeft = `calc(${progress}% - 16px)`;
            document.querySelector('.progress_count').style.left = progressLeft;

            // Update progressspanid percentage display
            document.getElementById('progressspanid').innerText = progress + '%';
        }

        function showPreviousStep(step) {
            document.querySelectorAll('.step').forEach(step => step.style.display = 'none');
            document.getElementById('step-' + step).style.display = 'block';

            // Update progress bar and percentage display
            const progress = (step - 1) * 9;
            document.querySelector('.main_progress').style.width = progress + '%';

            // Update progress_count style left calculation
            const progressLeft = `calc(${progress}% - 16px)`;
            document.querySelector('.progress_count').style.left = progressLeft;

            // Update progressspanid percentage display
            document.getElementById('progressspanid').innerText = progress + '%';
        }

        function validateStep(step) {
            let isValid = true;

            // Clear previous errors
            $('.error').remove();
            $('.email_err').html(''); // Clear email error

            // Validate fields based on the step number
            if (step === 1) {
                if ($('input[name="first_name"]').val() === "") {
                    isValid = false;
                    $('input[name="first_name"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                }
                if ($('input[name="last_name"]').val() === "") {
                    isValid = false;
                    $('input[name="last_name"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                }
            } else if (step === 2) {
                const contactNo = $('input[name="contact_no"]').val();
                if (contactNo === "") {
                    isValid = false;
                    $('input[name="contact_no"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                } else if (!/^\d{3}-\d{3}-\d{4}$/.test(contactNo)) {
                    isValid = false;
                    $('input[name="contact_no"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_mobile_ten_digit') }}</div>');
                }
            } else if (step === 3) {
                const email = $('#email_id').val();
                if (email === "") {
                    isValid = false;
                    $('#email_id').parent().find('.email_err').html('{{ __('form.alt_commonReq_feild') }}');
                } else {
                    var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,7}$/;
                    if (!email.match(validRegex)) {
                        $('#email_id').parent().find('.email_err').html('{{ __('form.validEmail') }}');
                        isValid = false;
                    }
                }
            }

            return isValid;
        }

        $(document).ready(function() {
            // Form submission handler
            $('form').submit(function(event) {
                event.preventDefault(); // Prevent default form submission

                if (!validateStep(3)) {
                    return; // Stop submission if client-side validation fails
                }

                // Check email availability only if the email is valid
                const email = $('#email_id').val();
                const emailErrElement = $('#email_id').parent().find('.email_err');
                emailErrElement.html(''); // Clear previous email error

                if (isValidEmailFormat(email)) {
                    checkEmailAvailability(email, function(isAvailable) {
                        if (isAvailable) {
                            $('form')[0].submit(); // Submit form if email is available
                        } else {
                            emailErrElement.html('Email already exists. Please use a different email.');
                        }
                    });
                } else {
                    emailErrElement.html('{{ __('form.validEmail') }}');
                }
            });

            // Add email field event listener
            $('#email_id').on('input', function() {
                const email = $(this).val();
                const emailErrElement = $(this).parent().find('.email_err');
                emailErrElement.html(''); // Clear previous email error

                if (email) {
                    if (isValidEmailFormat(email)) {
                        checkEmailAvailability(email, function(isAvailable) {
                            if (!isAvailable) {
                                emailErrElement.html('Email already exists. Please use a different email.');
                            }
                        });
                    } else {
                        emailErrElement.html('{{ __('form.validEmail') }}');
                    }
                }
            });
        });

        function isValidEmailFormat(email) {
            var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,7}$/;
            return email.match(validRegex);
        }

        function checkEmailAvailability(email, callback) {
            $.ajax({
                url: "{{ route('user.email.address.check') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    email: email
                },
                success: function(response) {
                    callback(response.success); // Pass true if available, false if not
                },
                error: function() {
                    $('#email_id').parent().find('.email_err').html('An error occurred. Please try again.');
                    callback(false);
                }
            });
        }
    </script>
@endsection