@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/banners/'.$banner->image):asset('/images/no-image.png')}})">
        	<img src="{{isset($banner->image)?asset('storage/banners/'.$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">
                    {!!$banner->description!!}
                </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 src="{{ asset('clientside/img/circle_white.png') }}" class="circle"> <img 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  h-100 align-content-center">
      <div class="col-xl-6 col-md-6 wow fadeInLeft">
        <div id="sync1" class="owl-carousel">
          @if ($hotelGallery->isNotEmpty())

            @foreach ($hotelGallery as $hotelgallerys )
              <div class="item">
                @if ($hotelgallerys['url']!= null)
                  <a data-fancybox="gallery" class="youtubelink"  data-link="{{ $hotelgallerys['url']}}">
                    <img src="{{ asset('storage/hotels/'.$hotelgallerys['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/hotels/'.$hotelgallerys['image']) }}">
                    <img src="{{ asset('storage/hotels/'.$hotelgallerys['image']) }}" alt="" class="w-100">
                  </a>
                @endif
              </div>
            @endforeach
          @endif
        </div>
        <div id="sync2" class="owl-carousel">
          @if ($hotelGallery->isNotEmpty())
            @foreach ($hotelGallery as $hotelGallerys )
              <a data-fancybox="gallery" href="{{ asset('storage/hotels/'.$hotelGallerys['image']) }}">
                <div class="item"> <img src="{{ asset('storage/hotels/'.$hotelGallerys['image']) }}" alt="" class="w-100"> </div>
              </a>
            @endforeach
          @endif

        </div>
      </div>
      <div class="col-xl-6 col-md-6  wow fadeInRight">
        <h3>{{$hotel->title}}  </h3>
        <img src="{{ asset('clientside/img/star_image.png') }}" alt="">
        <div class="detail_row"> <span class="location_detail">{{$hotel->address}}<a href="#"></a></span> </div>
        <div class="detail_row">
          <span class="detail_call">
            <a href="tel:{{$hotel->phone}}">+{{$hotel->phone}}</a>
            @if($hotel->phone_two)
              <img style="width:20px; height:20px; margin-right: 8px; margin-left: 8px;" src="{{ asset('clientside/img/whatsapp.png') }}" alt="w">

              <!-- style="background:url('{{ asset('clientside/img/whatsapp.png') }}) no-repeat; display:inline-block; width:20px; height:20px;  vertical-align: text-bottom; margin-right: 8px;" -->
              <a href="https://web.whatsapp.com/send?phone=+{{$hotel->phone_two}}&amp;text=" target="_blank">+{{$hotel->phone_two}} </a>
            @endif
          </span>
          <a href="mailto:{{$hotel->email}}" class="Detail_mail" >{{$hotel->email}}</a>
        </div>
        <div class="detail_row">
          <p>{{$hotel->description}} </p>
        </div>
        <div class="detail_row check-in_checkOut">
          <div class="chkInOut">
            <span>{{trans('headings.checkin_time')}}: <b>13:00 - 23:00</b></span>
            <span class="divider">|</span>
            <span>{{trans('headings.checkout_time')}}: <b>07:00 - 12:00</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">
                @foreach($hotelfacilities as $item)
                  <li>{{$item->facilities}}</li>
                @endforeach
              </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>
@if ($hotelGalleryAll->isNotEmpty())
  <section class="section_common gallery_sec" style="background:url('{{ asset('clientside/img/gallery_bg.jpg') }}') no-repeat">
    <div class="container">
      <div class="row">
        <div class="col-12  wow fadeInDown">
          <div class="row m-0  mb-5 align-items-center">
          <h3 class="section_title2 mb-0 mr-auto">{{trans('headings.explore_our_gallery')}}</h3>
            <ul id="filters" class="d-flex flex-wrap">
              <li><span class="filter" data-filter=".Images">{{trans('headings.image')}}</span></li>
              <li><span class="filter" data-filter=".Video">{{trans('headings.video')}}</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 wow fadeInUp">
          <div id="portfoliolist" class="d-flex flex-wrap">
            @if ($hotelGalleryAll->isNotEmpty())
              @foreach ($hotelGalleryAll as $hotelGall )
                @if(isset($hotelGall->link))
                  <div class="portfolio Video" data-cat="Video">
                    <div class=" portfolio-item portfolio-effect__item portfolio-item--eff1">
                      <a href="{{$hotelGall->link}}" class="gallery_thumb" data-fancybox="gallery">
                        <img src="{{isset($hotelGall->image)?asset('storage/hotels/'.$hotelGall->image):asset('/images/no-image.png')}}" alt="" class="portfolio-item__image">
                        <div class="position-absolute">
                          <img src="{{ asset('clientside/img/play.png') }}" alt="">
                        </div>
                      </a>
                    </div>
                  </div>
                @else
                  <div class="portfolio Images" data-cat="Images">
                    <div class=" portfolio-item portfolio-effect__item portfolio-item--eff1">
                      <a href="{{isset($hotelGall->image)?asset('storage/hotels/'.$hotelGall->image):asset('/images/no-image.png')}}" class="gallery_thumb" data-fancybox="gallery">
                        <img src="{{isset($hotelGall->image)?asset('storage/hotels/'.$hotelGall->image):asset('/images/no-image.png')}}" alt="" class="portfolio-item__image">
                      </a>
                    </div>
                  </div>
                @endif
              @endforeach
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
@endif

@if ($roomsFromHotel->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 h-100 align-content-center">
        <div class="col-12 text-center wow fadeInDown">
          <h3 class="section_title2 mb-5">{{trans('headings.stay_unique_room')}}</h3>
        </div>
        <div class="col-12 text-center wow fadeInUp">
          <div class="owl-carousel rooms_carousel">
            @foreach ( $roomsFromHotel as $roomsFromHotels)
              <div class="item">
                <div class="event_thumb room_thumb">
                  <div class="thumb_image"> <img src="{{ asset('storage/rooms/'.$roomsFromHotels->image) }}" alt="" class="w-100"> </div>
                  <div class="caption">
                    <h4>{{$roomsFromHotels->title}}</h4>
                    @if((App::getLocale()=='en'))
                        @php $str = substr(strip_tags($roomsFromHotels->description), 0, 100); @endphp
                    @else
                        @php $str = $roomsFromHotels->description; @endphp
                    @endif
                    <p>{{$str}}...</p>
                    <div class="d-flex room_detail flex-wrap">
                      <div class="room_item1">{{$roomsFromHotels->size}} {{trans('headings.sq_mt')}}</div>
                      <div class="room_item2">{{trans('headings.up_to')}} {{$roomsFromHotels->guest_no}} {{trans('headings.guests')}}</div>
                      <div class="room_item3">{{trans('headings.complimentary_wifi')}}</div>
                      <div class="room_item4">{{$roomsFromHotels->type}}</div>
                    </div>
                    <div class="d-flex justify-content-between">
                      <a href="{{route('room',$roomsFromHotels->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

<section class="section_common facility_sec" style="background:url('{{ asset('clientside/img/facility_bg.jpg') }}') no-repeat">
  <div class="container-fluid">
    <div class="row h-100 align-content-center align-items-center">
      <div class="col-md-3  wow fadeInLeft">
        <h3 class="section_title2">{{trans('headings.facility')}}</h3>
        <!-- <p>{{trans('headings.we_were_thinking_of_you')}}</p> -->
        <div class="customNavigation">
          <a class="btn prev">
            <img src="{{ asset('clientside/img/arr_left.png') }}" alt="">
          </a>
          <a class="btn next">
            <img src="{{ asset('clientside/img/arr_right.png') }}" alt="">
          </a>
        </div>
      </div>
      <div class="col-md-9 pl-3 wow fadeInUp">
        <div class="owl-carousel facility_carousel" id="facility_carousel">
          @php $i =0; $j =0; $length = count($hotelfacilities); @endphp
          @foreach($hotelfacilities as $item)
            @if($i==0)
              @php $i =1; @endphp
              <div class="item">
            @elseif($i==1)
              @php $i =2; @endphp
            @endif
            <div class="facility_thumb">
              <div class="facility_inner">
                <div class="text-center"> <img src="{{isset($item->image)?asset('storage/facilities/'.$item->image):asset('/images/no-image.png')}}" alt="">
                  <h6>{{$item->facilities}}</h6>
                </div>
              </div>
            </div>
            @php $j++; @endphp
            @if($i==2 || $length == $j)
              @php $i =0; @endphp
              </div>
            @endif
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>
<!--
<section class="section_common offer_sec" style="background:url('{{ asset('clientside/img/offer_bg.jpg') }}') no-repeat">
  <div class="container-fluid">
    <div class="row h-100 align-items-center flex-row-reverse">
    	<div class="col-md-3 text-right  wow fadeInRight">
        <h3 class="section_title2">Special offers</h3>
        <p class=" text-right">There are many variations of passages of Lorem Ipsum available</p>
        <div class="customNavigation"> <a class="btn prev"><img src="{{ asset('clientside/img/arr_left.png') }}" alt=""></a> <a class="btn next"><img src="{{ asset('clientside/img/arr_right.png') }}" alt=""></a> </div>
      </div>
      <div class="col-md-9  wow fadeInUp">
        <div class="owl-carousel Offers_carousel" id="Offers_carousel">
          <div class="item">
            <div class="discover_thumb position-relative"> <img src="{{ asset('clientside/img/discover1.jpg') }}" alt="" class="w-100">
              <div class="caption">
                <h3>DISCOVER DOHA <span>with Central Inn</span> </h3>
                <a href="#" class="btn btn-border-white">{{trans('headings.s_book_now')}}</a> </div>
            </div>
          </div>
          <div class="item">
            <div class="discover_thumb position-relative"> <img src="{{ asset('clientside/img/discover2.jpg') }}" alt="" class="w-100">
              <div class="caption">
                <h3><span>EXPLORE THE</span>UNIQUE EXPERIENCE</h3>
                <a href="#" class="btn btn-border-white">{{trans('headings.s_book_now')}}</a> </div>
            </div>
          </div>
          <div class="item">
            <div class="discover_thumb position-relative"> <img src="{{ asset('clientside/img/discover1.jpg') }}" alt="" class="w-100">
              <div class="caption">
                <h3>DISCOVER DOHA <span>with Central Inn</span> </h3>
                <a href="#" class="btn btn-border-white">{{trans('headings.s_book_now')}}</a> </div>
            </div>
          </div>
          <div class="item">
            <div class="discover_thumb position-relative"> <img src="{{ asset('clientside/img/discover2.jpg') }}" alt="" class="w-100">
              <div class="caption">
                <h3><span>EXPLORE THE</span>UNIQUE EXPERIENCE</h3>
                <a href="#" class="btn btn-border-white">{{trans('headings.s_book_now')}}</a> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section> -->
@if($destinations->isNotEmpty())
  <section class="section_common  popular_sec" style="background:url('{{ asset('clientside/img/destination_bg.jpg') }}') no-repeat">
    <div class="container-fluid p-0 h-100">
      <div class="row m-0 align-items-center h-100">
        <div class="col-12 p-0">
          <div class="text-center col-12 wow fadeInDown">
            <h3 class="section_title2 mb-5">{{trans('headings.popular_destination')}}</h3>
          </div>
          <div class="text-center">
            <div class="owl-carousel popular_carousel wow fadeInUp">
              @foreach($destinations as $destination)
                <div class="item">
                  <div class="near_destbox">
                    <img src="{{isset($destination->image)?asset('storage/destination/'.$destination->image):asset('/images/no-image.png')}}" alt="Near You">
                    <h2>{{$destination->title}}</h2>
                    <p>{{$destination->short_description}}</p>
                    <!-- <div><a href="#" class="btn border-btn-white">{{trans('headings.know_more')}}</a></div> -->
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endif

<section class="section_common locate_sec" style="background:url('{{ asset('clientside/img/location_bg.jpg') }}') no-repeat">
  <div class="container-fluid h-100">
    <div class="row align-items-center h-100">
      <div class="col-12">
        <h3 class="section_title2 text-center mb-5 wow fadeInDown">{{trans('headings.locate_us')}}</h3>
        <div class="d-flex w-100">
          <div class="half_box border-box locate_address_sec wow fadeInLeft">
            <h4>{{trans('headings.keep_in_touch_with_us')}}</h4>
            <div class="media wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
              <div class="icon"><img alt="" src="{{ asset('clientside/img/location_ico.png') }}"></div>
              <div class="media-body">
                <h5>{{trans('headings.our_address')}}</h5>
                <p>{{$hotel->address}} </p>
              </div>
            </div>
            <div class="media wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
              <div class="icon"><img alt="" src="{{ asset('clientside/img/call_ico.png') }}"></div>
              <div class="media-body">
                <h5>{{trans('headings.call_for_support')}}</h5>
                <a href="tel:{{$hotel->phone}}">+{{$hotel->phone}}</a>,
                <!-- @if ($hotel->phone_two)
                  <a href="tel:{{$hotel->phone_two}}">+{{$hotel->phone_two}}</a>
                @endif              -->
              </div>
            </div>
            <div class="media wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
              <div class="icon"><img alt="" src="{{ asset('clientside/img/whatsapp_ico.png') }}"></div>
              <div class="media-body">
                <h5>{{trans('headings.chat_with_us')}}</h5>
                <a data-phone="{{$hotel->phone_two}}" data-message="" href="https://web.whatsapp.com/send?phone=+{{$hotel->phone_two}}&amp;text=" target="_blank">+{{$hotel->phone_two}}</a> </div>
            </div>
            <div class="media  wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
              <div class="icon"><img alt="" src="{{ asset('clientside/img/mail_ico.png') }}"></div>
              <div class="media-body">
                <h5>{{trans('headings.mail_us_info')}}</h5>
                <a href="mailto:{{$hotel->email}}">{{$hotel->email}}</a> </div>
            </div>
            @if ($hotel->map)
              <div class="media wow bounceInLeft" style="visibility: visible; animation-name: bounceInLeft;">
                <div class="icon"><img alt="" src="{{ asset('clientside/img/map_ico.png') }}"></div>
                <div class="media-body">
                  <h5>{{trans('headings.view_us_on_map')}}</h5>
                  <a href="{{$hotel->map}}" target="_blank">{{$hotel->map}}</a>
                </div>
              </div>
            @endif

          </div>
          @if($hotel->embeded)
          <div class="map_box  wow fadeInRight">
          <iframe id="mapview"  src="{{$hotel->embeded}}"
             allowfullscreen="" loading="lazy"></iframe>
            <!-- <iframe src="https://goo.gl/maps/rhAMC77HZj2pRkjn7"  frameborder="0"></iframe> -->
            <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3607.55576747517!2d51.497064315011286!3d25.28552508385518!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45dbd97ac3d349%3A0x6fc5e16dacc5f61d!2sCentral%20Inn%20Al%20Sadd%2C%20Doha%2C%20QATAR!5e0!3m2!1sen!2sin!4v1639721748736!5m2!1sen!2sin" style="width:100%; height:100%; border:0;" allowfullscreen="" loading="lazy"></iframe> -->
          </div>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>
<!-- <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">Close</button>
      </div>
    </div>
  </div>
</div> -->
<!-- <section class="section_common fifa_sec" style="background:url('{{ asset('clientside/img/fifa_bg.jpg') }}') no-repeat">
  <div class="container h-100">
    <div class="row align-items-center h-100">
      <div class="col-sm-6 col-8 offset-sm-1 wow fadeInLeft">
      	<h6>We welcomes you</h6>
        <h3>FIFA WORLDCUP<span>QATAR 2022</span></h3>
        <a href="https://www.fifa.com/" class="btn-border-white d-inline-block">Click here to view Fifa Fixture</a>
      </div>
      <div class="col-sm-4 col-4 offset-sm-1 text-center wow fadeInRight"><img src="{{ asset('clientside/img/fifa_logo.png') }}" alt="" class="mw-100"></div>
    </div>
  </div>
</section> -->


<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");
}
  $('#mapview').attr('style', 'width:100%;height:100%; border:0;');

</script>
@endsection