@extends('layout.app')
@section('content')
    <style>
        .aboutpgMain {
            padding-top: 300px; /* Adjust the padding to ensure the logo does not conflict with the section */
        }

        #lunch-request {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            max-height: 150px; /* Adjust the height as needed */
            overflow-y: auto; /* Add a vertical scrollbar if necessary */
        }

        .availability {
            color: black; /* Default color */
        }

        .booked {
            color: red !important; /* Mark booked slots in red */
        }

        .calendar-table tr:nth-child(3) td:last-child,
        .calendar-table tr:nth-child(5) td:last-child {
            color: inherit;
            background: transparent;
        }

        #selectedBirdsTitlePopUp,
            /*#selectedBirdsDetailsPopUp,*/
        #selectedBirdsPaymentPopUp,
        #selectedFoodPaymentPopUp {
            display: none;
        }

        form#optionsForm .subPopup-content .myqty .variation-input {
            height: 50px;
            width: 140px;
            font-size: 1.75rem;
        }

        form#optionsForm .subPopup-content label.myqty {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .btn-success1 {
            background: #28a745 !important;
        }

        .detailsImg .detailsTitle p {
            display: flex !important;
            justify-content: space-between;
            width: 100%;
        }

        .detailsImg .detailsTitle {
            width: 100%;
        }

        .detailsImg .detailsTitle p {
            display: flex !important;
            justify-content: space-between;
            width: 100%;
        }

        .detailsImg,
        .detailsImg .detailsTitle {
            width: 100%;
        }

        button.removeFoodBtn {
            color: #fff;
            background-color: #dc3545;
            padding: 0.5rem 1rem;
            font-size: 1.25rem;
            line-height: 1.5;
            border-radius: 0.3rem;
            border: 0;
        }
    </style>

    <section class="aboutpgMain sportingclaypg">
        <div class="container">
            <div class="row align-items-center flex-row-reverse">
                <div class="col-md-7">
                    <figure class="text-right"><img
                            src="{{ optional($club->getMedia('club_image')->first())->getUrl() }}" class="img-fluid"
                            alt="img"></figure>
                </div>
                <div class="col-md-5">
                    <div class="sportingContent">
                        <span class="subtitle" data-aos="fade-up">{{$data->heading ?? ''}}</span>
                        <h2 class="heading" data-aos="fade-up">{{$data->title ?? ''}}</h2>
                        <p>{!! $data->club_description ?? '' !!}</p>
                        <div data-aos="fade-up">
                            <a href="{{ route('front.contact') }}" class="themeBtn blackbtn">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="sportngPackage quailPage">
        <div class="container">
            <h2 class="heading text-center mb-5">{{$data->packages_title ?? ''}}</h2>
            <div class="row justify-content-center">
                @foreach($quailClubProducts as $product)
                    <div class="col-md-4">
                        <div class="quailBox" data-aos="fade-up">
                            <figure>
                                <img src="{{asset('/uploads/product/'.($product->image ?? ''))}}" class="img-fluid"
                                     alt="img">
                            </figure>
                            <div class="quailContent">
                                <h2>{{$product->name ?? ''}}</h2>
                                <h3>${{$product->price ?? ''}}<sup>/{{$product->type ?? ''}}</sup></h3>


                                <div>
                                    {{--                                    @if(Auth::check() && Auth::user()->roles->first()->name === 'user')--}}
                                    <a href="#" class="themeBtn blackbtn" data-toggle="modal"
                                       data-target="#calndrModal"
                                       data-product-id="{{$product->id}}" data-product-type="{{$product->type}}"
                                       data-product-name="{{$product->name}}"
                                       data-product-price="{{$product->price}}"
                                       data-product-image="{{$product->image}}">Book Now</a>
                                    {{--                                    @else--}}
                                    {{--                                        <a href="#" class="themeBtn blackbtn" data-toggle="modal"--}}
                                    {{--                                           data-target="#loginModal">Book Now</a>--}}
                                    {{--                                    @endif--}}
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="checkoutBtn">
        <a href="javascript:void(0)"><img src="{{asset('images/icons/checkout.webp')}}" alt="checkout"
                                          class="img-fluid"></a>
    </div>

    <div class="calndrPopup modal fade" id="calndrModal" tabindex="-1" role="dialog" aria-labelledby="calndrModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <div class="row no-guuters">
                        <div class="col-md-12">
                            <div class="evntHead">
                                <h3 class="headOne">Quail Club</h3>
                                <h4 style="color: red">Select a date if not booking for today</h4>
                            </div>
                        </div>
                        <div class="col-md-8 d-flex p-0">
                            <div id="evoCalendar1"></div>
                        </div>
                        <div class="col-md-4">
                            <div class="searchScedule">
                                <h4 id="selectedMonth"></h4>
                                <h6 id="selectedDate"></h6>

                                <ul>
                                    <div id="availabilityContainer"></div>
                                </ul>

                                <div class="personParty">
                                    <label>Persons in Party: <input type="number" id="member1" name="members" value="0"
                                                                    min="1" max="3" class="form-control"></label>
                                </div>

                                <a href="javascript:void(0)" class="themeBtn sceduleBtn" data-dismiss="modal"
                                   data-toggle="modal" id="nextButton">Next</a>

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

    <div class="shootModal">
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content" data-lenis-prevent>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <form id="msform">
                                        <!-- progressbar -->
                                        <ul id="progressbar">
                                            <li class="active"><span>01</span></li>
                                            <li><span>02</span></li>
                                            <li><span>03</span></li>
                                        </ul>
                                        <fieldset data-lenis-prevent>
                                            <div class="form-card firstStep">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <h6 class="sectionHeading ExtraBirds">Would you like to add
                                                            extra
                                                            birds ?</h6>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="brdBox brdBox2">
                                                            @foreach($birds as $bird)
                                                                <span class="bird-item" data-bird-name="{{$bird->name}}"
                                                                      data-bird-price="{{$bird->price}}">
                            <h3>{{$bird->name ?? ''}}</h3>
                            <div class="d-flex">
                                <input type="number" value="0" min="0" class="bird-quantity">
                                <div>
                                    ${{$bird->price ?? ''}} each
                                </div>
                            </div>
                        </span>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="button" name="next" class="next action-button" value="Next"/>
                                            <a href="{{ route('front.quailClub') }}"
                                               class="previous action-button-previous">Cancel</a>

                                        </fieldset>

                                        <fieldset data-lenis-prevent>
                                            <div class="form-card pb-2">
                                                <h2 class="sectionHeading">Would you like to add a meal?</h2>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div id="accordion">

                                                            @foreach($foods as $food)
                                                                <div class="card lunch-food foodId"
                                                                     data-toggle="modal"
                                                                     data-target="#subModal"
                                                                     data-food-id="{{ $food->id }}">
                                                                    <div id="headingOne">
                                                                        <h5 class="mb-0 ">
                                                                            <button class="btn btn-link" type="button"
                                                                                    data-toggle="collapse"
                                                                                    data-target="#collapseOne"
                                                                                    aria-expanded="true"
                                                                                    aria-controls="collapseOne">
                                                                            <span class="food-image">
                        <img class="mr-2" width="50" height="50" src="{{$food->get_first_image()}}" alt="">
                    </span>
                                                                                <span class="food-name">
                                                                                    {{$food->name ?? ''}}</span>
                                                                                <span hidden
                                                                                      class="food-price">${{$food->price ?? ''}}</span>

                                                                            </button>
                                                                        </h5>
                                                                    </div>
                                                                </div>
                                                            @endforeach

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <h4> * Drinks and Chips Included *</h4>
                                            <input type="button" name="next"
                                                   class="next action-button btn btn-success1 w-100 "
                                                   value="No Thank You"/>
                                            <br>
                                            <input type="button" name="next" class="next action-button" value="Next"/>
                                            <input type="button" name="previous" class="previous action-button-previous"
                                                   value="Previous"/>
                                        </fieldset>

                                        <fieldset data-lenis-prevent>
                                            <div class="popupHeader">
                                                <h4>Your Order</h4>
                                            </div>
                                            <div class="popupMain signUpOrLogin">

                                                <div class="popup-details">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="detailsImg">
                                                                <img id="selectedProductImage"
                                                                     src="images/detailsImg.webp" alt="detailsImg"
                                                                     class="img-fluid">
                                                                <div class="detailsTitle">
                                                                    <h4>Selections</h4>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <p>Product Name: <span id="productName"></span></p>
                                                                <p>Product Price: $<span id="productPrice"></span></p>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div>
                                                                <p>Selected Date: <span id="selectedDateText"></span>
                                                                </p>
                                                                <p>Selected Field Name: <span
                                                                        id="selectedFieldName"></span></p>
                                                                <p>Selected Time: <span id="selectedTime"></span></p>
                                                                <p>Selected Members: <span id="selectedMembers"></span>
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row m-auto widget_wrapper" id="item-list">
                                                    </div>

                                                    <div class="detailsMain">
                                                        <div class="detailsImg">
                                                            <div class="detailsTitle" id="selectedBirdsTitle">
                                                                <h4>Extra Birds</h4>
                                                                <div id="selectedBirdsDetails"></div>
                                                            </div>
                                                        </div>
                                                        <div class="detailsTotal" id="selectedBirdsPayment">
                                                            <h6><span id="birdsTotalPayment">0.00</span></h6>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="totalPayment mb-4">
            <span>
                <div>Total Payment</div>
                <div id="totalPaymentValue">$ 0.00</div>
            </span>
                                                </div>
                                            </div>
                                            <div class="form-check mb-2">
                                                <input type="checkbox" class="form-check-input" id="termsCheckbox">
                                                <label class="form-check-label" for="termsCheckbox">
                                                    I agree to the <a href="{{ asset('pdf/paymentagreement.pdf') }}" target="_blank">Consent/Agreement</a>
                                                </label>
                                            </div>

                                            <div class="decideToRedirect">
                                                <input type="button" id="paymentButton"
                                                       class="action-button btn btn-success dual-payment-button"
                                                       value="Payment" disabled/>

                                            </div>

                                            <input type="button" name="previous" class="previous action-button-previous"
                                                   value="Previous"/>
                                        </fieldset>


                                        <fieldset data-lenis-prevent>
                                            <div class="form-card thankyouMain">
                                                <h2 class="thankuHeading">Thankyou</h2>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <div class="subPopup">
        <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="subModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content" data-lenis-prevent>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row" id="food_info_wrapper">
                                    <div class="col-6">
                                        <h1 id="food_name">Food Name</h1>
                                    </div>
                                    <div class="col-6">
                                        <h1 id="food_price">$144</h1>
                                    </div>
                                </div>
                                <form id="optionsForm" action="">
                                    <div class="subPopup-btn">
                                        <button type="button" class="themeBtn" data-dismiss="modal">Add to Cart</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="checkout__popup">
        <div class="popupWrapper">
            <div class="popupHeader">
                <h4>Your Order</h4>
                <button type="button" class="close popupClose"><i class="fas fa-times"></i></button>
            </div>
            <div class="popupMain signUpOrLogin">
                <div class="popup-details">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="detailsImg">
                                <img id="selectedProductImagePopUp" src="images/detailsImg.webp"
                                     alt="detailsImg" class="img-fluid">
                                <div class="detailsTitle">
                                    <h4>Selections</h4>
                                </div>
                            </div>
                            <div>
                                <p>Product Name: <span id="productNamePopUp"></span></p>
                                <p>Product Price: $<span id="productPricePopUp"></span></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div>
                                <p>Selected Date: <span id="selectedDateTextPopUp"></span></p>
                                <p>Selected Field Name: <span id="selectedFieldNamePopUp"></span>
                                </p>
                                <p>Selected Time: <span id="selectedTimePopUp"></span></p>
                                <p>Selected Members: <span id="selectedMembersPopUp"></span></p>
                            </div>
                        </div>
                    </div>

                    <div class="row m-auto widget_wrapper">
                    </div>

                    <div class="detailsMain">
                        <div class="detailsImg">
                            <div class="detailsTitle" id="selectedBirdsTitlePopUp">
                                <h4>Extra Birds</h4>
                                <div id="selectedBirdsDetailsPopUp"></div>
                            </div>
                        </div>
                        <div class="detailsTotal" id="selectedBirdsPaymentPopUp">
                            <h6><span id="BirdsTotalPaymentPopUp">0.00</span></h6>
                        </div>
                    </div>
                </div>
                <div class="totalPayment mb-4">
            <span>
                <div>Total Payment</div>
                <div id="totalPaymentValuePopUp">$ 0.00</div>
            </span>

                    <div class="d-block">
                        <div class="form-check mb-2">
                            <input type="checkbox" class="form-check-input" id="termsCheckboxPopUp">
                            <label class="form-check-label" for="termsCheckboxPopUp">
                                I agree to the <a href="{{ asset('pdf/paymentagreement.pdf') }}" target="_blank">Consent/Agreement</a>
                            </label>
                        </div>
                        <input type="button" id="paymentButtonPopUp"
                               class="action-button btn btn-success dual-payment-button" value="Payment" disabled/>
                    </div>


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

    <div class="loginPopup modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4>Login</h4>
                    <form id="loginForm" class="loginForm">
                        @csrf
                        <label for="">Email</label>
                        <input type="text" name="email">
                        @error('password')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        <label for="">Password</label>
                        <input type="password" name="password">
                        @error('password')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        <label for="radio1" class="radio text-center">
                            <input type="radio" id="radio1">
                            Remember me.
                        </label>
                        <button type="submit" class="themeBtn themeBtn--center">Log in</button>
                        <a href="{{route('user.forget.password')}}" class="forgetPasswor d-block">Forget Password ?</a>
                        <p>Don't have an account ?</p>
                        <a href="" class="signUp-btn" data-toggle="modal" data-target="#signupModal">Sign up here</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="signUp-popup loginPopup modal fade" id="signupModal" tabindex="-1" role="dialog"
         aria-labelledby="signupModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <h4>Sign Up</h4>
                    <form id="signupForm" class="loginForm">
                        <div class="row">
                            <div class="col-lg-6">
                                <label for="">First Name</label>
                                <input type="text" name="f_name" required>
                                @error('f_name')
                                <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-6">
                                <label for="">Last Name</label>
                                <input type="text" name="l_name" required>
                                @error('l_name')
                                <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Phone Number</label>
                                <input type="number" name="phone" required>
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Email</label>
                                <input type="email" name="email" required>
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                                @enderror
                            </div>
                            <div class="col-lg-12">
                                <label for="">Password</label>
                                <input type="password" name="password" required>
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                                @enderror
                            </div>
                        </div>
                        <button type="submit" class="themeBtn themeBtn--center">Sign Up</button>
                        <p>Already have an account ?</p>
                        <a href="" class="signUp-btn" data-toggle="modal" data-target="#loginModal">Login Now</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')

    <script>
        let keysArray = [];
        let selectedFoodPrice;
        let selectedFoodName;
        let selected_food_price = '';
        let selected_food_Image = '';
        // let grand_total = 0.00;
        let grand_total = 0;
        let totalVariationsPrice = 0;

        let foodImageSrc;

        document.addEventListener('DOMContentLoaded', function () {

            let productName;
            let productType;
            let productId;
            let productPrice;
            let selectedFieldName;
            let selectedTime;
            let selectedMembers;
            let selectedBirds = [];
            let variationPrice = [];
            let selectedProductImage;


            $('.themeBtn.sceduleBtn').on('click', function () {

                if (!selectedFieldName || !selectedTime || !selectedMembers) {
                    alert('Please select a field, time, and number of members before proceeding.');


                    $('#nextButton').removeAttr('data-target');
                } else {

                    $('#nextButton').attr('data-target', '#exampleModalCenter');

                }
            });

            const allButtons = document.querySelectorAll('a[data-product-type][data-product-id][data-product-name][data-product-price][data-product-image]');
            allButtons.forEach(button => {
                button.addEventListener('click', function (event) {
                    productType = event.target.getAttribute('data-product-type');
                    productId = event.target.getAttribute('data-product-id');
                    productName = event.target.getAttribute('data-product-name');
                    productPrice = event.target.getAttribute('data-product-price');
                    selectedProductImage = event.target.getAttribute('data-product-image');

                    sendAjaxRequest();
                });
            });

            const selectedDateElement = document.getElementById('selectedDate');
            selectedDateElement.addEventListener('DOMSubtreeModified', function () {
                sendAjaxRequest();
            });

            function sendAjaxRequest() {
                const selectedDateText = $('#selectedDate').text();
                const parts = selectedDateText.split(' ');
                const month = parts[1];
                const day = parts[2];
                const year = parts[3];
                const selectedDate = new Date(`${month} ${day} ${year}`);
                const currentDate = new Date();
                selectedDate.setHours(0, 0, 0, 0);
                currentDate.setHours(0, 0, 0, 0);

                if (selectedDate < currentDate) {
                    alert('Selected date is in the past. Please choose a future date.');
                    return;
                }

                if (selectedDate >= currentDate) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: "POST",
                        url: "{{ route('checking.time.slots.availability') }}",
                        data: {
                            date: selectedDateText,
                            productType: productType,
                            productId: productId,
                        },
                        success: function (data) {
                            let html = '<ul>';

                            data.forEach((fieldData, index) => {
                                html += '<li>';
                                html += '<h4>' + fieldData[0].fieldName + '</h4>';
                                html += '<div class="hoursBox">';

                                // Iterate through nested arrays to check slot availability
                                fieldData.forEach(slotData => {
                                    if (slotData.availability === 'Available') {
                                        html += '<label>';
                                        html += '<input type="radio" class="time-radio" name="' + slotData.fieldName + '" value="' + slotData.time + '">';
                                        html += slotData.time;
                                        html += '</label>';
                                    }
                                });

                                html += '</div>';
                                // Assume the first slotData is representative of the availability
                                html += '<p id="' + fieldData[0].fieldName + '" class="availability">' + fieldData[0].availability + '</p>';
                                html += '</li>';
                            });

                            html += '</ul>';

                            $('#availabilityContainer').html(html);

                            $('.time-radio').on('change', function () {
                                // Uncheck other radio buttons when one is checked
                                $('.time-radio').not(this).prop('checked', false);
                            });
                        },

                        error: function (error) {
                            console.error('Error:', error);
                        }
                    });
                }

                $('#availabilityContainer').on('change', '.time-radio', function () {
                    selectedFieldName = $(this).attr('name');
                    selectedTime = $(this).val();
                    updateKeysArray();
                });

                $('input[name="members"]').on('change', function () {
                    selectedMembers = this.value;
                    updateKeysArray();
                });

                $('.bird-quantity').on('change', function () {
                    const birdItem = $(this).closest('.bird-item');
                    const birdName = birdItem.data('bird-name');
                    const birdPrice = birdItem.data('bird-price');
                    const quantity = $(this).val();
                    const totalPrice = quantity * birdPrice;

                    const selectedBird = {
                        name: birdName,
                        quantity: quantity,
                        price: birdPrice,
                        totalPrice: totalPrice,
                    };

                    const existingIndex = selectedBirds.findIndex(bird => bird.name === birdName);

                    if (existingIndex !== -1) {
                        // Update existing entry
                        selectedBirds[existingIndex] = selectedBird;
                    } else {
                        // Add new entry
                        selectedBirds.push(selectedBird);
                    }

                    updateKeysArray();
                });

                function updateKeysArray() {
                    keysArray = {
                        selectedDateText,
                        productType,
                        productName,
                        productPrice,
                        productId,
                        selectedFieldName,
                        selectedTime,
                        selectedMembers,
                        selectedBirds,
                        variationPrice,
                        selectedProductImage,
                        selectedFoodPrice,
                    };

                    // console.log(keysArray);
                    updateOrderDetails();
                }

            }

            var cart = {...JSON.parse(window.cart)};

            $('.variation-checkbox, .variation-input').on('change', function () {
                updateAddToCartButtonVisibility();
            });

            // Function to update Add to Cart button visibility
            function updateAddToCartButtonVisibility() {
                // Check if at least one checkbox or radio button is checked
                var isChecked = $('.variation-checkbox:checked, .variation-input:valid').length > 0;

                // Show/hide the Add to Cart button based on the checked status
                $('#addToCartButton').toggle(isChecked);
            }

            // Add to Cart button click event
            $('#addToCartButton').on('click', function (event) {
                // Check if at least one checkbox or radio button is checked
                var isChecked = $('.variation-checkbox:checked, .variation-input:valid').length > 0;

                if (!isChecked) {
                    // No checkbox or radio button is checked, prevent adding to cart
                    alert('Please select at least one option before adding to the cart.');
                    event.preventDefault(); // Prevent the default action (e.g., form submission)
                } else {
                    // At least one checkbox or radio button is checked, continue with adding to cart
                    // Your existing logic for adding to the cart goes here
                }
            });

            // Initial update of Add to Cart button visibility on page load
            updateAddToCartButtonVisibility();

            $('.lunch-food').on('click', async function () {
                var foodId = $(this).data('food-id');

                var foodName = $(this).find('.food-name').text().trim();
                var foodPrice = $(this).find('.food-price').text().replace('$', '').trim();

                $('#food_info_wrapper').prop('hidden', !(foodName == 'Sub Sandwich' || foodName == 'Salads'));
                foodName = foodName == 'Sub Sandwich' ? (foodName + ' (12 inch)') : foodName;
                $('#food_name').html(foodName);
                $('#food_price').html('$' + foodPrice);

                var foodImageContainer = $(this).find('.food-image');
                var foodImageSrc = foodImageContainer.find('img').attr('src') || '';

                selected_food_price = foodPrice;
                selected_food_Image = foodImageSrc;

                selectedFoodName = foodName;
                $('#selectedFoodName').text(selectedFoodName);

                selectedFoodPrice = parseFloat(foodPrice);

                if (!cart[selectedFoodName]) {
                    cart[selectedFoodName] = [];
                }
                cart[selectedFoodName].push({test: 'test'});

                localStorage.setItem('cart', JSON.stringify(cart))

                if (!cart[selectedFoodName]) {
                    cart[selectedFoodName] = [];
                }
                cart[selectedFoodName].push({test: 'test'});

                localStorage.setItem('cart', JSON.stringify(cart))

                localStorage.setItem('cart', JSON.stringify(cart))
                $.ajax({
                    url: '{{url('/get/food/variations/')}}/' + foodId,
                    method: 'get',
                    // data: {foodId: foodId},
                    success: function (data) {
                        var variationsContainer = $('#optionsForm');
                        variationsContainer.empty(); // Clear existing content
                        variationsContainer.prepend('<h1 style="color: red;">Select Variation To Add To Cart</h1>');
                        $.each(data, function (index, variation) {
                            var categoryInputName = 'subs_' + index; // Unique name for each category
                            let innerString = "";

                            variation.variation.forEach(function (option, index2) {
                                var loop = 'radio' + (index + 1) + (index2 + 1);
                                var description = option.description !== null ? option.description : '';

                                if (option.input_type === 'number') {
                                    // If the input type is 'number', include an input field
                                    innerString += `<label for="${loop}" class="variation myqty">
                    <h6><strong>${option.name}:</strong> <span>${description}</span> <span>${'$' + parseFloat(option.price).toFixed(2)}</span></h6>
                    <input type="number" id="${loop}" class="variation-input" name="${categoryInputName}" data-price="${parseFloat(option.price).toFixed(2)}" min="0" value="0">
                </label>`;
                                } else {
                                    // For other input types like 'radio' and 'checkbox'
                                    var priceHtml = (!isNaN(option.price) && parseFloat(option.price) > 0) ? `<span>${'$' + parseFloat(option.price).toFixed(2)}</span>` : '';
                                    innerString += `<label for="${loop}" class="variation">
                    <input type="${option.input_type}" id="${loop}" class="variation-checkbox"  name="${categoryInputName}">
                    <h6><strong>${option.name}</strong> <span>${description}</span> ${priceHtml ? ': ' + priceHtml : ''}</h6>
                </label>`;
                                }
                            });

                            var variationHtml = `<div class="subPopup-content" id="content">
            ${variation.name !== 'Salads' ? `<h3>${variation.name}:</h3>` : ''}
            ${innerString}
        </div>`;

                            variationsContainer.append(variationHtml);
                        });


                        var addToCartBtn = `<div class="subPopup-btn" id="addToCartContainer" style="display: none;">
        <button type="submit" class="themeBtn" onclick="validateAndAddToCart()">Add to Cart</button>
    </div>`;
                        variationsContainer.append(addToCartBtn);

                    },

                    error: function (error) {
                        console.error('Error fetching food variations:', error);
                    }
                });
            });
            // Show the Add to Cart button only when at least one checkbox or radio button is checked
            $('#optionsForm').on('change', 'input[type="radio"], input[type="checkbox"]', function () {
                updateAddToCartButtonVisibility();
            });

            // Function to update Add to Cart button visibility
            function updateAddToCartButtonVisibility() {
                var isChecked = $('#optionsForm').find('input[type="radio"]:checked, input[type="checkbox"]:checked').length > 0;
                $('#addToCartContainer').toggle(isChecked);
            }

            function randomGeneratedId(length) {
                let result = '';
                const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                const charactersLength = characters.length;
                let counter = 0;
                while (counter < length) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                    counter += 1;
                }
                return result;
            }

            function addPriceInKeys(randomId, totalVPrice, grantTotal) {
                let item = {...(keysArray['variationPrice'][randomId] ?? {})}
                let itemPrices = {
                    ...item,
                    id: randomId,
                    totalVariationsPrice: totalVPrice,
                    grand_total: grantTotal
                }

                keysArray['variationPrice'] = {
                    ...(keysArray['variationPrice'] ?? []),
                    [randomId]: itemPrices
                }
            }

            function addDetailInKeys(randomId, variationDetail) {

                let item = {...(keysArray['variationPrice'][randomId] ?? {})}

                // console.log("addDetailInKeys", item, randomId)

                item['variations'] = [
                    ...(item['variations'] ?? []),
                    {...variationDetail}
                ]

                // console.log("update item", item)

                keysArray['variationPrice'] = {
                    ...(keysArray['variationPrice'] ?? []),
                    [randomId]: {...item}
                }

            }

            function widget_populate() {
                const randomId = randomGeneratedId(5)

                grand_total = parseFloat(selected_food_price);
                totalVariationsPrice = 0

                let detail_string = `<div class="detailsMain">
    <div class="detailsImg">
        <span class="detailsImageContainer">
            <img class="selectedFoodImage" src="${selected_food_Image}" alt="Selected Food Image">
        </span>
        <div class="detailsTitle">
            <p>${selectedFoodName} -----------> ${selected_food_price ? '$ ' + parseFloat(selected_food_price).toFixed(2) : ''}
<button type="button" class="removeFoodBtn">Remove</button>
</p>
        </div>
    </div>
</div>`;
                let items_string = '';

                $('.variation-input').each(function () {
                    var variationLabel = $(this).siblings('h6');
                    var variationName = variationLabel.find('strong').text();
                    var variationPrice = parseFloat($(this).data('price'));
                    var quantity = parseFloat($(this).val()) || 0; // Get quantity, default to 0 if input is empty or not a valid number
                    var priceHtmlSingle = (!isNaN(variationPrice) && variationPrice > 0) ? `<p>Single Price: $${variationPrice.toFixed(2)}</p>` : '';
                    var priceHtml = (!isNaN(variationPrice) && variationPrice > 0) ? `<p>Total Price: $ <span class="total_price">${(variationPrice * quantity).toFixed(2)}</span></p>` : '';

                    if (quantity > 0) {
                        addDetailInKeys(randomId, {
                            selectedFoodName,
                            selected_food_price,
                            variationName,
                            variationPrice,
                            quantity,
                            priceHtmlSingle,
                            priceHtml
                        });
                    }

                    if (quantity > 0) {
                        items_string += `<li>
        <p>+ ${variationName} (Quantity: ${quantity})</p> <p>${priceHtmlSingle}</p>
        ${priceHtml}
    </li>`;
                    }
                    if (!isNaN(variationPrice) && variationPrice > 0) {
                        totalVariationsPrice += variationPrice * quantity.toFixed(2);
                        addPriceInKeys(randomId, totalVariationsPrice, totalVariationsPrice, variationName, quantity, variationPrice)
                    }
                });

                $('.variation-checkbox:checked').each(function () {
                    var variationLabel = $(this).siblings('h6');
                    var variationName = variationLabel.find('strong').text();
                    var variationPrice = parseFloat(variationLabel.find('span').last().text().replace('$', '').trim());
                    var priceHtml = (!isNaN(variationPrice) && variationPrice > 0) ? `<p>Price: $${variationPrice.toFixed(2)}</p>` : '';

                    addDetailInKeys(randomId, {
                        selectedFoodName,
                        selected_food_price,
                        variationName,
                        variationPrice,
                        priceHtml
                    })

                    items_string += `<li>
                                            <p>+ ${variationName}</p>
                                          ${priceHtml}
                                        </li>`;

                    if (!isNaN(variationPrice) && variationPrice > 0) {
                        totalVariationsPrice += variationPrice;
                        grand_total += variationPrice;

                        addPriceInKeys(randomId, totalVariationsPrice, grand_total, variationName, quantity = null, variationPrice)
                    }
                });
                items_string = `<div class="menuList">
                    <ul>
                        ${items_string}
                    </ul>
                </div>`;

                if (grand_total > 0 && !isNaN(grand_total)) {
                    items_string += `<div class="grandTotal">
                        <p>Total: $ <span class="total_price">${grand_total.toFixed(2)}</span></p>

                    </div>`;
                }

                $('.widget_wrapper').append(`<div class="col-md-12 ` + randomId + `" data-randomId="` + randomId + `">
                                                ` + detail_string + items_string + `

                                           </div>`);

                $('.widget_wrapper').on('click', '.removeFoodBtn', async function () {
                    let closest = await $(this).closest('.col-md-12');
                    // let removedTotalPrice = closest.find('.total_price').text()
                    const randomId = closest.attr('data-randomId')
                    $('.' + randomId).remove();
                    if (keysArray['variationPrice'].hasOwnProperty(randomId)) {
                        delete keysArray['variationPrice'][randomId]
                    }
                    updateOrderDetails();
                    updateOrderDetailsInOtherPlace();
                });

                $('#productNamePopUp').text(keysArray.productName || '');
                $('#productPricePopUp').text(keysArray.productPrice || '');
                $('#selectedDateTextPopUp').text(keysArray.selectedDateText || '');
                $('#selectedFieldNamePopUp').text(keysArray.selectedFieldName || '');
                $('#selectedTimePopUp').text(keysArray.selectedTime || '');
                $('#selectedMembersPopUp').text(keysArray.selectedMembers || '');
                var selectedProductImageSrc2 = '{{asset('/uploads/product/')}}' + '/' + (keysArray.selectedProductImage || 'defaultImage.webp');
                $('#selectedProductImagePopUp').attr('src', selectedProductImageSrc2);
            }

            $('#optionsForm').on('click', '.themeBtn', function () {
                widget_populate();
                updateOrderDetails();
                updateOrderDetailsInOtherPlace();

            });

            $('#optionsForm').on('submit', function (e) {
                e.preventDefault();
                $('#subModal').hide();
            });

            function updateOrderDetails() {
                $('#productName').text(keysArray.productName || '');
                $('#productPrice').text(keysArray.productPrice || '');
                $('#selectedDateText').text(keysArray.selectedDateText || '');
                $('#selectedFieldName').text(keysArray.selectedFieldName || '');
                $('#selectedTime').text(keysArray.selectedTime || '');
                $('#selectedMembers').text(keysArray.selectedMembers || '');

                var selectedProductImageSrc = '{{asset('/uploads/product/')}}' + '/' + (keysArray.selectedProductImage || 'defaultImage.webp');
                $('#selectedProductImage').attr('src', selectedProductImageSrc);

                let selectedBirdsDetailsHtml = '';
                keysArray.selectedBirds.forEach(bird => {
                    selectedBirdsDetailsHtml += `<p>${bird.name}: ${bird.quantity} x $${bird.price} = $${bird.totalPrice}</p>`;
                });
                $('#selectedBirdsDetails').html(selectedBirdsDetailsHtml);

                let totalBirdsPayment = 0;
                keysArray.selectedBirds.forEach(bird => {
                    totalBirdsPayment += bird.totalPrice;
                });


                let totalFoodVariationPrices = 0;
                for (const vKey in (keysArray['variationPrice'] ?? {})) {
                    var varaitionPrice = keysArray['variationPrice'][vKey].grand_total ?? keysArray['variationPrice'][vKey].variations[0].selected_food_price;
                    if (!isNaN(varaitionPrice) && varaitionPrice > 0) {
                        totalFoodVariationPrices += parseFloat(varaitionPrice);
                    }
                }

                let totalPayment = totalBirdsPayment + totalFoodVariationPrices +
                    (parseFloat(keysArray.productPrice) || 0);

                keysArray.totalPayment = totalPayment;

                $('#birdsTotalPayment').text('$' + totalBirdsPayment.toFixed(2));
                $('#totalPaymentValue').html('$ ' + totalPayment.toFixed(2));

                updateOrderDetailsInOtherPlace();


                toggleTitleVisibility('Extra Birds', keysArray.selectedBirds, 'selectedBirdsTitle', totalBirdsPayment);
                toggleTitleVisibility('Selected Birds', keysArray.selectedBirds, 'selectedBirdsPayment', totalBirdsPayment);


            }

            function toggleTitleVisibility(sectionName, data, titleId, amount) {
                var titleElement = $('#' + titleId);

                if (data && data.length > 0) {
                    titleElement.show();
                } else {
                    titleElement.hide();
                }

                if (amount > 0) {
                    titleElement.show();
                    $('#' + titleId + ' .detailsTotal h6 span').text('$ ' + amount.toFixed(2));
                } else {
                    titleElement.hide();
                    $('#' + titleId + ' .detailsTotal h6 span').text('$ 0.00');
                }

            }

            document.getElementById('termsCheckboxPopUp').addEventListener('change', function () {
                document.getElementById('paymentButtonPopUp').disabled = !this.checked;
            });

            document.getElementById('termsCheckbox').addEventListener('change', function () {
                document.getElementById('paymentButton').disabled = !this.checked;
            });

            function updateOrderDetailsInOtherPlace() {
                // Duplicate the code to update HTML elements in the second place
                $('#productNamePopUp').text(keysArray.productName || '');
                $('#productPricePopUp').text(keysArray.productPrice || '');
                $('#selectedDateTextPopUp').text(keysArray.selectedDateText || '');
                $('#selectedFieldNamePopUp').text(keysArray.selectedFieldName || '');
                $('#selectedTimePopUp').text(keysArray.selectedTime || '');
                $('#selectedMembersPopUp').text(keysArray.selectedMembers || '');
                var selectedProductImageSrc2 = '{{asset('/uploads/product/')}}' + '/' + (keysArray.selectedProductImage || 'defaultImage.webp');
                $('#selectedProductImagePopUp').attr('src', selectedProductImageSrc2);

                let selectedBirdsDetailsHtml2 = '';
                keysArray.selectedBirds.forEach(bird => {
                    selectedBirdsDetailsHtml2 += `<p>${bird.name}: ${bird.quantity} x $${bird.price} = $${bird.totalPrice}</p>`;
                });
                $('#selectedBirdsDetailsPopUp').html(selectedBirdsDetailsHtml2);

                let totalBirdsPayment2 = 0;
                keysArray.selectedBirds.forEach(bird => {
                    totalBirdsPayment2 += bird.totalPrice;
                });

                // Initialize the greatTotal
                let totalFoodVariationPrices2 = 0;


                for (const vKey in (keysArray['variationPrice'] ?? {})) {
                    var variationPrice2 = keysArray['variationPrice'][vKey].grand_total ?? keysArray['variationPrice'][vKey].variations[0].selected_food_price;
                    if (!isNaN(variationPrice2) && variationPrice2 > 0) {
                        totalFoodVariationPrices2 += parseFloat(variationPrice2);
                    }
                }

                let totalPayment2 = totalBirdsPayment2 + totalFoodVariationPrices2 +
                    (parseFloat(keysArray.productPrice) || 0);
                $('#BirdsTotalPaymentPopUp').text('$' + totalBirdsPayment2.toFixed(2));
                $('#totalPaymentValuePopUp').html('$ ' + totalPayment2.toFixed(2));


                toggleTitleVisibilityPopUps('Extra Birds', keysArray.selectedBirds, 'selectedBirdsTitlePopUp', totalBirdsPayment2);
                toggleTitleVisibilityPopUps('Selected Birds', keysArray.selectedBirds, 'selectedBirdsPaymentPopUp', totalBirdsPayment2);
            }

            function toggleTitleVisibilityPopUps(sectionName, data, titleId, amount) {
                var titleElement = $('#' + titleId);

                if (data && data.length > 0) {
                    titleElement.show();
                } else {
                    titleElement.hide();
                }

                if (amount > 0) {
                    titleElement.show();
                    $('#' + titleId + ' .detailsTotal h6 span').text('$ ' + amount.toFixed(2));
                } else {
                    titleElement.hide();
                    $('#' + titleId + ' .detailsTotal h6 span').text('$ 0.00');
                }

            }

            updateOrderDetails();
        });

        $(document).ready(function () {
            $('.dual-payment-button').on('click', function () {

                var selectedVariations = [];
                $('.variation-checkbox:checked').each(function () {
                    var variationLabel = $(this).siblings('h6');
                    var variationName = variationLabel.find('strong').text();
                    var variationPrice = parseFloat(variationLabel.find('span').last().text().replace('$', '').trim());

                    selectedVariations.push({
                        name: variationName,
                        price: variationPrice
                    });
                });

                var requestData = {
                    productId: keysArray.productId || '',
                    productType: keysArray.productType || '',
                    productName: keysArray.productName || '',
                    productPrice: keysArray.productPrice || '',
                    selectedDateText: keysArray.selectedDateText || '',
                    selectedFieldName: keysArray.selectedFieldName || '',
                    selectedTime: keysArray.selectedTime || '',
                    selectedMembers: keysArray.selectedMembers || '',
                    selectedProductImage: keysArray.selectedProductImage || '',
                    selectedBirds: keysArray.selectedBirds || '',
                    totalPayment: keysArray.totalPayment || '',
                    selectedVariations: keysArray.variationPrice || [], // Assuming this is the correct property
                };

                $.ajax({
                    type: "POST",
                    url: "{{ route('quail.product.payment') }}",
                    data: {
                        requestData: requestData, // Corrected this line
                    },
                    success: function (data) {
                        var productId = keysArray.productId;
                        var selectedField = keysArray.selectedFieldName;
                        var selectedTime = keysArray.selectedTime;
                        var stripeRoute = "{{ url('/payment-redirect', ['productId' => '']) }}/" + productId + '/' + selectedField + '/' + selectedTime;
                        window.location.href = stripeRoute;
                    },
                    error: function (error) {
                        // Handle error
                        console.error('Error:', error);
                    }
                });


            });
        });

    </script>
    <script>
        $(document).ready(function () {

            $("#member1").on("input", function () {
                var enteredValue = $(this).val();
                if (enteredValue > 3) {
                    alert("Value must not be greater than 3");
                    $(this).val("");
                }
            });

            // Check the user's role if authenticated
            var isUserRoleUser = "{{ Auth::check() && Auth::user()->roles->first()->name === 'user' }}";

            var paymentButton = $('#paymentButton');
            var paymentButton2 = $('#paymentButtonPopUp');

            if (isUserRoleUser) {
                $('#signupModal').modal('hide');
                $('#loginModal').modal('hide');

            } else {
                paymentButton.attr('data-toggle', 'modal');
                paymentButton.attr('data-target', '#loginModal');

                paymentButton2.attr('data-toggle', 'modal');
                paymentButton2.attr('data-target', '#loginModal');
            }

            $("#loginForm").submit(function (e) {
                e.preventDefault(); // Prevent the default form submission

                // Collect form data
                var formData = $(this).serialize();
                formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
                // Make AJAX request
                var messageDisplayed = false;

                $.ajax({
                    type: "POST",
                    url: "{{route('user.login.quail.club')}}",
                    data: formData,
                    success: function (response) {
                        if (!messageDisplayed) {
                            var popupMain = $('.popupMain.signUpOrLogin');
                            popupMain.prepend('<h1 style="color: green">Successfully Logged In</h1>');

                            $('#signupModal').modal('hide');
                            $('#loginModal').modal('hide');

                            messageDisplayed = true;
                        }
                    },
                    error: function (error) {
                        if (!messageDisplayed) {
                            const errorMessage = error?.responseJSON?.error ?? 'Error signing up. Please try again.';
                            $('#loginForm').prepend(`<h1 style="color: red">${errorMessage}</h1>`);
                            messageDisplayed = true;
                        }
                    }
                });
            });

            $("#signupForm").submit(function (e) {
                e.preventDefault();

                // Collect form data
                var formData = $(this).serialize();
                formData += '&_token=' + $('meta[name="csrf-token"]').attr('content');
                // Make AJAX request
                var messageDisplayed = false;

                $.ajax({
                    type: "POST",
                    url: "{{route('user.signUp.quail.club')}}",
                    data: formData,
                    success: function (response) {
                        if (!messageDisplayed) {
                            var popupMain = $('.popupMain.signUpOrLogin');
                            popupMain.prepend('<h1 style="color: green">Successfully Signed In</h1>');

                            // Optionally, hide the modal after successful signup
                            $('#signupModal').modal('hide');
                            $('#loginModal').modal('hide');
                            messageDisplayed = true; // Set the flag to true after displaying the message
                        }
                    },
                    error: function (error) {
                        if (!messageDisplayed) {
                            var signupForm = $('#signupForm');

                            // Check if the error response contains specific email errors
                            if (error.responseJSON && error.responseJSON.errors && error.responseJSON.errors.email) {
                                // Display the email validation error
                                signupForm.prepend('<h1 style="color: red">' + error.responseJSON.errors.email[0] + '</h1>');
                            } else {
                                // Display a generic error message
                                signupForm.prepend('<h1 style="color: red">Error signing up. Please try again.</h1>');
                            }

                            messageDisplayed = true;
                        }
                    },
                });


            });


        });
    </script>

@endpush