@extends('layouts.lookatme')

@section('title', trans('message.my_address'))
@section('content')
    <div class="tw-mt-6 tw-px-8 md:tw-px-12 lg:tw-px-20 tw-flex tw-flex-col md:tw-flex-row">
        <aside class="tw-flex tw-flex-col tw-items-center tw-w-full md:tw-w-1/3 tw-mr-4">
            @include('templates.lookatme.my_account._sidebar-nav')
        </aside>
        <section class="tw-w-full tw-mt-8 md:tw-mt-0">
            <div class="" id="my-address" style="display: none;">
                <div class="tw-flex tw-items-center tw-justify-between">
                    <h2 class="tw-border-0 tw-border-l-4 tw-border-solid tw-pl-4 tw-font-bold">
                        {{ trans('message.my_address') }}
                    </h2>
                    <div class="">
                        <button type="button"
                                data-bs-toggle="modal"
                                data-bs-target="#shown-form"
                                class="btn btn-default">
                            <i class="fa fa-circle-plus tw-mr-2.5"></i>
                            Add new
                        </button>
                    </div>
                </div>
                <div v-if="locations.length > 0" class="tw-grid tw-grid-cols-2 tw-mt-4 tw-gap-6">
                    <div v-for="location in locations"
                         class="tw-border tw-border-solid tw-border-gray-400/50 tw-rounded-lg
                            tw-flex tw-flex-col
                            tw-p-4">
                        <div class="tw-capitalize">
                            @{{ location.name }}
                            <span class="tw-text-gray-200 tw-mx-3 tw-inline-block">|</span> @{{location.phone_number }}
                        </div>
                        <div class="tw-flex tw-items-start tw-mt-4">
                            <i class="icon-location3 tw-text-xl tw-mr-5 "></i>
                            <p>
                                @{{ location.address }}
                            </p>
                        </div>

                        <div class="tw-mb-2">
                            <span>Note: @{{ location.note }}</span>
                        </div>

                        <div class="tw-flex tw-justify-between tw-mt-auto">
                            <button v-if="location.is_default" type="button"
                                    @click="updateStatus(location)"
                                    class="btn btn-defaul tw-text-blue-400">
                                Default
                            </button>
                            <button v-if="!location.is_default"
                                    @click="updateStatus(location)"
                                    type="button" class="btn btn-defaul tw-text-blue-400">
                                Set as default
                            </button>

                            <div class="">
                                <button @click="showDeliveryMap(location)" class="btn btn-default tw-text-orange-400">
                                    Edit
                                </button>
                                <button @click="removeAddress(location)" class="btn btn-default tw-text-rose-500">Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="locations.length === 0" class="tw-mt-4">
                    You don't have any delivery address yet.
                </div>

                <div class="modal fade" id="shown-form" data-bs-backdrop="false" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header tw-py-2">
                                <h5 class="modal-title">{{trans('message.delivery_information')}}</h5>
                                <button type="button" class="btn-close"
                                        @click="reset()"
                                        data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="tw-grid tw-items-center tw-grid-cols-12 tw-gap-6">
                                    @include('templates.lookatme.components.input', [
                                            'label' => trans('message.full_name'),
                                            'type' => 'text',
                                            'name' => 'name',
                                            'text' => trans('message.full_name'),
                                            'icon' => 'fa fa-user',
                                            'classLabel' => 'tw-col-span-3',
                                            'class'=>'tw-col-span-9',
                                            'attributes' => 'v-model="name"'
                                        ])
                                    @include('templates.lookatme.components.input', [
                                           'label' => trans('message.phone_number'),
                                           'type' => 'text',
                                           'name' => 'phone_number',
                                           'text' => trans('message.phone_number'),
                                           'icon' => 'icon-phone1',
                                           'classLabel' => 'tw-col-span-3',
                                           'class'=>'tw-col-span-9',
                                           'attributes'=>'v-model="phone_number"'
                                       ])

                                    <label for="select_location"
                                           class="tw-col-span-3">{{trans('message.address')}}</label>
                                    <div class="tw-relative tw-col-span-9 ">
                                        <input type="text" class="tw-rounded-r-full tw-rounded-l-full
                                                    tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80
                                                    tw-placeholder-dark-250
                                                    tw-py-3 tw-px-12
                                                    focus:tw-outline-dark
                                                    tw-bg-transparent tw-w-full"
                                               id="select_location"
                                               placeholder="{{trans('message.select_location')}}"
                                               data-bs-toggle="modal"
                                               data-bs-target="#shown-map"
                                               v-model="address"
                                               @click="showDeliveryMap(selectDelivery)">
                                        <i class="icon-location3 tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                    </div>

                                    @include('templates.lookatme.components.input', [
                                           'label' => trans('message.note'),
                                           'type' => 'text',
                                           'name' => 'note',
                                           'text' => trans('message.note'),
                                           'icon' => 'fa fa-book-bookmark',
                                           'classLabel' => 'tw-col-span-3',
                                           'class'=>'tw-col-span-9',
                                           'attributes'=>'v-model="note"',
                                       ])
                                    @include('templates.lookatme.components.button', [
                                              'type' => 'button',
                                              'text' => 'Done',
                                              'class'=>'tw-w-full tw-py-3 btn-dark tw-col-span-9 tw-col-start-4',
                                              'attributes'=>'@click="saveDeliveryAddress()"',
                                          ])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{--Show Map--}}
                <div class="modal fade" id="shown-map" data-bs-backdrop="false" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content">
                            <div class="modal-header tw-py-2">
                                <h5 class="modal-title">Map</h5>
                                <button type="button" class="btn-close"
                                        @click="showForm()"
                                        data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                {{-- Search Address--}}
                                <div class="tw-relative">
                                    <div class="tw-relative">
                                        <input v-on:keyup="searchAddress()"
                                               v-model="searchText"
                                               type="text" name="pac-input" id="pac-input" class="controls tw-py-2.5 tw-rounded-md
                                    tw-border-0 tw-outline tw-outline-1 tw-outline-gray-400/80 tw-placeholder-dark-250 tw-py-2 tw-px-12 focus:tw-outline-dark tw-bg-transparent tw-w-full"
                                               placeholder="Enter a location">
                                        <i class="fa fa-search tw-flex tw-items-center tw-absolute tw-left-5 tw-top-0 tw-bottom-0 tw-text-gray-400/80"></i>
                                    </div>

                                    <div v-if="results.length > 0" id="search-result"
                                         class="tw-absolute tw-top-full tw-mt-4
                                     tw-min-h-[25vh] tw-z-50
                                     tw-bg-white tw-shadow-lg tw-w-full
                                     dropdown tw-max-h-[25vh] tw-overflow-y-auto">
                                        <ul class="tw-w-full">
                                            <li v-for="result in results"
                                                class="tw-list-none tw-border-2 tw-my-4 hover:tw-text-gray-400/80 tw-cursor-pointer">
                                                <i class="icon-location3 tw-text-gray-700"></i>
                                                <button type="button"
                                                        @click="markerFromSearch(result)"
                                                        class="btn tw-py-0 tw-mx-2">
                                                    @{{ result.name}}
                                                </button>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                                <div id="map" class="tw-w-full tw-h-[60vh] tw-mt-4"></div>

                                <div class="alert alert-warning tw-mt-4">
                                    <span>Drag or right click to change marker location.</span>
                                </div>

                                <div class="tw-flex tw-justify-end">
                                    <button @click='getLocationAddress()'
                                            type="button"
                                            class="btn btn-dark tw-text-right">
                                        Select this location.
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@section('script')
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key={{config('global.google_key')}}&libraries=places"></script>
    <script>
        const address = Vue.createApp({
            data() {
                return {
                    searchText: '',
                    locations: [],
                    latLng: {
                        lat: null,
                        lng: null,
                    },
                    location_id: '',
                    results: [],
                    map: null,
                    marker: null,
                    delay: '',
                    address: '',
                    name: '',
                    phone_number: '',
                    note: '',
                    selectDelivery: null,
                }
            },
            mounted() {
                this.locations = {!! $locations !!};
                $("#my-address").fadeIn();
                this.reset();
            },
            methods: {
                markerFromSearch(result) {
                    this.marker.setPosition(result.geometry.location);
                    this.map.setCenter(result.geometry.location);
                    this.map.setZoom(15);
                    this.results = [];
                    this.searchText = '';
                    this.latLng = result.geometry.location;
                    console.log(result);
                },
                searchAddress() {
                    if (typeof this.delay === 'number') {
                        clearTimeout(this.delay);
                    }
                    this.delay = setTimeout(() => {
                        const map = this.map;
                        const searchText = this.searchText;

                        const service = new google.maps.places.PlacesService(map);

                        const request = {
                            query: searchText,
                            fields: ["name", "geometry"],
                        };
                        service.findPlaceFromQuery(request, (results, status) => {
                            if (status === google.maps.places.PlacesServiceStatus.OK && results) {
                                this.results = results;
                            }
                        });
                    }, 500);
                },
                removeAddress(location) {
                    this.httpRequest('POST', '{{ route('remove-delivery-address') }}', {
                        id: location.id,
                    }).then(
                        res => {
                            if (res.success) {
                                this.locations = res.data;
                            } else {
                                // Browser doesn't support Geolocation
                                SweetAlert({
                                    text: `Location is not found, Please try later.`,
                                    type: 'warning',
                                });
                            }
                        }
                    );
                },
                updateStatus(location) {
                    $.ajax({
                        method: "get",
                        url: '{{ route('set-default-address') }}',
                        data: {
                            location: location,
                            is_default: true,
                        },
                        success: (res) => {
                            if (res.success) {
                                this.locations = res.data;
                            }
                        }
                    })
                },
                showDeliveryMap(delivery_info = null) {
                    const map = this.initMap();
                    this.marker = new google.maps.Marker({
                        map: map,
                        draggable: true,
                    });

                    // event map right-click
                    map.addListener("rightclick", (mapsMouseEvent) => {
                        const latLng = mapsMouseEvent.latLng.toJSON();
                        this.latLng = latLng;
                        this.marker.setPosition(latLng);
                    });

                    // event mark drag
                    this.marker.addListener('drag', (mapsMouseEvent) => {
                        this.latLng = mapsMouseEvent.latLng.toJSON();
                    });

                    if (delivery_info === null) {
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(
                                (position) => {
                                    const pos = {
                                        lat: position.coords.latitude,
                                        lng: position.coords.longitude,
                                    };
                                    map.setZoom(16);
                                    map.setCenter(pos);
                                    this.marker.setPosition(pos);
                                    this.latLng = pos;
                                },
                            );
                        } else {
                            // Browser doesn't support Geolocation
                            SweetAlert({
                                text: `Browser doesn't support Geolocation`,
                                type: 'error',
                            });
                        }
                    } else {
                        this.selectDelivery = delivery_info;
                        this.latLng.lat = delivery_info.latitude;
                        this.latLng.lng = delivery_info.longitude;
                        this.location_id = delivery_info.id;
                        this.name = delivery_info.name;
                        this.address = delivery_info.address;
                        this.note = delivery_info.note;
                        this.phone_number = delivery_info.phone_number;
                        const pos = this.latLng;
                        map.setZoom(16);
                        map.setCenter(pos);
                        this.marker.setPosition(pos);
                    }
                    $("#shown-form").modal('show');
                },
                getLocationAddress() {
                    const latLng = this.latLng;

                    // get location address by latLng
                    const geocoder = new google.maps.Geocoder();
                    geocoder.geocode({location: latLng}).then(
                        res => {
                            const {results} = res;
                            this.address = results[0].formatted_address;
                            this.closeMap();
                            $("#shown-form").modal('show');
                        }
                    )
                },
                saveDeliveryAddress() {
                    // store locations
                    this.httpRequest('post', '{{ route('store-delivery-address') }}', {
                        lat: this.latLng.lat,
                        lng: this.latLng.lng,
                        address: this.address,
                        id: this.location_id ?? null,
                        name: this.name,
                        phone_number: this.phone_number,
                        note: this.note,
                    }).then(
                        res => {
                            this.locations = res.data;
                            this.reset();
                            $("#shown-form").modal('hide');
                        }
                    )
                },
                reset(){
                    this.name = '{{ $customer_info->name }}';
                    this.phone_number = '{{$customer_info->phone}}';
                    this.address = '';
                    this.note = '';
                    this.location_id = '';
                    this.selectDelivery =null;
                },
                showForm(){
                    $("#shown-form").modal('show');
                },

                initMap() {
                    this.map = new google.maps.Map(document.getElementById("map"), {
                        zoom: 9,
                        center: {lat: 11.2289567, lng: 104.5222362},
                        streetViewControl: false,
                    });

                    return this.map;
                },
                closeMap() {
                    $("#shown-map").modal("hide");
                },
                httpRequest(method, url, data) {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            method: method,
                            url: url,
                            data: data,
                            success: (res) => {
                                resolve(res);
                            },
                            error: (error) => {
                                reject(error);
                            }
                        });
                    })
                },
            }
        }).mount('#my-address');

    </script>

@endsection