@extends('layouts.admin')
@section('styles')
<style type="text/css">
    .custom-map-control-button {
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        margin: 10px;
        padding: 0 0.5em;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
        height: 40px;
        cursor: pointer;
    }
    .custom-map-control-button:hover {
        background: #ebebeb;
    }
</style>
@endsection

@section('content')

<form method="POST" action="{{ route("admin.available-stores.store") }}" enctype="multipart/form-data">
@csrf
    <div class="row">
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    {{ trans('global.create') }} {{ trans('cruds.availableStore.title_singular') }}
                </div>

                <div class="card-body">
                    {{-- <div class="form-group">
                        <label class="required" for="store_code">{{ trans('cruds.availableStore.fields.store_code') }}</label>
                        <input class="form-control {{ $errors->has('store_code') ? 'is-invalid' : '' }}" type="text" name="store_code" id="store_code" value="{{ old('store_code', '') }}" required>
                        @if($errors->has('store_code'))
                            <div class="invalid-feedback">
                                {{ $errors->first('store_code') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.store_code_helper') }}</span>
                    </div> --}}
                    <div class="form-group">
                        <label class="required" for="store_name">{{ trans('cruds.availableStore.fields.store_name') }}</label>
                        <input class="form-control {{ $errors->has('store_name') ? 'is-invalid' : '' }}" type="text" name="store_name" id="store_name" value="{{ old('store_name', '') }}" required>
                        @if($errors->has('store_name'))
                            <div class="invalid-feedback">
                                {{ $errors->first('store_name') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.store_name_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label class="required" for="store_address">{{ trans('cruds.availableStore.fields.store_address') }}</label>
                        <input class="form-control {{ $errors->has('store_address') ? 'is-invalid' : '' }}" type="text" name="store_address" id="store_address" value="{{ old('store_address', '') }}" required>
                        @if($errors->has('store_address'))
                            <div class="invalid-feedback">
                                {{ $errors->first('store_address') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.store_address_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label class="required" for="state_id">{{ trans('cruds.availableStore.fields.state') }}</label>
                        <select class="form-control select2 {{ $errors->has('state_id') ? 'is-invalid' : '' }}" name="state_id" id="state_id" required>
                            <option value=""></option>
                            @foreach($states as $id => $entry)
                                <option value="{{ $id }}" {{ old('state_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('state_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('state_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.state_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <label for="city_id">{{ trans('cruds.availableStore.fields.city') }}</label>
                        <select class="form-control select2 {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                            <option value=""></option>
                            @foreach($cities as $id => $entry)
                                <option value="{{ $id }}" {{ old('city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('city_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('city_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.city_helper') }}</span>
                    </div>
                    {{-- <div class="form-group">
                        <label for="geo_area_id">{{ trans('cruds.availableStore.fields.area') }}</label>
                        <select class="form-control select2 {{ $errors->has('geo_area_id') ? 'is-invalid' : '' }}" name="geo_area_id" id="geo_area_id">
                            @foreach($areas as $id => $entry)
                                <option value="{{ $id }}" {{ old('geo_area_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('geo_area_id'))
                            <div class="invalid-feedback">
                                {{ $errors->first('geo_area_id') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.area_helper') }}</span>
                    </div> --}}
                    <div class="form-group">
                        <label class="required">{{ trans('cruds.availableStore.fields.status') }}</label>
                        <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status" id="status" required>
                            <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                            @foreach(App\Models\AvailableStore::STATUS_SELECT as $key => $label)
                                <option value="{{ $key }}" {{ old('status', '1') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('status'))
                            <div class="invalid-feedback">
                                {{ $errors->first('status') }}
                            </div>
                        @endif
                        <span class="help-block">{{ trans('cruds.availableStore.fields.status_helper') }}</span>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-danger" type="submit">
                            {{ trans('global.save') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    Store Location
                </div>
                <div class="card-body">
                    <iframe
                      width="100%"
                      height="430"
                      id="google-iframe"
                      frameborder="0" style="border:0"
                      src="https://maps.google.com/maps?q=Sans+Wellness+Taman+Sutera&t=&z=13&ie=UTF8&iwloc=&output=embed" allowfullscreen>
                    </iframe>
                    <input type="hidden" name="google_map_parameter" id="google_map_parameter" value="" />
                </div>
            </div>
        </div>
    </div>
    

    

    {{-- <div class="card">
        <div class="card-header">
            Store Location
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="required" for="store_address">{{ trans('cruds.availableStore.fields.store_address') }}</label>
                <input class="form-control {{ $errors->has('store_address') ? 'is-invalid' : '' }}" type="text" name="store_address" id="store_address" value="{{ old('store_address', '') }}" required>
                @if($errors->has('store_address'))
                    <div class="invalid-feedback">
                        {{ $errors->first('store_address') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.availableStore.fields.store_address_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="address_latitude">{{ trans('cruds.availableStore.fields.address_latitude') }}</label>
                <input class="form-control {{ $errors->has('address_latitude') ? 'is-invalid' : '' }}" type="text" name="address_latitude" id="address_latitude" value="{{ old('address_latitude', '') }}" required>
                @if($errors->has('address_latitude'))
                    <div class="invalid-feedback">
                        {{ $errors->first('address_latitude') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.availableStore.fields.address_latitude_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="required" for="address_longitude">{{ trans('cruds.availableStore.fields.address_longitude') }}</label>
                <input class="form-control {{ $errors->has('address_longitude') ? 'is-invalid' : '' }}" type="text" name="address_longitude" id="address_longitude" value="{{ old('address_longitude', '') }}" required>
                @if($errors->has('address_longitude'))
                    <div class="invalid-feedback">
                        {{ $errors->first('address_longitude') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.availableStore.fields.address_longitude_helper') }}</span>
            </div>
            <div class="form-group">
                <div id="map" style="height: 400px;"></div>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </div>
    </div> --}}
</form>



@endsection

@section('scripts')
{{-- <script src="{{ mix('js/google-map-api.js') }}"></script> --}}
<script type="text/javascript">
    let map, marker, infoWindow;

    function initMap() {
        const input = document.getElementById("store_address");

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };

                map = new google.maps.Map(document.getElementById("map"), {
                    center: pos,
                    zoom: 10,
                });

                marker = new google.maps.Marker({
                    position: pos,
                    animation: google.maps.Animation.DROP,
                    map,
                });

                const defaultBounds = {
                    north: pos.lat + 0.1,
                    south: pos.lat - 0.1,
                    east: pos.lng + 0.1,
                    west: pos.lng - 0.1,
                };

                const options = {
                    componentRestrictions: { country: "my" },
                    fields: ["address_components", "formatted_address", "geometry", "icon", "name"],
                };

                const autocomplete = new google.maps.places.Autocomplete(input, options);

                google.maps.event.addListener(autocomplete, 'place_changed', function () {
                    var place = autocomplete.getPlace();
                    let newPos = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
                    document.getElementById('address_latitude').value = place.geometry.location.lat();
                    document.getElementById('address_longitude').value = place.geometry.location.lng();
                    map.panTo(new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng()));
                    marker.setPosition(newPos);
                });
            },
            () => {
                handleLocationError(true, infoWindow, map.getCenter());
            }
            );
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(
        browserHasGeolocation
          ? "Error: The Geolocation service failed."
          : "Error: Your browser doesn't support geolocation."
      );
      infoWindow.open(map);
    }
</script>
{{-- <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initMap"></script> --}}
<script>
    $(function(){
        // Select Dependent Dropdowns
        $("#state_id").change(function(){
            $.ajax({
                url: "{{ route('admin.available-stores.cities.get_by_state') }}?state_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#city_id').html(data.html);
                }
            });
        });

        $("#store_address").on('change', function(){
            $.ajax({
                url: "{{ route('google-map.search') }}?address=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#google-iframe').attr('src', data.url);
                    $('#google_map_parameter').val(data.parameter);
                }
            });
        });
    });
</script>

@endsection