@extends('layouts.app')

@section('title', 'Services')

@section('content')


@include('layouts.navbar')
<div class="relative w-full h-full">
    <!-- Background Image (Hidden on md and smaller screens) -->
    <div class="relative flex items-center justify-center w-full h-full text-6xl font-light text-white font-poppins hidden md:block">
        <img src="{{ asset('assets/MAIN MATERIALS/web_banner.webp') }}" alt="logo" class="w-full md:h-full" </div>
    </div>
    <div class="relative flex items-center justify-center w-full h-full text-6xl font-light text-white font-poppins block md:hidden">
        <img src="{{ asset('assets/MAIN MATERIALS/mobile_banner.webp') }}" alt="logo" class="w-full md:h-full" </div>
    </div>
</div>
<div class="relative flex w-full h-full">
    <!-- Background Image (Visible on lg and larger screens) -->

    <img src="{{ asset('assets/MAIN MATERIALS/350.png') }}" alt="logo" class="absolute hidden w-full h-full lg:block">

    <div class=" bg-[#38247b]">
        <div class="grid grid-cols-1 lg:grid-cols-3">
            <div>

            </div>
            <div class="relative w-full h-full col-span-2 px-4 md:p-12 ">
                <div class="items-center p-4 text-2xl text-white berkshire-swash-regular xl:text-4xl 2xl:text-6xl">
                    Buy
                    your
                    Ticket now!</div>
                <!-- Ticket Table -->
                <div class="relative w-full">

                    <div class="relative mx-auto tracking-wider 2xl:p-10 lg:w-full font-poppins">
                        <!-- Header Row -->
                        <div class="flex font-semibold text-center text-white">
                            <div class="flex-1 px-2 py-4 text-sm md:text-2xl lg:text-base">Tickets</div>
                            <div class="flex-1 px-2 py-4 text-sm md:text-2xl lg:text-base">Date & Time</div>
                            <div class="flex-1 hidden px-2 py-4 xl:block"></div>
                            <div class="flex-1 px-2 py-4 text-sm md:text-2xl lg:text-base"></div>
                        </div>
                        <!-- Day 1 -->
                        <div class="flex border-t border-yellow-exp">
                            <div class="flex-1 px-2 py-4">
                                <div class="flex justify-center space-x-2">
                                    <button type="button" id="decrement-1"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">-</button>
                                    <span id="counter-1"
                                        class="bg-white text-black text-[0.7rem] md:text-base px-2 py-1 rounded-md">0</span>
                                    <button type="button" id="increment-1"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">+</button>
                                </div>
                            </div>
                            <div class="py-4 px-2 flex-1 text-center text-white text-[0.6rem] md:text-base lg:text-sm">
                                <div>December 27, 2024 | 10:00am - 10:00pm</div>
                            </div>
                            <div class="flex-1 hidden px-2 py-4 font-bold text-center text-white xl:block">Friday</div>
                            <!--<div class="flex-1 px-2 py-4">-->
                            <!--    <div class="flex justify-center">-->
                            <!--        <form action="{{ url('checkout') }}" method="POST">-->
                            <!--            @csrf-->
                            <!--            <input type="hidden" name="tickets[1]" id="hidden-1" value="0">-->
                                        <!-- Hidden input for the day -->
                            <!--            <button type="submit"-->
                            <!--                class="bg-[#fdbb00] text-[#38247b] font-bold px-3 py-1 rounded-full uppercase text-[0.6rem] md:text-base md:w-32 lg:text-sm">Checkout</button>-->
                            <!--        </form>-->
                            <!--    </div>-->
                            <!--</div>-->
                        </div>

                        <!-- Day 2 -->
                        <div class="flex border-t border-yellow-exp">
                            <div class="flex-1 px-2 py-4 md:mt-0 2xl:mt-0">
                                <div class="flex items-center justify-center space-x-2">
                                    <button id="decrement-2"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        -
                                    </button>
                                    <span id="counter-2"
                                        class="bg-white text-black text-[0.7rem] md:text-base px-2 py-1 rounded-md">
                                        0
                                    </span>
                                    <button id="increment-2"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        +
                                    </button>
                                </div>
                            </div>
                            <div class="py-4 px-2 flex-1 text-center text-white text-[0.6rem] md:text-base lg:text-sm">
                                <div>December 28, 2024 | 10:00am - 10:00pm</div>
                            </div>
                            <div class="flex-1 hidden px-2 py-4 font-bold text-center text-white xl:block">Saturday</div>
                            <!--<div class="flex-1 px-2 py-4">-->
                            <!--    <div class="flex justify-center">-->
                            <!--        <form action="{{ route('checkout') }}" method="POST" class="checkout-form">-->
                            <!--            @csrf-->
                            <!--            <input type="hidden" name="tickets[2]" id="hidden-2" value="0">-->
                            <!--            <button type="submit"-->
                            <!--                class="bg-[#fdbb00] text-[#38247b] font-bold px-3 py-1 rounded-full uppercase text-[0.6rem] md:text-base md:w-32 lg:text-sm">-->
                            <!--                Checkout-->
                            <!--            </button>-->
                            <!--        </form>-->
                            <!--    </div>-->
                            <!--</div>-->
                        </div>

                        <!-- Day 3 -->
                        <div class="flex border-t border-yellow-exp">
                            <div class="flex-1 px-2 py-4 md:mt-0 2xl:mt-0">
                                <div class="flex items-center justify-center space-x-2">
                                    <button id="decrement-3"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        -
                                    </button>
                                    <span id="counter-3"
                                        class="bg-white text-black text-[0.7rem] md:text-base px-2 py-1 rounded-md">
                                        0
                                    </span>
                                    <button id="increment-3"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        +
                                    </button>
                                </div>
                            </div>
                            <div class="py-4 px-2 flex-1 text-center text-white text-[0.6rem] md:text-base lg:text-sm">
                                <div>December 29, 2024 | 10:00am - 10:00pm</div>
                            </div>
                            <div class="flex-1 hidden px-2 py-4 font-bold text-center text-white xl:block">Sunday</div>
                            <!--<div class="flex-1 px-2 py-4">-->
                            <!--    <div class="flex justify-center">-->
                            <!--        <form action="{{ route('checkout') }}" method="POST" class="checkout-form">-->
                            <!--            @csrf-->
                            <!--            <input type="hidden" name="tickets[3]" id="hidden-3" value="0">-->
                            <!--            <button type="submit"-->
                            <!--                class="bg-[#fdbb00] text-[#38247b] font-bold px-3 py-1 rounded-full uppercase text-[0.6rem] md:text-base md:w-32 lg:text-sm">-->
                            <!--                Checkout-->
                            <!--            </button>-->
                            <!--        </form>-->
                            <!--    </div>-->
                            <!--</div>-->
                        </div>

                        <!-- Day 4 -->
                        <div class="flex border-t border-yellow-exp">
                            <div class="flex-1 px-2 py-4 md:mt-0 2xl:mt-0">
                                <div class="flex items-center justify-center space-x-2">
                                    <button id="decrement-4"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        -
                                    </button>
                                    <span id="counter-4"
                                        class="bg-white text-black text-[0.7rem] md:text-base px-2 py-1 rounded-md">
                                        0
                                    </span>
                                    <button id="increment-4"
                                        class="bg-gray-300 text-black text-[0.7rem] md:text-base px-2 py-1 rounded-full">
                                        +
                                    </button>
                                </div>
                            </div>
                            <div class="py-4 px-2 flex-1 text-center text-white text-[0.6rem] md:text-base lg:text-sm">
                                <div>December 30, 2024 | 10:00am - 10:00pm</div>
                            </div>
                            <div class="flex-1 hidden px-2 py-4 font-bold text-center text-white xl:block">Monday</div>
                            <!--<div class="flex-1 px-2 py-4">-->
                            <!--    <div class="flex justify-center">-->
                            <!--        <form action="{{ route('checkout') }}" method="POST" class="checkout-form">-->
                            <!--            @csrf-->
                            <!--            <input type="hidden" name="tickets[4]" id="hidden-4" value="0">-->
                            <!--            <button type="submit"-->
                            <!--                class="bg-[#fdbb00] text-[#38247b] font-bold px-3 py-1 rounded-full uppercase text-[0.6rem] md:text-base md:w-32 lg:text-sm">-->
                            <!--                Checkout-->
                            <!--            </button>-->
                            <!--        </form>-->
                            <!--    </div>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="flex justify-center my-4">
                        <form action="{{ route('checkout') }}" method="POST" class="checkout-form">
                            @csrf
                            <input type="hidden" name="tickets[1]" id="hidden-1" value="0">
                            <input type="hidden" name="tickets[2]" id="hidden-2" value="0">
                            <input type="hidden" name="tickets[3]" id="hidden-3" value="0">
                            <input type="hidden" name="tickets[4]" id="hidden-4" value="0">

                            <button type="submit" class="bg-[#fdbb00] text-[#38247b] font-bold px-3 py-1 rounded-full uppercase text-[0.6rem] md:text-base md:w-32 lg:text-sm">
                                Checkout
                            </button>
                        </form>
                    </div>

                </div>

                <div class="flex justify-center w-full ">
                    <img src="{{ asset('assets/MAIN MATERIALS/dots.png') }}" alt="logo"
                        class="w-[70rem] object-cover">
                </div>
                <div class="relative flex justify-center w-full py-10">
                    <h1
                        class="justify-center text-sm font-medium text-center text-white font-poppins md:text-xl lg:text-sm">
                        QR
                        Code will be
                        provided
                        after the purchase. It will serve as your entry and exit pass in the venue.</h1>
                </div>
                <div class="relative flex items-center justify-center py-4 2xl:w-full">
                    <img src="{{ asset('assets/MAIN MATERIALS/BRANDS LOGO/BRAND LOGO.webp') }}" alt="logo"
                        class="w-[30rem] 2xl:w-[50rem] flex justify-center">
                </div>
            </div>
        </div>

    </div>
</div>


</div>
@include('layouts.footer')

{{-- <script src="menu.js" defer></script> --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {

        function handleCounter(incrementId, decrementId, counterId, hiddenInputId) {
            const incrementButton = document.getElementById(incrementId);
            const decrementButton = document.getElementById(decrementId);
            const counterSpan = document.getElementById(counterId);
            const hiddenInput = document.getElementById(hiddenInputId);

            if (!incrementButton || !decrementButton || !counterSpan || !hiddenInput) {
                console.error('One or more elements not found for:', incrementId, decrementId, counterId,
                    hiddenInputId);
                return;
            }

            let count = parseInt(counterSpan.textContent) || 0;

            function updateTotalAmount() {
                const totalAmountInput = document.getElementById('hidden-total-amount');
                const totalAmountDisplay = document.getElementById('total-amount');

                if (!totalAmountInput || !totalAmountDisplay) {
                    console.error('Total amount input or display element not found.');
                    return;
                }

                const unitPrice = parseInt(hiddenInput.dataset.price) || 0;
                const totalAmount = count * unitPrice;
                totalAmountInput.value = totalAmount;
                totalAmountDisplay.textContent = totalAmount;

                console.log(`Updated Total Amount: ${totalAmount}`);
            }

            function updateAllForms() {
                const allHiddenInputs = document.querySelectorAll('.checkout-form input[id^="hidden-"]');
                allHiddenInputs.forEach((input) => {
                    const dayId = input.id.replace('hidden-', '');
                    const counterSpan = document.getElementById(`counter-${dayId}`);
                    if (counterSpan) {
                        input.value = parseInt(counterSpan.textContent) || 0;
                    }
                });
            }

            incrementButton.addEventListener('click', () => {
                count++;
                counterSpan.textContent = count;
                hiddenInput.value = count;
                updateTotalAmount();
                updateAllForms();
            });

            decrementButton.addEventListener('click', () => {
                if (count > 0) { // Ensure the count doesn't go below 0
                    count--;
                    counterSpan.textContent = count;
                    hiddenInput.value = count;
                    updateTotalAmount();
                    updateAllForms();
                }
            });

            updateTotalAmount();
        }

        // Call handleCounter for each day with unique IDs
        handleCounter('increment-1', 'decrement-1', 'counter-1', 'hidden-1'); // Day 1
        handleCounter('increment-2', 'decrement-2', 'counter-2', 'hidden-2'); // Day 2
        handleCounter('increment-3', 'decrement-3', 'counter-3', 'hidden-3'); // Day 3
        handleCounter('increment-4', 'decrement-4', 'counter-4', 'hidden-4'); // Day 4

        function updateTotalAmountOnLoad() {
            let totalAmount = 0;
            const quantities = document.querySelectorAll('.checkout-form input[id^="hidden-"]');
            const amounts = document.querySelectorAll('.checkout-form input[id^="amount-"]');

            quantities.forEach((quantityInput, index) => {
                const quantity = parseInt(quantityInput.value) || 0;
                const amountInput = amounts[index];

                if (!amountInput) {
                    console.error('Amount input not found for index:', index);
                    return;
                }

                const unitPrice = parseInt(amountInput.value) || 0;
                totalAmount += quantity * unitPrice;
            });

            const totalAmountInput = document.getElementById('hidden-total-amount');
            const totalAmountDisplay = document.getElementById('total-amount');

            if (!totalAmountInput || !totalAmountDisplay) {
                console.error('Total amount input or display element not found on load.');
                return;
            }

            totalAmountInput.value = totalAmount;
            totalAmountDisplay.textContent = totalAmount;
        }

        updateTotalAmountOnLoad();
    });
</script>

@endsection