@extends('layouts.app')

@section
    <main>

        <!-- page title area start  -->
        <section class="page-title-area" data-background="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">booking form</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="index.html">home</a></span></li>
                                    <li class="trail-item trail-end"><span>booking form</span></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- page title area end  -->

        <!-- booking form area starts here -->
        <section class="glo-booking-area pt-110 pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-12 d-flex justify-content-center">
                        <div class="intro-title-wrapper mb-40">
                            <div class="intro-subtitle" data-reveal>
                                <span>Stay with us</span>
                            </div>
                            <div class="intro-title mb-30" data-reveal>
                                <h2>Book Your Room</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 2nd row start -->
                <div class="row">
                    <div class="col-lg-8">
                        <div class="glo-booking-wrapper mb-30" data-reveal="left">
                            <form action="#">
                                <div class="glo-booking-form">
                                    <div class="glo-appointment-input mb-15">
                                        <input type="text" placeholder="First Name">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="glo-appointment-input mb-15">
                                        <input type="text" placeholder="Last 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-appointment-input mb-15">
                                        <input type="email" placeholder="Phone Number">
                                        <i class="fas fa-phone"></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" class="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-reservation-select p-relative mb-15">
                                        <i class="fas fa-building"></i>
                                        <select name="glo-booking-select" class="glo-booking-select-3">
                                            <option value="" selected>Room Type</option>
                                            <option value="">Luxury Room</option>
                                            <option value="">Family Room</option>
                                            <option value="">Deluxe Room</option>
                                            <option value="">Double 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-appointment-input message mb-15">
                                        <textarea name="message" placeholder="Special Requirements"></textarea>
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="glo-booking-btn">
                                        <a href="#" class="glo-btn-anim"><span>Book Your Room</span></a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="glo-booking-support mb-45" data-reveal="right">
                            <h3 class="glo-booking-title">Booking Details</h3>
                            <p class="glo-booking-desc mb-30">
                                A Luxury Hotel is considered a hotel that provides a luxurious accommodation experience
                                to the guest. There are no set with standards (such as stars) for luxury hotels.
                            </p>
                            <div class="glo-booking-btn">
                                <a href="#" class="glo-btn-anim"><span>Online Support</span></a>
                            </div>
                        </div>
                        <div class="glo-booking-support mb-30" data-reveal="right">
                            <h3 class="glo-booking-title">Need Any Help</h3>
                            <p class="glo-booking-desc">
                                If you need any help to book your room. Our support team is ready for you 24/7 days.
                            </p>
                            <div class="glo-booking-call">
                                <span class="glo-booking-call-title">Call Us:</span>
                                <a href="tel:99411123456"> 994 1112 3456</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- booking form area ends here -->

    </main>
@endsection
