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

<div class="">
  <div class="">
    <div class="fotorama" 
      data-nav="thumbs"
      data-width="100%"
      data-height="600px"
      data-allowfullscreen="true"
    >        
      @if($habitacion->imagenes->count() == 0 || is_null($habitacion->imagenes))            
        <a href="{{asset('img/habitacion.png')}}">
          <img src="{{asset('img/habitacion.png')}}"/>
        </a>
      @else
        @foreach($habitacion->imagenes as $key)
          <a href="{{asset($key->img)}}">
            <img class="carousel-cell-image" src="{{asset($key->img)}}" style="min-width: 100% !important; max-width: 100% !important;" />
          </a>
        @endforeach
      @endif
    </div>
  </div>
</div>
<br>
  <div>
    <div class="card">
      <div class="card-body">
          <div class="row">
            <div class="col-md-4">
              <h5>Camas</h5>
              @foreach($habitacion->camas as $key)              
                @if($key->cantidad > 0)
                  <li>
                    {{$key->cantidad}} {{$key->tipo_cama->cama}}
                  </li>
                @endif
              @endforeach
            </div>
            <div class="col-md-4">
              <h5>Información de la habitación</h5>

              <li>
                <strong>Tamaño: </strong> {{$habitacion->size}} metros cuadrado
              </li>

              <li>
                <strong>Número de huésped: </strong> {{$habitacion->huesped}}
              </li>


            </div>
            <div class="col-md-4">
              <h5>Precio</h5>
                <div>
                    @if($habitacion->precio(session('id_moneda'))->oferta > 0 &&  is_null($habitacion->precio(session('id_moneda'))->oferta)==false)
                          <span class="badge badge-danger badge-shadow mb-1">
                            {{ $habitacion->precio(session('id_moneda'))->oferta }} % de descuento
                          </span><br>
                  @endif

                  @if($habitacion->precio(session('id_moneda'))->oferta > 0 &&  is_null($habitacion->precio(session('id_moneda'))->oferta)==false)
                          <h5 style="display: inline-block;" class="text-secondary mb-0">
                            <strike>
                              @if(session('id_moneda')==2) Q @endif
                                @if(session('id_moneda')==1) $ @endif
                                {{$habitacion->precio_old(session('id_moneda'))}}                         
                            </strike>  
                          </h5> 
                        @endif

                          <h4 style="display: inline-block; color:  #f34770;" class=" mb-0">
                            @if(session('id_moneda')==2) Q @endif
                            @if(session('id_moneda')==1) $ @endif
                            {{$habitacion->precio_total(session('id_moneda'))}}
                          </h4><br>
                </div>
              </div>
          </div>
      </div>
    </div>
  </div>
  <br>

    <div class="card">
      <div class="card-body">
        <div class="row">          
          <div class="col-md-12">
            <h4 class="mt-5">Equipamiento de la habitación</h4>            
          </div>

          <div class="col-md-12">
            <div class="row">
              <div class="col-md-12">
                <center><h4>Equimamientos del tocador</h4></center><hr>
              </div>

              <div id="equipos_tocador p-2" class="row">
                @foreach($ser_tocador as $key)
                  @if(in_array($key->id, $habitacion_equipamiento))
                    <div class="col-md-4">
                      <li>
                        <i class="material-icons text-success">check</i>
                         <strong>{{$key->equipo}}</strong>
                      </li>
                    </div>
                  @endif
                @endforeach
              </div>

              <div class="col-md-12">
                <br>
                <center><h4>Equimamientos de la habitación</h4></center><hr>
              </div>

              <div id="equipos_habitacion p-2" class="row">
                 @foreach($ser_habitacion as $key)
                    @if(in_array($key->id, $habitacion_equipamiento))
                      <div class="col-md-4">
                        <li>
                          <i class="material-icons text-success">check</i>
                           <strong>{{$key->equipo}}</strong>
                          </li>
                      </div>
                    @endif
                @endforeach
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-12">
        <center><h2>Descripción</h2></center>
        <hr>
        {!!$habitacion->descripcion!!}
      </div>
    </div>
  </div>
</div>
<script src="{{asset('js/fotorama.js')}}"></script>

<!--
  <br>
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <div class="carousel carousel-main" data-flickity='{"fullscreen": true, "lazyLoad": 1 }'> 
          @if($habitacion->imagenes->count() == 0 || is_null($habitacion->imagenes) )
            <div class="carousel-cell">
              <img class="carousel-cell-image" src="{{asset('img/habitacion.png')}}" style="min-width: 100%; max-width: 100%;" />
            </div>
          @else
            @foreach($habitacion->imagenes as $key)
              <div class="carousel-cell">
                <img class="carousel-cell-image" src="{{asset($key->img)}}" style="min-width: 100%; max-width: 100%;" />
              </div>
            @endforeach
          @endif

        </div>
        <div class="carousel carousel-nav"
          data-flickity='{ "asNavFor": ".carousel-main", "contain": true, "pageDots": false }'>
          @if($habitacion->imagenes->count() == 0 || is_null($habitacion->imagenes)) 
            <div class="carousel-cell">
              <img class="carousel-cell-image" src="{{asset('img/hotel.png')}}" style="min-width: 100%; max-width: 100%;" />
            </div>
          @else
            @foreach($habitacion->imagenes as $key)
            <div class="carousel-cell">
              <img class="carousel-cell-image" src="{{asset($key->img)}}" style="min-width: 100%; max-width: 100%;" />
            </div>
            @endforeach
          @endif              
        </div>
      </div>
      
    </div>

    <br>

</div>

-->