@extends('_layouts.web')

@section('content')
    <div class="main-content">

        <h3>Servicio de Grúa</h3>

        <div class="spacer"></div>
        <div class="spacer"></div>

        <p class="subtitle">
            A través del siguiente servicio usted podrá solicitar un servicio de grúa que de manera rápida
            lo ayudará a salir rapidamente de su emergencia. <a href="/informacion-tramites-y-tarifas">Conozca aquí nuestras tarifas.</a>
        </p>

        <div class="banner">
            <img src="/images/banner-grua.jpg" style="width: 100%; height: auto;">
        </div>

        <div class="spacer"></div>
        <div class="spacer"></div>

        <div class="inline-alert inline-error map-error-allow" style="display: none;">
            <i class="fa fa-warning"></i>
            <h5>Lo Sentimos</h5>
            <p>Usted debe permitir el acceso al servicio de localización cuando vea la solicitud en su navegador.</p>
        </div>

        <div class="inline-alert inline-error map-error-browser" style="display: none;">
            <i class="fa fa-warning"></i>
            <h5>Lo Sentimos</h5>
            <p>Su navegador no soporta los servicios de localización, por favor actualice a una versión mas reciente.</p>
        </div>

        <div class="map" style="">
            <h4>Tu Ubicación Actual</h4>
            <p>Por favor ajusta tu ubicación de ser necesario.</p>
            <div id="map" style="height:350px; width:100%;"></div>


            <div class="spacer"></div>
            <div class="spacer"></div>

            <form action="/servicio-grua" method="post" class="ui form">
                {{ csrf_field() }}

                <div class="field">
                    <input type="hidden" name="lat" id="lat">
                </div>

                <div class="field">
                    <input type="hidden" name="lng" id="lng">
                </div>

                <div class="two fields">
                    <div class="field">
                        <label>Nombre <span>*</span></label>
                        <input type="text" name="nombre" value="{{ Auth::user()->name }}">
                        @if ($errors->has('nombre'))
                            <div class="validation-error">{{ $errors->first('nombre') }}</div>
                        @endif
                    </div>

                    <div class="field">
                        <label>Celular de Contacto <span>*</span></label>
                        <input type="text" name="celular" value="{{ Auth::user()->telefono }}">
                        @if ($errors->has('celular'))
                            <div class="validation-error">{{ $errors->first('celular') }}</div>
                        @endif
                    </div>
                </div>

                <div class="field">
                    <label>Observaciones</label>
                    <textarea name="observaciones" rows="4"></textarea>
                </div>

                <button type="submit" class="ui button black large">Solicitar Servicio</button>
            </form>
        </div>


    </div>

    <div class="sidebar">
        <div class="box">
            @include('_includes.register')
        </div>

        @include('_includes.banner-tarifas')

        @include('_includes.banner-simit')

        @include('_includes.banner-contacto')
    </div>

    <script>
        // Note: This example requires that you consent to location sharing when
        // prompted by your browser. If you see the error "The Geolocation service
        // failed.", it means you probably did not give permission for the browser to
        // locate you.
        var marker;
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 9.2010831, lng: -73.5513209},
                zoom: 17
            });

            map.addListener('click', function (e) {
                placeMarker(e.latLng, map);
            });

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    map.setCenter(pos);

                    marker = new google.maps.Marker({
                        position: pos,
                        map: map
                    });

                    $('#lat').val(pos.lat);
                    $('#lng').val(pos.lng);


                    $('.map').show(0);
                    map.refresh();

                }, function () {
                    handleLocationError(true);
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false);
            }
        }


        function placeMarker(location) {
            var lat = location.lat();
            var lng = location.lng();

            $('#lat').val(lat);
            $('#lng').val(lng);

            if (marker == null) {
                marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
            } else {
                marker.setPosition(location);
            }
        }

        function handleLocationError(browserHasGeolocation) {
            $('.map').hide(0);

            if(browserHasGeolocation){
                $('.map-error-allow').show();
            }else{
                $('.map-error-browser').show();
            }
        }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRSNXVpfT0D07aaHOK69wuHQ4n8UPPeuY&callback=initMap">
    </script>
@endsection