@extends('layouts.front-layout')
@section('title') Ticket-booking @endsection
@section('content')
    <style>
        .event-list > .event-empty {
            padding: 15px 10px;
            background-color: rgb(254 0 0 / 15%);
            border: 1px solid #FE0000;
            font-size: 12px;
        }

        td p {
            font-size: 12px !important;
        }

        .highlighted-event {
            background-color: #ffeeba !important; /* Light yellow */
            border: 2px solid #ff5722; /* Match bullet color */
            border-radius: 50%; /* Circular border for events */
            padding: 5px;
        }

        .custom-loader {
            width: 15px;
            aspect-ratio: 1;
            border-radius: 50%;
            animation: l5 1s infinite linear alternate;
        }

        @keyframes l5 {
            0% {
                box-shadow: 20px 0 #DC4433, -20px 0 #cc8881;
                background: #DC4433
            }
            33% {
                box-shadow: 20px 0 #DC4433, -20px 0 #cc8881;
                background: #cc8881
            }
            66% {
                box-shadow: 20px 0 #cc8881, -20px 0 #DC4433;
                background: #cc8881
            }
            100% {
                box-shadow: 20px 0 #cc8881, -20px 0 #DC4433;
                background: #DC4433
            }
        }

    </style>
    <section class="inner-banner p-0">
        <video class="inner-banner__video" autoplay muted loop playsinline>
            <source src="{{$setting->settingImage('home_top_banner_video') ?? ''}}" type="video/mp4">
        </video>
        <div class="container">
            <div class="inner-banner__content">
                <h1>ticket booking</h1>
            </div>
        </div>
        <figure class="inner-banner__bottom">
            <img src="upload/images/banner-shape.png" alt="image" class="img-fluid">
        </figure>
    </section>

    <section class="calender-section">
        <div class="container">
            <h2 class="mainHead text-center mb-4"><span>Calendar</span></h2>
            <div class="custom-loader mx-auto" style="display: none;"></div>
            <div id="calendar"></div>

        </div>
    </section>
    <!-- Modal -->
    <div class="modal fade" id="buyTicketModal" tabindex="-1" aria-labelledby="buyTicketModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="buyTicketModalLabel">Buy Ticket</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Event Details</h6>
                    <p><strong>Name:</strong> <span id="modalEventName"></span></p>
                    <p><strong>Date:</strong> <span id="modalEventDate"></span></p>
                    {{--                    <p><strong>Description:</strong> <span id="modalEventDescription"></span></p>--}}
                    <form id="buyTicketForm">
                        @csrf
                        {{--                        <input type="hidden" id="modalEventId" name="event_id">--}}
                        {{--                        <div id="card-element"></div> <!-- Stripe Element will be injected here -->--}}
                        <button type="submit" class="btn btn-success mt-3">Pay $4.32</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('script')
    {{--    <script src="https://js.stripe.com/v3/"></script>--}}
    {{--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>--}}
    <script src="https://js.stripe.com/v3/"></script>


    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const allEvents = @json($allEventsFormatted);
            const currentDateEvents = @json($currentDateEventsFormatted);

            $('#calendar').evoCalendar({
                theme: 'Royal Navy',
                calendarEvents: allEvents,
            });

            // Function to render events dynamically for the selected date
            function renderCurrentDateEvents(events, message = 'No events for the current date') {
                const eventTableBody = events.length
                    ? events.map(event => `
            <tr>
                <td>${event.name}</td>
                <td>${event.date}</td>
                <td>${event.description || 'No description available'}</td>

            </tr>
        `).join('')
                    : `<tr><td colspan="4" class="text-center">${message}</td></tr>`;

                // Render the event table
                $('.event-empty').html(`
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Event Name</th>
                        <th>Date</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    ${eventTableBody}
                </tbody>
            </table>
        `);

                const ticketOptions = events.map(event => {
                    if (event && Array.isArray(event.tickets) && event.tickets.length > 0) {
                        const ticketsJson = JSON.stringify(event.tickets);
                        console.log(ticketsJson);  // Log to check for any issues

                        return `
        <div class="event-ticket-options" data-event-id="${event.event_id}">
            <h5>${event.name} - ${event.date}</h5>
            <div class="ticket-options">
                ${event.tickets.map((ticket, index) => `
                    <div class="ticket-option">
                        <label>
                            <input type="radio" class="radio" name="ticket-${event.event_id}" value="${ticket.ticket_price}" data-ticket-id="${ticket.ticketId}" ${index === 0 ? 'checked' : ''}>
                            ${ticket.ticket} - $${ticket.ticket_price}
                        </label>
                    </div>
                `).join('')}
            </div>
             <button class="btn btn-primary book-ticket-btn" data-event-id="${event.event_id}" data-event-name="${event.name}" data-event-date="${event.date}" data-event-tickets="${ticketsJson}">
                Book Ticket
             </button>
             <button class="btn btn-primary" data-toggle="modal" data-target="#customizeModal" >
              Customize
             </button>
        </div>
    `;
                    } else {
                        return `
        <div class="event-ticket-options" data-event-id="${event.event_id}">
            <h5>${event.name} - ${event.date}</h5>
            <p>No ticket options available for this <event class=""></event></p>
        </div>
    `;
                    }
                }).join('');



                // Append the ticket options below the table
                $('.event-empty').append(`
<div class="event-ticket-options-container">
    ${ticketOptions}
</div>
<input type="hidden" id="priceInput">


`);


                document.addEventListener('change', function (event) {
                    if (event.target.classList.contains('radio')) {
                        const selectedPrice = event.target.value; // Get ticket price from the value attribute
                        const ticketId = event.target.dataset.ticketId; // Get ticket ID from data-ticket-id attribute

                        // Assuming 'priceInput' is an input element or another HTML element
                        var PriceInput = document.getElementById('priceInput');

                        // If it's an input element, set the value
                        if (PriceInput.tagName === 'INPUT') {
                            PriceInput.value = selectedPrice; // Update the input's value
                        } else {
                            // If it's a div, span, or other element, update its text
                            PriceInput.innerText = `$${selectedPrice}`;
                        }

                    }
                });



                $(document).on('click', '.book-ticket-btn', function () {
                    var eventName = $(this).data('event-name');
                    var eventDate = $(this).data('event-date');

                    // Inject data into modal fields
                    $('#eventName').val(eventName);

                    // Show the modal
                    $('#paymentModal').modal('show');
                });

                const stripe = Stripe('pk_test_0rY5rGJ7GN1xEhCB40mAcWjg'); // Replace with STRIPE_KEY from .env
                const elements = stripe.elements();


                $('#paymentForm').on('submit', function (e) {
                    e.preventDefault();

                    // Payment form data
                    const formData = {
                        cardHolderName: $('#cardHolderName').val(),
                        cardNumber: $('#cardNumber').val(),
                        expiryDate: $('#expiryDate').val(),
                        cvv: $('#cvv').val(),
                        stripeToken: 'tok_test' // Replace with actual token generated by Stripe.js
                    };

                    // Ajax request to Laravel backend
                    $.ajax({
                        url: '{{ route("payment") }}',
                        method: 'POST',
                        data: formData,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Laravel CSRF token
                        },
                        success: function (response) {
                            alert(response.success);
                            $('#paymentModal').modal('hide');
                        },
                        error: function (error) {
                            alert('Payment Failed: ' + error.responseJSON.error);
                        }
                    });
                });





                $(document).on('click', '.book-ticket-btn', function () {
                    const eventId = $(this).data('event-id');
                    const eventName = $(this).data('event-name');
                    const eventDate = $(this).data('event-date');
                    const eventTickets = JSON.parse($(this).data('event-tickets')); // Parse back to an array

                    // Find the selected ticket
                    const selectedTicket = eventTickets.find(ticket => ticket.ticketId === $(`input[name="ticket-${eventId}"]:checked`).data('ticket-id'));

                    if (selectedTicket) {
                        // Populate modal with event details
                        $('#modalEventName').text(eventName);
                        $('#modalEventDate').text(eventDate);
                        $('#modalEventPrice').text(`$${selectedTicket.ticket_price}`);
                        $('#modalEventTicketId').val(selectedTicket.ticketId);

                        // Show the modal
                        $('#buyTicketModal').modal('show');
                    } else {
                        alert('Please select a ticket to proceed.');
                    }
                });

            }

            renderCurrentDateEvents(currentDateEvents);

            $('#calendar').on('selectDate', function (event, activeDate) {
                const formattedDateForDB = formatDate(activeDate, 'YYYY-MM-DD');

                $('.custom-loader').show();

                // AJAX request to fetch events for the selected date
                $.ajax({
                    url: "{{ route('event.details') }}",
                    method: 'POST',
                    data: {
                        date: formattedDateForDB,
                        _token: $('meta[name="csrf-token"]').attr('content'),
                    },
                    success: function (response) {
                        $('.custom-loader').hide();
                        const events = response.events || [];
                        const message = events.length ? '' : 'No events for the selected date';
                        renderCurrentDateEvents(events, message);

                        // Optionally update the calendar with new events for this date
                        $('#calendar').evoCalendar('setCalendarEvents', events.length > 0 ? events : allEvents);
                    },
                    error: function (xhr) {
                        $('.custom-loader').hide();
                        renderCurrentDateEvents([], 'Error fetching event details');
                        $('#calendar').evoCalendar('setCalendarEvents', allEvents);
                    }
                });
            });

            // Utility function to format dates
            function formatDate(date, format) {
                const options = {year: 'numeric', month: '2-digit', day: '2-digit'};
                const formattedDate = new Date(date).toLocaleDateString('en-US', options);
                if (format === 'MM/DD/YYYY') return formattedDate;
                const [month, day, year] = formattedDate.split('/');
                return `${year}-${month}-${day}`;
            }
        });







    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const stripe = Stripe('{{ env("STRIPE_KEY") }}');
            const elements = stripe.elements();
            const cardElement = elements.create('card');
            cardElement.mount('#card-element');

            $('#buyTicketForm').on('submit', async function (e) {
                e.preventDefault();

                const {token, error} = await stripe.createToken(cardElement);
                if (error) {
                    alert(error.message);
                    return;
                }

                const ticketId = $('#modalEventTicketId').val();
                const formData = $(this).serialize() + `&stripeToken=${token.id}&ticketId=${ticketId}`;

                $.ajax({
                    url: "{{ route('payment.process') }}",
                    method: 'POST',
                    data: formData,
                    success: function (response) {
                        $('#buyTicketModal').modal('hide');
                        toastr.success(response.message, 'Success');
                    },
                    error: function (xhr) {
                        toastr.error('Payment failed. Please try again.', 'Error');
                    }
                });
            });
        });
    </script>
    <!-- Modal for Stripe Payment -->
    <div class="modal" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="paymentModalLabel">Payment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="paymentForm1">
                        <div class="mb-3">
                            <label for="eventName" class="form-label">Event Name</label>
                            <input type="text" class="form-control" id="eventName" name="eventName" readonly>
                        </div>

                        <!-- New Name Field -->
                        <div class="mb-3">
                            <label for="name" class="form-label">Your Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>

                        <!-- New Phone Number Field -->
                        <div class="mb-3">
                            <label for="phone-number" class="form-label">Phone Number</label>
                            <input type="number" class="form-control" id="phone-number" name="number" required>
                        </div>

                        <!-- New Email Field -->
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="card-holder-name" class="form-label">Card Holder Name</label>
                            <input type="text" class="form-control" id="card-holder-name" required>
                        </div>

                        <!-- Card Element -->
                        <div class="mb-3">
                            <label for="card-element" class="form-label">Card Details</label>
                            <div id="card-element">
                                <!-- A Stripe Element will be inserted here. -->
                            </div>
                            <div id="card-errors" role="alert"></div>
                        </div>

                        <input type="hidden" id="stripeToken">

                        <button type="submit" class="btn btn-primary">Pay Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{{--    // payment modal scripte //--}}
    <script>

        // Get all radio buttons
        let radioButtons = document.querySelectorAll('.radio');

        // Loop through each radio button and add the event listener
        radioButtons.forEach(function(radioButton) {
            radioButton.addEventListener('click', function() {
                console.log('radio button clicked');
                // You can also log the value of the selected radio button
                console.log('Selected Ticket Price: $' + radioButton.value);
            });
        });



        $(document).ready(function () {

            var eventName = $(this).data('event-name');
            // alert(email);
            // var eventName = document.getElementById('eventName');
            var successRoute = @json(route('thankYou'));
            const stripe = Stripe('{{ env('STRIPE_KEY') }}');
            const elements = stripe.elements();

            const card = elements.create('card');

            card.mount('#card-element');

            // Handle form submission
            $('#paymentForm1').on('submit', async function (e) {
                e.preventDefault();
                var PriceInput = document.getElementById('priceInput');
                var priceValue = PriceInput ? PriceInput.value : null;

                // var eventName = $(this).data('event-name');
                const name = $('#name').val();  // Assuming there's an input field with ID 'name'
                const phone_number = $('#phone-number').val();  // Assuming there's an input field with ID 'phone-number'
                const email = $('#email').val();
                const event = $('#eventName').val();
                const event_id = $('.event-ticket-options').data('event-id');
                const cardHolderName = $('#card-holder-name').val();
                const {token, error} = await stripe.createToken(card);
                if (!priceValue || priceValue.trim() === '') {
                    alert('Please select a price by clicking on a price option.');
                    return; // Stop form submission
                }
                if (error) {
                    $('#card-errors').text(error.message);
                } else {
                    $('#stripeToken').val(token.id);
                    $.ajax({
                        url: '{{ route('payment') }}',
                        method: 'POST',
                        data: {
                            stripeToken: $('#stripeToken').val(),
                            _token: '{{ csrf_token() }}',
                            cardHolderName: cardHolderName,
                            name: name,
                            number: phone_number,
                            email: email,
                            event_id: event_id,
                            eventName: event,
                            price: priceValue,
                        },
                        success: function (response) {
                            alert('Payment Successful!');
                            window.location.href = successRoute;
                            $('#paymentModal').modal('hide');
                        },
                        error: function (error) {
                            alert('Payment Failed!');
                            console.error(error);
                        }
                    });
                }
            });

            $('.btn-close').on('click',function(){
                $('#paymentModal').modal('hide');
            })
        });
    </script>

    <div class="modal fade" id="customizeModal" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customizeModalLabel">Customize Your Quantity</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                <div class="mb-3" @if(auth()->check()) style="display:none" @else style="display:display" @endif >
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name1" name="name" required>
                </div>
                <div class="mb-3" @if(auth()->check()) style="display:none" @else style="display:display" @endif >
                    <label for="email" class="form-label">Email Address</label>
                    <input type="email" class="form-control" id="email1" required>
                </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Contact Number</label>
                        <input type="number" class="form-control" id="number1" required>
                    </div>
                    <div class="d-flex justify-content-center align-items-center">
                        <p class="pr-5">Ticket Quantity</p>
                        <button class="btn btn-danger decrement-btn" style="margin-right: 20px;">-</button>
                        <input type="number" id="quantity" value="1" min="1" class="form-control text-center" style="width: 80px;">
                        <button class="btn btn-success increment-btn" style="margin-left: 20px;">+</button>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary send-btn">Send</button>
                </div>
            </div>
        </div>
    </div>
    <script>



        document.addEventListener('DOMContentLoaded', function () {
            const decrementBtn = document.querySelector('.decrement-btn');
            const incrementBtn = document.querySelector('.increment-btn');
            const quantityInput = document.getElementById('quantity');
            const sendBtn = document.querySelector('.send-btn');
            var eventName = $(this).data('event-name');
            const userName = document.getElementById('name1');
            const userEmail = document.getElementById('email1');
            const userNumber = document.getElementById('number1');

            incrementBtn.addEventListener('click', function () {
                let currentValue = parseInt(quantityInput.value);
                quantityInput.value = currentValue + 1;
            });

            decrementBtn.addEventListener('click', function () {
                let currentValue = parseInt(quantityInput.value);
                if (currentValue > 1) {
                    quantityInput.value = currentValue - 1;
                }
            });


            sendBtn.addEventListener('click', function () {
                var isAuthenticated = @json(Auth::check());
                const quantity = quantityInput.value;
                const name = userName.value;
                const email = userEmail.value
                const number = userNumber.value
                const event_id = $('.event-ticket-options').data('event-id');
                var eventName = $(this).data('event-name');
                const event = $('#eventName').val();
                if (!isAuthenticated) {
                    if (!name) {
                        alert('Please fill the name!');
                        return false;
                    }
                    if (!email) {
                        alert('Please fill the email!');
                        return false;
                    }
                    if (!number) {
                        alert('Please fill the number!');
                        return false;
                    }
                } else {
                    if (!number) {
                        alert('Please fill the number!');
                        return false;
                    }
                }

                $.ajax({
                        url:'{{ route("customize.quantity") }}',
                        method: 'POST',
                        data : {
                            _token: '{{ csrf_token() }}',
                            quantity : quantity,
                            event_name : eventName,
                            event_id : event_id,
                            name1 : name,
                            email1 : email,
                            number : number,
                        },
                    success: function (response) {
                        alert('Quantity sent successfully: ' + quantity );
                        $('#customizeModal').modal('hide');
                    },
                    error: function (error) {
                        alert(error);
                        console.error(error);
                    }
                    })
            });
        });
    </script>




@endsection