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

@section('header')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        .error-message {
            color: red;
            margin-top: 10px;
        }

        .input-with-button {
            position: relative;
            display: flex;
        }

        .input-with-button input {
            flex: 1 1 100%;
            padding-right: 70px;
        }

        .verify-button {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
        }

        .valid-address-section {
            margin-top: 10px;
            padding: 10px;
            background-color: #e6ffe1;
            border-radius: 4px;
        }

        .invalid-address-section {
            margin-top: 10px;
            padding: 10px;
            background-color: #ffe9e9;
            border-radius: 4px;
        }

        .valid-address-header {
            font-weight: bold;
            margin-bottom: 10px;
            color: #28a745;
        }

        .invalid-address-header {
            font-weight: bold;
            margin-bottom: 10px;
            color: #ff0000;
        }

        .checkmark {
            color: #28a745;
            margin-right: 5px;
        }

        .invalid-checkmark {
            color: #ff0000;
            margin-right: 5px;
        }

        .valid-address-details {
            display: flex;
            flex-direction: column;
        }

        .address-component {
            padding: 2px 0;
            font-size: 0.9em;
        }

        .spinner {
            display: none;
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 10px auto;

            @media (max-width: 768px) {
                .verify-button {
                    position: static;
                    margin-top: 10px;
                    width: 100%;
                    transform: none;
                }

                .input-with-button {
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                }
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 9999;
        }

        .autocomplete-address-count {
            float: right;
            color: #ee0000;
        }

        @media (max-width: 767px) {
            /* For mobile devices (adjust the max-width as needed) */

            .main_dashboard .dashboard_wrapper .content_area .content_box .question_box .main_question {
                width: 100% !important;
            }

            #address {
                width: 100%;
                max-width: 100%;
                padding-right: 15px;
                font-size: 14px;
            }
        }
    </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(36% - 16px)">
                        <span id="progressspanid">36%</span>
                    </div>
                    <div class="progress_bar">
                        <span class="main_progress" style="width: 36%;"></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.StepThreeStore') }}">
                @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 9 -->
                <div class="content_box step" id="step-1">
                    <div class="question_box">
                        {{-- <div class="no_box">
                        <span>05</span>
                    </div> --}}
                        <div class="main_question">
                            <h2>{{ __('form.question4') }}<span class="important" style="color:red;">*</span></h2>
                            {{-- <h5>({{ __('form.question4_desc') }})</h5> --}}
                            <div class="input_fields input-with-button">
                                @php
                                    if (auth()->user()->address != null) {
                                        $defaultAddress =
                                            auth()->user()->address .
                                            ', ' .
                                            auth()->user()->city .
                                            ',' .
                                            auth()->user()->state .
                                            ',' .
                                            auth()->user()->zip_code;
                                    }

                                    if ($isApplicationForm->address != null) {
                                        $applicationAddress =
                                            @$isApplicationForm->address .
                                            ', ' .
                                            @$isApplicationForm->city .
                                            ',' .
                                            @$isApplicationForm->state .
                                            ',' .
                                            @$isApplicationForm->zip;
                                    }
                                    $addressValue = $applicationAddress ?? ($defaultAddress ?? null);

                                @endphp

                                <input type="text" class="form-control" name="address" id="address"
                                    placeholder="{{ __('form.question4_placeholder') }}" value="{{ $addressValue }}"
                                    autocomplete="off">
                                {{-- <button type="button" class="verify-button" id="verifyButton">Verify</button> --}}
                            </div>
                            <div class="spinner" id="loadingSpinner"></div>


                            @error('address')
                                <div class="error" style="color:red;">{{ $message }}</div>
                            @enderror

                            <div class="valid-address-section" style="display: none;">
                                <div class="valid-address-header">
                                    <span class="checkmark">✓</span> Found Valid Address
                                </div>
                                <div class="valid-address-details">
                                    <div class="address-component">Address: <span id="primaryNumber"></span></div>
                                    <div class="address-component">Street Name: <span id="streetName"></span></div>
                                    <div class="address-component">Street Suffix: <span id="streetSuffix"></span></div>
                                    <div class="address-component">City: <span id="city"></span></div>
                                    <div class="address-component">State: <span id="state"></span></div>
                                    <div class="address-component">Zip Code: <span id="zipCode"></span></div>
                                    <div class="address-component">Latitude: <span id="latitude"></span></div>
                                    <div class="address-component">Longitude: <span id="longitude"></span></div>
                                </div>
                            </div>
                            <div class="invalid-address-section" style="display: none;">
                                <div class="invalid-address-header">
                                    We are sorry, but we do not recognize this address. Please type the address in to ensure
                                    it's accurate.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn_row">
                        <button type="button" class="next_step_btn site_btn site_btn_success"
                            onclick="showNextStep(2)"><span>{{ __('form.NextStep') }}</span></button>
                    </div>
                </div>

                <!-- Step 2: Question 10 -->
                <div class="content_box step" id="step-2" style="display: none;">
                    <div class="question_box">
                        {{-- <div class="no_box">
                        <span>6</span>
                    </div> --}}
                        <div class="main_question">
                            <h2>{{ __('form.question5') }}<span class="important" style="color:red;">*</span></h2>
                            <div class="left-space">
                                <input type="radio" class="custom-radio-s1" id="residence_yes" name="residence"
                                    value="yes"
                                    {{ @$isApplicationForm->residence == 'yes' ? 'checked="checked"' : '' }}>
                                <label for="residence_yes">{{ __('form.yes') }}</label>
                                <div class="clearfix w-100 d-none" id="unit_sec">
                                    <div class="row">
                                        <div class="col-12 col-md-12">
                                            <div class="row fix-row fix-row gap-8px">
                                                <div class="col-6 col-md-6 fix-col">
                                                    <div class="form-group mb-0">
                                                        <input type="text" class="form-control" name="unit_no"
                                                            placeholder="{{ __('form.q5_placeholder1') }}"
                                                            value="{{ old('unit_no', $isApplicationForm->residence == 'yes' ? $isApplicationForm->unit_no : '') }}"
                                                            autocomplete="off">
                                                        @error('unit_no')
                                                            <div class="error" style="color:red;">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>

                                                {{-- <div class="col-6 col-md-6 fix-col">
                                                <div class="form-group mb-0">
                                                    <input type="text" class="form-control" name="gate_code" placeholder="{{ __('form.q5_placeholder2') }}" value="{{ old('unit_no', ($isApplicationForm->residence == 'yes' ? $isApplicationForm->gate_code : '')) }}"
                                                    autocomplete="off">
                                                    @error('gate_code')
                                                        <div class="error" style="color:red;">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div> --}}

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="radio" class="custom-radio-s1" id="residence_no" name="residence"
                                    value="no"
                                    {{ @$isApplicationForm->residence == 'no' ? 'checked="checked"' : '' }}>
                                <label for="residence_no">{{ __('form.No') }}</label>
                                @error('residence')
                                    <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="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 src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script>
        $(function() {
            let isAdditionalAddressSearch = false;
            let $addressInput = $("#address");
            let $loader = $("#loadingSpinner");

            $addressInput.autocomplete({
                source: function(request, response) {
                    if (isAdditionalAddressSearch) {
                        isAdditionalAddressSearch = false;
                        return;
                    }

                    // Show loader
                    $loader.show();

                    $.ajax({
                        url: "{{ route('address.autocomplete') }}",
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                              if(data.length == 0){
                                document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                            document.getElementsByClassName('next_step_btn')[0].disabled = true;
                            }else{
                            document.getElementsByClassName('next_step_btn')[0].disabled = false;
                            // document.querySelector('.valid-address-section').style.display = 'block';
                            document.querySelector('.invalid-address-section').style.display = 'none';
                            response(data.map(function(item) {
                                return {
                                    label: item.label,
                                    value: item.value,
                                    entries: item.entries,
                                    showEntriesLink: item.showEntriesLink,
                                    street_line: item.street_line,
                                    secondary: item.secondary,
                                    city: item.city,
                                    state: item.state,
                                    zipcode: item.zipcode
                                };
                            }));
                        }
                        },
                        error: function(xhr) {
                            console.error("AJAX Error: " + xhr.statusText);
                            document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                            document.getElementsByClassName('next_step_btn')[0].disabled = true;
                        },
                        complete: function() {
                            // Hide loader
                            $loader.hide();
                        }
                    });
                },
                minLength: 3,
                select: function(event, ui) {
                    if (ui.item.showEntriesLink) {
                        event.preventDefault(); // Prevent default selection behavior
                        fetchAdditionalAddresses(ui.item);
                    } else {
                        console.log("Selected Address:", ui.item.value);
                        // Handle single address selection here
                    }
                }
            }).autocomplete("instance")._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<div>" + item.label + (item.showEntriesLink ?
                        "<span class='autocomplete-address-count'> + " + item.entries +
                        " addresses ></span>" : "") + "</div>")
                    .appendTo(ul);
            };

            function fetchAdditionalAddresses(item) {
                var search = item.street_line + (item.secondary ? ' ' + item.secondary : '');
                var selected = item.street_line +
                    (item.secondary ? ' ' + item.secondary : '') +
                    ' (' + item.entries + ') ' +
                    item.city + ' ' +
                    item.state + ' ' +
                    item.zipcode;

                // Show loader
                $loader.show();

                $.ajax({
                    url: "{{ route('address.AddressautocompleteAdditionalAddress') }}",
                    dataType: "json",
                    data: {
                        search: search,
                        selected: selected
                    },
                    success: function(data) {
                        isAdditionalAddressSearch = true;
                        $addressInput.autocomplete("option", "source", data);
                        $addressInput.val(search).autocomplete("search", search);
                    },
                    error: function(xhr) {
                        console.error("AJAX Error: " + xhr.statusText);
                    },
                    complete: function() {
                        // Hide loader
                        $loader.hide();
                    }
                });
            }

            // Add an input event listener to detect changes in the address field
            $addressInput.on('input', function() {
                isAdditionalAddressSearch = false;
                $(this).autocomplete("option", "source", function(request, response) {
                    // Show loader
                    $loader.show();

                    $.ajax({
                        url: "{{ route('address.autocomplete') }}",
                        dataType: "json",
                        data: {
                            search: request.term
                        },
                        success: function(data) {
                           if(data.length == 0){
                                document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                            document.getElementsByClassName('next_step_btn')[0].disabled = true;
                            }else{
                            document.getElementsByClassName('next_step_btn')[0].disabled = false;
                            // document.querySelector('.valid-address-section').style.display = 'block';
                            document.querySelector('.invalid-address-section').style.display = 'none';
                            response(data.map(function(item) {
                                return {
                                    label: item.label,
                                    value: item.value,
                                    entries: item.entries,
                                    showEntriesLink: item.showEntriesLink,
                                    street_line: item.street_line,
                                    secondary: item.secondary,
                                    city: item.city,
                                    state: item.state,
                                    zipcode: item.zipcode
                                };
                            }));
                        }
                        },
                        error: function(xhr) {
                            console.error("AJAX Error: " + xhr.statusText);
                            document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                            document.getElementsByClassName('next_step_btn')[0].disabled = true;
                        },
                        complete: function() {
                            // Hide loader
                            $loader.hide();
                        }
                    });
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            function updateUnitSecVisibility() {
                if ($("#residence_yes").is(':checked')) {
                    $("#unit_sec").removeClass('d-none').show();
                } else {
                    $("#unit_sec").addClass('d-none').hide();
                }
            }

            // Initialize visibility based on the value of residence
            updateUnitSecVisibility();

            $("#residence_yes").click(function() {
                $("#unit_sec").removeClass('d-none').show();
            });
            $("#residence_no").click(function() {
                $("#unit_sec").addClass('d-none').hide();
            });
        });


        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 = 36 + (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 = 36 + (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="address"]').val() === "") {
                    isValid = false;
                    $('input[name="address"]').parent().parent().append(
                        '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                }
            } else if (step === 2) {
                if ($('input[name="residence"]:checked').length === 0) {
                    isValid = false;
                    $('.left-space').append(
                        '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                } else if ($('input[name="residence"]:checked').val() === "yes") {
                    if ($('input[name="unit_no"]').val() === "") {
                        isValid = false;
                        $('input[name="unit_no"]').parent().append(
                            '<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                    }
                    // if ($('input[name="gate_code"]').val() === "") {
                    //     isValid = false;
                    //     $('input[name="gate_code"]').parent().append('<div class="error" style="color:red;">{{ __('form.alt_commonReq_feild') }}</div>');
                    // }
                } else { // 'No' option selected
                    // Additional logic for 'No' option, if needed
                }
            }
            return isValid;
        }


        $(document).ready(function() {
            $('form').submit(function(event) {
                if (!validateStep(2)) {
                    event.preventDefault(); // Prevent form submission if validation fails
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const verifyButton = document.getElementById('verifyButton');
            const loadingSpinner = document.getElementById('loadingSpinner');
            const addressInput = document.getElementById('address');

            verifyButton.addEventListener('click', function() {
                var address = addressInput.value;
                var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                // Hide the address sections initially
                document.querySelector('.valid-address-section').style.display = 'none';
                document.querySelector('.invalid-address-section').style.display = 'none';

                if (address === "") {
                    // Show error message if address is blank
                    if (!document.querySelector('.error')) {
                        var errorDiv = document.createElement('div');
                        errorDiv.className = 'error';
                        errorDiv.style.color = 'red';
                        errorDiv.innerHTML = '{{ __('form.alt_commonReq_feild') }}';
                        document.querySelector('.input-with-button').insertAdjacentElement('afterend',
                            errorDiv);
                    }
                    return;
                }

                // Remove existing error message if present
                var existingError = document.querySelector('.error');
                if (existingError) {
                    existingError.remove();
                }

                // Show spinner and disable input and button
                loadingSpinner.style.display = 'block';
                verifyButton.disabled = true;
                addressInput.disabled = true;

                fetch('{{ route('frontend.user.address.verification.api') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            address: address
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data[0].components) {
                            var components = data[0].components;
                            var metadata = data[0].metadata;
                            var outsidedata = data[0];

                            if (components.city_name.toLowerCase() !== 'austin') {
                                Swal.fire({
                                    title: 'Disqualification',
                                    text: '{{ __('form.NonAustinMsg') }}',
                                    icon: 'warning',
                                    confirmButtonText: 'OK'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        // Set the address input field to be blank
                                        document.getElementById('address').value = '';
                                        // Redirect to the disqualification page
                                        //window.location.href = '{{ route('frontend.user.StatementofDisqualification') }}';
                                    }
                                });
                                return;
                            }
                            document.querySelector('.valid-address-section').style.display = 'block';
                            document.querySelector('.invalid-address-section').style.display = 'none';

                            document.getElementById('primaryNumber').textContent = outsidedata
                                .delivery_line_1 || '';

                            document.getElementById('streetName').textContent = components
                                .street_name || '';
                            document.getElementById('streetSuffix').textContent = components
                                .street_suffix || '';
                            document.getElementById('city').textContent = components.city_name || '';
                            document.getElementById('state').textContent = components
                                .state_abbreviation || '';
                            document.getElementById('zipCode').textContent = components.zipcode || '';
                            document.getElementById('latitude').textContent = metadata.latitude || '';
                            document.getElementById('longitude').textContent = metadata.longitude || '';

                            // Update the input field with the formatted address
                            addressInput.value =
                                `${outsidedata.delivery_line_1}, ${components.city_name}, ${components.state_abbreviation} ${components.zipcode}`;

                        } else {
                            document.querySelector('.valid-address-section').style.display = 'none';
                            document.querySelector('.invalid-address-section').style.display = 'block';
                        }
                    })

                    .catch(error => {
                        console.error('Error:', error);
                        document.querySelector('.valid-address-section').style.display = 'none';
                        document.querySelector('.invalid-address-section').style.display = 'block';
                    })
                    .finally(() => {
                        // Hide spinner and re-enable input and button
                        loadingSpinner.style.display = 'none';
                        verifyButton.disabled = false;
                        addressInput.disabled = false;
                    });
            });
        });
    </script>
@endsection