@extends('layouts.app')

@section('content')
<section style="background: #152a49; max-height: 300px;">
  <center><h1 class="text-white">Contacto</h1></center>
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-4" style="background: #f1f1f1; min-height: 200px; border-radius: 5px; box-shadow: 0 0 3px grey">
        
        <div style="padding: 20px;">
          <ul class="list-group">
            <center>
              <span class="material-icons text-primary" style="font-size: 100px;">
              call
              </span>
              <h4>Número teléfonico</h4>
              <br>
              <div>
                <h5>{{$contacto[0]->data}}</h5>
              </div>
            </center>
          </ul>
        </div>
      </div>
      <div class="col-md-4"></div>
      <div class="col-md-4" style="background: #f1f1f1; min-height: 200px; border-radius: 5px; box-shadow: 0 0 3px grey">
        
        <div style="padding: 20px;">
          <ul class="list-group">
            <center>
              <span class="material-icons text-primary" style="font-size: 100px;">
              email
              </span>
              <h4>Correo electrónico</h4>
              <br>
              <div>
                <h5>{{$contacto[1]->data}}</h5>
              </div>
            </center>
          </ul>
        </div>
      </div>

    </div>
  </div>
</section>
  <div class="mt-5">
    <br><br><br>
  </div>

  <div class="container-fluid px-0 mb-0" id="map">

      <div class="row no-gutters">

        <div class="col-lg-6" style="background-image: url('https://images.unsplash.com/photo-1474403078171-7f199e9d1335?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'); background-repeat: no-repeat; background-size: 950px;">          

        </div>

        <div class="col-lg-6 px-4 px-xl-5 py-5 border-top">

          <h2 class="h4 mb-4"><center>¿En qué podemos ayudarte ?</center></h2>

          <div class="alert alert-info" role="alert" id="espera" style="display: none;">

              

              <div>Por favor espere...

                <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                <span aria-hidden="true">×</span>

              </button>

              </div>

            </div>

            <div id="status"></div>

          <form action="javascript:enviar()" class="needs-validation mb-3" novalidate="" id="form-validate">

            <div class="row">

              <div class="col-sm-6">

                <div class="form-group">

                  <label for="cf-name">Tu nombre:&nbsp;<span class="text-danger">*</span></label>

                  <input class="form-control" type="text" id="cf-name" placeholder="John Doe" required="">

                  <div class="invalid-feedback">¡Por favor ingrese su nombre!</div>

                </div>

              </div>

              <div class="col-sm-6">

                <div class="form-group">

                  <label for="cf-email">Dirección de correo electrónico:&nbsp;<span class="text-danger">*</span></label>

                  <input class="form-control" type="email" id="cf-email" placeholder="johndoe@email.com" required="">

                  <div class="invalid-feedback">¡Por favor proporcione una dirección de correo electrónico válida!</div>

                </div>

              </div>

              <div class="col-sm-12">

                <div class="form-group">

                  <label for="cf-subject">Asunto:</label>

                  <input class="form-control" type="text" id="cf-subject" placeholder="Proporcione un título corto de su solicitud" required="">

                  <div class="invalid-feedback">¡Por favor proporcione un asunto válido!</div>

                </div>

              </div>

            </div>

            <div class="form-group">

              <label for="cf-message">Mensaje:&nbsp;<span class="text-danger">*</span></label>

              <textarea class="form-control" id="cf-message" rows="6" placeholder="Por favor describa en detalle su solicitud" required=""></textarea>

              <div class="invalid-feedback">¡Por favor escribe un mensaje!</div>

            </div>

            <button class="btn btn-primary" type="submit">Enviar mensaje</button>

          </form>



          <div class="row">

            <div class="col">

              <div id="map"></div>

            </div>

          </div>



        </div>

      </div>

  </div>
@endsection

@section('script')
<script type="text/javascript">
    function enviar(){
      $('#status').html('');
      $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
        }
      });

      $.ajax({
        url:'/contacto',
        data:{
          'nombre': $('#cf-name').val(),
          'email' : $('#cf-email').val(),
          'asunto': $('#cf-subject').val(),
          'mensaje': $('#cf-message').val()
        },
        type: 'post',
        beforeSend: function(){
          $('#espera').css({'display':'block'});
        },
        success:  function (response){
          $('#espera').css({'display':'none'});
          if (response==0) {
            $('#status').html(`
              <div class="alert alert-success" role="alert">
              <div class="alert-icon-box">
                <i class="alert-icon czi-check-circle"></i>
              </div>
              <div style="margin-left: 35px;">Mensaje Enviado con éxito
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              </div>
            </div>`);

            $('#cf-name').val('');
            $('#cf-email').val('');
            $('#cf-subject').val('');
            $('#cf-message').val('');
            
          }else{
            $('#status').html(`
              <div class="alert alert-danger" role="alert">
              <div class="alert-icon-box">
                <i class="alert-icon czi-close"></i>
              </div>
              <div style="margin-left: 35px;">Error al enviar el mensaje, por favor intente más tarde
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              </div>
            </div>`);
          }
        },
        error: function(){
          $('#espera').css({'display':'none'});
           $('#status').html(`
              <div class="alert alert-danger" role="alert">
              <div class="alert-icon-box">
                <i class="alert-icon czi-close"></i>
              </div>
              <div style="margin-left: 35px;">Error al enviar el mensaje, por favor intente más tarde
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              </div>
            </div>`);
        }
      });
    }
  </script>

@endsection