@extends('frontend.layouts.app')

@section('title')

@endsection

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

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

<div class="container mb-5">
    <div class="text-center my-5" data-aos="fade-down">
        <h1 class="fw-bold color-mid">Vacation</h1>
    </div>
    <p class="color-mid text-center mb-5" data-aos="fade-down">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>

    <h1 class="fw-bold color-mid">Package Inclusions</h1>
    <br>
    <img src="{{ asset('vacations/' . $contents->package) }}" class="d-block align-middle img-fluid" alt="..." data-aos="flip-up">

    <div class="text-center my-5">
        <a class="btn bg-color-light rounded-1 fw-bold" href="{{ url('/offer-form') }}">Reserve Now</a>
    </div>

    <div class="text-center my-4">
        <h1 class="fw-bold color-mid" data-aos="fade-down">What we offer</h1>
    </div>

    <p class="color-mid text-center" data-aos="fade-down">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>

</div>

<section class="splide splide4" aria-label="Splide Basic HTML Example" data-aos="zoom-in-up">
    <div class="splide__track">
        <ul class="splide__list text-center gap-2">
            <li class="splide__slide"><img src="{{ asset('images/vacation-img1.jpg') }}" class="img-fluid" alt="Vacation Image"></li>
            <li class="splide__slide"><img src="{{ asset('images/vacation-img2.jpg') }}" class="img-fluid" alt="Vacation Image"></li>
            <li class="splide__slide"><img src="{{ asset('images/vacation-img3.jpg') }}" class="img-fluid" alt="Vacation Image"></li>
            <li class="splide__slide"><img src="{{ asset('images/vacation-img4.jpg') }}" class="img-fluid" alt="Vacation Image"></li>
        </ul>
    </div>
</section>

<div class="text-center my-5">
    <a href="{{ url('/tours') }}" class="btn bg-color-light rounded-1 fw-bold" >View More</a>
</div>

<div class="container 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 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>

@endsection

@section('js')
<script>
    var splide4 = new Splide('.splide4', {
        type: 'loop',
        height: '30rem',
        focus: 'center',
        autoWidth: true,
        autoplay: true,
    });

    splide4.mount();
</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) {
                    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>
    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