@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-4 mb-5 bg-light text-dark border-bottom"><h3>QR Code e localização referentes ao cerco</h3></div>
    <div class="row">
        <div class="col-md-6">
            <div class="p-3 mt-3 text-center border">
{{--                {!! QrCodeSimple::size(400)->generate('http://127.0.0.1:8000/pontoe/p_cargo'); !!}--}}
                {!! QrCodeSimple::size(400)->color(0, 0, 255)->geo($dado->latitude, $dado->longitude); !!}
                <br>
                <strong style="font-size: 46px;">BATA SEU PONTO!</strong>
                <h5><strong>{{$dado->nome}}</strong></h5>
                <h6>{{$dado->endereco}}</h6>
            </div>
        </div>
        <div class="col-md-6">
            <div class="p-3 mt-3 bg-light text-dark border-bottom">
                <b>Como funciona?</b>
                <br>
                <br>
                <ul>
                    <li><p>Imprima o QR Code ao lado.</p></li>
                    <li><p>Habilite o funcionário a registrar o ponto por QR Code.</p></li>
                    <li><p>Após o funcionário baixar o aplicativo na loja e efetuar o login, ele poderá registrar o ponto clicando no ícone de QR Code.</p></li>
                </ul>
                <br>
                <br>
                <br>
                <br>
                <b>Observação importante:</b>
                <br>
                <br>
                <p>
                    Esse <strong>QR Code</strong> tem um raio de <strong>{{ltrim($dado->raio_distancia, "0.")}} metros. </strong>Quando o funcionário ultrapassa essa distância, recebe um alerta de que não é possível realizar o registro do ponto, pois ele está muito longe do QR Code.
                </p>
                <h6>Posição geográfica do QR Code <i class="fa fa-info-circle" title="Essa deve ser a posição geográfica exata da secretaria/departamento. Assim, o QR Code poderá ser posicionado e o funcionário só conseguirá registrar o ponto estando no mesmo."></i></h6>
                Latitude: <strong>{{$dado->latitude}}</strong>
                <br>
                Longitude: <strong>{{$dado->longitude}}</strong>
                <br>
                <br>
                <p>Para alterar a latitude/longitude, <a class="link" href="{{route('p_geolocalizacao.edit',encriptar($dado->id_cerco))}}">clique aqui.</a></p>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12 text-center">
            <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>
        </div>
    </div>
@endsection
@push('script')

@endpush