@extends('frontend.layouts.app')

@section('title')
@endsection

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

@section('content')
<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 active">
                <!-- <div class="image"></div> -->
                <img src="{{ asset('images/banner-offers.jpg') }}" class="d-block align-middle img-fluid" alt="...">
    </div>
    <div class="carousel-item">
        <!-- <div class="image"></div> -->
        <img src="{{ asset('images/banner-corporate.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>


<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">Banquet</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 ($type as $items)
                    <li class="nav-item my-3">
                        <a href="#item-{{ $items->id }}" class="color-light text-decoration-none" data-target="item-{{ $items->id }}">
                            <h3 class="fw-bold">{{ $items->name }}</h3>
                        </a>
                    </li>
                    @endforeach


                </ul>

            </div>
        </div>
    </div>
</nav>

<div class="container">
    @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <div class="text-center my-5" data-aos="fade-down">
        <h1 class="fw-bold color-mid fw-bold">Offers and Packages</h1>
    </div>
</div>
<div class="container mb-5">
    <div class="row mb-4">
        @foreach ($type as $items)
        <div class="col text-center fw-bold">
            <a href="#item-{{ $items->id }}" class="color-light text-decoration-none" data-target="item-{{ $items->id }}">
                <h3 class="fw-bold">{{ $items->name }}</h3>
            </a>

        </div>
        |
        @endforeach
        <hr>
    </div>

    @foreach ($type as $items)
    <div id="item-{{ $items->id }}">
        <h1 class="fw-bold color-light mb-3">{{ $items->name }}</h1>
        <div class="row gy-3 mb-5">
            @foreach ($events->where('type', $items->name)->sortBy('price') as $event)
            <div class="col-12 col-md-4">
                <a role="button" data-bs-toggle="modal" data-bs-target="#modal{{ $items->id }}{{ $event->id }}">
                    <div class="p-3 border-brown p-3 rounded-4 text-center">
                        <img src="{{ asset('event-packages/' . $event->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{{ $items->id }}{{ $event->id }}">
                        Add To Cart
                    </a>
                </div>
            </div>

            <div class="modal fade" id="modal{{ $items->id }}{{ $event->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">
                            <div class="row">
                                <div class="col-md-6 text-center">
                                    <img src="{{ asset('event-packages/' . $event->image) }}" class="img-fluid" alt="">
                                </div>
                                <div class="col-md-6 color-mid">
                                    <h2 class="fw-bold">{{ $event->name }}</h2>
                                    <p>Type: {{ $event->type }}</p>
                                    <p>Price: ${{ $event->price }}</p>
                                    <p>Pax: {{ $event->pax }}</p>
                                    <p>Time:
                                    <ul>
                                        @foreach (json_decode($event->time) as $time)
                                        <li>{{ $time }}</li>
                                        @endforeach
                                    </ul>
                                    </p>
                                    <p>Venue:
                                    <ul>
                                        @foreach (json_decode($event->venue) as $venue)
                                        <li>{{ $venue }}</li>
                                        @endforeach
                                    </ul>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-top-0">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <form action="{{ url('/add/cart/' . $event->name . '/' . $event->id . '') }}" method="post">
                                @csrf
                                <button type="submit" class="btn btn-primary">Add To Cart</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach


    <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>

<br>

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

    .container--2 {
        background: url("{{ asset('images/offer-img2.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--2:hover {
        background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url("{{ asset('images/offer-img2.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;
    }

    /* .card-container p {
                                                                                                                                                                            color: rgba(255, 255, 255, 0.6);
                                                                                                                                                                            font-size: 2.2rem;
                                                                                                                                                                        } */

    .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>
    $(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) {
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() {
        // Set the interval for auto-scrolling (10 seconds)
        var interval = 5000;

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