@extends('layouts.app')

@section('oncss')
<style>


</style>
@endsection

@section('navBar')

@endsection


@section('title')


@endsection

@section('onbody')
<div id="contact-page">
  <div class="back-imagen">
    <div class="background w3-grayscale-max" style="background: url('/imagenes/backgrounds/telephone.jpg'); background-size:cover;background-position:50% 50%;">
    </div>
  </div>

  <div class="titulo">
    <span class="small">Queremos saber más sobre ti</span>
    <span>Déjanos conocerte</span>
  </div>

  <div class="information">
    <div class="content">

      <div class="left">
        <div class="phone">
          <div class="phone-number">
            <span>95 401 25 26</span>
          </div>
          <div class="days">
            <span>lunes - viernes</span>
          </div>
          <div class="horas">
            <span>8:00 - 20:00</span>
          </div>
        </div>

        <div class="sociales">
          <p>
              Hazlo al old-fashioned, <a href="tel:954012526" class="llamar">llámanos</a>.<br>
              O bien, modernizate enviandonos un <a href="#contactar">mensaje</a>.
          </p>
        </div>
      </div>

      <div class="right">
        <div class="more">
          <div class="mas">
            <span>más información</span>
          </div>
          <div class="email">
            <span><i class="far fa-envelope"></i><a href="mailto:info@sumypast.com"> info@sumypast.com</a></span>
          </div>
          <div class="comerciales">
              <div class="intro-text">
                <span>Puedes llamar a tu comercial:</span>
              </div>
              <div class="comercial">
                <div class="left"><span>Andrés Fernández </span></div>
                <div class="right"><a href="tel:954012526">954012526</a></div>
                <div class="clearing"></div>
              </div>

              <div class="comercial">
                <div class="left"><span>Oscar Cuevas </span></div>
                <div class="right"><a href="tel:954012526">954012526</a></div>
                <div class="clearing"></div>
              </div>

              <div class="comercial">
                <div class="left"><span>Juan Ramírez </span></div>
                <div class="right"><a href="tel:954012526">954012526</a></div>
                <div class="clearing"></div>
              </div>
          </div>
        </div>
      </div>

      <div class="clearing"></div>
    </div>

  </div>
</div>

@endsection

@section('after-header')


@endsection

@section('contact')
<div id="contactar">
  <div class="contact-form">
    <div class="titulo"><span>Déjanos ayudarte</span></div>
    <form action="" method="POST">

      <div class="line">
        <input class="alone" type="text" name="nombre" placeholder="nombre (requerido)" required />
      </div>

      <div class="line">
        <input type="phone" name="telefono" placeholder="teléfono"/>
        <input type="mail" name="email" placeholder="email (requerido)" required />
      </div>

      <div class="line message">
        <div class="titulo"><span>¿Cómo podemos ayudarte?</span></div>
        <textarea name="nombre"></textarea>
      </div>


      <div class="line">
        <input class="button-send" type="submit" value="Contactar"/>
      </div>

    </form>
  </div>
</div>
@endsection

@section('onjs')
<script>

// JQUERY Functions

$(document).ready(function() {
  $('.open-menu').on('click', function() {
     $('.overlay').addClass('open');
  });


  $('.close-menu').on('click', function() {
    $('.overlay').removeClass('open');
  });

});

// VUE COMPONENTS
//
var footer = new Waypoint({
  element: $('#footer'),
  handler: function(direction) {
    if(direction == 'down') {
      $([document.documentElement, document.body]).animate({
        scrollTop: $("#footer").offset().top
      }, 600);
    }

  },
  offset: '90%'
});

var contactar = new Waypoint({
  element: $('#contactar'),
  handler: function(direction) {
    if(direction == 'down') {
      $([document.documentElement, document.body]).animate({
        scrollTop: $("#contactar").offset().top
      }, 600);
    }

  },
  offset: '90%'
});

</script>
@endsection