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

@section('header')
    <style>
        .custom-radio {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            transition: background-color 0.3s ease;
            font-size: 12px;
            /* Smaller font size for compact design */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /* Light shadow for better separation */
        }

        .custom-radio:hover {
            background-color: #f1f1f1;
        }

        .custom-radio .form-check-input {
            margin-right: 10px;
            flex-shrink: 0;
            /* Prevents the input from resizing */
        }

        .custom-radio .form-check-label {
            display: flex;
            flex-wrap: wrap;
            /* Allows wrapping for smaller screens */
            font-weight: 500;
        }

        .custom-radio .form-check-label span {
            margin-bottom: 3px;
            /* Smaller margin for compact design */
        }

        .custom-radio .form-check-label .date,
        .custom-radio .form-check-label .time,
        .custom-radio .form-check-label .location {
            color: #333;
        }

        .custom-radio .form-check-label .time {
            font-weight: bold;
            color: #0056b3;
        }

        @media (max-width: 576px) {
            .custom-radio {
                flex-direction: column;
                /* Stack items on small screens */
                align-items: flex-start;
            }

            .custom-radio .form-check-input {
                margin-bottom: 5px;
                /* Margin adjustment for small screens */
            }

            .custom-radio .form-check-label {
                flex-direction: column;
                /* Align labels vertically on small screens */
            }

            .custom-radio .form-check-label span {
                margin-bottom: 2px;
                /* Smaller margin for compact design */
            }
        }
    </style>
    @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(99% - 16px)">
                        <span>99%</span>
                    </div>
                    <div class="progress_bar">
                        <span class="main_progress" style="width: 99%;"></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 id="question-form" method="post" action="{{ route('user.questions.StepSixStore') }}">
                @csrf
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <!-- Step 2: Question 10 -->
                <div class="content_box step" id="step-1">
                    <div class="question_box">
                        <div class="main_question">
                            <h2> {{ __('form.question6_new') }}</h2>
                            {{-- <h5>({{ __('form.question6_new_desc') }})</h5> --}}
                            <div class="input_fields">
                                <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="alternate_person_first_name"
                                                value="{{ old('alternate_person_first_name', isset($isApplicationForm->alternate_person_first_name) ? $isApplicationForm->alternate_person_first_name : '') }}"
                                                autocomplete="off">
                                            @error('alternate_person_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="alternate_person_last_name"
                                                value="{{ old('alternate_person_last_name', isset($isApplicationForm->alternate_person_last_name) ? $isApplicationForm->alternate_person_last_name : '') }}"
                                                autocomplete="off">
                                            @error('alternate_person_last_name')
                                                <div class="error" style="color:red;">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn_row">
                        <button type="submit"
                            class="site_btn site_btn_success"><span>{{ __('form.NextStep') }}</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('footer')
    @include('frontend.user-dashboard.include.footer')
    <script>
        // function toggleDeliveryOption(option) {
        //     document.getElementById('pickup-options').style.display = option === 'pickup' ? 'block' : 'none';
        //     document.getElementById('delivery-options').style.display = option === 'delivery' ? 'block' : 'none';
        // }

        // document.addEventListener('DOMContentLoaded', function() {
        //     // Check for the pre-selected option from the database
        //     const initialPickupStatus = @json(@$isApplicationForm->package_pickup_status);
        //     const initialPickupTimeId = @json(@$isApplicationForm->picktimetime_id);
        //     const deliveryDateValue = @json(@$isApplicationForm->delivery_date);

        //     // Set initial state based on pre-selected option
        //     if (initialPickupStatus === 'pickup') {
        //         document.getElementById('pickup').checked = true;
        //         toggleDeliveryOption('pickup');
        //         // Check if there is a pre-selected pickup time
        //         if (initialPickupTimeId) {
        //             const pickupTimeInput = document.querySelector(
        //                 `input[name="picktimetime_id"][value="${initialPickupTimeId}"]`);
        //             if (pickupTimeInput) {
        //                 pickupTimeInput.checked = true;
        //             }
        //         }
        //     } else if (initialPickupStatus === 'delivery') {
        //         document.getElementById('delivery').checked = true;
        //         toggleDeliveryOption('delivery');
        //         // Check if there is a pre-selected delivery date
        //         if (deliveryDateValue) {
        //             const deliveryDateInput = document.querySelector(
        //                 `input[name="delivery_date"][value="${deliveryDateValue}"]`);
        //             if (deliveryDateInput) {
        //                 deliveryDateInput.checked = true;
        //             }
        //         }
        //     } else {
        //         // If no status is set, don't select anything by default
        //         document.getElementById('pickup-options').style.display = 'none';
        //         document.getElementById('delivery-options').style.display = 'none';
        //     }

        //     // Add event listeners to radio buttons
        //     document.getElementById('pickup').addEventListener('change', function() {
        //         if (this.checked) toggleDeliveryOption('pickup');
        //     });
        //     document.getElementById('delivery').addEventListener('change', function() {
        //         if (this.checked) toggleDeliveryOption('delivery');
        //     });
        // });

        // ... rest of your script remains the same

        document.getElementById('question-form').addEventListener('submit', function(event) {
            event.preventDefault();
            let isValid = true;

             this.submit(); 
           

            // // Clear previous error messages
            // document.querySelectorAll('.error').forEach(function(el) {
            //     el.textContent = '';
            // });

            // const selectedOption = document.querySelector('input[name="theaddress"]:checked');
            // const deliveryDate = document.querySelector('input[name="delivery_date"]:checked');
            // const pickupTimes = document.querySelectorAll('input[name="picktimetime_id"]');
            // let pickupTimeSelected = false;

            // // Check if theaddress is selected
            // if (!selectedOption) {
            //     isValid = false;
            //     document.getElementById('theaddress-error').textContent =
            //         '{{ __('form.pleaseselectpickupdelievry') }}';
            // } else if (selectedOption.value === 'no') {
            //     if (!deliveryDate) {
            //         isValid = false;
            //         document.getElementById('delivery-date-error').textContent =
            //             '{{ __('form.alt_commonReq_feild') }}';
            //     }
            // } else if (selectedOption.value === 'yes') {
            //     // Check if any of the pickup time options is selected
            //     pickupTimes.forEach(function(pickupTime) {
            //         if (pickupTime.checked) {
            //             pickupTimeSelected = true;
            //         }
            //     });
            //     if (!pickupTimeSelected) {
            //         isValid = false;
            //         document.getElementById('thepickupaddress-error').textContent =
            //             '{{ __('form.alt_commonReq_feild') }}';
            //     }
            // }

            // if (isValid) {
            //     this.submit(); // Submit the form if all validations pass
            // }
        });
    </script>
@endsection