@extends('layouts.app')

@section('content')
   <style type="text/css">
    @media (min-width: 992px){
      .modal-lg {
          max-width: 1140px;
      }
    }
    
    .loader,
    .loader:after {
      border-radius: 50%;
      width: 10em;
      height: 10em;
    }
    .loader {
        margin: 60px auto;
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        border-top: 1.1em solid #2196F3;
        border-right: 1.1em solid #2196F3;
        border-bottom: 1.1em solid rgb(0 0 0 / 20%);
        border-left: 1.1em solid #2196F3;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

  </style>
  <div style="background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 50px; z-index: 4000; display: none;" id="spinner">      
        <center>
          <div class="loader">Loading...</div>
          <h2 class="text-white"><strong>Enviando el mensaje...</strong></h2>
          <strong class="text-white">Por favor, espere</strong><br>          
        </center>
    </div>
  <div class="p-3">
    <div class="row">
      <div class="col-md-6">
        <center><img class="imagen-responsive d-none d-md-block mt-4 mb-3" src="{{asset('img/guatehoteles.png')}}"></center>
      </div>
      <div class="col-md-6">
        <div class="card box-shadow">
          <div class="card-body">
            <center><h4 class="mt-2">Enviar mensaje a:</h4></center>
            <div class="ml-3">
              <h4 class="mt-2 mb-0 pb-0">{{$hotel->nombre}}</h4>
              @for($e=0;$e<$hotel->estrellas;$e++)
                <i class="material-icons text-warning" style="display: inline-block; font-size: 18px;">star</i>
              @endfor
              <br>
              <div class="text-primary">
                <i class="material-icons"style="font-size: 18px;" >location_on</i> 
                <p id="text-ubicacion" style="display: inline-block;">
                  {{$hotel->ubicacion->municipio->municipio}} -
                  {{$hotel->ubicacion->departamento->departamento}}
                </p>
              </div>
            </div>
            <hr>
            <div id="div-form">
              <form action="#" method="post">
                @csrf
                <div class="row">
                  <div class="col-md-6">
                    <h6>Nombre <strong class="text-danger">*</strong></h6>
                    <input type="text" name="nombre" class="form-control" disabled="disabled" value="{{Auth::user()->name}}"><br>
                  </div>
                  <div class="col-md-6">
                    <h6>Correo electrónico <strong class="text-danger">*</strong></h6>
                    <input type="text" name="email" class="form-control" disabled="disabled" value="{{Auth::user()->email}}"><br>
                  </div>
                  <div class="col-md-12">
                    <h6>Mensaje <strong class="text-danger">*</strong></h6>
                    <textarea class="form-control" name="mensaje" placeholder="Describe tu mensaje" id="mensaje" style="min-height: 150px;"></textarea>
                    <div id="status-mensaje"></div>
                    <br>
                  </div>
                  <div class="col-md-12">                    
                      {!! NoCaptcha::display() !!}
                      <div id="status-r"></div>                 
                  </div>
                  <div class="col-md-12">
                    
                    <div class="text-right">
                      <button type="button" class="btn btn-primary mt-1" onclick="enviar();">Enviar Mensaje</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
@endsection

@section('script')
  <script type="text/javascript">
    function enviar() {
      var googleResponse = jQuery('#g-recaptcha-response').val();
      var mensaje = $('#mensaje').val();

      if (mensaje=='') {
        $('#status-mensaje').html(`<p class='text-danger'><strong>El campo mensaje es obligatorio</strong></p>`);
      }else{
        if (!googleResponse) {
          $('#status-r').html(`<p class='text-danger'><strong>El recaptcha es obligatorio</strong></p>`);
        }else{
          
          $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')     
            }
          }); 

          $('#spinner').css({'display':'block'});

          $.ajax({
            url:'