@extends('website.layout.app')
@section('content')   

@include('website.layout.hotel-detail-page-header')


    
    <!--main Section-->
    <section class="padding-sec hotel-detail-page"  data-aos="fade-up"
    data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-md-12 col-12">
                    <div class="image-slider">
                        <!--carousel-->
                        <div class="owl-slider">
                            <div id="carousel" class="owl-carousel">
                                @foreach ($hotel_images as $image)
                              <div class="item">
                                <div class="inner-box">
                                 <img src="{{ asset($image->hotel_image)}}" width="100%" class="img-fluid">
                                </div>
                              </div>
                               @endforeach



                           
                              
                           
                             
                            </div>
                          </div>
                        <!---->
                    </div>
                </div>
                <div class="col-lg-7 col-md-12 col-12 d-flex flex-wrap align-content-center justify-content-start ">
                    <div class="hotel-inner-details">
                        <h2>{{json_decode($data->attributes)->hotel_name}} </h2>
                        <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;<a href="https://goo.gl/maps/ekzKm8W7vwtttjz8A" target="_blank">Bani Yas Road, Deira, Dubai, AE 476</a>
                        <h4>{{json_decode($data->attributes)->price}}<span class="px-2">Incl all Tax
                        </span></h4>
                        <div class="hotel-services">
                            <span><img src="{{asset('website/images/wifi.svg')}}" width="15px">&nbsp;Wifi</span>
                            <span><img src="{{asset('website/images/coffee.svg')}}" width="15px"></i>&nbsp;Cafe</span>
                            <span><img src="{{asset('website/images/server.svg')}}" width="15px">&nbsp;Room Service</span>
                            <span><img src="{{asset('website/images/activity.svg')}}" width="15px">&nbsp;Gym</span>
                        </div>
                       <div class="row check-dates">
                       <div class="col-lg-4 col-md-4 col-6">
                        <h6 class="mt-4"><img src="{{asset('website/images/calender-dep.png')}}" width="13px">&nbsp;Check In</h6>
                        <p>{{ \Carbon\Carbon::createFromTimeString(json_decode($data->attributes)->checkin)->format('h A') }}

</p>
                       </div>                      
                       <div class="col-lg-4 col-md-4 col-6">
                        <h6 class="mt-4"><img src="{{asset('website/images/calender-dep.png')}}" width="13px">&nbsp;Check Out</h6> 
                        <p>{{ \Carbon\Carbon::createFromTimeString(json_decode($data->attributes)->checkout)->format('h A') }}

</p>
                       </div>                      
                       </div>
                     <div class="col-lg-12">
                      <button class="btn" type="button" data-bs-toggle="modal" data-bs-target="#myModal">Book Now</button>
                     </div>
                      </div>
                </div>
                <div class="col-lg-12 col-md-12 col-12 mt-5" data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
                    <div class="description">
                        <h4>Description</h4>
                         <p class="mt-3">{{json_decode($data->attributes)->description}}</p>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-12 mt-5" data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
                    <h4>Photos</h4>
                    <div class="photo-section mt-3">
                        <div class="row">

                          @foreach ($hotel_photos as $image)
                            <div class="col-lg-3 col-md-6 col-12 mt-2">
                                <img src="{{ asset($image->hotelphotos)}}" width="100%" class="img-fluid">
                            </div>
                                   @endforeach
                          
                          
                        </div>
                        <!-- <div class="row mt-5">
                            <div class="col-lg-3 col-md-6 col-12 mt-2">
                                <img src="images/hotel-photo-1.jpeg" width="100%" class="img-fluid">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12 mt-2">
                                <img src="images/hotel-photo-1.jpeg" width="100%" class="img-fluid">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12 mt-2">
                                <img src="images/hotel-photo-1.jpeg" width="100%" class="img-fluid">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12 mt-2">
                                <img src="images/hotel-photo-1.jpeg" width="100%" class="img-fluid">
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="col-lg-12 col-md-12 col-12 mt-5" data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
                    <h4>Amenties</h4>
                    <div class="photo-section mt-3">
                        <div class="row">
                           <h5>General</h5>


                                    @foreach ($Hotelamenties as $amenties)
                          <div class="col-lg-3 col-md-6 col-12">
                           <span><i class="fa fa-check" aria-hidden="true"></i>&nbsp;{{$amenties->title}}</span><br>
                         
                          </div>
                             @endforeach
                       
                       
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-12 mt-5" data-aos="fade-up"
                data-aos-anchor-placement="top-bottom"  data-aos-delay="300">
                    <div class="photo-section">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3606.413675691165!2d51.447546599999995!3d25.323896100000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e45dc120c6b11cb%3A0xba571af464faa0be!2sAl%20Gharrafa%2C%20Doha%2C%20Qatar!5e0!3m2!1sen!2sin!4v1691040991855!5m2!1sen!2sin" 
                        width="100%" height="400" style="border:10px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

       @endsection