@extends('layout.master')
@section('content')
    <div class="page-heading-block py-4">

        @if (!empty($menu) && $menu == 'estates')
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('estates.view', ['id' => $estate_details->id]) }}">
                            {{ $estate_details->name ?? '' }}
                        </a>
                    </li>
                    <li class="breadcrumb-item"><a
                            href="{{ route('estates.view', ['id' => $estate_details->id, 'tab' => 2]) }}">Estates Details</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Edit</li>
                </ol>
            </nav>
        @else
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit</li>
                </ol>
            </nav>
        @endif
        {{-- <div class="page-title-block d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center justify-content-between">
                <a href="{{ route('estates.get') }}" class="back-btn">
                    &#x276e; &nbsp;Back
                </a>

                <h4 class="mx-5 mb-0 font-weight-bold">Edit Estate</h4>
            </div>
        </div> --}}
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-4 rounded">
            <div class="d-flex justify-content-end">
                <a href="{{ route('estates.list-units-blocks', ['id' => $estate_details->id]) }}"
                    class="btn add-btn m-0" id="add_residence_btn">View Blocks & units</a>
            </div>
            <form action="{{ route('estates.update', ['id' => $estate_details->id]) }}" method="POST" class="row"
                id="edit-estate-form" enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="hidden" id="estate_id" value="{{ $estate_details->id }}">
                <div class="mb-3 col-12">
                    <label for="estate-name" class="form-label">Estate Name *</label>
                    <input type="text"
                        class="form-control rounded {{ $errors->has('estate_name') ? 'border-required' : '' }}"
                        name="estate_name" id="estate-name"
                        value="{{ !empty(old('estate_name')) ? old('estate_name') : $estate_details->name }}">
                    @if ($errors->has('estate_name'))
                        <p class="user_data text-danger my-2">{{ $errors->first('estate_name') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-6">
                    <label for="email" class="form-label">Email *</label>
                    <input type="text" class="form-control rounded {{ $errors->has('email') ? 'border-required' : '' }}"
                        name="email" id="email"
                        value="{{ !empty(old('email')) ? old('email') : $estate_details->email }}">
                    @if ($errors->has('email'))
                        <p class="user_data text-danger my-2">{{ $errors->first('email') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-6">
                    <label for="contact-number" class="form-label">Contact Number *</label>
                    <input type="text"
                        class="form-control rounded {{ $errors->has('contact_number') ? 'border-required' : '' }}"
                        name="contact_number" id="contact-number"
                        value="{{ !empty(old('contact_number')) ? old('contact_number') : $estate_details->contact_number }}">
                    @if ($errors->has('contact_number'))
                        <p class="user_data text-danger my-2">{{ $errors->first('contact_number') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-6">
                    <label for="address-line-one" class="form-label">Address Line 1 *</label>
                    <input type="text"
                        class="form-control rounded {{ $errors->has('address_line_one') ? 'border-required' : '' }}"
                        name="address_line_one" id="address-line-one"
                        value="{{ !empty(old('address_line_one')) ? old('address_line_one') : $estate_details->address_line_one }}">
                    @if ($errors->has('address_line_one'))
                        <p class="user_data text-danger my-2">{{ $errors->first('address_line_one') }}</p>
                    @endif
                </div>
                <div class="mb-3 col-6">
                    <label for="address-line-two" class="form-label">Address Line 2</label>
                    <input type="text" class="form-control rounded" name="address_line_two" id="address-line-two"
                        value="{{ !empty(old('address_line_two')) ? old('address_line_two') : $estate_details->address_line_two ?? '' }}">
                </div>
                {{-- <div class="mb-3 col-6">
                    <label for="country" class="form-label">Country</label> --}}
                <input type="hidden" class="form-control rounded" name="country" id="country" value="Singapore">
                <input type="hidden" name="latitude" id="latitude"
                    value="{{ !empty(old('latitude')) ? old('latitude') : $estate_details->latitude ?? '' }}">
                <input type="hidden" name="longitude" id="longitude"
                    value="{{ !empty(old('longitude')) ? old('longitude') : $estate_details->longitude ?? '' }}">
                {{-- </div> --}}
                <div class="mb-3 col-6">
                    <label for="post-code" class="form-label">Postal Code *</label>
                    <input type="text"
                        class="form-control rounded {{ $errors->has('post_code') ? 'border-required' : '' }}"
                        name="post_code" id="post-code"
                        value="{{ !empty(old('post_code')) ? old('post_code') : $estate_details->post_code }}"
                        maxlength="20">
                    @if ($errors->has('post_code'))
                        <p class="user_data text-danger my-2">{{ $errors->first('post_code') }}</p>
                    @endif
                </div>
                <div class="mb-3 d-grid ">
                    <label class="form-label">Attach (PNG, JPEG)</label>
                    <input type="file" class="attachment-input" name="attachment" id="attachment"
                        accept="image/png, image/jpeg" />
                    <label for="attachment" class="attachment-label">
                        <div id="img-preview" class=" d-grid">
                            <img src="{{ !empty($estate_details->public_url) ? $estate_details->public_url : asset('assets/images/add-attachment-icon.svg') }}"
                                alt="" width="100" height="100">
                            <button type="button"
                                class="btn btn-danger btn-sm remove_image mt-1 {{ empty($estate_details->public_url) ? 'hide' : '' }}"
                                data-image_id="{{ $estate_details->logo_image_id ?? '' }}">Remove</button>
                        </div>
                    </label>
                </div>

                <input type="text" id="locationSearch" placeholder="Search your estate location">
                <div class="mb-3 col-12" id="map"></div>
                <div class="d-flex justify-content-end ">
                    <a href="{{ route('estates.get') }}" class="btn form-cancel-btn mx-3">Cancel</a>
                    <button type="submit" class="btn form-submit-btn">Update</button>
                </div>
            </form>
        </div>
    </div>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
    @push('scripts')
        <!-- Add Splide Script-->
        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': `{{ csrf_token() }}`
                }
            });
        </script>

        <script src="{{ asset('js/edit-estate-page.js') }}"></script>

        <script
            src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap&libraries=places"
            async defer></script>
        <script>
            let latvalue = {{ !empty($estate_details->latitude) ? $estate_details->latitude : 1.2852354730118347 }};
            let lngvalue = {{ !empty($estate_details->longitude) ? $estate_details->longitude : 103.8503228783839 }};


            function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    center: {
                        lat: latvalue,
                        lng: lngvalue
                    }
                });

                var marker = new google.maps.Marker({
                    position: map.getCenter(),
                    map: map,
                    draggable: true
                });

                var input = document.getElementById('locationSearch');
                var autocomplete = new google.maps.places.Autocomplete(input);

                autocomplete.addListener('place_changed', function() {
                    var place = autocomplete.getPlace();

                    if (!place.geometry) {
                        return;
                    }

                    map.setCenter(place.geometry.location);
                    marker.setPosition(place.geometry.location);

                    document.getElementById('latitude').value = place.geometry.location.lat();
                    document.getElementById('longitude').value = place.geometry.location.lng();

                    if (place.formatted_address) {
                        console.log('Address (Search):', place.formatted_address);
                        document.getElementById('address-line-one').value = place.formatted_address;
                    } else {
                        console.log('Address (Search): unable to get address');
                    }
                });

                map.addListener('click', function(e) {
                    var clickLat = e.latLng.lat();
                    var clickLng = e.latLng.lng();
                    marker.setPosition({
                        lat: clickLat,
                        lng: clickLng
                    });
                    document.getElementById('latitude').value = clickLat;
                    document.getElementById('longitude').value = clickLng;

                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        location: {
                            lat: clickLat,
                            lng: clickLng
                        }
                    }, function(results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            if (results[0]) {
                                console.log('Address (Click):', results[0].formatted_address);
                                document.getElementById('address-line-one').value = results[0]
                                    .formatted_address;
                            } else {
                                console.log('Address (Click): unable to get address');
                            }
                        } else {
                            console.error('Geocoder failed due to: ' + status);
                        }
                    });
                });

                google.maps.event.addListener(marker, 'dragend', function() {
                    var position = marker.getPosition();
                    document.getElementById('latitude').value = position.lat();
                    document.getElementById('longitude').value = position.lng();

                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        'location': position
                    }, function(results, status) {
                        if (status === 'OK') {
                            if (results[0]) {
                                console.log('Address (Drag):', results[0].formatted_address);
                                document.getElementById('address-line-one').value = results[0]
                                    .formatted_address;
                            } else {
                                console.log('Address (Drag): No results found');
                            }
                        } else {
                            console.log('Address (Drag): Geocoder failed due to: ' + status);
                        }
                    });
                });

                // Get address on initialization (consider Geocoding API usage limits)
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    location: map.getCenter()
                }, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            console.log('Address (Initial):', results[0].formatted_address);
                            // document.getElementById('address-line-one').value = results[0].formatted_address;
                        } else {
                            console.log('Address (Initial): unable to get address');
                        }
                    } else {
                        console.error('Geocoder failed due to: ' + status);
                    }
                });
            }
        </script>
    @endPush
@endsection