@extends('layout')
@section('title')
    <title>{{ __('user.Create Want') }}</title>
@endsection

@section('meta')
    <meta name="description" content="{{ __('user.Create Want') }}">
    <meta name="title" content="{{ __('user.Create Want') }}">
@endsection

@section('frontend-content')
    <div id="hidden-location-box" class="d-none">
        <div class="delete-dynamic-location">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <!-- Single Form Element -->
                    <div class="mg-top-20">
                        <h4 class="homec-submit-form__heading">{{ __('user.Nearest Location') }}</h4>
                        <div class="form-group homec-form-input">
                            <select name="nearest_locations[]" class="homec-form-select homec-border">
                                <option value="">{{ __('user.Select') }}</option>
                                @foreach ($nearest_locations as $nearest_location)
                                    <option value="{{ $nearest_location->id }}">{{ $nearest_location->location }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <!-- Single Form Element -->
                    <div class="mg-top-20">
                        <h4 class="homec-submit-form__heading">{{ __('user.Distance(km)') }}</h4>
                        <div class="form-group homec-form-input homec-form-add">
                            <input type="text" name="distances[]" autocomplete="off">
                            <button type="button"
                                class="homec-form-add__button homec-form-add__button--delete removeNearestPlaceRow"><img
                                    src="{{ asset('frontend/img/delete-icon.svg') }}"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="hidden-addition-box" class="d-none">
        <div class="delete-dynamic-additio">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <!-- Single Form Element -->
                    <div class="mg-top-20">
                        <h4 class="homec-submit-form__heading">{{ __('user.Key') }}</h4>
                        <div class="form-group homec-form-input">
                            <input type="text" name="add_keys[]" autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <!-- Single Form Element -->
                    <div class="mg-top-20">
                        <h4 class="homec-submit-form__heading">{{ __('user.Value') }}</h4>
                        <div class="form-group homec-form-input homec-form-add">
                            <input type="text" name="add_values[]" autocomplete="off">
                            <button type="button"
                                class="homec-form-add__button homec-form-add__button--delete removeAdditioanRow"><img
                                    src="{{ asset('frontend/img/delete-icon.svg') }}"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="hidden-plan-box" class="d-none">
        <div class="delete-dynamic-plan">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="mg-top-30">
                        <p class="homec-img-video-label mg-btm-10">{{ __('user.Image') }}</p>
                        <!-- Image Input -->
                        <div class="homec-image-video-upload homec-border">
                            <input type="file" class="btn-check" name="plan_images[]">
                            <label class="homec-image-video-upload__label plan-video-id">
                                <img src="{{ asset('frontend/img/upload-file.svg') }}" alt="#">
                                <span class="homec-image-video-upload__title">{{ __('user.Please') }} <span
                                        class="homec-primary-color">{{ __('user.Choose File') }}</span>
                                    {{ __('user.to upload') }} </span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <!-- Single Form Element -->
                    <div class="mg-top-30">
                        <h4 class="homec-submit-form__heading">{{ __('user.Title') }} </h4>
                        <div class="form-group homec-form-input">
                            <input type="text" name="plan_titles[]">
                        </div>
                    </div>
                    <!-- Single Form Element -->
                    <div class="mg-top-30">
                        <h4 class="homec-submit-form__heading">{{ __('user.Description') }}</h4>
                        <div class="form-group homec-form-input homec-form-add">
                            <textarea name="plan_descriptions[]"></textarea>
                            <button type="button"
                                class="homec-form-add__button homec-form-add__button--delete removePlanRow"><img
                                    src="{{ asset('frontend/img/delete-icon.svg') }}"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="pd-top-80 pd-btm-80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <form action="{{ route('user.wants.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="homec-submit-form mg-top-100">
                            <h4 class="homec-submit-form__title">{{ __('user.Basic Information') }}</h4>
                            <div class="homec-submit-form__inner">
                                <div class="row">
                                    <div class="col-12">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('user.Title') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <input type="text" name="title" id="title"
                                                    value="{{ old('title') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __(key: 'user.Slug') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <input type="text" name="slug" id="slug"
                                                    value="{{ old('slug') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-12">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('user.Want Type') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <select class="homec-form-select homec-border" name="want_type_id">
                                                    <option value="">{{ __('user.Select') }}</option>
                                                    @foreach ($types as $type)
                                                        <option value="{{ $type->id }}">{{ $type->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="mg-top-20">
                                            <div class="form-group homec-form-input">
                                                <h4 class="homec-submit-form__heading">{{ __('admin.Purpose') }} *</h4>
                                                <select name="purpose_id" id="purpose_id"
                                                    class="homec-form-select homec-border">
                                                    @foreach ($purposes as $purpose)
                                                        <option value="{{ $purpose->id }}">{{ $purpose->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-lg-6 col-md-6 col-12">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('Category') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <select class="homec-form-select homec-border" name="category_id"
                                                    id="category_id" onchange="getSubCategories(this.value)">
                                                    <option value="">{{ __('user.Select') }}</option>
                                                    @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-12">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('Sub Category') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <select class="homec-form-select homec-border" name="subcategory_id"
                                                    id="subcategory_id">
                                                    <option value="">{{ __('user.Select') }}</option>

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

                                    <div class="col-md-6" id="area_range_div">
                                        <div class="form-group mg-top-20">
                                            <label for=""
                                                class="homec-submit-form__heading">{{ __('Size Range (Sq. Ft)') }}
                                                *</label>
                                            <div class="slider-container">
                                                <div id="areaRange" class="slider"></div>
                                                <input type="text" id="area" name="size"
                                                    class="form-control readonly-input" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="budget_div">
                                        <div class="form-group mg-top-20">
                                            <label for=""
                                                class="homec-submit-form__heading">{{ __('Price Range') }}</label>
                                            <div class="slider-container">
                                                <div id="budgetRange" class="slider"></div>
                                                <input type="text" id="budget" name="price"
                                                    class="form-control readonly-input" readonly>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-12">
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('Facilities ') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <select class="homec-form-select homec-border select2" id="facilities"
                                                    name="facilities[]" multiple="multiple">
                                                    @foreach ($aminities as $aminity)
                                                        <option value="{{ $aminity->id }}">{{ $aminity->aminity }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!-- Single Form Element -->
                                <div class="mg-top-20">
                                    <h4 class="homec-submit-form__heading">{{ __('user.Preferred Location') }} *</h4>
                                    <div class="form-group homec-form-input">
                                        <textarea name="preferred_location" id="ckdesc1" class="summernote">{{ html_decode(old('preferred_location')) }}</textarea>
                                    </div>
                                </div>

                                <div class="mg-top-20">
                                    <h4 class="homec-submit-form__heading">{{ __('user.Special Note') }}</h4>
                                    <div class="form-group homec-form-input">
                                        <textarea name="special_note" id="ckdesc1" class="summernote">{{ html_decode(old('special_note')) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="homec-submit-form mg-top-40">
                            <h4 class="homec-submit-form__title">{{ __('user.Want Location') }}</h4>
                            <div class="homec-submit-form__inner">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('States') }} *</h4>
                                            <div class="form-group homec-form-input">
                                                <select id="states" name="states[]"
                                                    class="form-control select2 ecom-wc__form-input" multiple="multiple">
                                                    @foreach ($states as $state)
                                                        <option value="{{ $state->id }}"
                                                            {{ in_array($state->id, $user->states ?? []) ? 'selected' : '' }}>
                                                            {{ $state->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('user.Counties') }} *</h4>
                                            <div class="form-group homec-form-input" id="county_selector">
                                                <select id="counties" name="counties[]"
                                                    class="form-control select2 ecom-wc__form-input" multiple="multiple">
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 col-md-6">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('user.Cities') }} *</h4>
                                            <div class="form-group homec-form-input" id="state_selector">
                                                <select id="cities" name="cities[]"
                                                    class="form-control select2 ecom-wc__form-input" multiple="multiple">
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <!-- Single Form Element -->
                                        <div class="mg-top-20">
                                            <h4 class="homec-submit-form__heading">{{ __('ZIP Codes') }} *</h4>
                                            <div class="form-group homec-form-input" id="city_selector">
                                                <select id="zip_codes" name="zip_codes[]"
                                                    class="form-control select2 ecom-wc__form-input" multiple="multiple">
                                                </select>
                                            </div>
                                        </div>
                                    </div>


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



                        <div class="row">
                            <div class="col-12 d-flex justify-content-end mg-top-40">
                                <button type="submit"
                                    class="homec-btn homec-btn__second"><span>{{ __('user.Submit Want') }}</span></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>



    <script>
        $(document).ready(function() {
            var slider = document.getElementById('budgetRange');
            var priceValue = document.getElementById('budget');

            // Initialize noUiSlider
            noUiSlider.create(slider, {
                start: [100, 10000], // Default min and max values
                connect: true, // To create a connected range slider
                range: {
                    'min': 0,
                    'max': 10000
                },
                step: 10,
                format: {
                    to: function(value) {
                        return '$' + Math.round(value); // Format the value to display as currency
                    },
                    from: function(value) {
                        return value.replace('$', ''); // Remove the $ sign when the value is processed
                    }
                }
            });

            // Update the price value when the slider changes
            slider.noUiSlider.on('update', function(values, handle) {
                priceValue.value = values.join(' - ');
            });

            $('.select2').select2({
                placeholder: "Select options", // Placeholder text
                allowClear: true, // Allow clearing selected options
                width: '100%' // Set the width to 100%
            });
        });

        $(document).ready(function() {
            $('#states').on('change', function() {
                console.log('states');
                var selectedStates = $(this).val();
                if (selectedStates.length > 0) {
                    let route = "{{ url('/common/counties/list/') }}";
                    $.ajax({
                        url: route,
                        type: "GET",
                        data: {
                            states: selectedStates
                        },
                        success: function(data) {
                            console.log(data.template);
                            $('#counties').empty();
                            $.each(data, function(index, county) {
                                $('#counties').append(data.template);
                            });
                        }
                    });
                } else {
                    $('#cities').empty();
                }
            });

            $('#counties').on('change', function() {
                var selectedCounties = $(this).val();
                if (selectedCounties.length > 0) {
                    let route = "{{ url('/common/cities/list/') }}";
                    $.ajax({
                        url: route,
                        type: "GET",
                        data: {
                            counties: selectedCounties
                        },
                        success: function(data) {
                            console.log(data.template);
                            $('#cities').empty();
                            $.each(data, function(index, city) {
                                $('#cities').append(data.template);
                            });
                        }
                    });
                } else {
                    $('#cities').empty();
                }
            });


            $('#cities').on('change', function() {
                var selectedCities = $(this).val();
                if (selectedCities.length > 0) {
                    let route = "{{ url('/common/zip_codes/list/') }}";
                    $.ajax({
                        url: route,
                        type: "GET",
                        data: {
                            cities: selectedCities
                        },
                        success: function(data) {
                            console.log(data.template);
                            $('#zip_codes').empty();
                            $.each(data, function(index, zip_code) {
                                $('#zip_codes').append(data.template);
                            });
                        }
                    });
                } else {
                    $('#zip_codes').empty();
                }
            });
        });

                $(document).ready(function() {
                    var slider = document.getElementById('areaRange');
                    var areaValue = document.getElementById('area');

                    // Initialize noUiSlider
                    noUiSlider.create(slider, {
                        start: [1000, 2400], // Default min and max values
                        connect: true, // To create a connected range slider
                        range: {
                            'min': 1000,
                            'max': 2400
                        },
                        step: 100,
                        format: {
                            to: function(value) {
                                return Math.round(value); // Format the value to display as currency
                            },
                            from: function(value) {
                                return value.replace('$',
                                    ''); // Remove the $ sign when the value is processed
                            }
                        }
                    });

                    // Update the price value when the slider changes
                    slider.noUiSlider.on('update', function(values, handle) {
                        areaValue.value = values.join(' - ');
                    });

                    $('.select2').select2({
                        placeholder: "Select options", // Placeholder text
                        allowClear: true, // Allow clearing selected options
                        width: '100%' // Set the width to 100%
                    });
                });

                (function($) {
                    "use strict";
                    $(document).ready(function() {

                        // slug generate and check

                        $("#title").on("keyup", function(e) {
                            let slug = convertToSlug($(this).val());
                            $("#slug").val(slug);

                            $.ajax({
                                type: "get",
                                url: "{{ url('/admin/check-slug/') }}" + "/" + slug,
                                success: function(response) {

                                },
                                error: function(err) {
                                    if (err.status == 403) {
                                        toastr.error(err.responseJSON.message);
                                        $("#slug").val('');
                                    }
                                }
                            })
                        })

                        // slug generate and check

                        //start dynamic nearest place add and remove

                        $("#addNearestPlaceRow").on("click", function() {
                            var new_row = $("#hidden-location-box").html();
                            $("#nearest-place-box").append(new_row)
                        })

                        $(document).on('click', '.removeNearestPlaceRow', function() {
                            $(this).closest('.delete-dynamic-location').remove();
                        });

                        //end dynamic nearest place add and remove

                        //start additonal information add and remove

                        $("#addAdditionalRow").on("click", function() {
                            var new_row = $("#hidden-addition-box").html();
                            $("#additional-box").append(new_row)
                        })

                        $(document).on('click', '.removeAdditioanRow', function() {
                            $(this).closest('.delete-dynamic-additio').remove();
                        });

                        //end additonal information add and remove

                        //start dynamic plan add and remove

                        $("#addNewPlan").on("click", function() {
                            var new_row = $("#hidden-plan-box").html();
                            $("#plan-box").append(new_row)
                        })

                        $(document).on('click', '.removePlanRow', function() {
                            $(this).closest('.delete-dynamic-plan').remove();
                        });

                        //end dynamic plan  add and remove

                        // load plan image

                        $(document).on('click', '.plan-video-id', function() {
                            $(this).siblings('input[type="file"]').click();
                        });

                        // load plan image

                    });

                })(jQuery);

                function convertToSlug(Text) {
                    return Text
                        .toLowerCase()
                        .replace(/[^\w ]+/g, '')
                        .replace(/ +/g, '-');
                }

                $("#state_id").change(function() {
                    let id = this.value;
                    let route = "{{ url('/user/property/city/list/') }}/" + id;
                    ajax_switch_state(route);
                });
                /* $("#state_id").change(function (){
                     alert('test');
                     let id = this.value;
                     let route = "{{ url('/admin/property/city/list/') }}/" + id;
                     ajax_switch_state(route);
                 });*/

                function ajax_switch_state(route) {
                    $.get({
                        url: route,
                        dataType: 'json',
                        data: {},
                        beforeSend: function() {},
                        success: function(response) {

                            $('#state_selector').html(response.template);
                        },
                        complete: function() {},
                    });
                }
                /* function ajax_switch_country(route) {
                     $.get({
                         url: route,
                         dataType: 'json',
                         data: {},
                         beforeSend: function () {
                         },
                         success: function (response) {
                             $('#country_selector').html(response.template);
                         },
                         complete: function () {
                         },
                     });
                 }*/

                var map = L.map('map').setView([23.822350, 90.365417], 13); L.tileLayer(
                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);

                var currentMarker;

                map.on('click', function(e) {
                    const lat = e.latlng.lat;
                    const lng = e.latlng.lng;

                    // Update hidden input fields
                    document.getElementById('lat').value = lat;
                    document.getElementById('lng').value = lng;

                    // Update or create the marker
                    if (currentMarker) {
                        map.removeLayer(currentMarker); // Remove existing marker
                    }
                    currentMarker = L.marker([lat, lng]).addTo(map); // Add new marker

                    // Fetch the address from the clicked coordinates
                    fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data && data.display_name) {
                                document.getElementById('address').value = data
                                    .display_name; // Set the address input
                            } else {
                                document.getElementById('address').value = "Clicked Location"; // Fallback text
                            }
                        });
                });


                function debounce(func, delay) {
                    let timeout;
                    return function(...args) {
                        const context = this;
                        clearTimeout(timeout);
                        timeout = setTimeout(() => func.apply(context, args), delay);
                    };
                }

                // Wait for the DOM to fully load
                document.addEventListener('DOMContentLoaded', function() {
                    const addressInput = document.getElementById('address');
                    const resultsElement = document.getElementById('results-list');

                    if (addressInput) {
                        addressInput.addEventListener(
                            'keyup',
                            debounce(function() {
                                const keyword = this.value;

                                if (keyword.length > 3) {
                                    const xhr = new XMLHttpRequest();
                                    const url = 'https://nominatim.openstreetmap.org/search?format=json&q=' +
                                        encodeURIComponent(keyword);
                                    xhr.open('GET', url, true);
                                    xhr.onload = function() {
                                        if (xhr.status >= 200 && xhr.status < 400) {
                                            const data = JSON.parse(xhr.responseText);
                                            resultsElement.innerHTML = '';
                                            if (data.length > 0) {
                                                let resultsHTML = '';
                                                data.forEach(function(v) {
                                                    resultsHTML +=
                                                        `<li data-lat="${v.lat}" data-lon="${v.lon}">${v.display_name}</li>`;
                                                });
                                                resultsElement.innerHTML = resultsHTML;
                                                resultsElement.style.display = 'block';

                                                resultsElement.addEventListener('click', function(event) {
                                                    if (event.target.tagName.toLowerCase() ===
                                                        'li') {
                                                        const thatItem = event.target;
                                                        const getLat = thatItem.getAttribute(
                                                            'data-lat');
                                                        const getLon = thatItem.getAttribute(
                                                            'data-lon');
                                                        const displayName = thatItem.textContent;

                                                        // Update input values
                                                        addressInput.value = displayName;
                                                        document.getElementById('lat').value =
                                                            getLat;
                                                        document.getElementById('lng').value =
                                                            getLon;

                                                        // Set the map view to the selected coordinates
                                                        map.setView([getLat, getLon], 13);

                                                        // Update or create the marker
                                                        if (currentMarker) {
                                                            map.removeLayer(
                                                                currentMarker
                                                            ); // Remove existing marker
                                                        }
                                                        currentMarker = L.marker([getLat, getLon])
                                                            .addTo(map); // Add new marker

                                                        resultsElement.style.display =
                                                            'none'; // Hide results
                                                    }
                                                });
                                            } else {
                                                resultsElement.style.display = 'none'; // No results found
                                            }
                                        }
                                    };
                                    xhr.send();
                                } else {
                                    resultsElement.style.display = 'none'; // Hide results if input is too short
                                }
                            }, 500) // 500ms debounce
                        );

                        // Hide results when clicking outside
                        document.addEventListener('click', function(event) {
                            if (!addressInput.contains(event.target) && !resultsElement.contains(event
                                    .target)) {
                                resultsElement.style.display = 'none';
                            }
                        });
                    }
                });

                function getSubCategories(categoryId) {
                    if (categoryId) {
                        let route = "{{ url('/user/wants/subcategory/list/') }}/" + categoryId;
                        console.log(route);
                        $.get({
                            url: route,
                            dataType: 'json',
                            success: function(response) {
                                $('#subcategory_id').html(response.template);
                            },
                            error: function(xhr) {
                                console.log(xhr.responseText);
                            }
                        });
                    } else {
                        $('#sub_category_id').html('<option value="">Select</option>');
                    }
                }






                areaRange
    </script>
@endsection