@extends('template.layoutAdmin', ['activeButton'=>'servicios'])
@section('cabecera')

 
        <h1>
            {{  trans('zonasEnjoit.tituloZonas')}}
            <small>{{ trans('zonasEnjoit.mensajeAyuda') }}</small>
        </h1>

@endsection
@section('title')
    {{  trans('zonasEnjoit.tituloZonas') }}
@endsection

@section('style')
  <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('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" style="max-height:10% !important;">
            <div class="box">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="col-md-6">
                            <h3 class="box-title"> {{  trans('zonasEnjoit.mapa') }} </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 class="col-md-12" style="max-height:10%;">
                        <div id="mapa"></div>
                    </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">Adicionar</a> --}}
                            @sidebar('zonas.add')
                                <a href="javascript:;" data-toggle="modal" data-target="#añadirZona" class="btn btn-success col-md-12" data-toggle="tooltip" title="Adicionar zona"><i class="fa fa-plus"></i> {{  trans('zonasEnjoit.adicionar') }} </a>
                            @endsidebar
                        </div>
                        <div class="col-md-12 pt-15">
                            <label> {{  trans('zonasEnjoit.tips') }} </label>
                            <label> {{  trans('zonasEnjoit.lasZonas') }} <span class="badge" style="background: rgb(62, 255, 0)"> {{  trans('zonasEnjoit.color') }} </span> {{  trans('zonasEnjoit.lasZonas|text') }} </label>
                            <label> {{  trans('zonasEnjoit.lasZonas') }} <span class="badge badge-danger"> {{  trans('zonasEnjoit.color') }} </span> {{  trans('zonasEnjoit.lasZonas|text2') }} </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.misZonas') }} </label>
                            <table name="zonas" id="zonas" class="table table-bordered table-responsive">
                                {{-- <thead>
                                    <tr><td>{{ trans('zonas.nombreZona') }}</td></tr>
                                </thead> --}}
                                <tbody>
                                    @if(count($zonas)> 0)
                                        @foreach($zonas as $zona)
                                <tr><td>{{ $loop->iteration .'. '}}</td><td>{{$zona->alias != null?$zona->alias:$zona->funZonas->nombre}}</td><td> {{  trans('zonasEnjoit.precio') }} {{App\Helpers\monedaH::getCurrentSimbol()}} {{$zona->valor}}</td></tr>
                                        @endforeach
                                    @else
                                    <tr><td> {{  trans('zonasEnjoit.sinZonas') }} </td></tr>
                                    @endif
                                </tbody>
                            </table>
                        </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=" {{  trans('zonasEnjoit.nombreZona') }} ">
                        </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.nombre') }}	</label>
                        <input type="text" class="form-control" name="nombreEdit" id="nombreEdit" placeholder=" {{  trans('zonasEnjoit.nombreZona') }} ">
                    </div>
                    <div class="form-group">
                        <label for="listado"> {{  trans('zonasEnjoit.puntos') }} </label>
                        <table name="listado" id="list" class="form-control">

                        </table>
                    </div>
                    <div class="row">
                        <div class="col-md-6 pb-2">
                            <a href="Javascript:;" onclick="editarPoligono()" 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>
            </div>
            <div class="modal fade" id="sendForm" tabindex="-1" role="dialog" aria-labelledby="añadirNewZona" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="añadirNewZona"> {{  trans('zonasEnjoit.agregarZona') }} </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="addZonaRest">
                                <input type="hidden" id="idZonaRest" name="idZona" value="">
                                <div class="form-group">
                                    <label for="alias"> {{  trans('zonasEnjoit.aliasZona') }} </label>
                                    <input type="text" name="aliasRest" id="aliasRest" value="" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="precio"> {{  trans('zonasEnjoit.precioZona') }}	</label>
                                    <input type="text" min="1" name="valorRest" onkeyup="numero(this.value)" id="valorRest" class="form-control">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer text-center">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{  trans('zonasEnjoit.cancelar') }} </button>
                            <button onclick="guardarZona()" type="button" class="btn" style="background: #DB3920;color:#FFF;" > {{  trans('zonasEnjoit.guardar') }}	</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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> {{  trans('zonasEnjoit.seleccionZonaNueva') }}	</h3>
                    </div>
                    <div class="col-md-3 text-center">
                        <h6>
                            <span class="badge" style="background: rgb(62, 255, 0)">Color:</span>  {{  trans('zonasEnjoit.zonaSeleccionada') }}
                        </h6>
                    </div>
                    <div class="col-md-3 text-center">
                        <h6>
                            <span class="badge" style="background: rgb(151, 151, 151)">Color:</span>  {{  trans('zonasEnjoit.zonaNoSeleccionada') }}
                        </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="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"> {{  trans('zonasEnjoit.editarZona') }} </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"> {{  trans('zonasEnjoit.editarAliasZona') }} </label>
                            <input type="text" name="aliasRestE" id="aliasRestE" value="" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="precio"> {{  trans('zonasEnjoit.editarPrecioZona') }} </label>
                            <input type="text" min="1" 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"> {{  trans('zonasEnjoit.cancelar') }} </button>
                    <button onclick="updateZona()" type="button" class="btn" style="background: #DB3920;color:#FFF;" > {{  trans('zonasEnjoit.guardar') }} </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $('#valorRest').on('input', function () {
            this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
        });

        $('#valorRestE').on('input', function () {
            this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
        });

        function numero(valor) {
            var expresion = /^\d*[\.]?[\d]*$/;
            var resultado = expresion.test(valor);
            if(!resultado) {
                //NADA BIEN
                swal("Info!", " {{  trans('monedas.campoNumerico') }} ", "info");
                $("#valorRest").val("");
                $("#valorRestE").val("");
            }
        }
    </script>
    <script async 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 guardarZona()
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var id = document.getElementById('idZonaRest').value;
            var alias = document.getElementById('aliasRest').value;
            var valor = document.getElementById('valorRest').value;
            var data = {
                idZona: id,
                alias:alias,
                valor:valor
            }
            
            $.ajax({
                url: UrlHost_+"/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)
                {
                    
                    swal("Error", xhr.responseJSON().message, "error");
                }
            });
        }

        function changeState(idZona, state)
        {
            if(state){var estado = "Activar"}else{var estado = "Inactivar"}
            swal({
                title: "Cambiar estado de zona",
                text: "¿Desea "+estado+" esta zona? ",
                html: false,
                animation: true,
                showCancelButton: true,
                cancelButtonText: "Cancelar",
                confirmButtonColor: "#00C31B",
                confirmButtonText: "Aceptar",
                closeOnConfirm: false
            },
            function() {
                var host = "{{$_SERVER["HTTP_HOST"]}}";
                var data = {
                    idZonaRest: idZona,
                    newState: state
                }
                
                $.ajax({
                    url: UrlHost_+"/administrator/zonas/restaurantes/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)
                    {
                        
                        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: " {{  trans('zonasEnjoit.adicionarZona') }} ",
                text: " {{  trans('zonasEnjoit.adicionarZonaCobertura') }} ",
                html: false,
                animation: true,
                showCancelButton: true,
                cancelButtonText: " {{  trans('zonasEnjoit.cancelar') }} ",
                confirmButtonColor: "#00C31B",
                confirmButtonText: " {{  trans('zonasEnjoit.aceptar') }} ",
                closeOnConfirm: false
            },
            function(){
                $('#idZonaRest').val(idZona)
                swal.close();
                $('#añadirZona').modal('hide')
                $('#sendForm').modal();
            })
        }

        function editarZona(idZona)
        {
            var host = "{{$_SERVER["HTTP_HOST"]}}";
            var data = {
                idZonaRest: idZona
            }
            
            $.ajax({
                url: UrlHost_+"/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)
                    {
                        $('#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)
                {
                    
                    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;
            var data = {
                idZonaRest: id,
                alias:alias,
                valor:valor
            }
            
            $.ajax({
                url: UrlHost_+"/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)
                {
                    

                    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{
            }

        }


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

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

        function inicio() {

            map1();
            map2();

        }

        function map1(){
                miMapa = new google.maps.Map(document.getElementById('mapa'), {
                center: { lat: {{Auth::user()->funDetalleRest->latitud /* == 'false' ? '10.975881': Auth::user()->latitud */}}, lng: {{Auth::user()->funDetalleRest->longitud /* == 'false' ? '-74.806881':Auth::user()->longitud */}} },
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 14,
            });

            var marker = new google.maps.Marker({
                position: {
                    lat: {{Auth::user()->funDetalleRest->latitud}},
                    lng: {{Auth::user()->funDetalleRest->longitud}}
                },
                // label: "Posicion de tu restaurante",
                title: " {{  trans('zonasEnjoit.tuRestaurante') }} "
            });
            marker.setMap(miMapa);
            var poligonos = {};
            var prefijo = 'zona_';
            var zonas = {!! json_encode($zonas) ?? []!!}
            var message = [];
            var popups = [];
            var popupGlobal = new google.maps.InfoWindow();
            if (zonas.length > 0)
            {
                zonas.forEach(function(element){
                    var vertices = [];
                    /* var color = colorRGB();
                    var color2 = colorRGB(); */
                    element['fun_zonas']['fun_coords'].forEach(function(coord){vertices.push({lat: parseFloat(coord['latitud']), lng: parseFloat(coord['longitud'])});});
                    var colorState = "rgb(252, 85, 50)"
                    var alias = element['alias']
                    if(element['state'] == 1) colorState = "rgb(62, 255, 0)"
                    if(alias == null) alias = element['fun_zonas']['nombre']
                    poligonos[prefijo + element['idZonaRest']] = new google.maps.Polygon({
                        id: element['idZona'],
                        name: alias,
                        path: vertices,
                        map: miMapa,
                        strokeColor: colorState,
                        fillColor: colorState,
                        strokeWeight: 2,
                    });
                    var colorBtn = "btn-success"
                    if(element['state']) colorBtn = "btn-danger";
                    var newState = 0;
                    var messagePop = " {{  trans('zonasEnjoit.inactivar') }} "
                    if (!element['state']) {newState = 1; messagePop = " {{  trans('zonasEnjoit.activar') }} "};

                    message[element['idZonaRest']] =
                    `
                                <div id="content">
                                <div id="siteNotice">
                                </div>
                                <h3 id="firstHeading" class="firstHeading text-center red">${alias}</h3>
                                <div id="content" class="text-center"> <label class="pb-10">Precio: {{App\Helpers\monedaH::getCurrentSimbol()}} ${element['valor']}</label>
                                <div class=" text-center"><label> {{  trans('zonasEnjoit.zonaEnjoit') }} ${element['fun_zonas']['nombre']}</label></div>
                                    <a href="Javascript:;" onclick="editarZona(${element['idZonaRest']})" class="btn btn-warning">
                                        {{  trans('zonasEnjoit.editar') }} </a>
                                    <a href="Javascript:;" onclick="changeState(${element['idZonaRest']}, ${newState})" class="btn ${colorBtn}">
                                    ${messagePop}</a>
                                <div id="bodyContent">
                                </div>
                                </div>
                    `
                    ;
                    
                    popups[prefijo + element['idZonaRest']] = new google.maps.InfoWindow();
                    poligonos[prefijo + element['idZonaRest']].addListener('click', function (e) {
                        if (popupGlobal.map != null)
                        {
                            popupGlobal.close()
                        }
                        selectZona(poligonos[prefijo + element['idZonaRest']])
                        popups[prefijo + element['idZonaRest']].setContent(message[element['idZonaRest']]);
                        popups[prefijo + element['idZonaRest']].setPosition(e.latLng);
                        popupGlobal = popups[prefijo + element['idZonaRest']]
                        popupGlobal.open(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());
                });

                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: {{Auth::user()->funDetalleRest->latitud /* == 'false' ? '10.975881': Auth::user()->latitud */}}, lng: {{Auth::user()->funDetalleRest->longitud /* == 'false' ? '-74.806881':Auth::user()->longitud */}} },
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 14,
            });
            var marker = new google.maps.Marker({
                position: {
                    lat: {{Auth::user()->funDetalleRest->latitud}},
                    lng: {{Auth::user()->funDetalleRest->longitud}}
                },
                // label: "Posicion de tu restaurante",
                title: " {{  trans('zonasEnjoit.tuRestaurante') }} "
            });
            marker.setMap(miMapa2);

            var zonas = {!! json_encode($zonas) ?? []!!}
            var zonasE = {!! json_encode($zonasE) !!}
            var poligonos = {};
            var prefijo = 'zonaEnjoit_';
            var message = [];
            var popups = [];
            var popupGlobal2 = new google.maps.InfoWindow();
            if (zonasE.length > 0)
            {
                zonasE.forEach(function(element){
                    var vertices = [];
                    /* var color = colorRGB();
                    var color2 = colorRGB(); */
                    element['fun_coords'].forEach(function(coord){vertices.push({lat: parseFloat(coord['latitud']), lng: parseFloat(coord['longitud'])});});

                    var exists = false;
                    $.each(zonas, function (a, b){
                        if(b.idZona == element['idZona'])
                        {
                            exists = true;
                        }
                    })
                    if (exists){

                        poligonos[prefijo + element['idZona']] = new google.maps.Polygon({
                            id: element['idZona'],
                            name: element['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: 2,
                        });
                        var colorBtn = "btn-success"
                        if(element['state']) colorBtn = "btn-danger";
                        var newState = 0;
                        if (!element['state']) newState = 1;
                        message[element['idZona']] =
                        `
                                    <div id="content">
                                    <div id="siteNotice">
                                    </div>
                                    <h1 id="firstHeading" class="firstHeading text-center">${element['nombre']}</h1>
                                    <div class="text-center">
                                    <a href="Javascript:;" onclick="" class="btn btn-danger disabled">
                                    {{  trans('zonasEnjoit.zonaYaSeleccionada') }}</a>
                                    </div>
                                    </div>
                                    </div>
                        `
                        ;
                        
                        popups[prefijo + element['idZona']] = new google.maps.InfoWindow();
                        poligonos[prefijo + element['idZona']].addListener('click', function (e) {
                            // selectZona(poligonos[prefijo + element['idZona']])
                            if (popupGlobal2.map != null)
                            {
                                popupGlobal2.close()
                            }
                            popups[prefijo + element['idZona']].setContent(message[element['idZona']]);
                            popups[prefijo + element['idZona']].setPosition(e.latLng);
                            popupGlobal2 = popups[prefijo + element['idZona']]
                            popupGlobal2.open(miMapa2);})
                            // popups[prefijo + element['idZona']].open(miMapa2);})


                    }else{
                        poligonos[prefijo + element['idZona']] = new google.maps.Polygon({
                        id: element['idZona'],
                        name: element['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,
                        });
                        popups[prefijo + element['idZona']] = new google.maps.InfoWindow();
                        message[element['idZona']] =
                        `
                                    <div id="content">
                                    <div id="siteNotice">
                                    </div>
                                    <h1 id="firstHeading" class="firstHeading text-center">${element['nombre']}</h1>
                                    <div class="text-center">
                                    <a href="Javascript:;" onclick="addZona(${element['idZona']})" class="btn btn-info">
                                        {{  trans('zonasEnjoit.seleccionar') }}	</a>
                                    </div>
                                    </div>
                                    </div>
                        `
                        ;
                        poligonos[prefijo + element['idZona']].addListener('click', function (e) {
                            if (popupGlobal2.map != null)
                            {
                                popupGlobal2.close()
                            }
                            popups[prefijo + element['idZona']].setContent(message[element['idZona']]);
                            popups[prefijo + element['idZona']].setPosition(e.latLng);
                            popupGlobal2 = popups[prefijo + element['idZona']]
                            popupGlobal2.open(miMapa2);})
                    }
                })
            }
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA01EIKVqGmy9BAhcDyT-nsJsLtBUbU_gA&libraries=drawing&callback=inicio"></script>

@endsection