@extends('layout.master')
@section('content')
    <div class="page-heading-block py-4">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {{-- <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li> --}}
                <li class="breadcrumb-item"><a href="{{ route('estates.get') }}">Estates</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Estate</li>
            </ol>
        </nav>
        {{-- <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">Add Estate</h4>
            </div>
        </div> --}}
    </div>

    <div class="page-main-content">
        <div class="add-estate-form-block p-5 rounded">
            <form action="{{ route('estates.store') }}" method="POST" class="row" id="add-estate-form"
                enctype="multipart/form-data">
                {{ csrf_field() }}
                <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="{{ old('estate_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="{{ old('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="{{ old('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="{{ old('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="{{ old('address_line_two') }}">
                </div>
                {{-- <div class="mb-3 col-6">
                    <label for="country" class="form-label">Country</label> --}}
                <input type="hidden" name="country" id="country" value="Singapore">
                <input type="hidden" name="latitude" id="latitude" value="1.2852354730118347">
                <input type="hidden" name="longitude" id="longitude" value="103.8503228783839">
                {{-- </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="{{ old('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">
                            <img src="{{ asset('assets/images/add-attachment-icon.svg') }}" alt="">
                        </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">Save</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/add-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>
            function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    center: {
                        lat: 1.2852354730118347,
                        lng: 103.8503228783839
                    }
                });

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

                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