@extends('layout.administrator.layout')

@section('css')
<style>
    .imgLogoDomiciliary {
        width: 50px;
        height: 50px;
        border-radius: 5px;
    }
</style>
@endsection

@section('css')
  <style media="screen">
      #mapa {
        height: 659px !important;
        max-height: 100% !important;
      }
  </style>
  <style>
    .modalContentFill{
      background: rgba(255, 255, 255, 0.97);
      width: 100% ;
      max-width: none !important;
      height: 100vh;
      padding: 4%;
    }

    .modalContentFill .itemComponent{
      background-color: #DB3920 ;
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 10px;
    }

    .modalContentFill .itemComponent .custom-checkbox{
      margin: 0;
      padding: 0;
      display: inline-flex;
    }

    .modalContentFill .itemComponent .custom-checkbox label{
      margin: 0;

      color: #fff;
      height: auto;
    }

    .modalContentFill .itemComponent .custom-checkbox h5{
      margin: auto;
    }
</style>
@endsection

@section('content')
<div class="row mt-2 ml-3 mr-3">
    <div class="col p-0">
        <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=" card shadow">
            <div class="card-header border-0">
                <div class="row">
                    <div class="col text-left">
                    <a href="{{route('zonas')}}"  class="btn btn-sm btn-info" title="regresar al inicio"><i class="fa fa-arrow-left"></i></a>
                    </div>
                    <div class="col-md-8 text-center">
                    <h3 class="box-title">Mapa | {{$restaurante->get_usuario->userName}}</h3>
                    </div>
                    <div class="col-md-2 text-right">
                        <a href="javascript:;" data-toggle="modal" data-target="#añadirZona" class="btn btn-sm btn-info" data-toggle="tooltip" title="Agregar Categoria"><i class="fa fa-plus"></i></a>
                    </div>
                    <br>
                </div>
                <div class="col-md-12" id="modMapa" style="max-height:10% !important;">

                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="col-md-12" style="max-height:10%;">
                                <div id="mapa" style="height: 500px"></div>
                            </div>
                        </div>
                </div>
            </div>
        </div>

    </div>
    </div>
    <div class="modal fade" id="añadirZona" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">

            <div class="modal-dialog modal- modal-dialog- modal-" role="document">
                <div class="modal-content modal-">
                    <div class="modal-header">
                        <div class="modal-title font-weight-bold col-md-11" id="añadirNewZona">
                          <div class="row">
                              <div class="col-md-6">
                                  <h3>Seleccionar una nueva zona - Zonas Enjoit</h3>
                              </div>
                              <div class="col-md-3 text-center">
                                  <h6>
                                      <span class="badge" style="background: rgb(62, 255, 0)">Color:</span> Zonas Seleccionadas
                                  </h6>
                              </div>
                              <div class="col-md-3 text-center">
                                  <h6>
                                      <span class="badge" style="background: rgb(151, 151, 151)">Color:</span> Zonas no seleccionadas
                                  </h6>
                              </div>
                          </div>
                        </div>
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                          <i class="fa fa-times"></i>
                          </button>
                      </div>
                      <div class="modal-body width-10" id="addZona" style="height: 500px; max-height: auto;">
                      </div>
                    <div class="modal-footer">
                        {{-- <button type="submit" class="btn btn-success">Asignar</button>
                        <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Cerrar</button> --}}
                    </div>
                </div>
            </div>

    </div>
    <div class="modal fade" id="añadirZona3" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">

    </div>
    <div class="modal modal-fill fade" id="añadirZona" role="dialog" aria-labelledby="añadirNewZona" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content modalContentFill">
            <div class="modal-header">
                <div class="modal-title font-weight-bold col-md-12" id="añadirNewZona">
                  <div class="row">
                      <div class="col-md-6">
                          <h3>Seleccionar una nueva zona - Zonas Enjoit</h3>
                      </div>
                      <div class="col-md-3 text-center">
                          <h6>
                              <span class="badge" style="background: rgb(62, 255, 0)">Color:</span> Zonas Seleccionadas
                          </h6>
                      </div>
                      <div class="col-md-3 text-center">
                          <h6>
                              <span class="badge" style="background: rgb(151, 151, 151)">Color:</span> Zonas no seleccionadas
                          </h6>
                      </div>
                  </div>
                </div>
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <i class="fa fa-times"></i>
                  </button>
              </div>
              <div class="modal-body" id="addZona">
              </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="asignarZona" tabindex="-1" role="dialog" aria-labelledby="editarZonaRest" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="editarZonaRest">Añadir zona a {{$restaurante->get_usuario->userName}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" id="addZonaRestD">
                        <input type="hidden" id="idZona" name="idZona" value="">
                        <div class="form-group">
                            <label for="alias">Nombre de la zona</label>
                            <input type="text" disabled name="nombre" id="nombreZ" value="" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="precio">Precio</label>
                            <input type="number" min="0" onkeypress="return event.charCode >=48" name="precio" id="precioZ" value=""  required placeholder="Digite un valor" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button onclick="assignZone()" type="button" class="btn" style="background: #DB3920;color:#FFF;" >Guardar</button>
                </div>
            </div>
        </div>

    </div>
      <div class="modal fade" id="editarZona" tabindex="-1" role="dialog" aria-labelledby="editarZonaRest" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editarZonaRest">Editar zona</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" id="addZonaRestE">
                        <input type="hidden" id="idZonaRestE" name="idZonaRestE" value="">
                        <div class="form-group">
                            <label for="alias">Nombre</label>
                            <input type="text" name="aliasRestE" disabled id="aliasRestE" value="" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="precio">Editar el precio </label>
                            <input type="number" name="valorRestE" id="valorRestE" value="" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer text-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button onclick="changePrice()" type="button" class="btn" style="background: #DB3920;color:#FFF;" >Guardar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')

    <script type="text/javascript">


        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 pageActual = "acciones";

        // function showCoords(coords)
        // {
        //     $('#coords').val();
        //     $('#coords').val(JSON.stringify(coords));
        //     $('#list').empty();
        //     var data = '<tbody>';
        //     $.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 listZonas()
        // {
        //     pageActual = "listas"
        //     $('#acciones').addClass('hide');
        //     $('#listZonas').removeClass('hide');
        // }

        function seleccionarZona(nombre,id)
        {
            $('#añadirZona').modal('hide');
            $('#nombreZ').val(nombre);
            $('#idZona').val(id);
            $('#asignarZona').modal();
        }

        // function guardarZona()
        // {
        //     var host = "{{$_SERVER["HTTP_HOST"]}}";
        //     var id = document.getElementById('idZonaRest').value;
        //     var alias = document.getElementById('aliasRest').value;
        //     var valor = document.getElementById('valorRest').value;
        //     /* console.log(id,alias,valor) */
        //     var data = {
        //         idZona: id,
        //         alias:alias,
        //         valor:valor
        //     }
        //     /* console.log(host, data) */
        //     $.ajax({
        //         url:"http://"+host+"/administrator/zonas/restaurantes/ajax/agregar",
        //         data: data,
        //         type: 'post',
        //         dataType: 'json',
        //         headers: {
        //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         beforeSend: function () {
        //         },
        //         success: function(response)
        //         {
        //             if(response.code == 200)
        //             {
        //                 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');
        // }

        /* function addZona(idZona)
        {
            swal({
                title: "Añadir zona",
                text: "¿Desea añadir esta zona a su cobertura? ",
                html: false,
                animation: true,
                showCancelButton: true,
                cancelButtonText: "Cancelar",
                confirmButtonColor: "#00C31B",
                confirmButtonText: "Aceptar",
                closeOnConfirm: false
            },
            function(){
                $('#idZonaRest').val(idZona)
                swal.close();
                $('#añadirZona').modal('hide')
                $('#sendForm').modal();
            })
        } */

        // /zonas/ajax/changeState
        // /zonas/ajax/changePrice
        function changePrecio(idZona)
        {
                var host = "{{$_SERVER["HTTP_HOST"]}}";
                var data = {
                    idZona: idZona,
                    idRestaurante: {{$restaurante->idRestaurante}}
                }
                console.log(host, data)
                $.ajax({
                    url:UrlHost_+"/administrator/zonas/ajax/getDataZona",
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                    },
                    success: function(response)
                    {
                        console.log(response)
                        if(response.code == 200)
                        {
                            $('#addZonaRestD')[0].reset()
                            $('#aliasRestE').val(response.data.nombre);
                            $('#valorRestE').val(response.data.precio);
                            $('#idZonaRestE').val(response.data.idZonaDomicilio);
                            $('#editarZona').modal();
                        }else{
                            swal("Error", response.message, "error");
                        }
                    },
                    error: function(xhr)
                    {
                        console.log(xhr.responseJSON);
                        swal("Error", xhr.responseJSON().message, "error");
                    }
                });

        }

        function changePrice()
        {
            var precio = document.getElementById('valorRestE').value;
            var idZona = document.getElementById('idZonaRestE').value;
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var data = {
                idZona: idZona,
                idRestaurante: {{$restaurante->idRestaurante}},
                precio: precio
            }
            // console.log(host, data)
            $.ajax({
                url:UrlHost_+"/administrator/zonas/ajax/changePrice",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                },
                success: function(response)
                {
                    if(response.code == 200)
                    {
                        console.log(response)
                        $('#addZonaRestD')[0].reset()
                        // $('#idZonaRestE').val(response.data.idZonaRest)
                        // document.getElementById('idZonaRestE').value;
                        // document.getElementById('aliasRestE').value;
                        // $('#aliasRestE').val(response.data.alias)
                        // document.getElementById('valorRestE').value;
                        // $('#valorRestE').val(response.data.valor)
                        location.replace(location.href)
                        // $('#editarZona').modal();
                    }else{
                        Swal.fire("Error", response.message, "error");
                    }
                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    Swal.fire("Error", xhr.responseJSON().message, "error");
                }
            });
        }

        function changeState(idZona, state)
        {
            if(state == 1){var estado = "Activar"}else if(state == 0){var estado = "Inactivar"}else{var estado = "eliminar"}
            Swal.fire({
                title: "Cambiar estado de esta Zona",
                text: "¿Desea "+estado+" esta zona? ",
                html: false,
                animation: true,
                showCancelButton: true,
                cancelButtonText: "Cancelar",
                confirmButtonColor: "#00C31B",
                confirmButtonText: "Aceptar"
            }).then((result) => {
                console.log(result)
                if(result.isConfirmed)
                {
                    var host = "{{$_SERVER["HTTP_HOST"]}}";
                    var data = {
                        idZona: idZona,
                        idRestaurante: {{$restaurante->idRestaurante}},
                        newState: state
                    }
                    console.log(host, data)
                    $.ajax({
                        url:UrlHost_+"/administrator/zonas/ajax/changeState",
                        data: data,
                        type: 'post',
                        dataType: 'json',
                        headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () {
                            Swal.close();
                        },
                        success: function(response)
                        {
                            if(response.code == 200)
                            {
                                location.replace(location.href)
                            }
                        },
                        error: function(xhr)
                        {
                            console.log(xhr.responseJSON);
                            Swal.fire("Error", xhr.responseJSON().message, "error");
                        }
                    });
                }else{
                    Swal.close();
                }
            });

        }

        function assignZone()
        {
            var precio = document.getElementById('precioZ').value;
            var idZona = document.getElementById('idZona').value;
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var data = {
                idZona: idZona,
                idRestaurante: {{$restaurante->idRestaurante}},
                precio: precio
            }
            // console.log(host, data)
            $.ajax({
                url:UrlHost_+"/administrator/zonas/ajax/assignZone",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                },
                success: function(response)
                {
                    if(response.code == 200)
                    {
                        console.log(response)
                        $('#addZonaRestD')[0].reset()
                        // $('#idZonaRestE').val(response.data.idZonaRest)
                        // document.getElementById('idZonaRestE').value;
                        // document.getElementById('aliasRestE').value;
                        // $('#aliasRestE').val(response.data.alias)
                        // document.getElementById('valorRestE').value;
                        // $('#valorRestE').val(response.data.valor)
                        location.replace(location.href)
                        // $('#editarZona').modal();
                    }else{
                        swal("Error", response.message, "error");
                    }
                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        }
        /* function editarZona(idZona)
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var data = {
                idZonaRest: idZona
            }
            console.log(host, data)
            $.ajax({
                url:"http://"+host+"/administrator/zonas/restaurantes/ajax/getData",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                },
                success: function(response)
                {
                    if(response.code == 200)
                    {
                        console.log(response)
                        $('#idZonaRestE').val(response.data.idZonaRest)
                        document.getElementById('idZonaRestE').value;
                        document.getElementById('aliasRestE').value;
                        $('#aliasRestE').val(response.data.alias)
                        document.getElementById('valorRestE').value;
                        $('#valorRestE').val(response.data.valor)
                        location.replace(location.href)
                        $('#editarZona').modal();
                    }
                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        } */

        /* function updateZona()
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var id = document.getElementById('idZonaRestE').value;
            var alias = document.getElementById('aliasRestE').value;
            var valor = document.getElementById('valorRestE').value;
            console.log(id,alias,valor)
            var data = {
                idZonaRest: id,
                alias:alias,
                valor:valor
            }
            console.log(host, data)
            $.ajax({
                url:"http://"+host+"/administrator/zonas/restaurantes/ajax/editar",
                data: data,
                type: 'post',
                dataType: 'json',
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                },
                success: function(response)
                {
                    if(response.code == 200)
                    {
                        location.replace(location.href)
                    }
                },
                error: function(xhr)
                {
                    console.log(xhr.responseJSON);

                    try {
                        swal("Error", xhr.responseJSON.message, "error");
                    }catch(error)
                    {
                        swal("Error", xhr.responseJSON, "error");
                    }
                }
            });
        } */

        function selectZona(polygon)
        {
            if(pageActual == "acciones")
            {
                $('#añadirZona').modal('hide');
            }else{
                console.log("no seleccionado");
            }

        }


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

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

        function initMap() {

        map1();
        map2();
        }

        function map1(){

            miMapa = new google.maps.Map(document.getElementById('mapa'), {
                center: { lat: 10.975881, lng: -74.806881 },
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 13,
            });
            var message = [];
            @if(count($zonas)>0)
            @foreach($zonas as $zona)
                var vertices = [];
                @foreach(json_decode($zona->json_coordenadas) as $key => $coord)
                vertices.push({lat: {{$coord->latitud}} , lng: {{$coord->longitud}}});
                @endforeach
                console.log(vertices)
                /* console.log(vertices); */
                var poligono = new google.maps.Polygon({
                    id: {{$zona->idZonaDomicilio}},
                    name: "{{$zona->nombre}}",
                    path: vertices,
                    map: miMapa,
                    strokeColor: '{{$zona->state != 0? "rgb(62, 255, 0)":"rgb(252, 85, 50)"}}',
                    fillColor: '{{$zona->state != 0? "rgb(142, 255, 105)": "rgb(236, 185, 175)"}}',
                    strokeWeight: 4,
                });
                var popup = new google.maps.InfoWindow();
                /* console.log(poligono); */
                message[{{$zona->idZonaDomicilio}}] =
                            '<div id="content">' +
                            '<div id="siteNotice">' +
                            "</div>" +
                            '<h3 id="firstHeading" class="firstHeading text-center red">Zona Enjoit: {{$zona->nombre}}</h3>' +
                            '<div id="content" class="text-center"> <label class="pb-10">Precio: ${{$zona->precio}}</label>'+
                            /* '<div class=" text-center"><label>Zona Enjoit: {{$zona->nombre}}</label></div>' + */
                            '<div id="bodyContent">' +
                            /* '<div class="row">'+ */
                                '<a href="Javascript:;" onclick="changePrecio({{$zona->idZonaDomicilio}})" class="btn-sm btn btn-warning">' +
                                "Editar</a> " +
                                /* '<a href="Javascript:;" onclick="changeState({{$zona->idZonaDomicilio}}, {{$zona->state == 0? 1:0}})" class="btn-sm {{$zona->state == 0? "btn-success":"btn-danger"}}">' +
                                "{{$zona->state == 0? 'Activar':'Inactivar'}}</a> <br><br> " + */
                                '<a href="Javascript:;" onclick="changeState({{$zona->idZonaDomicilio}}, 2)" class="btn btn-sm btn-danger">' +
                                "Eliminar</a> " +
                            /* '</div>'+ */
                            "</div>" +
                            "</div>"
                ;

                poligono.addListener('click', function (e) {
                    selectZona(this)
                    popup.setContent(message[{{$zona->idZonaDomicilio}}]);
                    popup.setPosition(e.latLng);
                    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 = [];
                $.each(polygon.getPath().i, 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);
            });
        }
        function map2(){
                miMapa2 = new google.maps.Map(document.getElementById('addZona'), {
                center: { lat: 10.975881, lng: -74.806881 },
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 13,
            });

            var zonas = {!! json_encode($zonas) !!}
            var contentString = [];
            @if(!empty($zonasE))
            @foreach($zonasE as $zona)
                var vertices = [];
                @foreach($zona->fun_coords as $coord)
                    vertices.push({lat: {{$coord->latitud}}, lng: {{$coord->longitud}}});
                @endforeach
                var exists = false;
                $.each(zonas, function (a, b){
                    /* console.log(b.idZonaDomicilio, {{$zona->idZona}}); */
                    if(b.idZonaEnjoit == {{$zona->idZona}})
                    {
                        exists = true;
                    }
                })
                console.log(exists);
                /* foreach({{$zonas}}) */
                /* console.log(vertices); */
                if(exists){
                var poligono = new google.maps.Polygon({
                    id: {{$zona->idZona}},
                    name: "{{$zona->nombre}}",
                    path: vertices,
                    map: miMapa2,
                    // strokeColor: "rgb(252, 85, 50)",
                    strokeColor: "rgb(62, 255, 0)",
                    // fillColor: "rgb(236, 185, 175)",
                    fillColor: "rgb(142, 255, 105)",
                    strokeWeight: 4,
                });
                var popup = new google.maps.InfoWindow();
                contentString[{{$zona->idZona}}] =
                            '<div id="content">' +
                            '<div id="siteNotice">' +
                            "</div>" +
                            '<h1 id="firstHeading" class="firstHeading text-center">{{$zona->nombre}}</h1>' +
                            '<a href="Javascript:;" onclick="" class="btn btn-danger disabled">' +
                            "Zona ya seleccionada para este restaurante</a> " +
                            "</div>" +
                            "</div>"

                ;
                poligono.addListener('click', function (e) {
                    popup.setContent(contentString[{{$zona->idZona}}]);
                    popup.setPosition(e.latLng);
                    popup.open(miMapa2);})
                }else{
                    var poligono = new google.maps.Polygon({
                    id: {{$zona->idZona}},
                    name: "{{$zona->nombre}}",
                    path: vertices,
                    map: miMapa2,
                    // strokeColor: "rgb(62, 255, 0)",
                    strokeColor: "rgb(151, 151, 151)",
                    // fillColor: "rgb(142, 255, 105)",
                    fillColor: "rgb(151, 151, 151)",
                    strokeWeight: 4,
                });
                var popup = new google.maps.InfoWindow();
                contentString[{{$zona->idZona}}] =
                            '<div id="content">' +
                            '<div id="siteNotice">' +
                            "</div>" +
                            '<h1 id="firstHeading" class="firstHeading text-center">{{$zona->nombre}}</h1>' +
                            '<a href="Javascript:;" onclick="seleccionarZona(\'{{$zona->nombre}}\',{{$zona->idZona}})" class="btn btn-info">' +
                            "Seleccionar</a> " +
                            "</div>" +
                            "</div>"

                ;
               /*  console.log(poligono); */
                poligono.addListener('click', function (e) {
                    /* selectZona(this) */
                    /* console.log(contentString) */
                    popup.setContent(contentString[{{$zona->idZona}}]);
                    popup.setPosition(e.latLng);
                    popup.open(miMapa2);})
                }
            @endforeach
            @endif
        }
    </script>


    {{-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA01EIKVqGmy9BAhcDyT-nsJsLtBUbU_gA&libraries=drawing&callback=inicio"></script> --}}

@endsection