@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Book Now | Anisabel Suites</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Book Now  | Anisabel Suites" />
<meta property="og:description" content="Experience the best of luxury and hospitality at Anisabel Suites, a boutique hotel in the heart of the city. Our spacious and well-appointed suites offer everything you need for a comfortable and relaxing stay, including plush beds, modern amenities, and stunning views. With our convenient location, you'll be close to all the major attractions, restaurants, and shopping. Book your stay today and experience the difference of Anisabel Suites." />
<meta property="og:site_name" content="Book Now  | Anisabel Suites" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')
<div class="row mb-5">
    <!-- Side Nav Menu -->
    <div class="col-12 col-md-12 col-xl-3">
        <div class="bg-darkbrown navigation">
            <!-- Menu Large-->
            <div class="d-lg-block d-xl-block d-md-none d-none">
                <div class="d-flex justify-content-end">
                    <div class="d-flex flex-column">
                        <a href="{{ url('member-dashboard') }}">
                            <div class="p-3 mt-5 mb-4" id="navItem" style="background-color: #f3e6de; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="900">
                                <span class="color-mid fw-bold ps-2">Dashboard</span>
                            </div>
                        </a>

                        <a href="{{ url('member-profile') }}">
                            <div class="p-3 my-4" id="navItem" style="background-color: #f3e6de; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                                <span class="color-mid fw-bold ps-2">Profile</span>
                            </div>
                        </a>

                        <a href="{{ url('member-book') }}">
                            <div class="p-3 my-4" id="navItem" style="background-color: white; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                                <span class="color-mid fw-bold ps-2">Book Now</span>
                            </div>
                        </a>

                        <form action="{{ url('logout') }}" method="POST">@csrf
                            <input type="hidden" name="role" value="member">
                            <button type="submit" class="p-3 my-4 border-0 text-start" id="navItem" style="background-color: #f3e6de; border-radius: 40px 0 0 40px; width: 400px;" data-aos="fade-down" data-aos-duration="500">
                                <span class="color-mid fw-bold ps-2">Logout</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Menu Small-->
            <div class="d-sm-block d-xl-none d-lg-none d-md-block p-3">
                <a href="{{ url('member-dashboard') }}">
                    <div class="p-3 mt-5 mb-4 rounded-4" id="navItem" style="background-color: #f3e6de; width: 400px;" data-aos="fade-down" data-aos-duration="900">
                        <span class="color-mid fw-bold ps-2">Dashboard</span>
                    </div>
                </a>

                <a href="{{ url('member-profile') }}">
                    <div class="p-3 my-4 rounded-4" id="navItem" style="background-color: #f3e6de; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                        <span class="color-mid fw-bold ps-2">Profile</span>
                    </div>
                </a>

                <a href="{{ url('member-book') }}">
                    <div class="p-3 my-4 rounded-4" id="navItem" style="background-color: white; width: 400px;" data-aos="fade-down" data-aos-duration="700">
                        <span class="color-mid fw-bold ps-2">Book Now</span>
                    </div>
                </a>

                <form action="{{ url('logout') }}" method="POST">@csrf
                    <input type="hidden" name="role" value="member">
                    <div>
                        <button type="submit" class="p-3 rounded-4 border-0 text-start" id="navItem"
                            style="background-color: #f3e6de; width: 400px;" data-aos="fade-down"
                            data-aos-duration="500">
                            <span class="color-mid fw-bold ps-2">Logout</span>
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <!-- Dashboard -->
    <div class="col-12 col-md-12 col-xl-6">
        <div class="d-flex my-4 align-items-center p-1">
            <p class="color-mid me-4 mb-0">Membership Tier:</p>
            <img src="{{ asset('images/' . $tiers->image) }}" class="img-fluid me-2" style="width: 75px;" alt="">

            <h2 class="fw-bold color-mid">{{ $tiers->name }}</h2>
        </div>

        <div class="row p-1">
            <div class="col-lg-10" data-aos="fade-right" data-aos-duration="500">
                <section class="splide" aria-label="Splide Basic HTML Example">
                    <div class="splide__track rounded">
                        <ul class="splide__list">
                            <li class="splide__slide"><img src="{{ asset('images/twin1.jpg') }}" class="img-fluid" alt="Deluxe Twin Image"></li>
                            <!-- <li class="splide__slide"><img src="{{ asset('images/twin2.jpg') }}" class="img-fluid" alt="Deluxe Twin Image"></li> -->
                            <li class="splide__slide"><img src="{{ asset('images/twin3.jpg') }}" class="img-fluid" alt="Deluxe Twin Image"></li>
                        </ul>
                    </div>
                </section>
            </div>
            <div class="col-lg-2 d-flex flex-column justify-content-evenly splide-images">

                <img src="{{ asset('images/twin1.jpg') }}" class="img-fluid" alt="Deluxe Twin Image">
                <!-- <img src="{{ asset('images/twin2.jpg') }}" class="img-fluid" alt="Deluxe Twin Image"> -->
                <img src="{{ asset('images/twin3.jpg') }}" class="img-fluid" alt="Deluxe Twin Image">

            </div>
        </div>
        <br>
        <div class="row p-1">
            <div class="col-md-12" data-aos="fade-left" data-aos-duration="500">
                <p class="color-mid">An elegantly appointed 42sm twin sharing room with Free 5g WIFI, Air Conditioning, smart TV, work desk, luggage counter, Bathroom Amenities, hot water. <br>Individual Pocket Gardens, open hallways to garden patio. </p>

                <div class="mt-5 d-flex align-items-center">
                    <div class="bg-darkbrown mb-3 me-3" style="height: 2px; width: 30px;"></div>
                    <p class="color-mid"><b>Amenities</b></p>
                </div>

                <div class=" color-light">
                    <a href="#" data-tooltip="A/C"><i class="fa-regular fa-snowflake mx-2"></i></a>
                    <a href="#" data-tooltip="WiFi"><i class="fa-solid fa-wifi mx-2"></i></a>
                    <a href="#" data-tooltip="TV"><i class="fa-solid fa-tv mx-2"></i></a>
                    <a href="#" data-tooltip="Telephone"><i class="fa-solid fa-phone mx-2"></i></a>
                    <a href="#" data-tooltip="Bath"><i class="fa-solid fa-bath mx-2"></i></a>
                    <a href="#" data-tooltip="Work Space"><i class="fa-solid fa-person-booth mx-2"></i></a>
                    <a href="#" data-tooltip="Towels"><i class="fa-solid fa-toilet-paper mx-2"></i></a>
                    <a href="#" data-tooltip="Chandelier"><i class="fa-solid fa-circle-check mx-2"></i></a>
                    <a href="#" data-tooltip="Hair Dryer"><i class="fa-solid fa-circle-check mx-2"></i></a>
                    <a href="#" data-tooltip="Hot and Cold Shower"><i class="fa-solid fa-circle-check mx-2"></i></a>
                </div>

                <a class="btn bg-color-light rounded py-3 px-5 mt-4" href="{{ url('member-booking?room=Deluxe Twin Suite') }}">BOOK NOW</a>
            </div>
        </div>

    </div>

    <!-- Spacer -->
    <div class="col-12 col-md-3 col-xl-3">

    </div>
</div>

<style>
    /* Small */
    @media (max-width: 767px) {
        .navigation {
            height: auto;
        }
        .splide-images {
            display: none;
        }
    }

    /* Large */
    @media (min-width: 1200px) {
        .navigation {
            height: 100svh;
        }
    }

    .tier-name {
        font-size: 50px;
    }

    @media (max-width: 390px) {
        .col-lg-2 .splide-images {
            display: none;
        }
    }
</style>

<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
</script>

<style>
    /**
 * Tooltip Styles
 */

    /* Add this attribute to the element that needs a tooltip */
    [data-tooltip] {
        position: relative;
        z-index: 2;
        cursor: pointer;
    }

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
        pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-bottom: 5px;
        margin-left: -80px;
        padding: 7px;
        width: 160px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #000;
        background-color: hsla(0, 0%, 100%, 0.9);
        color: #b19357;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 14px;
        line-height: 1.2;

        border: 1px #8b5e3b solid;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
        position: absolute;
        bottom: 150%;
        left: 50%;
        margin-left: -5px;
        width: 0;
        border-top: 5px solid #000;
        border-top: 5px solid #8b5e3b;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0;
    }

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }
</style>

@endsection

@section('js')
<script>
    var splide = new Splide('.splide');
    splide.mount();
</script>

<script>
    $(document).ready(function() {
        // var splide = new Splide('.splide', {
        //     // Add any Splide options you need
        // }).mount();

        // Handle click events on the images
        $('.splide-images img').on('click', function() {
            // Get the index of the clicked image
            var index = $(this).index();

            // Move the Splide slider to the corresponding slide
            splide.go(index);
        });
    });
</script>

@endsection