@extends('layout.base')

@section('page_content')
  <div class="ui container" id="contacto">
    <div class="ui stackable two columns grid">
      <div class="column">
        <form class="ui form" id="formulario" method="post" action="{{$urls->base}}/contacto">
          <div class="field">
            <div class="ui stackable grid">
              <div class="three wide column">
                <h3>
                  CONTACTO
                </h3>
              </div>
              <div class="thirteen wide column">
                Canal de consultas, reclamos y sugerencias
              </div>
            </div>
          </div>
          <div class="field">
            <input type="text" name="nombre" placeholder="Nombre" />
          </div>
          <div class="field">
            <input type="text" name="telefono" placeholder="Teléfono" />
          </div>
          <div class="field">
            <input type="text" name="email" placeholder="Email" />
          </div>
          <div class="field">
            <textarea name="mensaje" placeholder="Mensaje"></textarea>
          </div>
          <div class="field">
            <button class="ui inverted dark-blue button">Enviar</button>
          </div>
        </form>
      </div>
      <div class="column">
        <div class="ui embed" id="map" data-source="Google Maps" data-url="{{$url}}"></div>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link rel="stylesheet" type="text/css" href="{{$urls->assets->styles}}/contacto.css" />
@endpush

@push('scripts')
  <script type="text/javascript">
    $(document).ready(function() {
      $('#formulario').submit(function(e) {
        e.preventDefault()

        var nombre = $(this).find("[name='nombre']").val()
        var telefono = $(this).find("[name='telefono']").val()
        var email = $(this).find("[name='email']").val()
        var mensaje = $(this).find("[name='mensaje']").val()

        $.post('{{$urls->base}}/contacto', {nombre: nombre, telefono: telefono, email: email, mensaje: mensaje}, function(data) {
          console.debug(data)
        }, 'json')

        return false
      })
      $('#map').embed()
    })
  </script>
@endpush