@extends('layouts.app')

@section('content')
  <div class="p-2">
    <div class="row">
      <div class="col-md-6">
        <div class="card box-shadow">
          <div class="card-body">
            <center><h4 class="mt-2">Proceso de reclamación del hotel</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>
              <center><h5>Instrucciones</h5></center>
              <ul>
                <li class="mt-3">
                  Para iniciar el proceso de reclamación del hotel, debes estar registrado con una cuenta hotelera dentro de la plataforma y tener la sesión activa
                </li>
                <li class="mt-3">
                  Veras un listado de correos disponibles donde enviaremos un correo electrónico con un código único para poder verificar que eres el propietario 
                </li>
                <li class="mt-3">                  
                  Una vez verificado, ya puedes editar la información del hotel desde el panel administrativo que proporciona la plataforma 
                </li>
              </ul>
              <div style="text-align: right; width: 100%;">
                <form action="{{route('hotel.reclamar',$hotel->id)}}" method="post">
                  @csrf
                  <button class="btn btn-primary" type="submit">Reclamar ahora</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <center><img class="imagen-responsive d-none d-md-block mt-5 mb-3" src="{{asset('img/guatehoteles.png')}}"></center>
      </div>
    </div>
  </div>
@endsection