@extends('app')

@section('head_title', $hotel->hotel_name . ' | ' . getcong('site_name'))
@section('meta_title', $hotel->meta_title . ' | ' . getcong('site_name'))
@section('meta_keywords', $hotel->meta_keyword)
@section('meta_description', $hotel->meta_description)
@section('head_url', Request::url())

@section('content')
    <style>
        .star {
            color: #ffa912;
        }

        table.roomviewlist.table.tbl-tab {
            min-height: 190px;
            max-height: 190px;
        }

        .partyarea-profile-price {
            min-height: 74px;
        }


        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            border: 1px solid #ddd;
        }
.owl-pagination {
    bottom: -13px;
}
 .owl-carousel .item img {
     display: block;
     width: 100%; 
     height: 250px;
       object-fit: cover;
 }
>>>>>>> sv

        th,
        td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2
        }

        .owl-pagination {
            bottom: -13px;
        }

        .owl-carousel .item img {
            display: block;
            width: 100%;
            height: 250px;
        }

        .owl-carousel-previewHotellist .item {
            justify-content: center !important;
            /* background-color: red; */
            display: flex;
        }

        .owl-carousel-previewHotellist .item img {
            display: block;
            width: auto !important;

        }
        .img-popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.9);
  z-index: 99999;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.popup-content {
  max-width: 90%;
  max-height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#popupImg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  transition: opacity 150ms ease;
  background: #111;
}

.popup-close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 36px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 100000;
}

.popup-nav {
  background: rgba(0,0,0,0.35);
  border: 0;
  color: #fff;
  font-size: 34px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
  z-index: 100000;
}
.popup-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.popup-counter {
  color: #fff;
  font-size: 13px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.4);
  padding: 6px 10px;
  border-radius: 12px;
}

/* highlight active thumbnail in the main carousel (adjust to your style) */
.owl-carousel-hotelList .item.popup-active {
  outline: 3px solid #ffd54f;
  border-radius: 4px;
}
    </style>
    <!-- page-header -->
    @if ($hotel_gallery_images)

     <div id="imgPopup" class="img-popup" aria-hidden="true" role="dialog" aria-label="Image preview">
  <button id="closePopup" class="popup-close" aria-label="Close">&times;</button>

  <button id="prevBtn" class="popup-nav prev" aria-label="Previous image">&#10094;</button>

  <div class="popup-content" role="document">
    <img id="popupImg" src="" alt="Preview" />
    <div id="popupCounter" class="popup-counter"></div>
  </div>

  <button id="nextBtn" class="popup-nav next" aria-label="Next image">&#10095;</button>
</div>
        <!-- OWL CAROUSEL -->
        <div class="owl-carousel owl-carousel-hotelList">
            @foreach ($hotel_gallery_images as $key => $gallery_img)
                <div class="item" data-index="{{ $key }}">
                    <img src="{{ URL::asset('public/upload/hotelgallery/' . $hotel->id . '/' . $gallery_img->hotelimage) }}"
                        alt="image" class="popup-image">
                </div>
            @endforeach
        </div>


    @endif



    <div class="single-listing-item-block">
        <div class="container">
            <div class="row">
                <div class="col-md-9 col-sm-8">
                    <h1 class="single-listing-heading item_title">{{ $hotel->hotel_name }} </h1>
                    <p class="vendor-address">
                    <div class="dd0"><i class="fa fa-map-marker"></i></div>
                    <div class="dd">{{ $hotel->hotel_address }},
                        {{ optional(\App\Cities::getCityInfo($hotel->city_id))->city_name ?? '' }},
                        {{ optional(\App\States::getStateInfo($hotel->state_id))->name ?? '' }} - {{ $hotel->hotel_pin }},
                        {{ optional(\App\Countries::getCountryInfo($hotel->country_id))->country_name ?? '' }}</div> <a
                        href="#location" class="btn-secondary-link ml-2">View Map</a> </p>
                    <div class="rating-box vendor-meta-box">
                        <span class="rating-star">
                             ()                            @if (!empty($pdfs) && !empty($pdfs->mot_certificate))
                                <strong><span><a target="_blank"
                                            href="{{ url('public/upload/fact_and_certificates/certificate') . '/' . $pdfs->mot_certificate }}">Classification
                                            Certificate <i class="fa fa-file-pdf-o" aria-hidden="true"></i></a>
                                    </span></strong>
                            @endif


                        </span>
                    </div>




                </div>
                <div class="col-md-3 col-sm-4">
                    <div class="single-listing-dtl hoteloptions">

                        @if (Auth::check())
                            <a class="btn btn-pink" id="singlerequestquote" data-toggle="modal" data-target="#viewSend"
                                href="{{ URL::to('singlerequestquote/' . $hotel->id . '') }}">Request Quote</a>
                        @else
                            <a class="btn btn-pink" href="{{ URL::to('login') }}" id='requestQuoteLogin'>Request Quote</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="party-areas-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2><i class="fa fa-university" aria-hidden="true"></i> Banqueting The Area of {{ $hotel->hotel_name }}
                    </h2>
                </div>
            </div>
            <div class="row">
                
            </div>
        </div>

        <div class="container">
                    </div>
    </div>



    <div class="new-listing-description-block">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <ul class="new-listing-nav-tabs nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item active">
                            <a class="nav-link" id="pills-general-info-tab" data-toggle="pill"
                                href="#pills-general-info" role="tab" aria-controls="pills-general-info"
                                aria-selected="true">General
                                Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-access-details-tab" data-toggle="pill"
                                href="#pills-access-details" role="tab" aria-controls="pills-access-details"
                                aria-selected="false">Access To Venue</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-room-details-tab" data-toggle="pill"
                                href="#pills-room-details" role="tab" aria-controls="pills-important-contacts"
                                aria-selected="false">Room & Facilities</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-hallfc-details-tab" data-toggle="pill"
                                href="#pills-hallfc-details" role="tab" aria-controls="pills-hallfc-details"
                                aria-selected="false">Hall Facilities</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade active in" id="pills-general-info" role="tabpanel"
                            aria-labelledby="pills-general-info-tab">

                            <div class="bg-white1 shadow-light radius">
                                <div class="title-bar">
                                    About {{ $hotel->hotel_name }}
                                </div>
                                <div class="about-body border-t">
                                    <div class="info padding-h-20 padding-v-20" style="text-align: justify !important;">
                                        {!! $hotel->hotel_description !!}
                                    </div>
                                </div>
                                <div class="cvp-service-info border-t padding-v-20">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="vp-service-info-r">
                                                <div class="vp-service-info-value">
                                                    Year Built/Last Renovated
                                                </div>
                                                <div class="vp-service-info-label">
                                                    {{ $hotel->year_construction }} / {{ $hotel->last_renovated ?? 'NA' }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="vp-service-info-r">
                                                <div class="vp-service-info-value">
                                                    Chain (If Any)
                                                </div>
                                                <div class="vp-service-info-label">
                                                    @if ($hotel->chainproperty != 0)
                                                        {{ optional(\App\ChainProperty::getChainPropertyInfo($hotel->chainproperty))->chain_property ?? '' }}
                                                    @else
                                                        NA
                                                    @endif
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="vp-service-info-r">
                                                <div class="vp-service-info-value">
                                                    Member of
                                                </div>
                                                <div class="vp-service-info-label">
                                                    @if ($hotel->memberof != 0)