@extends('app.web.layout.layout')

@section('title','Room')

@push('css')
<link
href="../css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
rel="stylesheet"
/>

<!--  CSS Files -->
<link href="../assets/vendor/animate.css/animate.min.css" rel="stylesheet" />
<link href="../assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="../assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet"
/>
<link
href="../assets/vendor/bootstrap-icons/bootstrap-icons.css"
rel="stylesheet"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="../assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="../assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />

<link href="../assets/css/style.css" rel="stylesheet" />

<style>
@media (max-width: 425px) {
  .contact-info-mobile {
    font-size: 12px;
  }
  .footer-responsive {
    flex-direction: column;
    align-items: center;
  }
}
</style>
@endpush

@section('content')

<main id="main">
    <br></br><br><br>
      <section  class="about">
        <div class="container aos-init aos-animate" data-aos="fade-up">
          <div class="row">
            <div class="col-lg-6 order-1 order-lg-2 aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100">
              <div class="about-img">
                @if ($room->video)
                    <video width="640" height="360" controls>
                        <source src="{{$room->video() }}" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                @endif
              </div>
            </div>
            <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 content">
              <h3>{{$room->title()}}</h3>
              <p>
               {!! strip_tags($room->description()) !!}
              </p>
            </div>
          </div>
  
        </div>
      </section>

      <section id="gallery" class="gallery">

        <div class="container aos-init aos-animate" data-aos="fade-up">
          <div class="section-title">
          </div>
        </div>
  
        <div class="container-fluid aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
  
          <div class="row g-0">
  
          @foreach ($room_galleries as $gallery)
            <div class="col-lg-3 col-md-4">
                <div class="gallery-item">
                <a href="{{$gallery->partners()}}" class="gallery-lightbox" data-gall="gallery-item">
                    <img src="{{$gallery->partners()}}" alt="Easttown" class="img-fluid"  style="width: 100%; height: 300px; object-fit: cover;">
                </a>
                </div>
            </div>
          @endforeach
          </div>
        </div>
      </section>
    </main>
    <!-- End #main -->

  

@endsection