@extends('store.layouts.container')

@section('content')
    <div class="side-title">
        <h3>{{ $head }}</h3>

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

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

            <div class="form-group col-lg-6">
                <label>{{ meta('address', getCurrentLocale()) ?? __('branches.address') }} </label>
                <input type="text" class="form-control {{ $errors->has('address') ? 'is-invalid' : '' }}" name="address" placeholder="{{ meta('address', getCurrentLocale()) ?? __('branches.address') }}" value='{{ old("address", $branch->address ?? "") }}'/>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('cost_delivery', getCurrentLocale()) ?? __('branches.cost_delivery') }} </label>
                <input type="number" step=".01" class="form-control {{ $errors->has('cost_delivery') ? 'is-invalid' : '' }}" name="cost_delivery" placeholder="{{ meta('cost_delivery', getCurrentLocale()) ?? __('branches.cost_delivery') }}" value='{{ old("cost_delivery", $branch->cost_delivery ?? "") }}'/>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('time_delivery', getCurrentLocale()) ?? __('branches.time_delivery') }} </label>
                <input type="number"  class="form-control {{ $errors->has('time_delivery') ? 'is-invalid' : '' }}" name="time_delivery" placeholder="{{ meta('time_delivery', getCurrentLocale()) ?? __('branches.time_delivery') }}" value='{{ old("time_delivery", $branch->time_delivery ?? "") }}'/>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ meta('time_prepare', getCurrentLocale()) ?? __('branches.time_prepare') }} </label>
                <input type="number" class="form-control {{ $errors->has('time_prepare') ? 'is-invalid' : '' }}" name="time_prepare" placeholder="{{ meta('time_prepare', getCurrentLocale()) ?? __('branches.time_prepare') }}" value='{{ old("time_prepare", $branch->time_prepare ?? "") }}'/>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('branches.city_id') }} </label>
                <select id="city_id" onchange="fetchAreas(this)" class="form-control {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id">
                    <option {{ (isset($branch) ? $branch->city_id : null) == '' ? 'selected' : '' }} value="">{{__('cities.select')}}</option>
                    @foreach($cities as $row)
                        <option {{ (isset($branch) ? $branch->city_id : null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->currentDescription->title}}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-lg-6">
                <label>{{ __('branches.area_id') }} </label>
                <select id="area_id" class="form-control {{ $errors->has('area_id') ? 'is-invalid' : '' }}" name="area_id">
                    <option {{ (isset($branch) ? $branch->area_id : null) == '' ? 'selected' : '' }} value="">{{__('cities.select')}}</option>
                    @foreach($areas as $row)
                        <option {{ (isset($branch) ? $branch->area_id : null) == $row->id ? 'selected' : '' }} value="{{$row->id}}">{{$row->currentDescription->title}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-12">
                <input type="hidden" name="latitude" id="latitude" value="@if($branch ?? ''  && $branch->id) {{$branch->latitude}} @endif">
                <input type="hidden" name="longitude" id="longitude" value="@if($branch ?? ''  && $branch->id) {{$branch->longitude}} @endif">
                <div id="address-canvas">
                    <div id="map" style=" height: 400px;border: 1px solid #000;"></div>
                </div>

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

@endsection
@section('inner_js')

    <script type="text/javascript">

        window.onload = function() {
            var latlng = new google.maps.LatLng({!! $branch ?? ''  && $branch->id ? $branch->latitude.', '.$branch->longitude : '21.4989, 39.2509' !!});
            var map = new google.maps.Map(document.getElementById('map'), {
                center: latlng,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function(a) {
                console.log(a);
                var div = document.createElement('div');
                let lat = a.latLng.lat().toFixed(4);
                let lan =  a.latLng.lng().toFixed(4);
                document.getElementsByTagName('body')[0].appendChild(div);
                $("#latitude").val(function() {
                    return  lat;
                });
                $("#longitude").val(function() {
                    return  lan;
                });

            });

        };

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {


            var latlng = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);
            $("#mylatlng").val(function() {
                return  latlng;


            });
            var map = new google.maps.Map(document.getElementById('map'), {
                center: latlng,
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
            google.maps.event.addListener(marker, 'dragend', function(a) {
                console.log(a);
                var div = document.createElement('div');alert(div);
                div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);



            });
        }

    </script>
    <script>
        function fetchAreas(elem)
        {
            let city_id = $(elem).val()
            $.ajax({
                url : url_areas,
                type : 'GET',
                data : 'city_id='+city_id,
                success:function(data)
                {
                    $('#area_id').html(data);
                }
            })
        }
    </script>
    <!-- Editor JS files -->
    {{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            url_areas = "{{route('fetch.store.areas')}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/articles.js') }}"></script>
@endsection
