@extends('modules.head') @section('contenido')
@section('extra-css')

<style>
    #floating-panel {
        position: absolute;
        top: 50px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
    }
</style>
@endsection
<div id="floating-panel">
    <input onclick="removeLine();" type=button value="Borrar">
    <input onclick="updateCoverage({{$parameters}});" type=button value="Guardar">
    <input id="name-coverage" type="text" placeholder="Nombre de la cobertura...">
    <input type="number" class="form-control" name="cost_delivery" id="cost_delivery" placeholder="Costo del domicilio (Opcional)">
    <select id="city-coverage">
        @foreach ($cities as $c)
        @if ($c->id == $obj['city_id'])
        <option value="{{$c->id}}" selected>{{$c->name}}</option>
        @endif
        <option value="{{$c->id}}">{{$c->name}}</option>
        @endforeach
    </select>
</div>
<div style="position: absolute; top: 50px; bottom: 0; left: 0; right: 0; z-index: 0;">
    {!! Mapper::render() !!}
</div>
<script>
    var overlays = []; // Todo el poligono
    var mapLocal;
    function initMapa(map){
        mapLocal = map;
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: ['polygon']
            }
        });
        drawingManager.setMap(map);

        var currentPolygons = window.atob("{{ $obj['coords'] }}"),
        polygon = null,
        d = null;

        currentPolygons = JSON.parse(currentPolygons);

        for(var i = 0; i < currentPolygons.length; i++){
            polygon = new google.maps.Polygon({
                map: map,
                paths: JSON.parse(currentPolygons[i]),
            });

            d = {
                overlay: polygon,
                coords: polygon.getPath().getArray()
            };
            overlays.push(d);
        }

        // Evento para guardar las lineas del poligono
        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
            var d = {
                overlay: event.overlay,
                coords: event.overlay.getPath().getArray()
            };
            overlays.push(d); // store reference to added overlay
        });

        $("#name-coverage").val('{{ $obj['name'] }}');
        $("#cost_delivery").val('{{ $obj['cost_delivery'] }}');
    }

    function removeLine() {
        var lastOverlay = overlays.pop();
        if (lastOverlay) lastOverlay.overlay.setMap(null);
    }

    function updateCoverage(parameters){
        if(overlays.length > 0 || !parameters.point_coverage){
            var name = $('#name-coverage').val();
            var cost_delivery = $('#cost_delivery').val();
            city_id = $('#city-coverage').val();

            if(!name){
                swal("Ok", "¡Por favor indica el nombre de la cobertura!", "warning");
                return;
            }

            if(!city_id){
                swal("Ok", "¡Por favor indica la ciudad de la cobertura!", "warning");
                return;
            }

            swal("Desea actualizar la cobertura ?",
            {
                icon: "success",
                buttons: {
                    Ok: 'Si',
                    cancel: 'No',
                }
            }).then((val) => {
                if(val == "Ok"){

                  var coords = [];
                  if (parameters.point_coverage) {
                    for(var i = 0; i < overlays.length; i++ ){
                      coords[i] = JSON.stringify(overlays[i].coords);
                    }
                  }

                    var data = {
                        name: name,
                        cost_delivery,
                        city_id: city_id,
                        coords: coords // Para serializar y guardar el array como texto plano en la BD
                    };
                    $.ajax({
                        url: "/coverages/" + {{$obj['id']}} + "/update",
                        type: "PUT",
                        contentType: 'application/json',
                        data: JSON.stringify(data),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Content-Type': 'application/json'
                        },
                        success: function (r) {
                          swal('Ok', r[0].message, 'success').then(function(){
                              window.location = '/coverages';
                          });
                        },
                        error: function(err){
                            swal('Ok', err, 'error');
                        }
                    });
                }
            });
        }
        else{
            swal("Ok", "!Indica al menos 1 poligono cerrado para continuar!", "warning");
        }
    }
</script>
@endsection