@extends('layout.app')
@section('content')
    <style>
        .contactPage {
            padding-top: 12rem; /* Adjust the padding to ensure the logo does not conflict with the section */
        }
    </style>
{{--    <div class="preLoader black">--}}
{{--        <img src="{{asset('images/logo.webp')}}" alt="img" class="filterLight">--}}
{{--    </div>--}}
{{--    <div class="preLoader white"></div>--}}

{{--    <section class="innerBanner">--}}
{{--        <img src="{{asset('images/inrbg.webp')}}" class="w-100" alt="img">--}}
{{--        <div class="container">--}}
{{--            <h2>Contact Us</h2>--}}
{{--        </div>--}}
{{--    </section>--}}




    <main class="contactPage">
        <section class="contactSec">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <figure>
                            <img src="{{asset('images/End of Season Shoot flyer.webp')}}" class="img-fluid" alt="image">
                        </figure>
                    </div>
                    <div class="col-md-6 pl-5">
                        <h5 class="subtitle aos-init aos-animate" data-aos="fade-up">Bush River Resort</h5>
                        <h2 class="heading mb-4" data-aos="fade-up">Events</h2>
                        <form class="contactForm contact-form" action="{{ route('front.events-registration') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="customer_name" placeholder="Customer Name">
                                </div>
                                <div class="col-md-6">
                                    <input type="email" class="form-control" name="email" placeholder="Email">
                                </div>
                                <div class="col-12">
                                    <input type="tel" class="form-control" name="phone_number" placeholder="Phone Number">
                                </div>
                                <div class="col-md-6">
                                    <input type="number" class="form-control" name="ticket_number" id="personNumber" placeholder="Number of Tickets">                                </div>
                                <div class="col-12">
                                    <input type="text" class="form-control" name="card_name" placeholder="Name on Card">
                                </div>
                                <div class="col-md-6">
                                    <input type="number" class="form-control" maxlength="16" name="card_number" placeholder="Card Number">
                                </div>
                                <div class="col-md-6">
                                    <input type="number" class="form-control" maxlength="3" name="cvv_code" placeholder="CVV Code">
                                </div>
                                <div class="col-12">
                                    <input type="text" class="form-control" name="exp_date" id="expiryDate" placeholder="mm/yyyy">                                </div>
                                <div class="col-12">
                                    <input type="text" class="form-control" name="billing_zip_code" placeholder="Billing Zip Code">
                                </div>
                                <div class="col-12">
                                    <button class="btn themeBtn" type="submit" id="registerButton">Reserve Now</button>                                </div>
                                <div class="col-12" id="resultDisplay"></div>
                            </div>
                        </form>
                        <div id="signupFormResult"></div>
                    </div>
                </div>
            </div>
        </section>

    </main>

@endsection
@push('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var personNumberInput = $("#personNumber");
            var resultDisplay = $("#resultDisplay");

            personNumberInput.on("input", function() {
                var personNumber = parseInt(personNumberInput.val());

                if (!isNaN(personNumber)) {
                    var totalPrice = personNumber * 150;

                    resultDisplay.text("Total Price: $" + totalPrice);
                } else {
                    resultDisplay.text("Please enter a valid number.");
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var expiryDateInput = document.getElementById('expiryDate');

            expiryDateInput.addEventListener('input', function() {
                var cleanedValue = this.value.replace(/\D/g, '');

                if (cleanedValue.length > 2) {
                    cleanedValue = cleanedValue.slice(0, 2) + '/' + cleanedValue.slice(2);
                }

                var parts = cleanedValue.split('/');

                if (parts.length === 2 && parts[1].length > 4) {
                    parts[1] = parts[1].slice(0, 4);
                    cleanedValue = parts.join('/');
                }

                var month = parseInt(parts[0], 10);
                var year = parseInt(parts[1], 10);

                if (month < 1 || month > 12 || year < 2024 || year > 2029) {
                    this.setCustomValidity('Please enter a valid month (1-12) and year (2024-2029) in the format mm/yyyy.');
                } else {
                    this.setCustomValidity('');
                }

                this.value = cleanedValue;
            });
        });
    </script>

@endpush