@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.StepSevenStore') }}">
                @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.question13') }}<span class="important" style="color:red;">*</span></h2>
                            <h5>({{ __('form.question13_desc') }})</h5>
                            <div class="input_fields">
                                <div class="form-group">
                                    <div class="form-check" style="display:none;">
                                        <input class="form-check-input" type="radio" name="theaddress" id="pickup"
                                            value="yes" checked
                                            onclick="toggleDeliveryOption('pickup')" >
                                        <label class="form-check-label" for="pickup">
                                            {{ __('form.pickup') }}
                                        </label>
                                    </div>

                                    <div class="error" id="theaddress-error" style="color:red;"></div>


                                    <div id="pickup-options" >
                                        {{-- <div class="row">
                                        <div class="col-md-3">
                                            <label for="pickup-date">{{ __('form.Date') }}:</label>
                                            <input type="date" id="pickup-date" name="pickup_date" class="form-control" value="{{ old('pickup_date') }}">
                                            <div class="error" id="pickup-date-error" style="color:red;"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="pickup-time-begin">{{ __('form.Timebegin') }}:</label>
                                            <input type="time" id="pickup-time-begin" name="pickup_time_begin" class="form-control" value="{{ old('pickup_time_begin') }}">
                                            <div class="error" id="pickup-time-begin-error" style="color:red;"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="pickup-time-end">{{ __('form.TimeEnd') }}:</label>
                                            <input type="time" id="pickup-time-end" name="pickup_time_end" class="form-control" value="{{ old('pickup_time_end') }}">
                                            <div class="error" id="pickup-time-end-error" style="color:red;"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="pickup-location">{{ __('form.Location') }}:</label>
                                            <input type="text" id="pickup-location" name="pickup_location" class="form-control" value="{{ old('pickup_location') }}">
                                            <div class="error" id="pickup-location-error" style="color:red;"></div>
                                        </div>
                                    </div> --}}
                                        @foreach ($pickupTimes as $value)
                                            <div class="form-check custom-radio">
                                                <input class="form-check-input" type="radio" name="picktimetime_id"
                                                    id="pickup-time-{{ $loop->iteration }}" value="{{ $value->id }}"
                                                    {{ @$isApplicationForm->picktimetime_id == $value->id ? 'checked' : '' }}
                                                    {{ $value->total_applications >= $value->pickuplimit ? 'disabled' : '' }}>

                                                @if (@$isApplicationForm->picktimetime_id == $value->id && $value->total_applications >= $value->pickuplimit)
                                                    <input type="hidden" name="picktimetime_id"
                                                        value="{{ $value->id }}">
                                                @endif

                                                <label class="form-check-label" for="pickup-time-{{ $loop->iteration }}">
                                                    <span class="date">{{ __('form.Date') }}:
                                                        {{ \Carbon\Carbon::parse($value->pickup_date)->format('F j, Y') }}</span>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span class="time">{{ __('form.between') }}:
                                                        {{ \Carbon\Carbon::parse($value->pickup_time_begin)->format('g:i A') }}
                                                        -
                                                        {{ \Carbon\Carbon::parse($value->pickup_time_end)->format('g:i A') }}</span>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                    <span class="location">{{ __('form.Location') }}:
                                                        {{ $value->pickup_location }}</span>

                                                    @if ($value->total_applications >= $value->pickuplimit)
                                                        <span class="text-full"
                                                            style="color: #c10230; font-size: small;">&nbsp;&nbsp;&nbsp;&nbsp;{{ __('form.dateisfull') }}</span>
                                                    @endif
                                                </label>
                                            </div>
                                        @endforeach
                                        <div class="error" id="thepickupaddress-error" style="color:red;"></div>

                                    </div>

                                    <div style="margin-top: 20px;"></div> <!-- Gap for visual separation -->
                                    {{-- delivery part --}}
                                    {{-- @php
                                        $finaldate = Session::has('finaldate') ? Session::get('finaldate')[0] : [];
                                    @endphp
                                    @if (isset($deliverydates))
                                        <div class="form-check ">
                                            <input class="form-check-input" type="radio" name="theaddress" id="delivery"
                                                value="no"
                                                {{ @$isApplicationForm->package_pickup_status == 'delivery' ? 'checked' : '' }}
                                                onclick="toggleDeliveryOption('delivery')">
                                            <label class="form-check-label" for="delivery">
                                                {{ __('form.delivery') }}
                                            </label>
                                        </div>
                                        <div class="error" id="theaddress-error" style="color:red;"></div>
                                        <div id="delivery-options" style="display: none;">

                                            @foreach ($deliverydates as $value)
                                                <div class="form-check custom-radio">
                                                    <input class="form-check-input" type="radio" name="delivery_date"
                                                        id="delivery-time-{{ $loop->iteration }}"
                                                        value="{{ $value->id }}"
                                                        {{ @$isApplicationForm->deliverydate_id == $value->id ? 'checked' : '' }}
                                                        {{ $value->total_delivery_applications >= $value->deliverylimit ? 'disabled' : '' }}>

                                                    <label class="form-check-label"
                                                        for="delivery-time-{{ $loop->iteration }}">
                                                        <span class="date">{{ __('form.Date') }}:
                                                            {{ \Carbon\Carbon::parse($value->date)->format('F j, Y') }}</span>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        <span class="time">{{ __('form.between') }}:
                                                            {{ \Carbon\Carbon::parse($value->time_begin)->format('g:i A') }}
                                                            -
                                                            {{ \Carbon\Carbon::parse($value->time_end)->format('g:i A') }}</span>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                        @if ($value->total_delivery_applications >= $value->deliverylimit)
                                                            <span class="text-full"
                                                                style="color: #c10230; font-size: small;">&nbsp;&nbsp;&nbsp;&nbsp;{{ __('form.dateisfull') }}</span>
                                                        @endif
                                                    </label>
                                                </div>
                                            @endforeach

                                            <br>
                                            <div class="error" id="delivery-date-error" style="color:red;"></div>
                                            <p>{{ __('form.sixstepmsg') }}</p>
                                        </div>
                                    @endif --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn_row">
                        <button type="submit"
                            class="site_btn site_btn_success"><span>{{ __('form.submitApplicaton') }}</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' : 'block';
            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 = 'block';
                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;

            // 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