@extends('clientside.layouts.app')
@section('content')
<section class="section_common inner_banner">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      @php $i = 0; @endphp
        @foreach($banners as $banner)
        <div class="carousel-item {{ $i==0 ? 'active': '' }}"
            style="background:url({{isset($banner->image)?asset('storage/rooms/'.$banner->image):asset('/images/no-image.png')}})">
            <img src="{{isset($banner->image)?asset('storage/rooms/'.$banner->image):asset('/images/no-image.png')}}" alt="" class="w-100 banner_inner_image">
            <div class="carousel-caption d-none d-flex justify-content-center align-items-center">
                <div class=" wow fadeInUp">
                <h2>{{$banner->description}}</h2>
                </div>
            </div>
        </div>
        @php $i++; @endphp
      @endforeach
    </div>
    @if($i !=1)
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <img src="{{ asset('clientside/img/arr_left.png') }}" alt="">
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <img src="{{ asset('clientside/img/arr_right.png') }}" alt="">
      </a>
    @endif
  </div>
  <a href="#" class="scroll_more next-section">
    <img alt="" src="{{ asset('clientside/img/circle_white.png') }}" class="circle">
    <img alt="" src="{{ asset('clientside/img/arrow_white.png') }}" class="arrow"> </a>
</section>
<section class="section_common h_detail_second_sec">
  <div class="container-fluid">
    <div class="row align-items-top h-100 align-content-center">
      @if ($roomGallery->isNotEmpty())
        <div class="col-xl-6 col-md-6 wow fadeInLeft">
          <div id="sync1" class="owl-carousel">
            @foreach ($roomGallery as $roomGall )
              <div class="item">
                @if (isset($roomGall->url))
                  <a data-fancybox="gallery" class="youtubelink"  data-link="{{$roomGall->url}}" >
                    <img src="{{ asset('storage/rooms/'.$roomGall->image) }}" alt="" class="w-100">
                    <div class="position-absolute">
                      <img src="{{ asset('clientside/img/play.png') }}" alt="">
                    </div>
                  </a>
                @else
                  <a data-fancybox="gallery" href="{{ asset('storage/rooms/'.$roomGall->image) }}">
                    <img src="{{ asset('storage/rooms/'.$roomGall->image) }}" alt="" class="w-100">
                  </a>
                @endif
              </div>
            @endforeach
          </div>
          <div id="sync2" class="owl-carousel">
            @foreach ($roomGallery as $roomGaller )
              <div class="item">
                <a data-fancybox="gallery" href="{{ asset('storage/rooms/'.$roomGaller->image) }}">
                  <img src="{{ asset('storage/rooms/'.$roomGaller->image) }}" alt="" class="w-100">
                </a>
              </div>
            @endforeach
          </div>
        </div>
      @endif
      <div class="col-xl-6 col-md-6 wow fadeInRight">
        <h3>{{$hotelRoom->title}}</h3>
        <div class="detail_row">
          <p>{!! $hotelRoom->description !!}</p>
        </div>
        <div class="detail_row check-in_checkOut">
          <div class="chkInOut">
            <span>{{trans('headings.checkin_time')}}: <b>{{$hotelRoom->check_in}}</b></span>
            <span class="divider">|</span>
            <span>{{trans('headings.checkout_time')}}: <b>{{$hotelRoom->check_out}}</b></span>
          </div>
          <span class="chk_descrip">{{trans('headings.early_checkin_text')}}</span>
        </div>
        <div class="detail_row check-in_checkOut">
          <div class="chkInOut" style="text-align: justify; text-justify: inter-word;">
            <span>
              <!-- <b>{{trans('headings.facilities')}}:</b>  -->
              <ul class="room_detail_facilities">
                {{-- @php dd(explode(',',$hotelRoom->facilities)); @endphp                 --}}
                @if ($hotelRoom->facilities)
                  @php $facilities = explode(',',$hotelRoom->facilities); @endphp
                  @foreach($facilities as $id)
                    @foreach($allFacilities as $all)
                      @if ($all->id == $id)
                        <li>{{$all->facilities}}</li>
                      @endif
                    @endforeach
                  @endforeach
                @endif
              </ul>
            </span>
          </div>
        </div>

        <div class="text-right button_block_hotelDetail"> <span>{{trans('headings.hurry_last_few_rooms_remaining')}}</span>
        <a href="https://centralinn.book-onlinenow.net?"><input type="button" class="btn btn-primary" value="{{trans('headings.s_book_now')}}"></a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="section_common rooms_details" style="background:url('{{ asset('clientside/img/facility_bg2.jpg') }}') no-repeat">
  <div class="container-fluid h-100">
    <div class="row h-100  align-items-center">
      <div class="col-12 text-center">
        <h3 class="section_title2 mb-5 wow fadeInDown">{{trans('headings.facility')}}</h3>
        <div class="owl-carousel room-detail-carousel facility_aminity wow fadeInUp">
          @if ($hotelRoom->facilities)
            @php $facilities = explode(',',$hotelRoom->facilities); @endphp
            @foreach($facilities as $id)
              @foreach($allFacilities as $all)
                @if ($all->id == $id)
                  <div class="item">
                    <div class="facility_thumb">
                      <div class="facility_inner">
                        <div class="text-center"> <img src="{{asset('storage/facilities/'.$all->image)}}" alt="">
                          <h6>{{$all->facilities}}</h6>
                        </div>
                      </div>
                    </div>
                  </div>
                @endif
              @endforeach
            @endforeach
          @endif
        </div>
      </div>
    </div>
  </div>
</section>

@if($allRooms->isNotEmpty())
<section class="section_common rooms_details" style="background:url('{{ asset('clientside/img/rooms_bg.jpg') }}') no-repeat">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 text-center wow fadeInDown">
        <h3 class="section_title2 mb-5">{{trans('headings.choose_similar_room')}}</h3>
      </div>
      <div class="col-12 wow fadeInDown">
      <div class="owl-carousel rooms_carousel wow fadeInUp">
        @foreach ($allRooms as $allRoom )
          <div class="item">
            <div class="event_thumb room_thumb">
              <!-- <div id="room-sliding" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <div class="thumb_image"> <img src="{{ asset('storage/rooms/'.$allRoom->image) }}" alt="" class="w-100"> </div>
                  </div>
                </div>
                <a class="carousel-control-prev" href="#room-sliding" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#room-sliding" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>           -->
              <div class="thumb_image"> <img src="{{ asset('storage/rooms/'.$allRoom->image) }}" alt="" class="w-100"> </div>
              <div class="caption">
                <h4>{{$allRoom->title}}</h4>
                @if((App::getLocale()=='en'))
                    @php $str = substr(strip_tags($allRoom->description), 0, 100); @endphp
                @else
                    @php $str = $allRoom->description; @endphp
                @endif
                <p>{{$str}}...</p>
                <div class="d-flex room_detail flex-wrap">
                  <div class="room_item1">{{$allRoom->size}} {{trans('headings.sq_mt')}}</div>
                  <div class="room_item2">{{trans('headings.up_to')}} {{$allRoom->guest_no}} {{trans('headings.guests')}}</div>
                  <div class="room_item3">{{trans('headings.complimentary_wifi')}}</div>
                  <div class="room_item4">{{$allRoom->type}}</div>
                </div>
                <div class="d-flex justify-content-between">
                  <a href="{{route('room',$allRoom->id)}}" class="btn border-btn-white">{{trans('headings.view_details')}}</a>
                  <a href="https://centralinn.book-onlinenow.net?" class="btn btn-primary">{{trans('headings.s_book_now')}}</a>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
      </div>
    </div>
  </div>
</section>
@endif
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">

        <iframe id="iframeYoutube" width="465" height="315"  src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{trans('headings.close')}}</button>
      </div>
    </div>
  </div>
</div>

<script>
   $(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
    $("#iframeYoutube").attr("src","#");
  })
})
  $('.youtubelink').click(function(event){
		var linktrimmed = $(this).data("link").slice(-11);
    var iframe=document.getElementById("iframeYoutube");
    iframe.src="https://www.youtube.com/embed/"+linktrimmed;

   $("#myModal").modal("show");

	});



function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
</script>
@endsection