@extends('admin.master_layout')
@section('title')
    <title>{{ __('admin.Edit property') }}</title>
@endsection
@section('admin-content')
    <!-- Main Content -->
    <div class="main-content">
        <section class="section mt-5">
            <div class="section-header">
                <h1>{{ __('admin.Edit property') }}</h1>
            </div>


            <div class="section-body property_box">

                <div id="hidden-location-box" class="d-none">
                    <div class="delete-dynamic-location">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Distance(km)') }}</label>
                                    <input type="text" class="form-control" name="distances[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="button"
                                    class="btn btn-danger nearest-row-btn removeNearestPlaceRow plus_btn"><i
                                        class="fas fa-trash" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>


                </div>

                <div id="hidden-addition-box" class="d-none">
                    <div class="delete-dynamic-additio">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Key') }}</label>
                                    <input type="text" class="form-control" name="add_keys[]">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Value') }}</label>
                                    <input type="text" class="form-control" name="add_values[]">
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger nearest-row-btn removeAdditioanRow plus_btn"><i
                                        class="fas fa-trash" aria-hidden="true"></i></button>
                            </div>
                        </div>
                    </div>


                </div>

                <div id="hidden-plan-box" class="d-none">
                    <div class="delete-dynamic-plan">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Image') }}</label>
                                    <input type="file" class="form-control-file" name="plan_images[]">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger nearest-row-btn removePlanRow plus_btn"><i
                                        class="fas fa-trash" aria-hidden="true"></i> {{ __('admin.Remove Plan') }}</button>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Title') }}</label>
                                    <input type="text" class="form-control" name="plan_titles[]">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="">{{ __('admin.Description') }}</label>
                                    <textarea name="plan_descriptions[]" id="" class="form-control text-area-5" cols="30" rows="10"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.wants.update', $want->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row mt-4">
                        <div class="col-12">

                            <div class="card">
                                <div class="card-body" data-select2-id="select2-data-46-mub9">
                                    <h4>{{ __('admin.Basic Information') }}</h4>
                                    <hr>

                                    <div class="form-group">
                                        <label for="title">{{ __('admin.Title') }}<span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="title" class="form-control" id="title"
                                            value="{{ html_decode($want->title) }}" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label for="slug">{{ __('admin.Slug') }} <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="slug" class="form-control" id="slug"
                                            value="{{ html_decode($want->slug) }}" readonly>
                                    </div>

                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">{{ __('admin.Property Type') }} <span
                                                        class="text-danger">*</span></label>
                                                <select name="property_type_id" id="property_type_id"
                                                    class="form-control select2" disabled>
                                                    <option value="">{{ __('admin.Select') }}</option>
                                                    @foreach ($types as $type)
                                                        <option {{ $want->want_type_id == $type->id ? 'selected' : '' }}
                                                            value="{{ $type->id }}">{{ $type->name }}</option>
                                                    @endforeach

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

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="purpose">{{ __('admin.Purpose') }} <span
                                                        class="text-danger">*</span></label>
                                                <select name="purpose_id" id="purpose_id" class="form-control select2"
                                                    disabled>
                                                    @foreach ($purposes as $purpose)
                                                        <option {{ $want->purpose_id == $purpose->id ? 'selected' : '' }}
                                                            value="{{ $purpose->id }}">{{ $purpose->name }}</option>
                                                    @endforeach

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

                                        <div class="col-md-6" id="rend_period_box">
                                            <div class="form-group">
                                                <label for="category_id">{{ __('admin.Category') }} <span
                                                        class="text-danger">*</span></label>
                                                <select name="category_id" id="category_id" class="form-control select2"
                                                    disabled>
                                                    @foreach ($categories as $category)
                                                        <option {{ $want->category_id == $category->id ? 'selected' : '' }}
                                                            value="{{ $category->id }}">{{ $category->name }}</option>
                                                    @endforeach

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

                                        <div class="col-md-6" id="rend_period_box">
                                            <div class="form-group">
                                                <label for="sub_category_id">{{ __('admin.Sub Category') }} <span
                                                        class="text-danger">*</span></label>
                                                <select name="sub_category_id" id="sub_category_id"
                                                    class="form-control select2" disabled>
                                                    @foreach ($subcategories as $subcategory)
                                                        <option
                                                            {{ $want->sub_category_id == $subcategory->id ? 'selected' : '' }}
                                                            value="{{ $subcategory->id }}">{{ $subcategory->name }}
                                                        </option>
                                                    @endforeach

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


                                        <div class="col-md-6" id="rend_period_box">
                                            <div class="form-group">
                                                <label for="sub_category_id">{{ __('admin.Size')  }} {{('(Sq. Ft)')}} <span
                                                        class="text-danger">*</span></label>
                                                <input class="form-control" type="text" name="size" value="{{ $want->min_size }} - {{ $want->max_size }}" readonly/>
                                            </div>
                                        </div>


                                        <div class="col-md-6" id="rend_period_box">
                                            <div class="form-group">
                                                <label for="sub_category_id">{{ __('admin.Price')  }} {{('(Sq. Ft)')}} <span
                                                        class="text-danger">*</span></label>
                                                <input class="form-control" type="text" name="price" value="$ {{ $want->min_price }} - $ {{ $want->max_price }}" readonly/>
                                            </div>
                                        </div>


                                    </div>

                                </div>

                            </div>


                            <div class="card">
                                <div class="card-body" data-select2-id="select2-data-46-mub9">
                                    <h4>{{ __('admin.Location') }}</h4>
                                    <hr>
                                    <div class="row">

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">{{ __('admin.States') }}</label>
                                                <p>{{ $want->states }}</p>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">{{ __('admin.Counties') }}</label>
                                                <p>{{ $want->counties }}</p>
                                            </div>
                                        </div>


                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">{{ __('admin.Cities') }}</label>
                                                <div id="country_selector">
                                                    <p>{{ $want->cities }}</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="">{{ __('admin.Zip Codes') }}</label>
                                                <p>{{ $want->zip_codes }}</p>
                                            </div>
                                        </div>



                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="want_preferred_location">{{ __('admin.Preferred Location') }}
                                                    <span class="text-danger">*</span></label>
                                                <textarea name="preferred_location" class="form-control text-area-5" id="" cols="30" rows="10"
                                                    readonly>{{ html_decode($want->preferred_location) }}</textarea>
                                            </div>
                                        </div>


                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="want_special_note">{{ __('admin.Special Note') }} <span
                                                        class="text-danger">*</span></label>
                                                <textarea name="special_note" class="form-control text-area-5" id="" cols="30" rows="10"
                                                    readonly>{{ html_decode($want->special_note) }}</textarea>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>


                            <div class="card">
                                <div class="card-body">
                                    <h4>{{ __('admin.Aminities') }}</h4>
                                    <hr>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <div>
                                                <ul class="list-group">
                                                    @foreach ($aminities as $aminity)
                                                        @foreach ($existing_properties as $amnty)
                                                            @if ($aminity->id == $amnty->aminity_id)
                                                                <li class="list-group-item">{{ $aminity->aminity }}</li>
                                                            @endif
                                                        @endforeach
                                                    @endforeach
                                                </ul>
                                                    

                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            @if ($want->approve_by_admin == 'approved')
                                                <a href="javascript:;">
                                                    <input id="status_toggle" type="checkbox" name="approve_by_admin" checked
                                                        data-toggle="toggle" data-on="{{ __('admin.Approved') }}"
                                                        data-off="{{ __('admin.Pending') }}" data-onstyle="success"
                                                        data-offstyle="danger" disabled>
                                                </a>
                                            @else
                                                <a href="javascript:;">
                                                    <input id="status_toggle" type="checkbox" data-toggle="toggle" name="approve_by_admin"
                                                        data-on="{{ __('admin.Approved') }}"
                                                        data-off="{{ __('admin.Pending') }}" data-onstyle="success"
                                                        data-offstyle="danger"
                                                        {{ isset($want->approve_by_admin) && $want->approve_by_admin == 'approved' ? 'checked' : '' }}>
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>


                            </div>








                        </div>
                        @if ($want->status == 'enable')
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary" disabled>{{ __('admin.Update') }}</button>
                        </div>
                        @else
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">{{ __('admin.Update') }}</button>
                        </div>
                        @endif
                    </div>

                </form>
            </div>
        </section>
    </div>

    <script src="{{ asset('backend/js/select2.min.js') }}"></script>
    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {

                // slug generate and check

                $("#title").on("focusout", function(e) {
                    $("#slug").val(convertToSlug($(this).val()));
                })

                // slug generate and check

                // manage rent period price

                $("#purpose").on("change", function() {
                    var purpose = $(this).val()
                    if (purpose == 'rent') {
                        $("#rend_period_box").removeClass('d-none');
                    } else {
                        $("#rend_period_box").addClass('d-none');
                    }
                })

                // manage rent period price

                //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();
                });

                $(document).on('click', '.existingRemoveNearestPlaceRow', function() {

                    let id = $(this).data('id');
                    $(this).closest('.delete-dynamic-location').remove();

                    $.ajax({
                        type: "put",
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        url: "{{ url('/admin/remove-nearest-location/') }}" + "/" + id,
                        success: function(response) {},
                        error: function(err) {}
                    })
                });

                //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();
                });

                $(document).on('click', '.existingRemoveAdditioanRow', function() {

                    var isDemo = "{{ env('APP_MODE') }}"
                    if (isDemo == 'DEMO') {
                        toastr.error('This Is Demo Version. You Can Not Change Anything');
                        return;
                    }

                    let id = $(this).data('id');
                    $(this).closest('.delete-dynamic-additio').remove();

                    $.ajax({
                        type: "put",
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        url: "{{ url('/admin/remove-add-infor/') }}" + "/" + id,
                        success: function(response) {},
                        error: function(err) {}
                    })

                });

                //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();
                });

                $(document).on('click', '.existingRemovePlanRow', function() {
                    var isDemo = "{{ env('APP_MODE') }}"
                    if (isDemo == 'DEMO') {
                        toastr.error('This Is Demo Version. You Can Not Change Anything');
                        return;
                    }

                    let id = $(this).data('id');
                    $(this).closest('.delete-dynamic-plan').remove();
                    $.ajax({
                        type: "put",
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        url: "{{ url('/admin/remove-plan/') }}" + "/" + id,
                        success: function(response) {

                        },
                        error: function(err) {}
                    })
                });

                //end dynamic plan  add and remove

                // remove existing slider

                $(".remove_existing_image").on("click", function() {

                    var isDemo = "{{ env('APP_MODE') }}"
                    if (isDemo == 'DEMO') {
                        toastr.error('This Is Demo Version. You Can Not Change Anything');
                        return;
                    }

                    let id = $(this).data('id');
                    let parent_div = $(this).closest('.image-box').remove();

                    $.ajax({
                        type: "put",
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        url: "{{ url('/admin/remove-property-slider/') }}" + "/" + id,
                        success: function(response) {},
                        error: function(err) {}
                    })
                })

                // remove existing slider

                $.get({
                    url: "{{ url(path: '/') }}/admin/property/city/list/{{ $want->country_id }}?city_id={{ $want->city_id }}",
                    dataType: 'json',
                    data: {},
                    beforeSend: function() {},
                    success: function(response) {
                        $('#country_selector').html(response.template);
                    },
                    complete: function() {},
                });

            });

        })(jQuery);

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

        $("#country_id").change(function() {
            let id = this.value;
            let route = "{{ url('/admin/property/city/list/') }}/" + id;
            ajax_switch_country(route)
        });

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

        var editLat = "{{ $want->lat }}";
        var editLon = "{{ $want->lon }}";

        var initialLat = editLat ? parseFloat(editLat) : 23.822350;
        var initialLon = editLon ? parseFloat(editLon) : 90.365417;

        var map = L.map('map').setView([initialLat, initialLon], 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;

        currentMarker = L.marker([initialLat, initialLon]).addTo(map);

        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';
                    }
                });
            }
        });
    </script>
@endsection