@extends('layouts.app')

@section('content')

    <main>

        <!-- page title area start  -->
        <section class="page-title-area" data-background="{{asset('assets/img/bg/page-title-bg.jpg')}}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="page-title-wrapper">
                            <h1 class="page-title mb-10">Room details</h1>
                        </div>
                        <div class="breadcrumb-menu">
                            <nav aria-label="Breadcrumbs" class="breadcrumb-trail breadcrumbs">
                                <ul class="trail-items">
                                    <li class="trail-item trail-begin"><span><a href="{{url('/')}}">home</a></span></li>
                                    <li class="trail-item trail-end"><span>room details</span></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- page title area end  -->

        <!--Reservation area starts here -->
        <section class="pt-120 pb-50 glo-reservation-details-area">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-9 col-xl-9 col-lg-12 col-md-12">
                        <div class="blog__main-wrapper mb-60">
                            <div class="glo-reservation-details">
                                <div class="glo-reservation-details-thumb mb-55" data-reveal>
                                    <div class="img-hover overlay">
                                        <img src="{{asset('assets/img/reservation/details-1.jpg')}}" alt="Image not found">
                                    </div>
                                </div>
                                <div class="glo-reservation-details-content">
                                    <h2 class=" glo-reservation-details-title mb-25" data-reveal>Single Luxury Room</h2>
                                    <div class="glo-reservation-info-wrapper mb-45" data-reveal>
                                        <div class="glo-reservation-info">
                                            <i class="fad fa-bed"></i>
                                            <span>2 Single bed</span>
                                        </div>
                                        <div class="glo-reservation-info">
                                            <i class="fad fa-user"></i>
                                            <span>2 Guest</span>
                                        </div>
                                        <div class="glo-reservation-info">
                                            <i class="fas fa-car-garage"></i>
                                            <span>Car Parking</span>
                                        </div>
                                        <div class="glo-reservation-info">
                                            <i class="far fa-shower"></i>
                                            <span>1 Washroom</span>
                                        </div>
                                        <div class="glo-reservation-info">
                                            <i class="fad fa-house"></i>
                                            <span>1500 sq ft</span>
                                        </div>
                                        <div class="glo-reservation-info">
                                            <i class="fas fa-person-booth"></i>
                                            <span>Road view</span>
                                        </div>
                                    </div>
                                    <div class="glo-reservation-details-descr mb-45">
                                        <h3 class=" glo-reservation-details-widgest-title mb-20" data-reveal>description</h3>
                                        <p data-reveal>No time to lose, next year is almost here. And a good plan isn’t made overnight. How far are you
                                            with your targets, budget, and plan of attack for next year? What REVPAR and GOPPAR do you need to
                                            achieve? Is your plan for next year complete, and does it describe all actions in detail? Does
                                            everyone on the team know what the objectives are and which steps to take to get there?</p>
                                    </div>
                                    <div class="glo-reservation-details-facility mb-50">
                                        <h3 class=" glo-reservation-details-widgest-title mb-30" data-reveal>Room facities</h3>
                                        <div class="row align-items-center">
                                            <div class="col-xl-7 col-lg-7">
                                                <div data-reveal="left"><img src="{{asset('assets/img/facilities/details.png')}}" alt="Image not found"></div>
                                            </div>
                                            <div class="col-xl-5 col-lg-5">
                                                <ul data-reveal="right">
                                                    <li><i class="far fa-check"></i>Kids Hospitality Option</li>
                                                    <li><i class="far fa-check"></i>Family Size Room</li>
                                                    <li><i class="far fa-check"></i>Speedy Wifi Zone</li>
                                                    <li><i class="far fa-check"></i>Sports Facilities </li>
                                                    <li><i class="far fa-check"></i>24/7 Support </li>
                                                    <li><i class="far fa-check"></i>Pools Facilities</li>
                                                    <li><i class="far fa-check"></i>24/7 Room Service</li>
                                                    <li><i class="far fa-check"></i>Private Gym Service</li>
                                                    <li><i class="far fa-check"></i>5 Star Restaurant</li>
                                                    <li><i class="far fa-check"></i>Private Parking Area</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="glo-reservation-details-gallery mb-55">
                                        <h3 class=" glo-reservation-details-widgest-title mb-30" data-reveal>Room video</h3>
                                        <div class="glo-video-area p-relative glo-video pt-140 pb-140 mb-45" data-background="{{asset('assets/img/bg/video-bg.jpg')}}">
                                            <div class="container">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="glo-video-content">
                                                            <div class="glo-video-box" data-reveal>
                                                                <a href="https://www.youtube.com/watch?v=xfvQN-T2OiY" class="glo-video-popup glo-pulse">
                                                                    <i class="fas fa-play"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-3 col-xl-3 col-lg-8 col-md-8">
                        <div class="glo-reservation-details-sidebar mb-60">
                            <div class="glo-reservation-sidebar-from mb-45" data-reveal="right">
                                <form action="#">
                                    <div class="glo-appointment-input mb-15">
                                        <input type="text" placeholder="Full Name">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="glo-appointment-input mb-15">
                                        <input type="email" placeholder="Email Address">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="glo-reservation-select p-relative mb-15">
                                        <i class="fas fa-user"></i>
                                        <select name="glo-booking-select" id="glo-booking-select">
                                            <option value="" selected>Adult</option>
                                            <option value="">1 Adult</option>
                                            <option value="">2 Adult</option>
                                            <option value="">3 Adult</option>
                                            <option value="">4 Adult</option>
                                            <option value="">5 Adult</option>
                                        </select>
                                    </div>
                                    <div class="glo-reservation-select p-relative mb-15">
                                        <i class="fas fa-child"></i>
                                        <select name="glo-booking-select" id="glo-booking-select-2">
                                            <option value="" selected>Children</option>
                                            <option value="">1 Children</option>
                                            <option value="">2 Children</option>
                                            <option value="">3 Children</option>
                                            <option value="">4 Children</option>
                                            <option value="">5 Children</option>
                                        </select>
                                    </div>
                                    <div class="glo-reservation-select p-relative mb-15">
                                        <i class="fas fa-building"></i>
                                        <select name="glo-booking-select" id="glo-booking-select-3">
                                            <option value="" selected>1 Room</option>
                                            <option value="">2 Room</option>
                                            <option value="">3 Room</option>
                                            <option value="">4 Room</option>
                                            <option value="">5 Room</option>
                                        </select>
                                    </div>
                                    <div class="glo-appointment-input">
                                        <div class="p-relative mb-15">
                                            <input type="text" placeholder="Check In" onfocus="(this.type='date')" onblur="(this.type='text')">
                                            <i class="fas fa-calendar"></i>
                                        </div>
                                    </div>
                                    <div class="glo-appointment-input">
                                        <div class="p-relative  mb-15">
                                            <input type="text" placeholder="Check Out" onfocus="(this.type='date')" onblur="(this.type='text')">
                                            <i class="fas fa-calendar"></i>
                                        </div>
                                    </div>
                                    <div class="glo-reservation-details-btn mb-15 text-center">
                                        <a href="#" class="glo-btn-anim"><span>Book Your Room</span></a>
                                    </div>
                                </form>
                            </div>
                            <div class="sidebar__widget mb-45">
                                <div class="sidber__adv-thumb w-img" data-reveal="right">
                                    <img src="{{asset('assets/img/service/service-side.jpg')}}" alt="img">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Reservation area ends here -->

        <!-- room area starts here -->
        <section class="glo-room2-area pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="intro-title-wrapper mb-40" data-reveal>
                            <div class="intro-title">
                                <h2>Related Rooms</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 2nd row start -->
                <div class="row">

                    <div class="col-lg-4 col-md-6">
                        <div class="glo-room2-item mb-30" data-reveal>
                            <div class="glo-room2-thumb">
                                <a href="{{route('room', $room->id)}}">
                                    <div class="glo-room2-image img-hover overlay">
                                        <img src="{{asset('assets/img/room/room-8.jpg')}}" alt="">
                                    </div>
                                </a>
                                <div class="glo-room2-btn">
                                    <a class="glo-btn-anim btn-black" href="{{route('room', $room->id)}}"><span>Book Now</span></a>
                                </div>
                            </div>
                            <div class="glo-room2-content">
                                <div class="glo-room2-title-wrapper mb-15">
                                    <h4 class="glo-room2-title">Deluxe Room</h4>
                                    <span class="glo-room2-price">150$/Night</span>
                                </div>
                                <ul class="glo-room2-list">
                                    <li class="glo-room2-list-item"><i class="fal fa-users-crown"></i> 1-2 persons</li>
                                    <li class="glo-room2-list-item"><i class="far fa-bed"></i> Twin bed</li>
                                    <li class="glo-room2-list-item"><i class="far fa-wifi"></i> Free wifi</li>
                                    <li class="glo-room2-list-item"><i class="far fa-coffee"></i> Breakfast</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="glo-room2-item mb-30" data-reveal>
                            <div class="glo-room2-thumb">
                                <a href="{{route('room', $room->id)}}">
                                    <div class="glo-room2-image img-hover overlay">
                                        <img src="{{asset('assets/img/room/room-9.jpg')}}" alt="">
                                    </div>
                                </a>
                                <div class="glo-room2-btn">
                                    <a class="glo-btn-anim btn-black" href="{{route('room', $room->id)}}"><span>Book Now</span></a>
                                </div>
                            </div>
                            <div class="glo-room2-content">
                                <div class="glo-room2-title-wrapper mb-15">
                                    <h4 class="glo-room2-title">Luxury Room</h4>
                                    <span class="glo-room2-price">150$/Night</span>
                                </div>
                                <ul class="glo-room2-list">
                                    <li class="glo-room2-list-item"><i class="fal fa-users-crown"></i> 1-2 persons</li>
                                    <li class="glo-room2-list-item"><i class="far fa-bed"></i> Twin bed</li>
                                    <li class="glo-room2-list-item"><i class="far fa-wifi"></i> Free wifi</li>
                                    <li class="glo-room2-list-item"><i class="far fa-coffee"></i> Breakfast</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <div class="glo-room2-item mb-30" data-reveal>
                            <div class="glo-room2-thumb">
                                <a href="{{route('room', $room->id)}}">
                                    <div class="glo-room2-image img-hover overlay">
                                        <img src="{{asset('assets/img/room/room-10.jpg')}}" alt="">
                                    </div>
                                </a>
                                <div class="glo-room2-btn">
                                    <a class="glo-btn-anim btn-black" href="{{route('room', $room->id)}}"><span>Book Now</span></a>
                                </div>
                            </div>
                            <div class="glo-room2-content">
                                <div class="glo-room2-title-wrapper mb-15">
                                    <h4 class="glo-room2-title">Superior Room</h4>
                                    <span class="glo-room2-price">150$/Night</span>
                                </div>
                                <ul class="glo-room2-list">
                                    <li class="glo-room2-list-item"><i class="fal fa-users-crown"></i> 1-2 persons</li>
                                    <li class="glo-room2-list-item"><i class="far fa-bed"></i> Twin bed</li>
                                    <li class="glo-room2-list-item"><i class="far fa-wifi"></i> Free wifi</li>
                                    <li class="glo-room2-list-item"><i class="far fa-coffee"></i> Breakfast</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!-- room area ends here -->

    </main>
@endsection
