@extends('layouts.app')

@section('content')

  <link  href="{{asset('css/fotorama.css')}}" rel="stylesheet">  
  <link  href="{{asset('css/plyr.css')}}" rel="stylesheet">

  <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>
    <!-- Modal -->
  <div class="modal fade" id="habitacion_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="habitacion_title"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="habitacion_body">
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="telefono" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Teléfonos</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          @foreach($hotel->contactos as $key)
            @if(is_null($key->telefono)==false)
            <div class="contacto" style="padding: 5px; border-radius: 5px; border: solid 1px;">
              <div class="row">
                <div class="col-8">
                  <a href="tel:+502{{$key->telefono}}" class="text-secondary mt-1 ml-2 p-0">
                    +502 {{$key->telefono}} <br>
                    <p class="ml-2">Has clic para llamar</p>
                  </a>
                </div>
                <div class="col-4" style="border-left: solid 1px !important;">
                  <center>
                    <a href="tel:+502{{$key->telefono}}" class="material-icons text-secondary mt-1" style="font-size: 50px;">
                    call
                    </a>
                  </center>
                </div>
              </div>
            </div>
            <br>
            @endif
          @endforeach
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  <style type="text/css">
    body{
      background: #fff;
    }
    #map{
      width: 100%;
      height: 200px;
      border-radius: 10px;
    }
    #categoria{
      font-size: 40px;
      font-family: 'Fredoka One', cursive;
      margin-top: -40px;
    } 

    .precio{
      float: right;
    }

    .oferta{
      float: right;
    }

    .detalles_precio{
      float: right;
    }
    .detalles_precio_menu{
      margin-left: -110px;
    }
    #content,.notify-r{
      margin-left: 4.5em;
      margin-right: 4.5em;
    }
    .content{
      margin-left: 0.8em;
      margin-right: 0.8em;
    }

    .room_status{
      margin-bottom: 150px;
      position: absolute; 
      padding: 10px; 
      z-index: 200; 
      margin-left: 7px;
    }

    .img-habitacion{
      min-width: 100%; 
      max-width: 100%; 
      min-height: 100%; 
      max-height: 100%;
      position: absolute;
    }

    #text-ubicacion{
      padding: 0px; 
      display: inline-block; 
      font-size: 16px;
    }

    .sh-l{
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .sh-r{
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    .badge-warning {
        background-color: #fea569;
    }
    .badge-warning.badge-shadow {
        box-shadow: 0 0.5rem 1.125rem -0.275rem rgba(254,165,105,0.9);
    }

    .badge-danger {
        color: #fff;
        background-color: #f34770;
    }

    .badge-danger.badge-shadow {
      box-shadow: 0 0.5rem 1.125rem -0.275rem rgba(243,71,112,0.9);
    }
    .btn-primary-box-shadow{
      box-shadow: 0 0.5rem 1.125rem -0.275rem rgba(0, 153, 255,0.9);
    }
    .badge-success.badge-shadow {
        box-shadow: 0 0.5rem 1.125rem -0.275rem rgb(40, 167, 69);
    }

    .badge-success {
        color: #fff;
        background-color: #28a745;
    }
    .politica{
      font-size: 16px !important;
    }
    @media(max-width:768px){
      #content,.notify-r{
        margin-left: 0.5em;
        margin-right: 0.5em;
      }
      .img-habitacion{
        min-width: 100%; 
        max-width: 100%; 
        min-height: 150px; 
        max-height: 150px;
        position: relative;
      }

      #text-ubicacion{
        font-size: 16px;
      }

      #categoria{
        margin-top: 0px;
      }

      .room_status{
        margin-bottom: 100px;
      }

      .precio{
        float: left;
      }

      .detalles_precio{
        float: left;
      }

      .detalles_precio_menu{
        margin-left: -10px;
      }

      .oferta{
        float: left;
      }
    }

</style>
<link  href="{{asset('css/fotorama.css')}}" rel="stylesheet">

<nav class="navbar navbar-expand-lg d-none d-md-block" style="/*background: #280173;*/ background: linear-gradient(90deg, #0099FF 0%, #6610f2 100%);">
  <div class="pl-3 pr-2">

    <form action="{{route('hotel.single',$hotel->url)}}" method="get">
      <div class="row">
        <div class="col-md-3">
          <div class="input-group mb-0" style="height: 38px;">
                <div class="input-group-prepend">
                  <div class="input-group-text sh-l" style="background: #e9ecef;">
                    <i class="material-icons">search</i>
                  </div>
                </div>
                <input type="search" class="form-control sh-r" placeholder="Buscar" value="{{$hotel->nombre}}" disabled="disabled">
              </div>
        </div>
        <div class="col-md-3">
          <div class="input-group mb-0">
            <div class="input-group-prepend">
              <div class="input-group-text sh-l">
                <i class="material-icons">calendar_today</i>
              </div>
            </div>
            <input type="date" class="form-control sh-r" placeholder="Fecha de entrada" value="{{$check_in}}" name="check_in">
          </div>
        </div>
        <div class="col-md-3">
          <div class="input-group mb-0">
            <div class="input-group-prepend">
              <div class="input-group-text sh-l">
                <i class="material-icons">calendar_today</i>
              </div>
            </div>
            <input type="date" class="form-control sh-r" placeholder="Fecha de salida" value="{{$check_out}}" name="check_out">
          </div>        
        </div>
        <div class="col-md-2">
          <div class="input-group mb-0" style="height: 38px;">
                <div class="input-group-prepend">
                  <div class="input-group-text sh-l">
                    <i class="material-icons">people</i>
                  </div>
                </div>
                <input type="number" name="huesped" class="form-control sh-r" placeholder="Huespedes" value="{{$huesped}}">
              </div>
        </div>
        <div class="col-md-1">
          <button class="btn btn-primary">Actualizar</button>
        </div>
      </div>
    </form>
  </div>
</nav>
<div class="content">
  <div class="bg-white" style="border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
    @if($hotel->reclamar == 'S')
      <div class="row">
        <div class="col notify-r">
          <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <p style="text-align: justify;">La información publicada en esta página puede ser errónea debido a que este hotel no fue reclamado por el propietario del hotel. Si usted es el propietario, por favor siga los paso para adquirid este hotel en su cuenta y poder modificar la información que esta publicada en esta página <a href="{{route('hotel.reclamar',$hotel->id)}}">Soy el propietario de este hotel</a></p>

              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
        </div>
      </div>
    @endif
    <div class="row">
      <div class="col-md-6">
        <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">
            Dirección:
              <p id="text-ubicacion">
                  {{Str::limit($hotel->ubicacion->direccion,'80')}} </p>
            <br>
            <i class="material-icons"style="font-size: 18px" >location_on</i> 
            <p id="text-ubicacion">
              {{$hotel->ubicacion->municipio->municipio}} -
              {{$hotel->ubicacion->departamento->departamento}}
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-6 d-none d-md-block">
        <div style="width: 100%;">
          <div style="display: inline-block;" class="mr-1">
            <center><h6>Tarjetas aceptadas por el hotel</h6></center>
              @foreach($hotel->tarjetas as $key)
                <img src="{{asset($key->tarjeta->img)}}" class="bs-tooltip mr-1" 
                     data-toggle="tooltip" 
                     title="{{$key->tarjeta->nombre}}" style="display: inline-block;">
              @endforeach
          </div>

          <div style="display: inline-block;" class="mr-2">
            <center>
              <h6 class="m-0 p-0 mt-1">Calificación</h6>          
              <div class="bg-primary text-white" style="border-radius: 50%; padding: 5px; width: 80px;height: 80px;">
                <h6 class="text-white mt-3">
                  @if($comentarios == 0)
                    0
                  @else