@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>

            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="m-1">
                            <div class="text-left">
                              <div>
                                {!! NoCaptcha::display() !!}
                                <div id="status-r"></div>
                              </div>
                            </div>
                        </div>
                    </div>
                </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(){
        var googleResponse = jQuery('#g-recaptcha-response').val();
        if (!googleResponse) {
          $('#status-r').html(`<p class='text-danger'><strong>El recaptcha es obligatorio</strong></p>`);
        }else{
            $('#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(),
                'g-recaptcha-response': $
                },
                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