@extends('_layouts.web')

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

        <h3>Contáctanos</h3>

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

        <p class="subtitle bg">Tenemos diversos canales de atención para resolver con prontitud todas tus solicitudes.</p>

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

        <h4>Sede principal La Secretaría de Tránsito y Transporte {{ env('TRANSITO') }}</h4>
        <p style="margin-bottom: 3px;">Dir:{{ env('DIR') }}</p>
        <p>CEL:{{ env('CEL') }}</p>

        <script src='https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCRSNXVpfT0D07aaHOK69wuHQ4n8UPPeuY'></script>
        <div style='overflow:hidden;height:350px;width:100%;'>
            <div id='gmap_canvas' style='height:350px;width:100%;'></div>
            <style>#gmap_canvas img {
                    max-width: none !important;
                    background: none !important
                }</style>
        </div>

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

        <h4>Horario de Atención</h4>
        <p style="margin-bottom: 5px;"><span>Lunes a Viernes:</span> 8:00 am a 1:00 pm - 2:00 pm a 5:00 pm.</p>

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

        <h4>Escríbenos ó Llámanos</h4>
        <p style="margin-bottom: 3px;"><span>Email:</span> <a href="mailto:{{ env('MAIL') }}">{{ env('MAIL') }}</a></p>
        <p><span> Celular: {{ env('CEL') }}</span></p>

        <script type='text/javascript'>function init_map() {
                var myOptions = {
                    draggable: false,
                    panControl: false,
                    zoomControl: false,
                    scaleControl: false,
                    scrollwheel: false,
                    navigationControl: false,
                    mapTypeControl: false,
                    zoom: 17,
                    center: new google.maps.LatLng({{ env('LAT') }}, {{ env('LON') }}),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng({{ env('LAT') }}, {{ env('LON') }})
                });
                infowindow = new google.maps.InfoWindow({content: '<strong>Secretaría de Tránsito y Transporte {{ env('TRANSITO') }}</strong><br>Cesar<br>'});
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
                infowindow.open(map, marker);
            }
            google.maps.event.addDomListener(window, 'load', init_map);
        </script>

    </div>

    <div class="sidebar">
        @include('_includes.banner-app')

        @include('_includes.banner-contacto')

        <div class="box">
            <h2>Déjanos tu mensaje</h2>
            <div class="box-content">
                <form action="{{ URL::to('contactanos')}}" class="ui form" method="post">
                    {{ csrf_field() }}

                    <p>Para nosotros es muy importante conocer tu opinión sobre nuestra organización y sus servicios. Por
                        favor usa el siguiente formulario para dejar tus comentarios.</p>

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

                    <div class="field">
                        <label>Nombre completo</label>
                        <input type="text" name="nombre">
                        @if ($errors->has('nombre'))
                            <div class="validation-error">{{ $errors->first('nombre') }}</div>
                        @endif
                    </div>

                    <div class="field">
                        <label>Correo electrónico</label>
                        <input type="text" name="email">
                        @if ($errors->has('email'))
                            <div class="validation-error">{{ $errors->first('email') }}</div>
                        @endif
                    </div>

                    <div class="field">
                        <label>Observaciones y/o comentarios</label>
                        <textarea name="comentarios" style="width: 100%;" cols="30" rows="10"></textarea>
                        @if ($errors->has('comentarios'))
                            <div class="validation-error">{{ $errors->first('comentarios') }}</div>
                        @endif
                    </div>

                    <button class="ui button black">Enviar</button>
                </form>
            </div>
        </div>
    </div>
@endsection