@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">{{ translate('Add Pickup Point') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page">{{ translate('Add Pickup Point') }}</li>

                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="box">
                    {!! Form::open(['method' => 'post', 'action' => 'Admin\PickupPointController@store', 'files' => true]) !!}
                    <div class="box-body">
                        <div class="form-group">
                            <label for="title">{{ translate('Title') }}
                            </label>
                            <div>
                                {!! Form::text('title', null, ['required' => 'required','class' => 'form-control', 'placeholder' => translate('Title')]) !!}
                            </div>
                            @error('title')
                                <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="name">{{ translate('Country') }}
                                    </label>
                                    <div>
                                        {!! Form::select('country_id', $countries, null, ['required' => 'required','id' => 'country_id', 'onchange' => 'getprovicesAjax()', 'class' => 'form-control select2', 'data-placeholder' => translate('Country')]) !!}

                                    </div>
                                    @error('country_id')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="name">{{ translate('Province') }}
                                    </label>
                                    <div>
                                        {!! Form::select('province_id', [], null, ['required' => 'required','id' => 'province_id', 'onchange' => 'getcitiesAjax()', 'class' => 'form-control select2', 'data-placeholder' => translate('Province')]) !!}

                                    </div>
                                    @error('province_id')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-group">
                                    <label for="name">{{ translate('City') }}
                                    </label>
                                    <div>
                                        {!! Form::select('city_id', [], null, ['required' => 'required','id' => 'city_id', 'class' => 'form-control select2', 'data-placeholder' => translate('City')]) !!}

                                    </div>
                                    @error('city_id')
                                        <div class="badge badge-danger text-center" style="width: 100%">{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="map-container">
                            <label>{{ translate('Location') }} <span
                                    style="color: red">{{ translate('(Drag the marker to locate the location)') }}</span>
                            </label>
                            <div id="map" style="height: 300px;width: 100%"></div>
                        </div>
                        <div class="map-container">
                            <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        {!! Form::text('lat', $location_lat, ['required' => 'required','class' => 'form-control', 'id' => 'location_lat']) !!}
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-group">
                                        {!! Form::text('lon', $location_lon, ['required' => 'required','class' => 'form-control', 'id' => 'location_lon']) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                {!! Form::checkbox('pay_cash', null, 0, ['id' => 'pay_cash_2']) !!}
                                <label for="pay_cash_2">{{ translate('Cash on delevery') }}</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                {!! Form::checkbox('active', null, 0, ['id' => 'active_2']) !!}
                                <label for="active_2">{{ translate('Recive orders') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <button type="submit" class="btn btn-rounded btn-primary btn-outline">
                            <i class="ti-save-alt"></i> {{ translate('Save') }}
                        </button>
                    </div>
                    {!! Form::Close() !!}
                </div>
            </div>
        </div>

    </section>
@endsection
@section('modal')

@endsection
<style>
    .custom-map-control-button {
        appearance: button;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        margin: 10px;
        padding: 0 0.5em;
        height: 40px;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
    }

    .custom-map-control-button:hover {
        background: #ebebeb;
    }

</style>
@section('script')
    <script type="text/javascript">
        $('.select2').select2()

        var marker;

        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: {
                    lat: {{ $location_lat }},
                    lng: {{ $location_lon }}
                }
            });
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: {
                    lat: {{ $location_lat }},
                    lng: {{ $location_lon }}
                }
            });
            marker.addListener('click', toggleBounce);
            marker.addListener('drag', handleEvent);
            marker.addListener('dragend', handleEvent);
            infoWindow = new google.maps.InfoWindow();
            const locationButton = document.createElement("button");
            locationButton.textContent = "{{ translate('Pick your location') }}";
            locationButton.classList.add("custom-map-control-button");
            map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
            locationButton.addEventListener("click", () => {
                // Try HTML5 geolocation.
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        (position) => {
                            const pos = {
                                lat: position.coords.latitude,
                                lng: position.coords.longitude,
                            };
                            map.setCenter(pos);
                            marker.setPosition(pos);
                            document.getElementById('location_lat').value = position.coords.latitude;
                            document.getElementById('location_lon').value = position.coords.longitude;
                        },
                        () => {
                            handleLocationError(true, infoWindow, map.getCenter());
                        }
                    );
                } else {
                    // Browser doesn't support Geolocation
                    handleLocationError(false, infoWindow, map.getCenter());
                }
            });
        }

        function handleEvent(event) {
            document.getElementById('location_lat').value = event.latLng.lat();
            document.getElementById('location_lon').value = event.latLng.lng();
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
                console.log(marker);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }
        getprovicesAjax();
        getcitiesAjax();
        function getprovicesAjax() {
            var url = "{{ route('Country.getProvinceiesByCountry') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: $('#country_id').val()
                },
                success: function(data) {
                    $('#province_id').html(null);
                    $.each(data, function(i, item) {
                        $('#province_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                    if (data.length != 0) {
                        getcitiesAjax($('#province_id').val())
                    } else {
                        $('#city_id').html(null);
                    }
                }
            });
        }

        function getcitiesAjax() {
            var url = "{{ route('Country.getCitiesByProvince') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: $('#province_id').val()
                },
                success: function(data) {
                    $('#city_id').html(null);
                    $.each(data, function(i, item) {
                        $('#city_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                }
            });
        }
    </script>
@endsection