@extends('frontend.layouts.app')

@section('title')
@endsection

@section('seo')
<title>Events and Venues | 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="Events and Venues | 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="Events and Venues | 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="bg-other" style="background-image: url('{{ asset('images/banner-venues.jpg') }}')">-->
<!--</div>-->
<div id="carouselExample" class="carousel slide margin-bottom">
    <div class="carousel-inner">
        @php
        $active = 0;
        @endphp
        @foreach ($banners as $banner)
        @if ($active == 0)
        <div class="carousel-item active">
            <!-- <div class="image"></div> -->
            <img src="{{ asset('banners/' . $banner->image) }}" class="d-block align-middle img-fluid" alt="...">
        </div>
        @else
        <div class="carousel-item">
            <!-- <div class="image"></div> -->
            <img src="{{ asset('banners/' . $banner->image) }}" class="d-block align-middle img-fluid" alt="...">

        </div>
        @endif
        @php
        $active++;
        @endphp
        @endforeach
        {{-- <div class="carousel-item">
                <!-- <div class="image"></div> -->
                <img src="{{ asset('images/function-3.jpg') }}" class="d-block align-middle img-fluid" alt="...">
    </div>
    <div class="carousel-item">
        <!-- <div class="image"></div> -->
        <img src="{{ asset('images/patio-2.jpg') }}" class="d-block align-middle img-fluid" alt="...">
    </div>

    <div class="carousel-item">
        <!-- <div class="image"></div> -->
        <img src="{{ asset('images/meeting-room.jpg') }}" class="d-block align-middle img-fluid" alt="...">
    </div>
    <div class="carousel-item active">
        <!-- <div class="image"></div> -->
        <img src="{{ asset('images/restaurant-1.jpg') }}" class="d-block align-middle img-fluid" alt="...">
    </div> --}}
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
</div>

<div class="container">
    <div class="text-center my-5" data-aos="fade-down">
        <h1 class="fw-bold color-mid">Life is a Journey Worth Celebrating!</h1>
        <!--<p class="color-mid">It is the small steps and little victories along life’s journey that make a successful life story.</p>-->
    </div>
</div>

<nav class="navbar  fixed-top top-50">
    <div class="container-fluid">
        <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <style>
            .custom-toggler {
                background-color: #8b5e3b;
                border: none;
            }

            .custom-toggler .navbar-toggler-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
            }
        </style>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">

                <h1 class="offcanvas-title fw-bold color-mid fw-bold" id="offcanvasNavbarLabel">Venues</h1>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                    @foreach ($venueTypes as $venueType)
                    <li class="nav-item my-3">
                        <a href="#item-{{ $venueType->id }}" class="color-light text-decoration-none" data-target="item-{{ $venueType->id }}">
                            <h3 class="fw-bold">{{ $venueType->name }}</h3>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="container">
        <div class="d-flex overflow-auto mb-4">
            @foreach ($venueTypes as $venueType)
            <div class="flex-shrink-0 text-center fw-bold mx-2">
                <a href="#item-{{ $venueType->id }}" class="color-light text-decoration-none" data-target="item-{{ $venueType->id }}">
                    <h3 class="fw-bold">{{ $venueType->name }}</h3>
                </a>
            </div>
            <span class="mx-2 mt-1">|</span>
            @endforeach
        </div>
        <hr>
    </div>


    <div class="row gy-3 mb-5">

        @foreach ($venueTypes as $venueType)
        <div id="item-{{ $venueType->id }}">
            <h1 class="fw-bold color-light mb-3">{{ $venueType->name }}</h1>
            <div class="row gy-3 mb-5">
                @foreach ($venuePages->where('venue_type_id', $venueType->name) as $venuePage)
                <div class="col-12 col-md-4">
                    <a role="button" data-bs-toggle="modal" data-bs-target="#modal{{ $venueType->id }}{{ $venuePage->id }}">
                        <div class="p-3 border-brown p-3 rounded-4 text-center">
                            <img src="{{ asset('images/venues/' . $venuePage->image) }}" class="img-fluid shadow rounded-4" alt="">
                        </div>
                    </a>

                    <div class="text-center mt-4">
                        <a role="button" data-bs-toggle="modal" class="btn bg-color-light px-4 rounded-3 fw-bold" data-bs-target="#modal{{ $venueType->id }}{{ $venuePage->id }}">
                            Add To Cart
                        </a>
                    </div>
                </div>
                <div class="modal fade" id="modal{{ $venueType->id }}{{ $venuePage->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header border-bottom-0">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <h1 class="fw-bold color-mid">{{ $venuePage->name }}</h1>
                                <div class="row">
                                    <div class="col-md-6 text-center">
                                        <img src="{{ asset('images/venues/' . $venuePage->image) }}" class="img-fluid" alt="Image">
                                    </div>
                                    <div class="col-md-6 color-mid">
                                        <p class="color-mid justify mb-4">{{ Str::limit($venuePage->description, 50) }}</p>
                                        <p class="copy text-start color-mid mb-4" style="font-size: 15px;">Capacity <br> - {{ $venuePage->capacity }} <br>
                                            Venue Rental <br> - P {{ $venuePage->rental_price }} <br>
                                            includes <br> - Airconditioning <br> - WIFI <br> - central buffet with lights <br> - 10 round table,
                                            6 seater <br> - decor <br> - tableware <br> </p>
                                        <p class="color-mid">The best <b> event space at the heart of Davao City!</b></p>
                                        <p class="color-mid copy" style="font-size: 15px;">See exclusive Offers and Packages!</p>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-top-0">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <a class="btn bg-color-light rounded-1 fw-bold" href='{{ url('venue-form') }}'>
                                    Inquire Now
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endforeach

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('a[data-target]').forEach(function(anchor) {
                anchor.addEventListener('click', function(event) {
                    event.preventDefault();
                    var targetId = this.getAttribute('data-target');
                    var targetElement = document.getElementById(targetId);
                    var offset = 100; // Adjust this value as needed

                    window.scrollTo({
                        top: targetElement.offsetTop - offset,
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</div>

<!-- 

<main class="page-content overflow-hidden">
    <div class="card" style="height: 400px; width: 400px;" data-aos="fade-right" data-bs-target="#patioModal" data-bs-toggle="modal" style="cursor: pointer">
        <div class="content"><br><br><br><br><br>

        </div>
    </div>
    <div class="card" style="height: 400px; width: 400px;" data-aos="fade-left" data-bs-target="#restaurantModal" data-bs-toggle="modal" style="cursor: pointer">
        <div class="content"><br><br><br><br><br>

        </div>
    </div>
    <div class="card" style="height: 400px; width: 400px;" data-aos="fade-right" data-bs-target="#meetingModal" data-bs-toggle="modal" style="cursor: pointer">
        <div class="content"><br><br><br><br><br>

        </div>
    </div>
    <div class="card" style="height: 400px; width: 400px;" data-aos="fade-left" data-bs-target="#functionModal" data-bs-toggle="modal" style="cursor: pointer">
        <div class="content"><br><br><br><br><br>

        </div>
    </div>
</main> -->

<!-- MODAL 1 -->
<!-- 
<div class="modal fade" id="patioModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body r px-5 text-center">
                <h1 class="fw-bold color-mid">Garden Patio</h1>
                <img src="{{ asset('images/patio-1.jpg') }}" class="card-img-top rounded-4 d-md-block d-none" alt="...">

                <div class="text-center mb-5 d-flex flex-row flex-wrap justify-content-center align-items-center my-3 gap-2">
                    <img id="thumbnail-1" src="{{ asset('images/patio-1.jpg') }}" class="img-fluid rounded-4 shadow" width="300" alt="...">
                    <img id="thumbnail-2" src="{{ asset('images/patio-2.jpg') }}" class="img-fluid rounded-4 shadow" width="300" alt="...">
                    <img id="thumbnail-3" src="{{ asset('images/patio-3.jpg') }}" class="img-fluid rounded-4 shadow" width="300" alt="...">
                </div>

                <p class="color-mid justify mb-4">ANISABEL Garden Patio is an exclusive venue for garden weddings,
                    special occasions and corporate events.</p>
                <p class="copy text-start color-mid mb-4" style="font-size: 15px;">Capacity <br> - 60-80 person
                    seating <br>
                    Venue Rental <br> - P2000/hr <br>
                    includes <br> - Airconditioning <br> - WIFI <br> - central buffet with lights <br> - 10 round table,
                    6 seater <br> - decor <br> - tableware <br> </p>
                <p class="color-mid">The best <b> event space at the heart of Davao City!</b></p>
                <p class="color-mid copy" style="font-size: 15px;">See exclusive Offers and Packages!</p>

                <a class="btn bg-color-light rounded-1 fw-bold" href="{{ url('venue-form') }}">
                    Inquire Now
                </a>

            </div>
            <div class="modal-footer border-top-0 text-center">

            </div>
        </div>
    </div>
</div>
 -->

<!-- MODAL 2 -->
<!--  
<div class="modal fade" id="restaurantModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body r px-5 text-center">
                <h1 class="fw-bold color-mid">Restaurant</h1>
                <img src="{{ asset('images/restaurant-1.jpg') }}" class="card-img-top rounded-4 d-md-block d-none" alt="...">

                <div class="text-center mb-5 d-flex flex-row flex-wrap justify-content-center align-items-center my-3 gap-2">
                    <img id="thumbnail-1" src="{{ asset('images/restaurant-1.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-2" src="{{ asset('images/restaurant-2.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-3" src="{{ asset('images/restaurant-3.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-4" src="{{ asset('images/restaurant-4.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-4" src="{{ asset('images/restaurant-5.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                </div>

                <p class="color-mid justify mb-4">ANISABEL Restaurant is an intimate venue for Celebratory and
                    Corporate Events</p>
                <p class="copy text-start color-mid mb-4" style="font-size: 15px;">Capacity <br> - 20-30 person
                    seating <br>
                    Venue Rental <br> - P1500/hr <br>
                    includes <br> - Airconditioning <br> - SMART TV <br> - WIFI <br> - Decor and centerpiece <br> -
                    central buffet with lights <br> - 9 square table, 4 seater <br> - tableware <br></p>
                <p class="color-mid"> The coziest <b>event space at the heart of Davao City!</b></p>
                <p class="color-mid copy" style="font-size: 15px;">See exclusive Offers and Packages!</p>

                <a class="btn bg-color-light rounded-1 fw-bold" href="{{ url('venue-form') }}">
                    Inquire Now
                </a>

            </div>
            <div class="modal-footer border-top-0 text-center">

            </div>
        </div>
    </div>
</div>
 -->

<!-- MODAL 3 -->
<!-- 
<div class="modal fade" id="meetingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body r px-5 text-center">
                <h1 class="fw-bold color-mid">Meeting Room</h1>
                <img src="{{ asset('images/meeting-1.jpg') }}" class="card-img-top rounded-4 d-md-block d-none" alt="...">

                <div class="text-center mb-5 d-flex flex-row flex-wrap justify-content-center align-items-center my-3 gap-2">
                    <img id="thumbnail-1" src="{{ asset('images/meeting-1.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-2" src="{{ asset('images/meeting-2.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-3" src="{{ asset('images/meeting-3.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                </div>

                <p class="color-mid justify mb-4">ANISABEL Meeting Room is an intimate venue for Celebratory and
                    Corporate meetings.</p>
                <p class="copy text-start color-mid mb-4" style="font-size: 15px;">Capacity <br> - 10 person seating
                    <br>
                    Venue Rental <br> - P500/hr <br>
                    includes <br> - Airconditioning <br> - SMART TV <br> - Comfort Room <br> - Decor and centerpiece
                    <br> - buffet table <br> - 6 rectangular table, 6 seater <br> - decor <br> - tableware <br>
                </p>
                <p class="color-mid"> A convenient and highly accessible <b>event space at the heart of Davao City!</b>
                </p>
                <p class="color-mid copy" style="font-size: 15px;">See exclusive Offers and Packages!</p>

                <a class="btn bg-color-light rounded-1 fw-bold" href="{{ url('venue-form') }}">
                    Inquire Now
                </a>

            </div>
            <div class="modal-footer border-top-0 text-center">

            </div>
        </div>
    </div>
</div> -->

<!-- MODAL 4 -->
<!-- 
<div class="modal fade" id="functionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body r px-5 text-center">
                <h1 class="fw-bold color-mid">Function Room</h1>
                <img src="{{ asset('images/function-1.jpg') }}" class="card-img-top rounded-4 d-md-block d-none" alt="...">

                <div class="text-center mb-5 d-flex flex-row flex-wrap justify-content-center align-items-center my-3 gap-2">
                    <img id="thumbnail-1" src="{{ asset('images/function-1.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-2" src="{{ asset('images/function-2.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-3" src="{{ asset('images/function-3.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                    <img id="thumbnail-4" src="{{ asset('images/function-4.jpg') }}" class="img-fluid rounded-4 shadow" width="225" alt="...">
                </div>


                <p class="color-mid justify mb-4">ANISABEL Function Room is an exclusive venue for Celebratory and
                    Corporate events.</p>
                <p class="copy text-start color-mid mb-4" style="font-size: 15px;">Capacity <br> - 30 person seating
                    <br>
                    Venue Rental <br> - P1500/hr <br>
                    includes <br> - Airconditioning <br> - SMART TV <br> - Comfort Room <br> - Decor and centerpiece
                    <br> - buffet table <br> - 6 rectangular table, 6 seater <br> - decor <br> - tableware <br>
                </p>
                <p class="color-mid">A convenient and highly accessible <b>event space at the heart of Davao City!</b>
                </p>
                <p class="color-mid copy" style="font-size: 15px;">See exclusive Offers and Packages!</p>

                <a class="btn bg-color-light rounded-1 fw-bold" href="{{ url('venue-form') }}">
                    Inquire Now
                </a>

            </div>
            <div class="modal-footer border-top-0 text-center">

            </div>
        </div>
    </div>
</div>
 -->

<!-- 
<div class="container my-5" id="event-inquiry-section">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6 px-3">
            <img src="{{ asset('images/logo-dining.png') }}" class="img-fluid mb-2" alt="Menu" width="550" data-aos="zoom-in-down">
            <div class="text-center" data-aos="zoom-in-right">
                <h2 class="fw-bold color-mid mb-lg-5 lh-base">Life is a Journey Worth Celebrating!</h2>

                <span class="fw-bold color-mid mb-lg-5 lh-base fs-3 fst-italic">
                    Anisabel Suites at Davao City Center <br>
                    is a destination worth finding for <br>
                    unforgettable celebratory events, <br>
                    corporate functions and meetings. <br>
                    Anisabel has 4 venue options uniquely <br>
                    designed for use separately or combined <br>
                    according to your number of guests, <br>
                    with highly personalized exclusive <br>
                    service and elegantly appointed rooms, <br>
                    there is no better place in Davao to host <br>
                    your event. To start planning your event, <br>
                    meeting or corporate retreat at <br>
                    Davao city center, <br>
                    request a proposal today! <br><br>
                </span>

                <h1 class="fw-bold color-mid lh-base">We are a city destination worth finding!</h1>
            </div>
        </div>

        <div class="col-12 col-md-6" data-aos="zoom-in-left">
            <h1 class="fw-bold color-mid">Event Inquiry Form</h1>

            <form action="{{ url('dining-inquiry') }}" class="form-dining" method="POST">@csrf
                <input type="hidden" name="type" value="venue">
                <div class="row gy-4 mb-4">
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="fname" class="form-label fw-bold color-mid">First Name*</label>
                            <input type="text" class="form-control rounded" name="first_name" id="fullname" placeholder="" style="border:1px solid #895c00;">
                            @error('first_name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="lname" class="form-label fw-bold color-mid">Last Name*</label>
                            <input type="text" class="form-control rounded" name="last_name" id="fullname" placeholder="" style="border:1px solid #895c00;">
                            @error('last_name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="email" class="form-label fw-bold color-mid">Email Address*</label>
                            <input type="email" class="form-control rounded" name="email" id="email" placeholder="" style="border:1px solid #b19357;">
                            @error('email')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="contact" class="form-label fw-bold color-mid">Contact No*</label>
                            <input type="number" class="form-control rounded" name="contact" id="contact" placeholder="" style="border:1px solid #b19357;">
                            @error('contact')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="company" class="form-label fw-bold color-mid">Name of Company*</label>
                            <input type="text" class="form-control rounded" name="company" id="company" placeholder="" style="border:1px solid #b19357;">
                            @error('company')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="contact" class="form-label fw-bold color-mid">Industry*</label>
                            <input type="text" class="form-control rounded" name="industry" id="industry" placeholder="" style="border:1px solid #b19357;">
                            @error('industry')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <h1 class="fw-bold color-mid">Event Details</h1>

                <div class="row gy-4 mb-4">
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="number" class="form-label fw-bold color-mid">Number of guests*</label>
                            <input type="number" class="form-control rounded" name="attendees" id="number" placeholder="" style="border:1px solid #b19357;">
                            @error('attendees')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="venue" class="form-label  fw-bold color-mid">Preferred event venue*</label>
                            <select type="text" class="form-control rounded" name="venue" id="venue" placeholder="" style="border:1px solid #b19357;">
                                <option value="Garden Patio">Garden Patio</option>
                                <option value="Meeting Room">Meeting Room</option>
                                <option value="Function Room">Function Room</option>
                                <option value="Restaurant">Restaurant</option>
                            </select>
                            @error('venue')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="date" class="form-label fw-bold color-mid">Preferred Date*</label>
                            <input type="date" class="form-control rounded" name="preferred_date" id="date" placeholder="" style="border:1px solid #b19357;">
                            @error('preferred_date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="time" class="form-label fw-bold color-mid">Preferred Time*</label>
                            <select type="text" class="form-control rounded" name="preferred_time" id="time" placeholder="" style="border:1px solid #b19357;">
                                <option value="9:00 - 2:00 (Lunch)">9:00 AM - 2:00 PM (Lunch)</option>
                                <option value="2:00 - 6:00 (Merienda)">2:00 PM - 6:00 PM (Merienda)</option>
                                <option value="6:00 - 10:00 (Dinner)">6:00 PM - 10:00 PM (Dinner)</option>
                                <option value="9:00 AM - 5:00 PM (Whole Day)">9:00 AM - 5:00 PM (Whole Day)</option>
                            </select>
                            @error('preferred_time')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="type" class="form-label fw-bold color-mid">What Type of Event*</label>
                            <select type="text" class="form-control rounded" name="event" id="type" placeholder="" style="border:1px solid #b19357;">
                                <option value="Celebratory">Celebratory</option>
                                <option value="Corporate">Corporate</option>
                            </select>
                            @error('event')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <label for="food" class="form-label fw-bold color-mid">Preferred Set of Food*</label>
                            <select type="text" class="form-control rounded" name="food" id="food" placeholder="" style="border:1px solid #b19357;">
                                <option value="Set A">Set A</option>
                                <option value="Set B">Set B</option>
                                <option value="Set C">Set C</option>
                            </select>
                            @error('menu')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                            {{-- <div class="mt-2">
                                    <a href="">
                                        <p class="fw-bold text-primary text-decoration-underline">See Menu?</p>
                                    </a>
                                </div> --}}
                        </div>
                    </div>

                    <div class="">
                        <label for="request" class="form-label fw-bold color-mid">Special Request *</label>
                        <textarea type="text" class="form-control rounded" name="request" id="request" rows="6" style="border:1px solid #b19357;"></textarea>
                    </div>

                    <div class="col-12 col-md-6 col-xl-6">
                        <div>
                            <input type="hidden" class="form-control rounded" name="tracking" id="track" placeholder="" style="border:1px solid #895c00;" readonly>
                        </div>
                    </div>

                    <p class="color-mid">We will be contacting you to schedule an ocular visit.</p>

                    <div class="mb-4">
                        <button type="submit" class="btn bg-color-light px-4 rounded-3 fw-bold">
                            Submit
                        </button>
                    </div>

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

</div> -->

<!--
    <div class="container">

        <div class="my-5" data-aos="fade-up" data-aos-duration="2000">
            <div class="my-5 text-center">
                <h1 class="color-mid fw-bold">Get in Touch</h1>
            </div>
            <form action="{{ url('contactUs') }}" class="form-contact" method="POST">@csrf
                <div class="row">

                    <div class="col-md-6 text-start color-mid">
        
                        <div class="mb-4">
                            <label for="fullname" class="form-label fw-bold">Full Name *</label>
                            <input type="text" class="form-control rounded" name="name" id="fullname" placeholder="" style="border:1px solid #895c00;">
                            @error('name')
        <span class="text-danger">{{ $message }}</span>
    @enderror
                        </div>
        
                        <div class="row gy-4 mb-4">
                            <div class="col-12 col-md-6 col-xl-6">
                                <div>
                                    <label for="email" class="form-label fw-bold">Email Address*</label>
                                    <input type="email" class="form-control rounded" name="email" id="email" placeholder="" style="border:1px solid #895c00;">
                                    @error('email')
        <span class="text-danger">{{ $message }}</span>
    @enderror
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-xl-6">
                                <div>
                                    <label for="contact" class="form-label fw-bold">Contact No. *</label>
                                    <input type="number" class="form-control rounded" name="contact" id="contact" placeholder="" style="border:1px solid #895c00;">
                                    @error('contact')
        <span class="text-danger">{{ $message }}</span>
    @enderror
                                </div>
                            </div>
                        </div>
        
                    </div>
        
                    <div class="col-md-6 color-mid">
                        <div class="mb-4">
                            <label for="message" class="form-label fw-bold">Message *</label>
                            <textarea type="text" class="form-control rounded" rows="5" name="message" id="message"
                                style="border:1px solid #895c00;"></textarea>
                            @error('message')
        <span class="text-danger">{{ $message }}</span>
    @enderror
                        </div>
                    </div>
        
                </div>
        
                <div class="mb-4 text-center">
                    <button type="submit" class="btn bg-color-light px-4 rounded-3 fw-bold">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
    -->
<style>
    :root {
        --d: 700ms;
        --e: cubic-bezier(0.19, 1, 0.22, 1);
        --font-sans: 'Rubik', sans-serif;
        --font-serif: 'Cardo', serif;
    }

    main {
        box-sizing: border-box;
        height: 100%;
        display: grid;
        place-items: center;
    }

    .page-content {
        display: grid;
        grid-gap: 3rem;
        padding: 5rem;
        max-width: 1024px;
        margin: 0 auto;
        font-family: var(--font-sans);
    }

    @media (min-width: 600px) {
        .page-content {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 800px) {
        .page-content {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .card {
        position: relative;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        padding: 1rem;
        width: 100%;
        text-align: center;
        color: whitesmoke;
        background-color: whitesmoke;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
    }

    @media (min-width: 600px) {
        .card {
            height: 575px;

        }
    }

    .card:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        background-size: cover;
        background-position: 0 0;
        cursor: pointer;
        transition: transform calc(var(--d) * 1.5) var(--e);
        pointer-events: none;
    }

    .card:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200%;
        cursor: pointer;
        pointer-events: none;
        /*background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);*/
        transform: translateY(-50%);
        transition: transform calc(var(--d) * 2) var(--e);
    }

    .card:nth-child(1):before {
        background-image: url("{{ asset('images/new-patio.jpg') }}");
        background-size: contain;
    }

    .card:nth-child(2):before {
        background-image: url("{{ asset('images/new-restaurant.jpg') }}");
        /* background-position: -500px 0; */
        background-size: contain;
    }

    .card:nth-child(3):before {
        background-image: url("{{ asset('images/new-meeting.jpg') }}");
        /* background-position: -650px 0; */
        background-size: contain;
    }

    .card:nth-child(4):before {
        background-image: url("{{ asset('images/new-function.jpg') }}");
        /* background-position: -295px 0; */
        background-size: contain;
    }

    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0.5rem;
        transition: transform var(--d) var(--e);
        z-index: 1;
    }

    .content>*+* {
        margin-top: 1rem;
    }

    .title {
        font-size: 2rem;
        font-weight: bold;
        line-height: 1.2;
    }

    /* Style for the title on hover */
    .card:hover .title,
    .card:focus-within .title {
        transform: translateY(0);
        /* Bring the title back to its original position */
    }

    @media (min-width: 600px) {
        .title {
            transform: translateY(10px);
            /* Move the title down by 20px initially */
            transition: transform var(--d) var(--e);
            /* Add a smooth transition */
        }

        .title-function {
            transform: translateY(-35px);
            /* Move the title down by 20px initially */
            transition: transform var(--d) var(--e);
            /* Add a smooth transition */
        }

        .title-meeting {
            transform: translateY(-35px);
            /* Move the title down by 20px initially */
            transition: transform var(--d) var(--e);
            /* Add a smooth transition */
        }
    }

    .copy {
        /* font-family: var(--font-serif); */
        font-size: 1.125rem;
        /* font-style: italic; */
        line-height: 1.35;
    }

    /* .btn {
            cursor: pointer;
            margin-top: 1.5rem;
            padding: 0.75rem 1.5rem;
            font-size: 0.65rem;
            font-weight: bold;
            letter-spacing: 0.025rem;
            text-transform: uppercase;
            color: white;
            background-color: black;
            border: none;
        }

        .btn:hover {
            background-color: #0d0d0d;
        }

        .btn:focus {
            outline: 1px dashed yellow;
            outline-offset: 3px;
        } */

    @media (hover: hover) and (min-width: 600px) {
        .card:after {
            transform: translateY(0);
        }

        .content {
            transform: translateY(calc(100% - 4.5rem));
        }

        .content>*:not(.title) {
            opacity: 0;
            transform: translateY(1rem);
            transition: transform var(--d) var(--e), opacity var(--d) var(--e);
        }

        .card:hover,
        .card:focus-within {
            align-items: center;
        }

        .card:hover:before,
        .card:focus-within:before {
            transform: translateY(-4%);
        }

        .card:hover:after,
        .card:focus-within:after {
            transform: translateY(-50%);
        }

        .card:hover .content,
        .card:focus-within .content {
            transform: translateY(0);
        }

        .card:hover .content>*:not(.title),
        .card:focus-within .content>*:not(.title) {
            opacity: 1;
            transform: translateY(0);
            transition-delay: calc(var(--d) / 8);
        }

        .card:focus-within:before,
        .card:focus-within:after,
        .card:focus-within .content,
        .card:focus-within .content>*:not(.title) {
            transition-duration: 0s;
        }
    }

    /* Add the following CSS to your stylesheet */
    .text-center img[id^="thumbnail-"] {
        transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
        /* Add a smooth transition effect for both transform and margin */
    }

    .text-center img[id^="thumbnail-"]:hover {
        transform: scale(1.1);
        /* Increase the scale on hover */
        margin-left: 10px;
        margin-right: 10px;
        /* Move the hovered thumbnail up by 10px (you can adjust the value) */
    }

    .text-center img[id^="thumbnail-"]:not(:hover) {
        margin: 0;
        /* Reset the margin for non-hovered thumbnails */
    }
</style>
@endsection

@section('js')
<script>
    // // Get references to the main image and the thumbnail images.
    // const mainImage = document.querySelector('.modal-body .card-img-top');
    // const thumbnails = document.querySelectorAll('.text-center img[id^="thumbnail-"]');

    // // Add click event listeners to the thumbnails.
    // thumbnails.forEach((thumbnail) => {
    //     thumbnail.addEventListener('click', () => {
    //         // Set the main image source to the clicked thumbnail's source.
    //         mainImage.src = thumbnail.src;
    //     });
    // });

    // Get references to the main image and the thumbnail images for the first modal.
    const mainImage1 = document.querySelector('#patioModal .modal-body .card-img-top');
    const thumbnails1 = document.querySelectorAll('#patioModal .text-center img[id^="thumbnail-"]');

    // Add click event listeners to the thumbnails of the first modal.
    thumbnails1.forEach((thumbnail) => {
        thumbnail.addEventListener('click', () => {
            mainImage1.src = thumbnail.src;
        });
    });

    const mainImage2 = document.querySelector('#restaurantModal .modal-body .card-img-top');
    const thumbnails2 = document.querySelectorAll('#restaurantModal .text-center img[id^="thumbnail-"]');

    thumbnails2.forEach((thumbnail) => {
        thumbnail.addEventListener('click', () => {
            mainImage2.src = thumbnail.src;
        });
    });

    const mainImage3 = document.querySelector('#meetingModal .modal-body .card-img-top');
    const thumbnails3 = document.querySelectorAll('#meetingModal .text-center img[id^="thumbnail-"]');

    thumbnails3.forEach((thumbnail) => {
        thumbnail.addEventListener('click', () => {
            mainImage3.src = thumbnail.src;
        });
    });

    const mainImage4 = document.querySelector('#functionModal .modal-body .card-img-top');
    const thumbnails4 = document.querySelectorAll('#functionModal .text-center img[id^="thumbnail-"]');

    thumbnails4.forEach((thumbnail) => {
        thumbnail.addEventListener('click', () => {
            mainImage4.src = thumbnail.src;
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('.form-dining').submit(function(e) {
            e.preventDefault();

            $.ajax({
                method: "POST",
                url: "{{ url('dining-inquiry') }}",
                data: $(this).serialize(),
                success: function(response) {
                    showSuccessAlert();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    showErrorAlert();
                }
            });

            function showSuccessAlert() {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    text: 'Message sent successfully!',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true,
                }).then(function() {
                    location.reload();
                });
            }

            function showErrorAlert() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Message sending failed!',
                    showConfirmButton: false,
                    timer: 1000,
                });
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('.form-contact').submit(function(e) {
            e.preventDefault();

            $.ajax({
                method: "POST",
                url: "{{ url('contactUs') }}",
                data: $(this).serialize(),
                success: function(response) {
                    showSuccessAlert();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                        showFieldErrors(jqXHR.responseJSON.errors);
                    } else {
                        showErrorAlert('Failed to submit.');
                    }
                }
            });

            function showSuccessAlert() {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    text: 'Message sent successfully!',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: true,
                }).then(function() {
                    location.reload();
                });
            }

            function showErrorAlert(message) {
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    text: message,
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                });
            }

            function showFieldErrors(errors) {
                for (var key in errors) {
                    if (errors.hasOwnProperty(key)) {
                        showErrorAlert(errors[key][0]);
                    }
                }
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        // Set the interval for auto-scrolling (10 seconds)
        var interval = 10000;

        // Start auto-scrolling
        setInterval(function() {
            $('#carouselExample').carousel('next');
        }, interval);

        // Apply inline styles to the images
        $('.carousel .carousel-item img').css({
            'object-fit': 'cover',
            'object-position': 'center',
            'width': '100%',
            'height': '40rem',
            'background-position': 'center center',
            'background-size': 'cover'
        });
    });
</script>
<script>
    let x = Math.floor(Math.random() * 100000); // Generate a random number between 0 and 99999
    let paddedNumber = x.toString().padStart(5, '0'); // Pad with leading zeros to ensure 5 digits
    document.getElementById("track").value = paddedNumber;
</script>
@endsection