@extends('admin.layouts.container')
@section('content')
    <div class="side-title">
        <h3>{{ $head ?? '' }}</h3>
    </div>

    <div class="border-item">
        <form class="form-row" method="post" action="{{ $action }}" enctype="multipart/form-data">
            @if($shop ?? ''  && $shop->id)
                @method('PUT')
            @endif
            @CSRF

            <div class="form-group col-lg-10">
                <label>{{ __('shops.name') }} </label>
                <input type="text" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" name="name" required placeholder="{{ __('shops.name') }}" value='{{ old("name", $shop->name ?? "") }}'/>
            </div>

            <div class="form-group col-lg-2">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="customSwitch1" name="queue_enabled" value='1' {{ old("queue_enabled", $shop->queue_enabled ?? 1) == 1 ? 'checked' : '' }}>
                    <label class="custom-control-label" for="customSwitch1">{{ __('shops.queue_enabled') }}</label>
                </div>
            </div>

            <div class="form-group col-lg-4">
                <label>{{ __('shops.package') }}</label>
                <select name="package_id" id="package_id" class="form-control">
                    <!-- <option value=""> --- </option> -->
                    @foreach (packages() as $package)
                        <option {{ ($shop->package_id ?? "") == $package->id ? 'selected' : ''}} value="{{$package->id}}">{{ $package->title ?? ''}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-4">
                <label>{{ __('shops.category') }}</label>
                <select name="category_id" id="category_id" class="form-control">
                    <!-- <option value=""> --- </option> -->
                    @foreach (categories() as $category)
                        <option {{ $shop->categories->first()->id == $category->id ? 'selected': ''}} value="{{$category->id}}">{{ $category->name ?? ''}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-4">
                <label>{{ __('shops.user') }}</label>
                <select name="user_id" id="user_id" class="form-control">
                    <!-- <option value=""> --- </option> -->
                    @foreach ($users as $user)
                        <option {{ ($shop->user_id ?? "") == $user->id ? 'selected': ''}} value="{{$user->id}}">{{ $user->name ?? ''}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-12">
                <label>{{ __('shops.address') }} </label>
                <input  data-toggle="modal" data-target="#exampleModalCenter" type="text" class="form-control address {{ $errors->has('address') ? 'is-invalid' : '' }}" name="address" placeholder="{{ __('shops.address') }}" value='{{ old("address", $shop->address ?? "") }}'/>
                <small id="passwordHelpInline" class="text-muted">
                    Get The value from <a href="https://www.google.com/maps" target="_blank"> Google Maps </a>
                </small>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('shops.latitude') }} </label>
                <input readonly type="text" class="form-control latitude bg-white {{ $errors->has('latitude') ? 'is-invalid' : '' }}" name="latitude" placeholder="{{ __('shops.latitude') }}" value='{{ old("latitude", $shop->latitude ?? "") }}'/>
                <small id="passwordHelpInline" class="text-muted">
                    Get The value from <a href="https://www.latlong.net/" target="_blank"> Lat-Long Finder </a>
                </small>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('shops.longitude') }} </label>
                <input readonly type="text" class="form-control longitude bg-white {{ $errors->has('longitude') ? 'is-invalid' : '' }}" name="longitude" placeholder="{{ __('shops.longitude') }}" value='{{ old("longitude", $shop->longitude ?? "") }}'/>
                <small id="passwordHelpInline" class="text-muted">
                    Get The value from <a href="https://www.latlong.net/" target="_blank"> Lat-Long Finder </a>
                </small>
            </div>

            {{--Start image container--}}
            {{--        <div class="form-group col-lg-6">--}}
            {{--            <label>{{ __('shops.image') }} </label>--}}
            {{--            <input id="image_thumbnail" class="image_thumbnail" type="hidden" name="image" value="{{old("image", $shop->image ?? "")}}"/>--}}

            {{--            <div class="photos main_photo {{ old('image', $shop->image ?? '') ? ' wow fadeInUp' : 'hide' }}">--}}
            {{--                <div class="col-lg-4">--}}
            {{--                    <div class="items">--}}
            {{--                        <div class="img">--}}
            {{--                            <a href="#" id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" class="lfm" data-hide=".pick_button">--}}
            {{--                                <img src="{{asset(old('image', $shop->image ?? ''))}} "  id="image_holder" class="image_holder"/>--}}
            {{--                            </a>--}}
            {{--                        </div>--}}
            {{--                        <a href="#" class="showHide resetImage close" data-empty=".image_thumbnail" data-hide=".main_photo" data-show=".pick_button"><i class="fas fa-times"></i></a>--}}
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            </div>--}}

            {{--            <div class="clearfix"></div>--}}
            {{--            <span class="input-group-btn pick_button {{ old('image', $shop->image ?? '') ? 'hide' : '' }} ">--}}
            {{--                <a id="lfm" data-input=".image_thumbnail" data-preview=".image_holder" data-show=".main_photo" data-hide=".pick_button" class="lfm btn btn-primary text-light">--}}
            {{--                    <i class="fas fa-camera-retro"></i> Choose--}}
            {{--                </a>--}}
            {{--            </span>--}}
            {{--        </div>--}}
            {{--End image container--}}

            {{--Start commercial_image container--}}
            <div class="form-group col-lg-6">
                <label>{{ __('shops.commercial_image') }} </label>
                <input id="commercial_image_thumbnail" class="commercial_image_thumbnail" type="hidden" name="commercial_image" value="{{old("commercial_image", $shop->commercial_image ?? "")}}"/>

                <div class="photos commercial_image_photo {{ old('commercial_image', $shop->commercial_image ?? '') ? ' wow fadeInUp' : 'hide' }}">
                    <div class="col-lg-4">
                        <div class="items">
                            <div class="img">
                                <a href="#" id="lfm" data-input=".commercial_image_thumbnail" data-preview=".commercial_image_holder" class="lfm" data-hide=".comm_pick_button">
                                    <img src="{{asset(old('commercial_image', $shop->commercial_image ?? ''))}} "  id="commercial_image_holder" class="commercial_image_holder"/>
                                </a>
                            </div>
                            <a href="#" class="showHide resetImage close" data-empty=".commercial_image_thumbnail" data-hide=".commercial_image_photo" data-show=".comm_pick_button"><i class="fas fa-times"></i></a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <span class="input-group-btn comm_pick_button {{ old('commercial_image', $shop->commercial_image ?? '') ? 'hide' : '' }} ">
                <a id="lfm" data-input=".commercial_image_thumbnail" data-preview=".commercial_image_holder" data-show=".commercial_image_photo" data-hide=".comm_pick_button" class="lfm btn btn-primary text-light">
                    <i class="fas fa-camera-retro"></i> Choose
                </a>
            </span>
            </div>
            {{--End image container--}}

            <div class="text-center mt-5 col-12">
                <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
            </div>
        </form>
    </div>

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Choose Your location</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="butn color small save_location"><span>Save Location</span></button>
                </div>
            </div>
        </div>
    </div>


@endsection


@section('inner_js')
    <!-- Editor JS files -->
    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
    <script>
        var route_prefix = "{{ url(config('lfm.prefix')) }}";
        var url = "{{url('/')}}/";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5HuBEjkPPxQH4c7Nhfx2-u5XXCtSIzUk&callback=initMap&libraries=&v=weekly" defer></script>

    <script>
        var marker;
        var save_location = $('.save_location');
        let lat = localStorage.getItem('lat'),
            lng = localStorage.getItem('lng');
        function initMap() {
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker.addListener("dragend", function (map) {
                let lat = map.latLng.lat(), lng = map.latLng.lng();
                localStorage.setItem('lat', lat);
                localStorage.setItem('lng', lng);
                $('#latitude, .latitude').val(lat);
                $('#longitude, .longitude').val(lng);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow()

                google.maps.event.addListener(marker, 'dragend', function() {
                    infowindow.close();
                });

                var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
                geocoder.geocode({ location: latlng }, function(results, status) {
                    if (status === "OK") {
                        if (results[0]) {
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                            document.querySelector('.address').value = results[0].formatted_address
                        } else {
                            window.alert("No results found");
                        }
                    } else {
                        window.alert("Geocoder failed due to: " + status);
                    }
                });
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        }

        save_location.click(function (map) {
            let lat = localStorage.getItem('lat'),
                lng = localStorage.getItem('lng');
            localStorage.setItem('lat', lat);
            localStorage.setItem('lng', lng);
            $('#latitude, .latitude').val(lat);
            $('#longitude, .longitude').val(lng);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
            geocoder.geocode({ location: latlng }, function(results, status) {
                if (status === "OK") {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                        document.querySelector('.address').value = results[0].formatted_address
                    } else {
                        window.alert("No results found");
                    }
                } else {
                    window.alert("Geocoder failed due to: " + status);
                }
            });
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }

            $('.modal').modal('hide')
        });
    </script>

@endsection