@extends('modules.head') @section('contenido')
@section('extra-css')
<style>
    #floating-panel {
        position: absolute;
        top: 57px;
        left: 60%;
        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
<script>
    var overlays = []; // Todo el poligono

    function initMapa(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);

        // 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
        });
    }

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

    // Implementar para dar manejo a varias zonas.
    function getAllCoords(){
        var ret = [];
        for(var i = 0 ; i<overlays.length; i++){
            ret.push(overlays.coords);
        }
    }

    function storeCoverage(parameters){
        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;
        }


        if(overlays.length > 0 || !parameters.point_coverage){
            swal("Desea guardar 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,
                        city_id: city_id,
                        cost_delivery,
                        coords: coords // Para serializar y guardar el array como texto plano en la BD
                    };
                    $.ajax({
                        url: "/coverages/store",
                        type: "POST",
                        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>

<div id="floating-panel">
    <input onclick="removeLine()" type="button" value="Borrar">
    <input onclick="storeCoverage({{$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">
        <option value="">-- Ciudad --</option>
        @foreach ($cities as $c)
        <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>
@endsection