@extends('website.layout.app')
@section('content') 
@include('website.layout.package-inner-page-header')

    <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-6 col-md-12 col-12">
                    <div class="image-slider">
                        <!--carousel-->
                        <div class="owl-slider">
                            <div id="carousel" class="owl-carousel">
                              
                               @foreach ($multiple_image as $image)

                              <div class="item">
                                <div class="inner-box">
                                 <img src="{{ asset($image->image)}}" width="100%" class="img-fluid">
                                </div>
                              </div>
                              @endforeach
                            
                           

                            
                             
                            </div>
                          </div>
                        <!---->
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-12 d-flex flex-wrap align-content-center justify-content-start ">
                    <div class="hotel-inner-details">
                      <p>{{json_decode($data->attributes)->number_of_days}} Days & {{json_decode($data->attributes)->number_of_nights}} Nights</p>
                        <h2>{{json_decode($data->attributes)->place}}</h2>
                        <i class="fa fa-map-marker" aria-hidden="true"></i>&nbsp;<a href="https://goo.gl/maps/ekzKm8W7vwtttjz8A" target="_blank">{{json_decode($data->attributes)->address}}</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/hotel-icon.png') }}" width="15px">&nbsp;Hotel</span>
                            <span><img src="{{ asset('website/images/coffee.svg') }}" width="15px"></i>&nbsp;Meals</span>
                            
                            <span><img src="{{ asset('website/images/activity.svg') }}" width="15px">&nbsp;Entertainment</span>
                        </div>
                       <!-- <div class="row check-dates">
                       <div class="col-lg-4 col-md-4 col-6">
                        <h6 class="mt-4"><img src="images/calender-dep.png" width="13px">&nbsp;Check In</h6>
                        <p>12 PM</p>
                       </div>                      
                       <div class="col-lg-5 col-md-5 col-6">
                        <h6 class="mt-4"><img src="images/calender-dep.png" width="13px">&nbsp;Check Out</h6> 
                        <p>1 AM</p>
                       </div>                      
                       </div> -->
                       <div class="col-lg-12 mt-5">
                        <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 ">
                  <h4>Overview</h4>
                  <div class=" mt-3">
                    

                        @foreach ($PackageOverview as $overview)
                      <div class="row photo-section overview-section">
                        <div class="col-lg-12 col-md-12 col-12 ">
                          <p>Day 1&nbsp;&nbsp;&nbsp;<span>{{$overview->overview_place}}</span></p>
                        </div>
                        <div class="col-lg-2 col-md-4 col-12">
                          <img src="{{ asset($overview->overview_image)}}" class="img-fluid" width="100%">
                        </div>
                        <div class="col-lg-10 col-md-8 col-12 d-flex flex-wrap align-content-center">
                          <p style="font-size:12px;">
                           {{$overview->description}}
                          </p>
                        </div>
                        </div>

  @endforeach

                    


                        


                    </div>
                </div>
               
            </div>
        </div>
    </section>