@extends('layouts.main')

@section('page')
@if(session()->has('success'))
<div class="col-6 offset-3">
    <div class="alert alert-success fade-out mt-3">
        {{session()->get('success')}}
    </div>
</div>
@endif
@if(session()->has('error'))
<div class="col-6 offset-3">
    <div class="alert alert-danger fade-out mt-3">
        <i class="fa-solid fa-circle-exclamation fa-lg text-danger fa-beat-fade"></i> &nbsp;&nbsp;
        {{session()->get('error')}}
    </div>
</div>
@endif
<aside id="fh5co-hero" class="js-fullheight">
    <div class="flexslider js-fullheight">
        <ul class="slides">
            <li style="background-image: url(images/slider1.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="col-md-12 col-md-offset-0 text-center slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <p><span>Standard Rooms</span></p>
                                <h2>Reserve Room for Family Vacation</h2>
                                <p onclick="modal.style.display = 'block';">
                                    <a class="btn btn-primary btn-lg bounce">Book Now</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li style="background-image: url(images/slider2.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="col-md-12 col-md-offset-0 text-center slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <p><span>Deluxe Suite</span></p>
                                <h2>Make Your Vacation Worth It</h2>
                                <p onclick="modal.style.display = 'block';">
                                    <a class="btn btn-primary btn-lg bounce">Book Now</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li style="background-image: url(images/slider3.jpg);">
                <div class="overlay-gradient"></div>
                <div class="container">
                    <div class="col-md-12 col-md-offset-0 text-center slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <p><span>Executive Rooms</span></p>
                                <h2>The Best Place To Make the Difference</h2>
                                <p onclick="modal.style.display = 'block';">
                                    <a class="btn btn-primary btn-lg bounce">Book Now</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</aside>
<div class="wrap">
    <div class="container">
        <div class="row" id="booknow">
            <div id="availability">
                @if(isset($availability))
                <div class="row bg-success bounce">
                    <div class="col-md-10 offset-md-1">
                        <p class="text-white pt-3">{{$availability}}</p>
                    </div>
                </div>
                @endif
                <form action="{{route('isAvail')}}" method="POST">
                    @csrf
                    <div class="a-col">
                        <section>
                            <select class="cs-select cs-skin-border" name="room">
                                <option value="" disabled selected>Select Room</option>
                                <option value="standard">Standard Room</option>
                                <option value="twin">Twin Room</option>
                                <option value="executive">Executive Suite</option>
                            </select>
                        </section>
                    </div>
                    <div class="a-col alternate">
                        <div class="input-field">
                            <label for="date-start">Check In</label>
                            <input type="text" class="form-control" id="date-start" name="dateStart" />
                        </div>
                    </div>
                    <div class="a-col alternate">
                        <div class="input-field">
                            <label for="date-end">Check Out</label>
                            <input type="text" class="form-control" id="date-end" name="dateEnd" />
                        </div>
                    </div>
                    <div class="a-col action" onclick="this.parentElement.submit();">

                            <a>
                                <span>Check</span> Availability
                            </a>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="fh5co-counter-section" class="fh5co-counters">
    <div class="container">
        <div class="row">
            <div class="col-md-3 text-center">
                <span class="fh5co-counter js-counter" data-from="0" data-to="{{isset($site)?$site->where('field','userAccess')->first()->values : 0}}" data-speed="5000" data-refresh-interval="50"></span>
                <span class="fh5co-counter-label">User Access</span>
            </div>
            <div class="col-md-3 text-center">
                <span class="fh5co-counter js-counter" data-from="0" data-to="{{isset($site)?$site->where('field','rooms')->first()->values : 0}}" data-speed="500" data-refresh-interval="5"></span>
                <span class="fh5co-counter-label">Rooms</span>
            </div>
            <div class="col-md-3 text-center">
                <span class="fh5co-counter js-counter" data-from="0" data-to="{{isset($site)?$site->where('field','transactions')->first()->values : 0}}" data-speed="5000" data-refresh-interval="50"></span>
                <span class="fh5co-counter-label">Transactions</span>
            </div>
            <div class="col-md-3 text-center">
                <span class="fh5co-counter js-counter" data-from="0" data-to="{{isset($site)?$site->where('field','ratingsReviews')->first()->values : 0}}" data-speed="500" data-refresh-interval="5"></span>
                <span class="fh5co-counter-label">Ratings &amp; Reviews</span>
            </div>
        </div>
    </div>
</div>

<div id="featured-hotel" class="fh5co-bg-color">
    <div class="container">

        <div class="row">
            <div class="col-md-12">
                <div class="section-title text-center">
                    <h2>Featured Rooms</h2>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="feature-full-1col">
                <div class="image" style="background-image: url(images/hotel_feture_1.jpg);">
                    <div class="descrip text-center">
                        <p><small>For as low as</small><span>{{isset($site)?$site->where('field','executiveSuiteCostPerNight')->firstOrFail()->values : '0'}}/night</span></p>
                    </div>
                </div>
                <div class="desc">
                    <h3>Executive Suite</h3>
                    <p>{{isset($site)?$site->where('field','executiveSuiteIntro')->firstOrFail()->values : 'n/a'}}</p>
                    <p><a href="#" class="btn btn-primary btn-luxe-primary" id="booknow">Book Now <i class="ti-angle-right"></i></a>
                    </p>
                </div>
            </div>

            <div class="feature-full-2col">
                <div class="f-hotel">
                    <div class="image" style="background-image: url(images/hotel_feture_2.jpg);">
                        <div class="descrip text-center">
                            <p><small>For as low as</small><span>{{isset($site)?$site->where('field','standardCostPerNight')->firstOrFail()->values : '0'}}/night</span></p>
                        </div>
                    </div>
                    <div class="desc">
                        <h3>Standard Room</h3>
                        <p>{{isset($site)?$site->where('field','standardSuiteIntro')->firstOrFail()->values : 'n/a'}}</p>
                        <p><a href="#" class="btn btn-primary btn-luxe-primary" id="booknow">Book Now <i class="ti-angle-right"></i></a></p>
                    </div>
                </div>
                <div class="f-hotel">
                    <div class="image" style="background-image: url(images/hotel_feture_3.jpg);">
                        <div class="descrip text-center">
                            <p><small>For as low as</small><span>{{isset($site)?$site->where('field','twinCostPerNight')->firstOrFail()->values : '0'}}/night</span></p>
                        </div>
                    </div>
                    <div class="desc">
                        <h3>Twin Room</h3>
                        <p>{{isset($site)?$site->where('field','twinSuiteIntro')->firstOrFail()->values : 'n/a'}}</p>
                        <p><a href="#" class="btn btn-primary btn-luxe-primary" id="booknow">Book Now <i class="ti-angle-right"></i></a></p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="hotel-facilities">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title text-center">
                    <h2>Hotel Facilities</h2>
                </div>
            </div>
        </div>

        <div id="tabs">
            <nav class="tabs-nav">
                <a href="#" class="active" data-tab="tab1">
                    <i class="fa-solid fa-utensils fa-2x icn"></i>
                    <span>Restaurant</span>
                </a>
                <a href="#" data-tab="tab2">
                    <i class="fa-solid fa-champagne-glasses fa-2x icn"></i>
                    <span>Bar</span>
                </a>
                <a href="#" data-tab="tab3">
                    <i class="fa-solid fa-car fa-2x icn"></i>
                    <span>Pick-up</span>
                </a>
                <a href="#" data-tab="tab4">
                    <i class="fa-solid fa-person-drowning fa-2x icn"></i>
                    <span>Swimming Pool</span>
                </a>
                <a href="#" data-tab="tab5">
                    <i class="fa-solid fa-shirt fa-2x icn"></i>
                    <span>Laundry</span>
                </a>
                <a href="#" data-tab="tab6">
                    <i class="fa-solid fa-people-roof fa-2x icn"></i>
                    <span>Conference</span>
                </a>
            </nav>
            <div class="tab-content-container">
                <div class="tab-content active show" data-tab-content="tab1">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_1.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Restaurant</h3>
                                {!!isset($site)?$site->where('field','restaurantInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','restaurantServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" data-tab-content="tab2">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_2.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Bars</h3>
                                {!!isset($site)?$site->where('field','barInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','barServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" data-tab-content="tab3">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_3.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Pick Up</h3>
                                {!!isset($site)?$site->where('field','pickUpInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','pickUpServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" data-tab-content="tab4">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_4.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Swimming Pool</h3>
                                {!!isset($site)?$site->where('field','swimmingPoolInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','swimmingPoolServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" data-tab-content="tab5">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_5.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Laundry</h3>
                                {!!isset($site)?$site->where('field','laundryInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','laundryServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" data-tab-content="tab6">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="images/tab_img_6.jpg" class="img-responsive" alt="Image">
                            </div>
                            <div class="col-md-6">
                                <span class="super-heading-sm">World Class</span>
                                <h3 class="heading">Conference</h3>
                                {!!isset($site)?$site->where('field','conferenceInfo')->firstOrFail()->values : '0'!!}
                                <p class="service-hour">
                                    <span>Service Hours</span>
                                    <strong>{!!isset($site)?$site->where('field','conferenceServiceHours')->firstOrFail()->values : 'n/a'!!}</strong>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="testimonial">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title text-center">
                    <h2>Happy Customer Says...</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="testimony">
                    <blockquote>
                        &ldquo;{!!isset($site)?$site->where('field','testimonial1')->firstOrFail()->values : 'n/a'!!}&rdquo;
                    </blockquote>
                    <p class="author"><cite>{!!isset($site)?$site->where('field','testimonial1Person')->firstOrFail()->values : 'n/a'!!}</cite></p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimony">
                    <blockquote>
                        &ldquo;{!!isset($site)?$site->where('field','testimonial2')->firstOrFail()->values : 'n/a'!!}&rdquo;
                    </blockquote>
                    <p class="author"><cite>{!!isset($site)?$site->where('field','testimonial2Person')->firstOrFail()->values : 'n/a'!!}</cite></p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="testimony">
                    <blockquote>
                        &ldquo;{!!isset($site)?$site->where('field','testimonial3')->firstOrFail()->values : 'n/a'!!}&rdquo;
                    </blockquote>
                    <p class="author"><cite>{!!isset($site)?$site->where('field','testimonial3Person')->firstOrFail()->values : 'n/a'!!}</cite></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="fh5co-blog-section">
    <!--<div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="section-title text-center">
                    <h2>Our Events</h2>
                </div>
            </div>
        </div>
         <div class="row">
            <div class="col-md-4">
                <div class="blog-grid" style="background-image: url(images/image-1.jpg);">
                    <div class="date text-center">
                        <span>09</span>
                        <small>Aug</small>
                    </div>
                </div>
                <div class="desc">
                    <h3><a href="#">Most Expensive Hotel</a></h3>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-grid" style="background-image: url(images/image-2.jpg);">
                    <div class="date text-center">
                        <span>09</span>
                        <small>Aug</small>
                    </div>
                </div>
                <div class="desc">
                    <h3><a href="#">1st Anniversary of Sonia Hotel</a></h3>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-grid" style="background-image: url(images/image-3.jpg);">
                    <div class="date text-center">
                        <span>09</span>
                        <small>Aug</small>
                    </div>
                </div>
                <div class="desc">
                    <h3><a href="#">Discover New Adventure</a></h3>
                </div>
            </div>
        </div> -->
    </div>
</div>


<!-- The Modal -->
<div id="myModal" class="modal">
    <div class="col-md-10 offset-md-1">

        <form action="{{route('booking.store')}}" method="POST" enctype="multipart/form-data">
            @csrf
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close text-right">&times;</span>
                <h3 class="text-center mb-2 text-primary">Book Your Stay</h3>
                <p class="text-center text-info mb-3">We may contact you to confirm your stay.</p>
                <div class="row">
                    <div class="col-md-6">
                        <label for="name">Name <font color="red">*</font></label>
                        <input type="text" id="name" class="form-control mb-3" name="name" value="" required>
                    </div>
                    <div class="col-md-6">
                        <label for="mobileNumber">Mobile Number <font color="red">*</font></label>
                        <input type="text" id="mobileNumber" class="form-control mb-3" name="mobileNumber" value="" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="checkin">Check In <font color="red">*</font></label>
                        <input type="text" id="checkin" class="form-control mb-3" name="checkin" value="" required>
                    </div>
                    <div class="col-md-6">
                        <label for="checkout">Check Out </label>
                        <input type="text" id="checkout" class="form-control mb-3" name="checkout" value="">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <label for="roomPref">Preferred Room Type</label>
                        <select class="form-control" name="roomPref" id="roomPref">
                            <option value="anyBest">Most best rooms available</option>
                            <option value="anyAffordable">Most affordable rooms available</option>
                            <option value="standard">Standard Room</option>
                            <option value="twin">Twin Room</option>
                            <option value="executive">Executive Room</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 text-center mt-5">
                        <button type="submit" class="btn btn-primary btn-lg">Register</button>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>


@endsection