@extends('layouts.main')

@push('styles')

@endpush

@section('content')
<div class="row">
     <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="card-header">
                    <h3 class="card-title">{{ __('strings.edit_rate') }}</small></h3>                   
                </div>
                <div class="row" >
                    <div class="col-md-6">
                        <div class="panel-body" style="width: 100%; height: 500px;">                    
                            <div id="map" style="height: 100%;"></div>                              
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card-block">
                            <form class="form" action="{{route('quiq_update_fixed_rate',["rate"=>$rate->id])}}" method="post">
                                {{ csrf_field() }}
                                <h3>{{ method_field('post') }}</h3>
                                
                                    <div class="form-body">
                                        
                                        <div class="form-group  col-md-12">
                                            <label for="name">{{ __('strings.name') }}</label>
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fa fa-location-arrow"></i></span>
                                                </div>
                                                <input type="text" id="name" class="form-control" name="name" required value="{{$rate->name}}">
                                            </div>
                                            <span class="float-sm-right"> <a href="https://www.google.com/maps" target="_blank"> {{__('strings.search_on_google')}}</a></span>
                                        </div>
                                        
                                        <div class="form-group  col-md-12">
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fa fa-map-marker"> lat</i></span>
                                                </div>
                                                <input type="text" id="lat" class="form-control" name="lat" readonly value="{{$rate->lat}}" >
                                            </div>
                                        </div>
                                        
                                        <div class="form-group  col-md-12">
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fa fa-map-marker"> lng</i></span>
                                                </div>
                                                <input type="text" id="lng" class="form-control" name="lng" readonly value="{{$rate->lng}}">
                                            </div>
                                        </div> 
                                        
                                        
                                        
                                        <div class="form-group  col-md-12">
                                            <label for="radio">Radio</label>
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fa fa-circle-o"></i></span>
                                                </div>
                                                <input type="number" id="radio" class="form-control" name="radio" min="0" step="1" value="{{$rate->radio}}">
                                            </div>
                                        </div>
                                        
                                        <div class="form-group col-md-12">
                                            <label for="zone">Region</label>
                                            @foreach($zones as $zone)
                                            <select id="zone" name="zone" class="form-control">
                                                <option value="{{$zone->id}}" selected="{{($rate->zone_id == $zone->id) ? 'selected':''}}" >{{$zone->name}} / {{$zone->country}}</option>
                                            </select>
                                            @endforeach
                                        </div>
                                    </div>
                                <div class="col-md-12">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-block btn-default" onclick="window.history.back()">
                                            {{ __('strings.submit_cancel') }}
                                        </button>                                        
                                    </div>
                                    <div class="col-md-6">
                                        <button type="submit" class="btn btn-block btn-primary ">
                                            {{ __('strings.submit_update') }}
                                        </button>                                        
                                    </div>                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var map;
    var lat = parseFloat("{{(isset($rate) ? $rate->lat : 22.148757)}}");
    var lng = parseFloat("{{(isset($rate) ? $rate->lng : -100.991894)}}");
    var marker;
    var radio;
    
    var pin_start_marker = L.icon({
        iconUrl: '{{asset('images/start_pin.png')}}',
        iconSize:     [26, 43], // size of the icon
        iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
    });
    
    $(document).ready(function () {
        
        $("#radio").bind('keyup mouseup', function(){
            radio.setRadius($('#radio').val());
        });
        
        map = new L.map('map',{
            attributionControl: false,
            pitch: 60, // pitch in degrees
        });
        
            
        map.on('load',function(){            
            console.log('map loaded');
            marker = L.marker([lat,lng], {icon: pin_start_marker, draggable:true})    
                                    .bindTooltip("Posición", {permanent: true,offset: [-13, -30]})
                                    .on('click', function(e){
                                        map.setView(e.latlng, map.zoom);
                                    })
                                    .addTo(map);
            
            
            radio = L.circle([marker.getLatLng().lat, marker.getLatLng().lng], {
                color: '#1fbad6',
                fillColor: '#1fbad6',
                fillOpacity: 0.2,
                radius: $('#radio').val()
            }).addTo(map);
            
            $('#lat').val(lat);
            $('#lng').val(lng);
            // on map move do
            marker.on('dragend ', function(ev) {
                $('#lat').val(ev.target.getLatLng().lat);
                $('#lng').val(ev.target.getLatLng().lng);
                map.fitBounds(radio.getBounds());
                radio.setLatLng(ev.target.getLatLng()).redraw();
            });
            marker.on('drag', function(ev) {
                radio.setLatLng(ev.target.getLatLng()).redraw();
            });
        });
        
        L.tileLayer('https://mapas.rtplataforma.com:8443/styles/klokantech-basic/{z}/{x}/{y}.png', {            
            maxZoom: 18,
        }).addTo(map);
        
        map.setView([lat, lng], 14);
        // adding controls to map
        L.control.fullscreen().addTo(map);
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
                map.invalidateSize();
        });
    });
    
    // detect paste or typing on start address to proccess lat,lng data        
    $("#name").on('input', function () {
        // regualar expression to validate if given string has lat,lng values.
        // online regular expresion validator: https://www.debuggex.com/r/mNdKcumz2T5n-fWr#cheatsheet
        var patt = new RegExp(/(.*)place(.*)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)(.*)d(\d+.\d+)(.*)d(\-?\d+\.\d+)$/);

        if (patt.test($(this).val())) {
            var data = patt.exec($(this).val());
            // get string elementos from regular expresion,                
            // replace all '+' characters with white space. 
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            $(this).val(address);
            $("#lat").val(data[6]);
            $("#lng").val(data[8]);
            radio.setLatLng([data[6], data[8]]).redraw();
            marker.setLatLng([data[6], data[8]]);
            map.fitBounds(radio.getBounds());
        }
    });
</script>
@endpush