@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Corporate Meetings | 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="Corporate Meetings | 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="Corporate Meetings | Anisabel Suites" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')
<div>
    <img src="{{ asset('images/banner-corporate.jpg') }}" class="d-block align-middle img-fluid" alt="...">
</div>

<div class="container mb-5">
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="text-center my-5">
        <h1 class="fw-bold color-mid">Corporate Meetings</h1>
    </div>
</div>

<section class="main">
    <div class="wrap wrap--1">
        <div class="card-container container--1">
            <h1 class="text-white fw-bold">Group Live In</h1>
            <p class="text-white">Anisabel Suites with 18 rooms is conveniently located just 15 minutes from the airport
                and at city center makes travelling to and from the venue a much more comfortable experience
                for an exclusive Corporate Group Live in packaged with hotel rooms and meeting venue.
            </p>
            <button class="btn bg-color-light rounded-1 fw-bold"><a href="{{ url('group-livein') }}">View Package Details</a></button>
        </div>
    </div>
    <div class="wrap wrap--3">
        <div class="card-container container--3">
            <h1 class="text-white fw-bold">Corporate Meeting</h1>
            <p class="text-white">Anisabel function room can host 12-18 business colleagues with on-line facilities for half day or
                full day business meetings, trainings, product launching.
            </p>
            <button class="btn bg-color-light rounded-1 fw-bold"><a href="{{ url('corporate') }}">View Package Details</a></button>
        </div>
    </div>
</section>

<div class="container my-5">
    <div class="my-5 text-center">
        <h1 class="color-mid fw-bold">Get in Touch</h1>
    </div>

    <form action="{{ url('contactOffer') }}" 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 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> -->
                </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>

<style>
    .container--1 {
        background: url("{{ asset('images/offer-img1.jpg') }}");
        background-size: cover;
    }

    .container--3 {
        background: url("{{ asset('images/offer-img3.jpg') }}");
        background-size: cover;
    }

    .container--1:hover {
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("{{ asset('images/offer-img1.jpg') }}");
        background-size: cover;
    }

    .container--3:hover {
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("{{ asset('images/offer-img3.jpg') }}");
        background-size: cover;
    }

    .card-container p,
    .card-container button {
        transform: translateY(370px);
        /* Initially hide the p and button */
        transition: transform 0.9s;
        /* Add a transition for smooth animation */
    }

    .card-container:hover p,
    .card-container:hover button {
        transform: translateY(0);
        /* Slide up the p and button on hover */
    }

    .card-container:hover h1 {
        transform: translateY(0);
        /* Slide the h1 up to join the p and button */
    }

    .card-container h1 {
        /* font-size: 3.2rem;
    padding-top: 2rem; */

        transform: translateY(350px);
        /* Initially hide the h1 at the lower end */
        transition: transform 0.8s;
        /* Add a transition for smooth animation */
    }

    .main {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .wrap {
        margin: 2rem;
        transform-style: preserve-3d;
        transform: perspective(100rem);
        cursor: pointer;
    }

    .card-container {
        --rX: 0;
        --rY: 0;
        --bX: 50%;
        --bY: 80%;
        width: 23rem;
        height: 28rem;
        border: 1px solid var(--background-color);
        border-radius: 1.1rem;
        padding: 2rem;
        display: flex;
        align-items: flex-start;
        position: relative;
        transform: rotateX(calc(var(--rX) * 0.4deg)) rotateY(calc(var(--rY) * 0.4deg));
        background-position: var(--bX) var(--bY);
        background-size: cover;
        box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.2);
        transition: transform 2.6s 2s;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .card-container::before,
    .card-container::after {
        content: "";
        width: 2rem;
        height: 2rem;
        border: 1px solid #fff;
        position: absolute;
        z-index: 2;
        opacity: 0.3;
        transition: 0.3s;
    }

    .card-container::before {
        top: 2rem;
        right: 2rem;
        border-bottom-width: 0;
        border-left-width: 0;
    }

    .card-container::after {
        bottom: 2rem;
        left: 2rem;
        border-top-width: 0;
        border-right-width: 0;
    }

    .container--active {
        transition: none;
    }

    .wrap:hover .container::before,
    .wrap:hover .container::after {
        width: calc(100% - 4rem);
        height: calc(100% - 4rem);
    }

    .abs-site-link {
        position: fixed;
        bottom: 20px;
        left: 20px;
        color: rgba(0, 0, 0, 0.6);
        font-size: 1.6rem;
    }

    @media (max-width: 768px) {

        .card-container p,
        .card-container button,
        .card-container h1 {
            transform: translateY(0);

        }
    }

    button a {
        color: inherit !important;
    }
</style>
@endsection

@section('js')
<script>
    class parallaxTiltEffect {
        constructor({
            element,
            tiltEffect
        }) {
            this.element = element;
            this.container = this.element.querySelector(".card-container");
            this.size = [300, 360];
            [this.w, this.h] = this.size;
            this.tiltEffect = tiltEffect;
            this.mouseOnComponent = false;
            this.handleMouseMove = this.handleMouseMove.bind(this);
            this.handleMouseEnter = this.handleMouseEnter.bind(this);
            this.handleMouseLeave = this.handleMouseLeave.bind(this);
            this.defaultStates = this.defaultStates.bind(this);
            this.setProperty = this.setProperty.bind(this);
            this.init = this.init.bind(this);
            this.init();
            console.log(element);
        }
        handleMouseMove(event) {
            const {
                offsetX,
                offsetY
            } = event;
            let X;
            let Y;
            if (this.tiltEffect === "reverse") {
                X = (offsetX - this.w / 2) / 3 / 3;
                Y = -(offsetY - this.h / 2) / 3 / 3;
            } else if (this.tiltEffect === "normal") {
                X = -(offsetX - this.w / 2) / 3 / 3;
                Y = (offsetY - this.h / 2) / 3 / 3;
            }
            this.setProperty("--rY", X.toFixed(2));
            this.setProperty("--rX", Y.toFixed(2));
            this.setProperty("--bY", 80 - (X / 4).toFixed(2) + "%");
            this.setProperty("--bX", 50 - (Y / 4).toFixed(2) + "%");
        }
        handleMouseEnter() {
            this.mouseOnComponent = true;
            this.container.classList.add("container--active");
        }
        handleMouseLeave() {
            this.mouseOnComponent = false;
            this.defaultStates();
        }
        defaultStates() {
            this.container.classList.remove("container--active");
            this.setProperty("--rY", 0);
            this.setProperty("--rX", 0);
            this.setProperty("--bY", "80%");
            this.setProperty("--bX", "50%");
        }
        setProperty(p, v) {
            return this.container.style.setProperty(p, v);
        }
        init() {
            this.element.addEventListener("mousemove", this.handleMouseMove);
            this.element.addEventListener("mouseenter", this.handleMouseEnter);
            this.element.addEventListener("mouseleave", this.handleMouseLeave);
        }
    }
    const $ = (e) => document.querySelector(e);
    const wrap1 = new parallaxTiltEffect({
        element: $(".wrap--1"),
        tiltEffect: "reverse"
    });
    // const wrap2 = new parallaxTiltEffect({
    //     element: $(".wrap--2"),
    //     tiltEffect: "normal"
    // });
    const wrap3 = new parallaxTiltEffect({
        element: $(".wrap--3"),
        tiltEffect: "reverse"
    });
</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