@extends('template.layoutAdmin')
@section('cabecera')

  <div class="row">
    <div class="col-12 text-right">
      <h1>
        <small> {{  trans('zonasEnjoit.tituloZonas') }}	</small>
      </h1>
    </div>
  </div>
@endsection
@section('title')
    {{  trans('zonasEnjoit.tituloZonas') }}
@endsection

@section('style')
  <style media="screen">
      #mapa {
        height: 659px !important;
        max-height: 100% !important;
      }
  </style>
@endsection

@section('contenido')
    <div class="row">
        <div class="col-12">
            @if(Session::has('message'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😉 {{Session::get('message')}} 😉
                </div>
            @endif
            @if(Session::has('message_error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😓 {{Session::get('message_error')}} 😒
                </div>
            @endif
        </div>
        {{-- <div class="col-8 pr-0" style="height: 100%">
            <div id="mapa" style="height:100% !important"></div>
        </div> --}}

        <div class="col-md-8" id="modMapa">
            <div class="box">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col">
                            <h3 class="box-title"> {{  trans('zonasEnjoit.mapa') }} </h3>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <select name="paisFiltro" id="paisFiltro" class="form-control" required onchange="pais('departamentoFiltro','paisFiltro')">
                                    <option value="0" disabled selected> {{  trans('zonasEnjoit.pais') }} </option>
                                    @foreach ($paises as $item)
                                    <option value="{{ $item->idPais }}" >{{ $item->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <select name="departamentoFiltro" id="departamentoFiltro" class="form-control" required onchange="depa('ciudadFiltro','departamentoFiltro')" disabled>
                                    <option value="0" disabled selected> {{  trans('zonasEnjoit.departamento') }} </option>

                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <select name="ciudadFiltro" id="ciudadFiltro" class="form-control" required  disabled >
                                    <option value="0" disabled selected> {{  trans('zonasEnjoit.ciudad') }}	</option>

                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <button class="btn btn-success" onclick="filtrarZona()">
                                <i class="fa fa-filter" aria-hidden="true" ></i>
                            </button>
                        </div>

                        {{-- <div class="col-md-6 text-right">
                            <a href="javascript:;" data-toggle="modal" data-target="#crearZonas" class="btn btn-sm btn-info" data-toggle="tooltip" title="Agregar Categoria"><i class="fa fa-plus"></i></a>
                        </div> --}}
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" id="mapa">
                    {{-- <div id="mapa" style="height:100% !important;"></div> --}}
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="box" id="acciones">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="box-title"> {{  trans('zonasEnjoit.acciones') }} </h3>
                        </div>
                        {{-- <div class="col-md-6 text-right">
                            <a href="javascript:;" data-toggle="modal" data-target="#crearZonas" class="btn btn-sm btn-info" data-toggle="tooltip" title="Agregar Categoria"><i class="fa fa-plus"></i></a>
                        </div> --}}
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" >
                    <div >
                        <div class="col-md-12 pb-2">
                            <a href="Javascript:;" onclick="listZonas()" class="btn btn-info col-md-12"> {{  trans('zonasEnjoit.listaZonas') }} </a>
                        </div>
                        <div class="col-md-12 pb-2">
                            <a href="Javascript:;" onclick="crearPoligono()" class="btn btn-success col-md-12"> {{  trans('zonasEnjoit.adicionar') }} </a>
                        </div>
                        <div class="col-md-12 pt-15">
                            <label> {{  trans('zonasEnjoit.tips') }} </label>
                            <label> {{  trans('zonasEnjoit.paraEditarEliminar') }} </label>
                            <label> {{  trans('zonasEnjoit.paraDesSeleccionar') }} </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box hide" id="listZonas">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-tittle">
                                <div class="row">
                                    <div class="col-md-2 text-center">
                                        <a href="javascript:;"  title="Regresar" onclick="returnBack()" class="btn btn-info"><i class="fa fa-arrow-left"></i></a>
                                    </div>
                                    <div class="col-md-10 text-center">
                                        <h3> {{  trans('zonasEnjoit.zonas') }} </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" >
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="listado"> {{  trans('zonasEnjoit.listaZonas') }} </label>
                            <table name="zonas" id="zonas" class="table table-bordered table-responsive">
                                {{-- <thead>
                                    <tr><td>{{ trans('zonas.nombreZona') }}</td></tr>
                                </thead> --}}
                                <tbody>
                                    @foreach($zonas as $zona)
                                    <tr><td>{{ $loop->iteration .'. '.$zona->nombre}}</td></tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        {{-- <div class="row">
                            <div class="col-md-6 pb-2">
                                <a href="Javascript:;" onclick="createZona()" class="btn btn-info col-md-12">Guardar</a>
                            </div>
                            <div class="col-md-6 pb-2">
                                <a href="Javascript:;" onclick="agregarZona()" class="btn btn-danger col-md-12">Cancelar</a>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="box hide" id="crearPolygon">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-tittle">
                                <div class="row">
                                    <div class="col-md-2 text-center">
                                        <a href="javascript:;"  title="Regresar" onclick="reload()" class="btn btn-info"><i class="fa fa-arrow-left"></i></a>
                                    </div>
                                    <div class="col-md-10 text-center">
                                        <h3> {{  trans('zonasEnjoit.adicionar') }} </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" >
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="nombreZ"> {{  trans('zonasEnjoit.nombre') }} </label>
                            <input type="text" class="form-control" name="nombreZ" id="nombreZ" placeholder="nombre de la zona">
                        </div>
                        <input type="hidden" name="coords" id="coords" value="">
                        <div class="form-group">
                            <select name="pais" id="pais" class="form-control" required onchange="pais('departamento','pais')">
                                <option value="0" disabled selected> {{  trans('zonasEnjoit.pais') }} </option>
                                @foreach ($paises as $item)
                                <option value="{{ $item->idPais }}" >{{ $item->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <select name="departamento" id="departamento" class="form-control" required onchange="depa('ciudad','departamento')" disabled>
                                <option value="0" disabled selected> {{  trans('zonasEnjoit.departamento') }} </option>

                            </select>
                        </div>
                        <div class="form-group">
                            <select name="ciudad" id="ciudad" class="form-control" required  disabled >
                                <option value="0" disabled selected> {{  trans('zonasEnjoit.ciudad') }}	</option>

                            </select>
                        </div>
                        <input type="hidden" name="coords" id="coords" value="">


                        <div class="col-md-12">
                            <div class="form-group" style="max-height: 80%; overflow: auto;">
                                <label for="listado"> {{  trans('zonasEnjoit.puntos') }} </label>
                                <table name="listado" id="list" class="table table-bordered table-responsive">

                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 pb-2">
                                <a href="Javascript:;" onclick="createZona()" class="btn btn-info col-md-12"> {{  trans('zonasEnjoit.guardar') }} </a>
                            </div>
                            <div class="col-md-6 pb-2">
                                <a href="Javascript:;" onclick="reload()" class="btn btn-danger col-md-12"> {{  trans('zonasEnjoit.cancelar') }} </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box hide" id="editarPolygon">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-tittle">
                                <div class="row">
                                    <div class="col-md-2 text-center">
                                        <a href="javascript:;"  title="Regresar" onclick="returnBack()" class="btn btn-info"><i class="fa fa-arrow-left"></i></a>
                                    </div>
                                    <div class="col-md-10 text-center" id="nombreZonaSelect">
                                        {{-- <h3>Editar</h3> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" >
                    <div class="form-group">
                        <label for="nombreEdit"> {{  trans('zonasEnjoit.editarNombre') }} </label>
                        <input type="text" class="form-control" name="nombreEdit" id="nombreEdit" placeholder="nombre de la zona">
                    </div>
                    <div class="form-group">
                        <select name="paisEdit" id="paisEdit" class="form-control" required onchange="pais('departamentoEdit','paisEdit')">
                            <option value="0" disabled selected> {{  trans('zonasEnjoit.pais') }} </option>
                            @foreach ($paises as $item)
                            <option value="{{ $item->idPais }}" >{{ $item->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="departamentoEdit" id="departamentoEdit" class="form-control" required onchange="depa('ciudadEdit','departamentoEdit')" disabled>
                            <option value="0" disabled selected> {{  trans('zonasEnjoit.departamento') }} </option>

                        </select>
                    </div>
                    <div class="form-group">
                        <select name="ciudadEdit" id="ciudadEdit" class="form-control" required  disabled >
                            <option value="0" disabled selected> {{  trans('zonasEnjoit.ciudad') }} </option>

                        </select>
                    </div>
                    <!-- <div class="form-group">
                        <label for="listado">Puntos</label>
                        <table name="listado" id="list" class="form-control">

                        </table>
                    </div> -->
                    {{-- <div class="col-md-12 pb-2" id="Seleccionado">
                        <label id="selectedZona"></label>
                    </div> --}}
                    <div class="row">
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="editZona()" class="btn btn-warning col-md-12 editar"> {{  trans('zonasEnjoit.editar') }} </a>
                        </div>
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="eliminarZona()" class="btn btn-danger col-md-12 eliminar"> {{  trans('zonasEnjoit.eliminar') }}	</a>
                        </div>
                    </div>
                    {{-- <div class="row">
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="agregarZona()" class="btn btn-info col-md-12">Guardar</a>
                        </div>
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="returnBack()" class="btn btn-danger col-md-12">Cancelar</a>
                        </div>
                    </div> --}}
                </div>
            </div>
           {{--  <div class="box hide" id="eliminarPolygon">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="box-title">Eliminar</h3>
                            <div class="box-tittle">
                                <div class="row">
                                    <div class="col-md-2 text-center">
                                        <a href="javascript:;"  title="Regresar" onclick="returnBack()" class="btn btn-info"><i class="fa fa-arrow-left"></i></a>
                                    </div>
                                    <div class="col-md-9 text-center">
                                        <h3>Eliminar</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" >
                    <label for="">¿Está seguro de que quiere eliminar esta zona?</label>
                    <div class="row">
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="eliminarZona()" class="btn btn-info col-md-12">Confirmar</a>
                        </div>
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="returnBack()" class="btn btn-danger col-md-12">Cancelar</a>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>

    </div>
@endsection

@section('js')
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA01EIKVqGmy9BAhcDyT-nsJsLtBUbU_gA&libraries=drawing&callback=inicio"></script>
    <script>
        function pais(idDepa,idPais){
            var pais = document.getElementById(idPais).value;
            var data = {
                'value':pais
            }
            $.ajax({
                url: UrlHost_+"/pais/listDepart",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {

                    swal({
                        title: " {{  trans('zonasEnjoit.cargando') }} ",
                        text: " {{  trans('zonasEnjoit.espereUnMomento') }}	",
                        showConfirmButton: false
                    });
                },
                success: function(response)
                {
                    swal.close();

                        // $('#departamento').remove();
                        $("#"+idDepa).empty();
                        document.getElementById(idDepa).disabled = false;
                        response.forEach(element => {
                            $('#'+idDepa).prepend("<option value='"+element.idDepartamento+"' >"+element.nombre+"</option>");
                        });
                        $('#'+idDepa).prepend("<option value='0' disabled selected > {{  trans('zonasEnjoit.seleccionDepartamento') }} </option>");

                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        }
        function depa(idCiudad,idDepa){
            var departamento = document.getElementById(idDepa).value;
            var data = {
                'value':departamento
            }
            $.ajax({
                url: UrlHost_+"/departCiudad/departData",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {

                    swal({
                        title: " {{  trans('zonasEnjoit.cargando') }} ",
                        text: " {{  trans('zonasEnjoit.espereUnMomento') }}	",
                        showConfirmButton: false
                    });
                },
                success: function(response)
                {
                    swal.close();

                        // $('#departamento').remove();
                        $("#"+idCiudad).empty();
                        document.getElementById(idCiudad).disabled = false;

                        response.forEach(element => {
                            $('#'+idCiudad).prepend("<option value='"+element.idCiudad+"' >"+element.nombre+"</option>");
                        });
                        $('#'+idCiudad).prepend("<option value='0' disabled selected > {{  trans('zonasEnjoit.seleccionCiudad') }} </option>");

                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        }
    </script>
    <script type="text/javascript">
 function filtrarZona(){
            var pais = document.getElementById('paisFiltro').value;
            var departamento = document.getElementById('departamentoFiltro').value;
            var ciudad = document.getElementById('ciudadFiltro').value;

            if (ciudad == 0 ) {
                swal("Error", " {{  trans('zonasEnjoit.noCiudadFiltro') }} ", "error");

            }else{
                var data = {
                pais: pais,
                departamento:departamento,
                ciudad:ciudad
            }
            // console.log(pais,departamento,ciudad);

            // console.log(host, data)
            $.ajax({
                url: UrlHost_+"/administrator/zonas/ajax/filtrar",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    $("#btnTitleMesa").empty();
                    $("#forMesa").empty();
                    swal({
                        title: "Cargando...",
                        text: "Espere un momento",
                        showConfirmButton: false
                    });
                },
                success: function(response)
                {
                    swal.close();
                    if (response.length != 0) {
                            // console.log(response);
                            var coord =response[0].fun_coords[0];
                        miMapa = new google.maps.Map(document.getElementById('mapa'), {
                            center: { lat: parseFloat(coord.latitud) , lng: parseFloat(coord.longitud) },
                            streetViewControl: false,
                            mapTypeControl: false,
                            zoom: 13,
                        });
                            filtro = true;
                            inicio();
                    }else{
                    swal("Error", " {{  trans('zonasEnjoit.noZonasLugar') }} ", "error");
                    alert( " {{  trans('zonasEnjoit.noZonasLugar') }} ");
                    // console.log("NO HAY ZONAS");
                    }

                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);

                }
            });
            }


            }
        function pulsar(e) {
          // averiguamos el código de la tecla pulsada (keyCode para IE y which para Firefox)
          tecla = (document.all) ? e.keyCode :e.which;
          // si la tecla no es 13 devuelve verdadero,  si es 13 devuelve false y la pulsación no se ejecuta
          return (tecla!=13);
        }

        let miMapa;
        let drawingManager;
        let newPolygon;
        let polyEvent;
        let filtro = false;
        let pageActual = "acciones";
        /* console.log(drawingManager); */
        function inicio() {
            if(!filtro){
                miMapa = new google.maps.Map(document.getElementById('mapa'), {
                center: { lat: {{Auth::user()->latitud == 'false' ? '10.975881': Auth::user()->latitud}}, lng: {{Auth::user()->longitud == 'false' ? '-74.806881':Auth::user()->longitud}} },
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 13,
            });
            }



            @if(!empty($zonas))
            @foreach($zonas as $zona)
                var vertices = [];
                var color = colorRGB();
                var color2 = colorRGB();
                @foreach($zona->funCoords as $coord)
                vertices.push({lat: {{$coord->latitud}}, lng: {{$coord->longitud}}});
                @endforeach
                /* console.log(vertices); */
                var poligono = new google.maps.Polygon({
                    id: {{$zona->idZona}},
                    name: "{{$zona->nombre}}",
                    path: vertices,
                    map: miMapa,
                    strokeColor: color,
                    fillColor: color2,
                    strokeWeight: 4,
                });
                var popup = new google.maps.InfoWindow();
               /*  var contentString =
                        '<div id="content">' +
                        '<div id="siteNotice">' +
                        "</div>" +
                        '<h1 id="firstHeading" class="firstHeading">{{$zona->nombre}}</h1>' +
                        '<div id="bodyContent">' +
                        "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
                        "sandstone rock formation in the southern part of the " +
                        "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
                        "south west of the nearest large town, Alice Springs; 450&#160;km " +
                        "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
                        "features of the Uluru - Kata Tjuta National Park. Uluru is " +
                        "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
                        "Aboriginal people of the area. It has many springs, waterholes, " +
                        "rock caves and ancient paintings. Uluru is listed as a World " +
                        "Heritage Site.</p>" +
                        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
                        "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
                        "(last visited June 22, 2009).</p>" +
                        "</div>" +
                        "</div>"; */
               /*  console.log(poligono); */
                poligono.addListener('click', function (e) {
                    selectZona(this)
                    popup.setContent("{{$zona->nombre}}");
                    /* popup.setContent(contentString); */
                    popup.setPosition(e.latLng);
                    /* console.log(popup); */
                    popup.open(miMapa);})
            @endforeach
            @endif

            /* initDrawing(miMapa); */
            drawingManager = new google.maps.drawing.DrawingManager({
                /* drawingMode: google.maps.drawing.OverlayType.MARKER, */
                drawingControl: false,
                drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [
                        google.maps.drawing.OverlayType.MARKER,
                        /* google.maps.drawing.OverlayType.CIRCLE, */
                        google.maps.drawing.OverlayType.POLYGON,
                        /* google.maps.drawing.OverlayType.POLYLINE,
                        google.maps.drawing.OverlayType.RECTANGLE, */
                    ],
                },
                polygonOptions: {
                    /* editable: true,
                    draggable: true,
                    geodesic: true */
                },
                markerOptions: {
                icon:
                    "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
                    editable: true,
                    draggable: true,
                    geodesic: true
                },

            });

            drawingManager.setMap(miMapa);
            google.maps.event.addListener(drawingManager, 'polygoncomplete' , (polygon) => {
                var coords = [];
                /* console.log(polygon)
                console.log(polygon.latLngs.Mb[0].Mb) */
                var first = null
                $.each(polygon.latLngs, function(a){
                    // console.log(a +" - "+ b)
                    if (first == null){
                        first = a;
                        return false;
                    }
                });


                $.each(polygon.latLngs[first][0][first], function(a, b){
                    coords.push(b.lat()+' '+b.lng());
                });
                console.log(coords);

                drawingManager.drawingControl = false;
                drawingManager.setDrawingMode(null);
                drawingManager.setMap(miMapa);
                newPolygon = polygon;
                showCoords(coords);
            });
            google.maps.event.addListener(drawingManager, 'overlaycomplete' , (event) => {
                /* console.log(event) */

            });

            google.maps.event.addListener(drawingManager, 'markercomplete' , (marker) => {
                /* console.log(marker.getPosition().lat()+' '+marker.getPosition().lng()); */
            });
        }

        function changeMode(a){
            /* console.log(drawingManager);
            console.log(miMapa); */
            if(a){
                /* drawingManager.drawingControl = a; */
                drawingManager.setDrawingMode('polygon');
            }else{
                /* drawingManager.drawingControl = a; */
                drawingManager.setDrawingMode(null);
            }
            drawingManager.setMap(miMapa);
        }

        function showCoords(coords)
        {
            $('#coords').val();
            $('#coords').val(JSON.stringify(coords));
            $('#list').empty();
            var data = '<tbody>';
            console.log(coords);
            $.each(coords, function(a, b) {
                data = data + '<tr> <td>Punto '+ (a+1) +'</td></tr>';
                data = data + '<tr><td>'+ b +'</td></tr>';
            });
            data = data + '</tbody>';
            $('#list').append(data);
        }

        function show()
        {
            /* console.log(polyEvent); */
        }

        function listZonas()
        {
            pageActual = "listas"
            $('#acciones').addClass('hide');
            $('#listZonas').removeClass('hide');
        }

        function crearPoligono()
        {
            pageActual = "crear";
            $('#acciones').addClass('hide');
            $('#crearPolygon').removeClass('hide');
            changeMode(true);
        }

        function editarPoligono()
        {
            pageActual = "editar";
            $('#acciones').addClass('hide');
            $('#editarPolygon').removeClass('hide');
        }

        function editZona()
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var pais = document.getElementById('paisEdit').value;
            var departamento = document.getElementById('departamentoEdit').value;
            var ciudad = document.getElementById('ciudadEdit').value;
            // console.log(ciudad);
            if (pais=="0" || departamento =="0" || ciudad=="0") {
                pais = null;
                departamento = null;
                ciudad = null;
            }

            var data = {
                idZona: polyEvent.id,
                nombre: document.getElementById('nombreEdit').value,
                pais: pais,
                departamento:departamento,
                ciudad:ciudad
            }
            // console.log(host, data)
            $.ajax({
                url: UrlHost_+"/administrator/zonas/ajax/edit",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    swal.close();
                    // $("#btnTitleMesa").empty();
                    // $("#forMesa").empty();
                    // swal({
                    //     title: "Cargando...",
                    //     text: "Espere un momento",
                    //     showConfirmButton: false
                    // });
                },
                success: function(response)
                {
                    if(response.code == 200)
                    {
                       /*  swal("Muy bien!", , "success"); */
                        /* swal({
                            title:"Muy bien!",
                            text: response.message,
                            icon: "success",
                            timer: 10000
                        }); */
                        location.replace(location.href)
                    }
                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        }

       /*  function eliminarPoligono()
        {
            $('#acciones').addClass('hide');
            $('#eliminarPolygon').removeClass('hide');
        } */

        function reload()
        {
            location.reload();
        }

        function eliminarZona()
        {
            swal({
                title: " {{  trans('zonasEnjoit.eliminarZona') }} ",
                text: " {{  trans('zonasEnjoit.eliminarZonaOpcion') }} ",
                html: false,
                animation: true,
                showCancelButton: true,
                cancelButtonText: " {{  trans('zonasEnjoit.cancelar') }} ",
                confirmButtonColor: "#00C31B",
                confirmButtonText: "Aceptar",
                closeOnConfirm: false
            },
            function() {
                var host = "{{$_SERVER["HTTP_HOST"]}}";
                var data = {
                    idZona: polyEvent.id
                }
                /* console.log(host, data) */
                $.ajax({
                    url: UrlHost_+"/administrator/zonas/ajax/eliminar",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        swal.close();
                        // $("#btnTitleMesa").empty();
                        // $("#forMesa").empty();
                        // swal({
                        //     title: "Cargando...",
                        //     text: "Espere un momento",
                        //     showConfirmButton: false
                        // });
                    },
                    success: function(response)
                    {
                        if(response.code == 200)
                        {
                           /*  swal("Muy bien!", , "success"); */
                            /* swal({
                                title:"Muy bien!",
                                text: response.message,
                                icon: "success",
                                timer: 10000
                            }); */
                            location.replace(location.href)
                        }
                    },
                    error: function(xhr)
                    {
                        console.log(xhr.responseJSON);
                        swal("Error", xhr.responseJSON().message, "error");
                    }
                });
            });

        }

        function returnBack()
        {
            pageActual = "acciones";
            $('#acciones').removeClass('hide');
            $('#crearPolygon').addClass('hide');
            $('#editarPolygon').addClass('hide');
            $('#eliminarPolygon').addClass('hide');
            $('#listZonas').addClass('hide');
            changeMode(false);
            polyEvent = null;
        }

        function createZona()
        {
            var nombre = document.getElementById('nombreZ').value;
            var coords = document.getElementById('coords').value;
            var pais = document.getElementById('pais').value;
            var departamento = document.getElementById('departamento').value;
            var ciudad = document.getElementById('ciudad').value;

            if(nombre != null && coords != null && ciudad != "0" )
            {
                console.log('si');
                var data = {
                    nombre: nombre,
                    coords: coords,
                    pais : pais ,
                    departamento :departamento,
                    ciudad: ciudad
                }
                var host = "{{$_SERVER["HTTP_HOST"]}}";
                console.log(host, data)
                $.ajax({
                    url: UrlHost_+"/administrator/zonas/ajax/crear",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        swal.close();
                        // $("#btnTitleMesa").empty();
                        // $("#forMesa").empty();
                        // swal({
                        //     title: "Cargando...",
                        //     text: "Espere un momento",
                        //     showConfirmButton: false
                        // });
                    },
                    success: function(response)
                    {
                        if(response.code == 200)
                        {
                            /* swal("Muy bien!", response.message, "success"); */
                            /* setTimeout(location.reload(), 2000); */
                            location.replace(location.href)
                        }
                    },
                    error: function(xhr)
                    {
                        console.log(xhr.responseJSON);
                        swal("Error", xhr.responseJSON.message, "error");
                    }
                });
            }else{
                console.log('no')
                swal("Error", " {{  trans('zonasEnjoit.ciudadNoSeleccion') }} ", "error");

            }
        }

        function selectZona(polygon)
        {
            console.log(polygon);
            if(pageActual == "acciones" || pageActual == "editar")
            {
                if(polyEvent == null)
                {
                    editarPoligono();
                    /* polygon.setEditable(true) */
                    polygon.strokeColor = 'rgb(255, 255, 0)';
                    polygon.fillColor = 'rgb(0, 0, 0)';
                    polyEvent = polygon;
                    console.log(polyEvent);
                    polygon.setMap(miMapa);
                    $('#nombreZonaSelect').empty();
                    $('#nombreZonaSelect').append('<h3> {{  trans('zonasEnjoit.zona') }}'+polyEvent.name+'</h3>')
                    $('#nombreEdit').val(polyEvent.name)
                    $('.eliminar').removeClass('disabled')
                    $('.editar').removeClass('disabled')
                }else if(polygon != polyEvent){
                    polyEvent = polygon;
                    console.log(polyEvent);
                    polyEvent.strokeColor = 'rgb(255, 255, 0)';
                    polyEvent.fillColor = 'rgb(0, 0, 0)';
                    polyEvent.setMap(miMapa);
                    $('#nombreZonaSelect').empty();
                    $('#nombreZonaSelect').append('<h3> {{  trans('zonasEnjoit.zona') }} '+polyEvent.name+'</h3>');
                    $('#nombreEdit').val(polyEvent.name)
                }else{
                    polyEvent.strokeColor = 'rgb(255, 0, 0)';
                    polyEvent.fillColor = 'rgb(255, 0, 0)';
                    polyEvent.setMap(miMapa);
                    /* polyEvent = null; */
                    returnBack()
                    console.log(polyEvent);
                    $('#nombreZonaSelect').empty();
                    $('.eliminar').addClass('disabled')
                    $('.editar').addClass('disabled')

                }
            }else{
                console.log("no seleccionado");
            }
            /* returnBack(); */
            /* console.log("si")
            console.log(polygon)
            polygon.strokeColor = 'rgb(255, 255, 0)';
            polygon.fillColor = 'rgb(0, 0, 0)';
            polygon.setMap(miMapa);
            $('#modMapa').load('/administrator/zonas #mapa')
            google.maps.event.trigger(miMapa, 'resize'); */

        }


        function generarNumero(numero){
            return (Math.random()*numero).toFixed(0);
        }

        function colorRGB(){
            var coolor = "("+generarNumero(255)+"," + generarNumero(255) + "," + generarNumero(255) +")";
            return "rgb" + coolor;
        }
        $(document).ready(function() {

        })
        </script>

@endsection