@extends('layout.master')

@section('meta')
    {{-- @include('layout.partials.seo', [
        'title' => $tour->meta_title,
        'description' => $tour->meta_description,
        'keywords' => $tour->meta_keywords,
        'image' => $tour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url'],
        'schema' => $tour->schema,
    ]) --}}
@endsection

@section('extraStyles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection
@section('content')
    <div class="container-fluid bg-breadcrumb"
        style="  position: relative;
background: linear-gradient(#d09d5b30, #cc944e47), url(./assets/images/gallery-3.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 0 100px 0;
transition: 0.5s;">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                Cart
            </h4>
        </div>
    </div>


    <div class="container-fluid  py-3 banar">
        <ol class="breadcrumb text-dark mb-0 wow fadeInDown" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="index.html" class="text-dark">Home</a></li>
            <li class="breadcrumb-item"><a href="#" class="text-dark">Pages</a></li>
            <li class="breadcrumb-item active text-secondary">Cart</li>
        </ol>
    </div>


    <section class="tour-details mt-4">
        <div class="container">
            <div class="row cart_sh">
                <div class="col-xl-8 col-lg-8">
                    <div class="tour-heading mb-3 ">
                        <a href="#">
                            <h2>Shopping Cart</h2>
                        </a>

                    </div>

                    @php
                        $totalPrice = 0; // Initialize the variable here
                    @endphp
                    @foreach ($tours as $tour)
                        <div class="tour-item" data-tour-id="{{ $tour->id }}">
                            <div class="cruise_search_result_wrapper">
                                <div class="cruise_search_item">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="cruise_item_img">
                                                <a
                                                    href="{{ route('tour.show', ['categorySlug' => $tour->category->category->slug, 'subCategorySlug' => $tour->category->slug, 'tourSlug' => $tour->slug]) }}">
                                                    <img src="{{ $tour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH, 'webp')['url'] }}"
                                                        alt="{{ $tour->getFirstMediaUrlOrDefault(MediaHelper::TOUR_MEDIA_PATH)['alt'] }}"
                                                        title="{{ $tour->getFirstMediaUrlOrDefault(MediaHelper::PARTNER_MEDIA_PATH)['title'] }}"></a>
                                            </div>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="cruise_item_inner_content">
                                                <div class="cruise_content_top_wrapper">
                                                    <div class="cruise_content_top_left">
                                                        <a
                                                            href="{{ route('tour.show', ['categorySlug' => $tour->category->category->slug, 'subCategorySlug' => $tour->category->slug, 'tourSlug' => $tour->slug]) }}">
                                                            <h4>{{ $tour->name }}</h4>
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="cruise_content_middel_wrapper mt-3">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control border-0 mb-4"
                                                                    id="adults_val_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['adults'] }}" />
                                                                <label for="Adults">Adults ( + 12 years )</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control border-0 mb-4"
                                                                    id="Children_val_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['children1'] }}" />
                                                                <label for="Children">Children ( 6 to 11 years )</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control border-0 mb-4"
                                                                    id="Childrenkid_val_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['children2'] }}" />
                                                                <label for="Children">Children ( 3 to 5 years )</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="number" class="form-control border-0 mb-4"
                                                                    id="Infants_val_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['infants'] }}" />
                                                                <label for="Infants">Infants (up to 2 years )</label>
                                                            </div>
                                                        </div>



                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="text"
                                                                    id="start-date-picker_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['start_date'] }}"
                                                                    class="flatpickr form-control" placeholder="dd-mm-YY">


                                                                <label for="start-date-picker_{{ $tour->id }}"
                                                                    class="check"> Start
                                                                    Date</label>

                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-floating">
                                                                <input type="text"
                                                                    id="end-date-picker_{{ $tour->id }}"
                                                                    value="{{ $tour->cart_data['end_date'] }}"
                                                                    class="flatpickr form-control" placeholder="dd-mm-YY">
                                                                <label
                                                                    for="end-date-picker_{{ $tour->id }}"class="check">
                                                                    End Date</label>

                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="cruise_content_bottom_wrapper">
                                                    <div class="cruise_content_bottom_left">
                                                        <div class="cruise_content_middel_right mb-3">
                                                            <h3>$ <span
                                                                    id="subtotalPrice-{{ $tour->id }}">{{ number_format($tour->cart_data['total_price'], 2) }}</span>
                                                            </h3>
                                                        </div>
                                                    </div>
                                                    <div class="cruise_content_bottom_right">
                                                        <button class="btn btn_theme btn_md remove-btn"
                                                            data-id="{{ $tour->id }}">Remove</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php
                            $totalPrice += $tour->cart_data['total_price'];
                        @endphp
                    @endforeach



                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="tour-details-right">
                        <div class="tour-details-package mb-20">
                            <div class="tour-details-package-item">
                                <div class="tour-details-package-content">
                                    <h3 class="tour-details-package-title"> Cart</h3>
                                    <hr>
                                    <label class="price">Total ({{ count($tours) }} Item) </label>
                                    <p class="price"> Total price : <strong> <span id="totalpriceofcart">$
                                                {{ $totalPrice }}</span></strong></p>


                                    <a href="{{ route('checkout') }}" class="btn  main-btn--scroll now mt-3"><i
                                            class="fa fa-shopping-cart"></i> Checkout</a>


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

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('extraScripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        $(document).ready(function() {
            // Initialize Flatpickr for Start Date
            flatpickr(".flatpickr", {
                dateFormat: "d-m-Y" // Formats date as day-month-year
            });

            // Initialize Flatpickr for End Date
            flatpickr(".flatpickr", {
                dateFormat: "d-m-Y" // Formats date as day-month-year
            });
        });
    </script>



    {{-- <script src="{{ asset('assets/js/cart.js') }}"></script> --}}
    <script>
        $(document).ready(function() {
            // Function to calculate and update price for a specific tour
            function calculatePrice(tourId) {
                const adults = parseInt($('#adults_val_' + tourId).val()) || 0;
                const children1 = parseInt($('#Children_val_' + tourId).val()) || 0;
                const children2 = parseInt($('#Childrenkid_val_' + tourId).val()) || 0;
                const infants = parseInt($('#Infants_val_' + tourId).val()) || 0;
                const url = "{{ route('tour.calculatePrice', ':tourId') }}".replace(':tourId', tourId);
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        adults: adults,
                        children1: children1,
                        children2: children2,
                        infants: infants,
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        // Update the price breakdown
                        $('#case-total-' + tourId).text(response.adult_price.toFixed(2));
                        $('#Children-total-' + tourId).text(response.child_1_price.toFixed(2));
                        $('#Children_total-' + tourId).text(response.child_2_price.toFixed(2));
                        $('#Infants-total-' + tourId).text(response.infint_price.toFixed(2));

                        // Update the subtotal
                        const totalPrice = response.adult_price + response.child_1_price + response
                            .child_2_price + response.infint_price;
                        $('#subtotalPrice-' + tourId).text(totalPrice.toFixed(2));

                        $('#totalpriceofcart').text(totalPrice.toFixed(2));
                        const start_date = $(`#start-date-picker_${tourId}`)
                            .val(); // Get the start date value
                        const end_date = $(`#end-date-picker_${tourId}`)
                            .val(); // Get the end date value

                        addToCart(tourId, adults, children1, children2, infants, totalPrice, start_date,
                            end_date);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error calculating price:', error);
                    }
                });
            }

            // Event handler for input change
            $('.form-floating input').on('input', function() {
                const tourId = $(this).closest('.tour-item').data('tour-id');
                calculatePrice(tourId);
            });

            // Increment/Decrement handlers for each tour
            $('.increase-btn').on('click', function() {
                const tourId = $(this).data('tour-id');
                const input = $(this).siblings('input');
                let currentValue = parseInt(input.val()) || 0;
                input.val(currentValue + 1);
                calculatePrice(tourId);
            });


            $('.decrease-btn').on('click', function() {
                const tourId = $(this).data('tour-id');
                const input = $(this).siblings('input');
                let currentValue = parseInt(input.val()) || 0;
                if (currentValue > 0) {
                    input.val(currentValue - 1);
                    calculatePrice(tourId);
                }
            });

            // Initial price calculation for each tour
            $('.tour-item').each(function() {
                const tourId = $(this).data('tour-id');
                calculatePrice(tourId);
            });
        });

        $('.remove-btn').on('click', function() {
            const tourId = $(this).data('id'); // Retrieve the tour ID from the button's data attribute

            $.ajax({
                url: `/cart/remove/${tourId}`, // Dynamically insert the tour ID into the URL
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}', // Include the CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        // Remove the tour item from the DOM
                        $('[data-tour-id="' + tourId + '"]').remove();

                        // Update the cart total and item count
                        $('#cart-total').text(response.total.toFixed(2)); // Update total price
                        $('#cart-items-count').text(response.items); // Update item count
                    } else {
                        alert('Failed to remove item from the cart.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error removing tour from cart:', error);
                }
            });
        });

        // Example of adding a tour to the cart


        function recalculateCart() {
            // Recalculate the total price in the sidebar or elsewhere
            let totalPrice = 0;
            $('.tour-item').each(function() {
                const tourId = $(this).data('tour-id');
                totalPrice += parseFloat($('#subtotalPrice-' + tourId).text());
            });

            $('.total-price').text('$ ' + totalPrice.toFixed(2));
        }
    </script>
    <script>
        // this for update cart dates 
        $(document).ready(function() {
            // Listen for changes to the start and end date pickers
            $(document).on('change', '.flatpickr', function() {
                const tourId = $(this).attr('id').split('_')[1]; // Extract the tour ID from the input ID
                const startDate = $(`#start-date-picker_${tourId}`).val(); // Get the start date value
                const endDate = $(`#end-date-picker_${tourId}`).val(); // Get the end date value

                if (startDate && endDate) {
                    updateCartDates(tourId, startDate, endDate);
                }
            });
        });

        // Function to update the cart with new dates
        function updateCartDates(tourId, startDate, endDate) {
            const data = {
                tour_id: tourId,
                start_date: startDate,
                end_date: endDate,
            };

            // Send the updated dates to the server
            fetch('/cart/update-dates', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                    body: JSON.stringify(data),
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Failed to update dates in cart');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.message) {
                        alert(data.message); // Show a success message
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred while updating the dates.');
                });
        }
    </script>
    <script>
        function addToCart(tourId, adults, children1, children2, infants, totalPrice, start_date, end_date) {
            $.ajax({
                url: `/cart/update/${tourId}`, // Dynamically include the tour ID in the URL
                method: 'POST',
                data: {
                    tour_id: tourId,
                    adults: adults,
                    children1: children1,
                    children2: children2,
                    infants: infants,
                    total_price: totalPrice,
                    start_date: start_date,
                    end_date: end_date,

                    _token: '{{ csrf_token() }}', // Make sure to include the CSRF token
                },
                success: function(response) {
                    if (response.cart) {
                        console.log('Updated cart:', response.cart);
                        // You can now update the cart UI here if needed
                    } else {
                        alert('Failed to update cart');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error adding to cart:', error);
                }
            });
        }
    </script>
@endsection