@extends('layouts.pontoe.painel')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <div class="p-3 mt-2 mb-4 bg-light text-dark border-bottom"><h3>Cadastro da geolocalização</h3></div>
    <form name="FrmUpdate" action="{{route('p_geolocalizacao.update', encriptar($dados->id))}}" method="post"  autocomplete="off">
        @csrf
        @method('put')
        <div class="row">
            <div class="col-md-5">
                <label for="">* Endereço</label>
                <input type="text" class="form-control" name="endereco" value="{{$dados->endereco}}">
            </div>
            <div class="col-md-1">
                <label for="">Número</label>
                <input type="text" class="form-control" name="numero" value="{{$dados->numero}}">
            </div>
            <div class="col-md-4">
                <label for="">* Bairro</label>
                <input type="text" class="form-control" name="bairro" value="{{$dados->bairro}}">
            </div>
            <div class="col-md-2">
                <label for="">CEP</label>
                <input type="text" class="form-control" name="cep" id="cep" value="{{$dados->cep}}">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <label for="">* Latitude</label>
                <input type="text" class="form-control" name="latitude" value="{{$dados->latitude}}" maxlength="10" style="background-color: yellow; color: blue">
            </div>
            <div class="col-md-2">
                <label for="">* Longitude</label>
                <input type="text" class="form-control" name="longitude" value="{{$dados->longitude}}" maxlength="10" style="background-color: yellow; color: blue">
                <input type="hidden" name="position" id="position" value="{{$dados->position}}">
            </div>
            <div class="col-md-1">
                <label for="">* Distância</label>
                <select class="form-control" name="raio_distancia" style="background-color: yellow; color: blue">
                    <option value="0.025" {{$dados->raio_distancia == '0.025' ? 'selected':''}}>25m</option>
                    <option value="0.050" {{$dados->raio_distancia == '0.050' ? 'selected':''}}>50m</option>
                    <option value="0.075" {{$dados->raio_distancia == '0.075' ? 'selected':''}}>75m</option>
                    <option value="0.100" {{$dados->raio_distancia == '0.100' ? 'selected':''}}>100m</option>
                </select>
            </div>
        </div>
        <hr class="mt-4">

        <div class="row">
            <div class="col-md-12">
                <button type="button" onclick="window.history.back()" class="btn btn-light btn-lg"><i class="fa fa-chevron-left" aria-hidden="true"></i> Voltar</button>
                <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-floppy-o" aria-hidden="true"></i> Salvar</button>
            </div>
        </div>
        <hr>
    </form>
@endsection
@push('script')
    <script>
        $(function () {
            $('#cep').mask('99999-999')
        })

        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(function (position) {
                let latitude = position.coords.latitude;
                let longitude = position.coords.longitude;
                document.getElementById("position").value = latitude + '|' + longitude;
            }, function (error) {
                console.log(error)
            });
        } else {
            console.log('Ops, não foi possível pegar localização');
        }
    </script>
    <script src="{{url(mix('modulos/pontoe/cerco-eletronico/js/update.js'))}}"></script>
@endpush