@extends('layouts.admin')
@section('content')

<form method="POST" action="{{ route("admin.available-stores.update", $availableStore->id) }}" enctype="multipart/form-data">
@method('PUT')
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.edit') }} {{ 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', $availableStore->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', $availableStore->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', $availableStore->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') ? old('state_id') : $availableStore->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') ? old('city_id') : $availableStore->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 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 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', $availableStore->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', $availableStore->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', $availableStore->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 type="text/javascript">
    let map, marker, infoWindow;

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

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                @if($availableStore->address_latitude && $availableStore->address_longitude)
                const pos = {
                    lat: {{ $availableStore->address_latitude }},
                    lng: {{ $availableStore->address_longitude }},
                };
                @else
                const pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };
                @endif

                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());
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initMap"></script>
<script>
    $(function(){
        $('form').keydown(function(event){
            if(event.keyCode == 13) {
              event.preventDefault();
              return false;
            }
        });
        // 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);
                }
            });
        });
    });
</script>

@endsection