@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Special 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="Special Events | Anisabel Suites" />
<meta property="og:description" content="" />
<meta property="og:site_name" content="Special 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>
    <img src="{{ asset('images/banner-offers.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">Event Serivces</h1>
    </div>

        <p class="color-mid mb-5" data-aos="fade-down" style="text-align: center;">
Anisabel Suites provides comprehensive event services, ensuring seamless coordination for unforgettable gatherings. From meticulous planning to flawless execution, we tailor every detail to perfection.
    </p>

    <!-- <h1 class="fw-bold color-mid">List of Packages</h1>

     <ul class="color-mid" style="list-style-type:square;">
        <p class="fst-italic fs-5"><b>Special Occasions Package - P1,500</b> (Price Nett per Person)</p>
        <div class="ms-4">
            <li>Mother or Father's Day</li>
            <li>Christmas or New Year</li>
            <li>Baptism, Debut or Weddi</li>
            <li>Mother or Father's Day</li>
            <li>Mother or Father's Day</li>
        </div>

    </ul> -->

    <div class="text-center my-5">
        <h1 class="fw-bold color-mid" data-aos="fade-down">Package Inclusions</h1>
    </div>
    <center>
        <img src="{{ asset('events/' . $contents->package) }}" class="d-block align-middle" style= "max-width: 50%; height: auto;"alt="..."  data-aos="flip-left">
    </center>
    <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>

<!--<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>
    $(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>
    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