@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(54% - 16px)">
                <span id="progressspanid">54%</span>
            </div>
            <div class="progress_bar">
                <span class="main_progress" style="width: 54%;"></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.StepFourStore') }}">
            @csrf
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Step 1: Question 7 -->
            {{-- <div class="content_box step" id="step-1">
                <div class="question_box">
                    <div class="no_box">
                        <span>07</span>
                    </div>
                    <div class="main_question">
                        <h2>{{ __('form.question3') }}<span class="important" style="color:red;">*</span></h2>
                        <div class="left-space">
                            <ul class="check-lists">
                                    <input type="radio" class="custom-radio-s1" id="rgs_yes" value="yes" name="recipient_gift_status" {{ @$isApplicationForm->recipient_gift_status=="yes" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                                    <label for="rgs_yes">{{ __('form.yes') }}</label>
                                    <input type="radio" class="custom-radio-s1" id="rgs_no" value="no" name="recipient_gift_status" {{ @$isApplicationForm->recipient_gift_status=="no" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                                    <label for="rgs_no">No</label>
                        </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 2: Question 8 -->
            <div class="content_box step" id="step-1" >
                <div class="question_box">
                    {{-- <div class="no_box">
                        <span>08</span>
                    </div> --}}
                    <div class="main_question">
                        <h2>{{ __('form.question9') }}<span class="important" style="color:red;">*</span></h2>
                        <h5>{{ __('form.question9_desc') }}</h5>
                        <div class="selcet-with-left-value-sm">
                            <select type="text" class="form-control" name="household_no">
                                <option value="" selected>--Select--</option>
                                @for($i=1; $i<=9; $i++)
                                    <option value="{{ $i }}" {{ @$isApplicationForm->no_of_people_lived == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                                <option value="10+" {{ @$isApplicationForm->no_of_people_lived == '10+' ? 'selected' : '' }}>10+</option>
                            </select>
                        </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 3: Question 9 -->
             <div class="content_box step" id="step-2" style="display: none;">
                <div class="question_box">
                    {{-- <div class="no_box">
                        <span>09</span>
                    </div> --}}
                    <div class="main_question Qusetion9error">
                        <h2>{{ __('form.question11') }}<span class="important" style="color:red;">*</span></h2>
                        <div class="main_question">
                            <input type="radio" class="custom-radio-s2" id="t1" name="relwithchildern" value="yes" {{ @$isApplicationForm->relationship_type == "yes" ? 'checked' : '' }}>
                            <label for="t1">{{ __('form.yes') }}</label>
                            <input type="radio" class="custom-radio-s2 t6-cls" id="t6" name="relwithchildern" value="no" {{ @$isApplicationForm->relationship_type  == "no" ? 'checked' : '' }}>
                            <label for="t6">No</label>
                            <div class="col-12 col-md-6 fix-col other-dv" style="display: none;">
                                <div class="form-group mb-4">
                                    {{ __('form.question11_placeholder') }}
                                    <input type="text" class="form-control" placeholder="{{ __('form.question11_placeholder') }}" name="other_relationship" value="{{ @$isApplicationForm->relation_name  }}">
                                    @error('other_relationship')
                                        <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="showPreviousStep(1)"><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 type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
    <script>
        $(document).ready(function() {
        // Initialize the display state of the other-dv div based on the database value
        if ($('input[name="relwithchildern"]:checked').val() === 'no') {
            $(".other-dv").show();
        } else {
            $(".other-dv").hide();
        }

        // Existing click handlers and functions
        $('input[name="relwithchildern"]').on('change', function() {
            if ($(this).val() === 'no') {
                $(".other-dv").show();
            } else {
                $(".other-dv").hide();
                $('input[name="other_relationship"]').val(''); // Clear value
            }
        });

        $('form').submit(function(event) {
            if (!validateStep(3)) {
                event.preventDefault(); // Prevent form submission if validation fails
            }
        });
    });


        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 = 54 + (step - 1) * 9; // Starting at 36% and 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 = 54 + (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;
    $('.error').remove();

    // if (step === 1) {
    //     if ($('input[name="recipient_gift_status"]:checked').length === 0) {
    //         isValid = false;
    //         $('.left-space').append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
    //     }
    // } 
    if (step === 2) {
        if ($('select[name="household_no"]').val() === "") {
            isValid = false;
            $('select[name="household_no"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
        }
    } 
    else if (step === 3) {
            if (!$('input[name="relwithchildern"]:checked').val()) {
                isValid = false;
                $('input[name="relwithchildern"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
            } else if ($('input[name="relwithchildern"]:checked').val() === 'no' && $('input[name="other_relationship"]').val() === "") {
                isValid = false;
                $('input[name="other_relationship"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
            }
    } 
    return isValid;
}

    $(document).ready(function() {
        $('form').submit(function(event) {
            if (!validateStep(3)) {
                event.preventDefault(); // Prevent form submission if validation fails
            }
        });
    });


    </script>
@endsection