@extends('frontend.layouts.master')
<!-- Start Header section -->
@section('meta_description', $tour->meta_description)
@section('meta_keywords', $tour->meta_keyword)
@section('canonical_url', $tour->canonical_url)
@section('title')
    {{ $tour->name }} - Bangladesh Unbound
@endsection
<!-- Open Graph -->
@section('og_type', 'website')
@section('og_title', $tour->og_title)
@section('og_description', $tour->og_description)
@section('og_image', asset("storage/$tour->og_image"))
@section('og_url', 'https://www.bangladeshunbound.com/')
@section('og_site_name', 'Bangladesh Unbound')
<!-- Twitter Card -->
@section('x_card', 'summary_large_image')
@section('x_title', $tour->twitter_title)
@section('x_description', $tour->twitter_description)
@section('x_image', asset("storage/$tour->twitter_image"))

@section('inline-css')
    /* Itinerary Styles */
    .day-section {
    margin-bottom: 2rem;
    }

    .day-section:last-child {
    margin-bottom: 0;
    }

    .day-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    }

    .day-header i {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    color: #198754;
    }

    .day-header h4 {
    margin: 0;
    color: #333;
    font-weight: 600;
    font-size: 1.1rem;
    }

    /* Timeline */
    .timeline {
    padding-left: 0;
    }

    .timeline-item {
    margin-bottom: 1.5rem;
    padding-left: 0;
    }

    .timeline-time {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
    }

    .timeline-time i {
    margin-right: 0.5rem;
    color: #999;
    font-size: 0.9rem;
    }

    .timeline-content p {
    margin: 0;
    color: #666;
    line-height: 1.6;
    font-size: 0.9rem;
    padding-left: 1.5rem;
    }
@endsection
<!-- End Header Section -->
@section('content')
    <!-- Hero Section -->
    <section class="hero-section"
        style="background-image: url('{{ $tour->thumbnail ?? asset('frontend/img/hero-default.jpg') }}');">
        <div class="container">
            <div class="row align-items-center min-vh-70">
                <div class="col-lg-8">
                    <h1 class="mb-4 hero-title fw-bold">{{ $tour->name }}</h1>
                    <p class="mb-4 hero-subtitle">{{ $tour->sub_title }}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Breadcrumb -->
    <nav class="breadcrumb-nav" aria-label="breadcrumb">
        <div class="container">
            <div class="text-white d-flex align-items-center">
                <i class="bi bi-house-door me-2"></i>
                <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
                <span class="me-2">•</span>
                <a href="{{ route('home.tours') }}" class="text-white text-decoration-none me-2">Tours</a>
                <span class="me-2">•</span>
                <span>{{ $tour->name }}</span>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <!-- Left Column - Tour Details -->
                <div class="col-lg-8">
                    <!-- Tour Info Grid -->
                    <div class="tour-info-grid">
                        <div class="info-card">
                            <i class="bi bi-calendar-event"></i>
                            <h6 class="mb-1 fw-bold">Tour Type</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->tourType->name }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-clock"></i>
                            <h6 class="mb-1 fw-bold">Duration</h6>
                            <p class="mb-0 text-muted">{{ $tour->duration }} (+/-)</p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-people"></i>
                            <h6 class="mb-1 fw-bold">Group Size</h6>
                            <p class="mb-0 text-muted">{{ $tour->group_size }}</p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-house"></i>
                            <h6 class="mb-1 fw-bold">Accommodation</h6>
                            <p class="mb-0 text-muted">{{ $tour->accommodation }}</p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-car-front"></i>
                            <h6 class="mb-1 fw-bold">Transportation</h6>
                            <p class="mb-0 text-muted">{{ $tour->transportation }}</p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-cup-hot"></i>
                            <h6 class="mb-1 fw-bold">Meals</h6>
                            <p class="mb-0 text-muted">{{ $tour->meals }}</p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-heart-pulse"></i>
                            <h6 class="mb-1 fw-bold">Fitness Level</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->fitness_level }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-person-plus"></i>
                            <h6 class="mb-1 fw-bold">Minimum Age</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->minimum_age }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-translate"></i>
                            <h6 class="mb-1 fw-bold">Language</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->language }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-calendar-check"></i>
                            <h6 class="mb-1 fw-bold">Best Season</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->best_season }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-compass"></i>
                            <h6 class="mb-1 fw-bold">Guiding Method</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->guiding_method }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-geo-alt"></i>
                            <h6 class="mb-1 fw-bold">Location</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->location }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-triangle"></i>
                            <h6 class="mb-1 fw-bold">Max Altitude</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->max_altitude }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-airplane"></i>
                            <h6 class="mb-1 fw-bold">Arrival On</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->arrival_on }}
                            </p>
                        </div>
                        <div class="info-card">
                            <i class="bi bi-airplane-engines"></i>
                            <h6 class="mb-1 fw-bold">Departure From</h6>
                            <p class="mb-0 text-muted">
                                {{ $tour->departure_from }}
                            </p>
                        </div>
                    </div>

                    <!-- Tour Description -->
                    <div class="mb-4">
                        <h3 class="mb-4 fw-bold">Tour Description</h3>
                        {!! $tour->intro !!}
                    </div>

                    <!-- Image Gallery -->
                    @php
                        $images = $tour->tourImages;
                    @endphp
                    <div class="gallery-container">
                        <h3 class="mb-4 fw-bold">Tour Gallery</h3>
                        <div class="position-relative">
                            <img id="mainGalleryImage"
                                src="{{ isset($images[0]->image_url) ? $images[0]->image_url : asset('placeholder-image.png') }}"
                                src="{{ isset($images[0]->image_url) ? $images[0]->image_url : asset('placeholder-image.png') }}"
                                alt="Dhaka City Tour" class="main-gallery-image">

                            <button class="gallery-nav prev">
                                <i class="bi bi-chevron-left"></i>
                            </button>
                            <button class="gallery-nav next">
                                <i class="bi bi-chevron-right"></i>
                            </button>
                        </div>

                        <div class="thumbnail-gallery">
                            @foreach ($images as $index => $image)
                                <img src="{{ isset($image->image_url) ? $image->image_url : asset('placeholder-image.png') }}"
                                    <img
                                    src="{{ isset($image->image_url) ? $image->image_url : asset('placeholder-image.png') }}"
                                    alt="Dhaka Tour {{ $index + 1 }}"
                                    class="thumbnail {{ $index === 0 ? 'active' : '' }}"
                                    data-index="{{ $index }}">
                            @endforeach
                        </div>
                    </div>

                    <!-- Tour Highlights Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#tourHighlights"
                            aria-expanded="true" aria-controls="tourHighlights">
                            <div class="section-icon">
                                <i class="bi bi-list-ul"></i>
                            </div>
                            <h3 class="section-title">Tour Highlights</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse show" id="tourHighlights">
                            <div class="section-content">
                                {{-- <ul class="highlights-list"> --}}
                                {{-- <ul class="highlights-list"> --}}
                                {!! $tour->tour_highlight !!}
                                {{-- </ul> --}}
                            </div>
                        </div>
                    </div>

                    <!-- Tour Attractions Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#tourAttractions"
                            aria-expanded="false" aria-controls="tourAttractions">
                            <div class="section-icon">
                                <i class="bi bi-compass"></i>
                            </div>
                            <h3 class="section-title">Tour Attractions</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="tourAttractions">
                            <div class="section-content">
                                <!-- Tour Attractions content will be added here -->
                                {!! $tour->tour_attraction !!}
                            </div>
                        </div>
                    </div>

                    <!-- TODO:Itinerary Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#itinerary"
                            aria-expanded="false" aria-controls="itinerary">
                            <div class="section-icon">
                                <i class="bi bi-map"></i>
                            </div>
                            <h3 class="section-title">Itinerary</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="itinerary">
                            <div class="section-content">
                                @foreach ($tour->formatted_itinerary as $dayNumber => $content)
                                    <div class="day-section">
                                        <div class="day-header">
                                            <i class="bi bi-calendar-check text-success"></i>
                                            <h4>Day {{ $dayNumber }}</h4>
                                        </div>
                                        <div class="timeline">
                                            {!! $content !!}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Tour Map Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#tourMap"
                            aria-expanded="false" aria-controls="tourMap">
                            <div class="section-icon">
                                <i class="bi bi-geo-alt"></i>
                            </div>
                            <h3 class="section-title">Tour Map</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="tourMap">
                            <div class="section-content">
                                <!-- Tour Map content will be added here -->
                                <img src="{{ $tour->map_image }}" alt="Tour Map" class="img-fluid">
                            </div>
                        </div>
                    </div>

                    <!-- Trip Notes Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#tripNotes"
                            aria-expanded="false" aria-controls="tripNotes">
                            <div class="section-icon">
                                <i class="bi bi-journal-text"></i>
                            </div>
                            <h3 class="section-title">Trip Notes</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="tripNotes">
                            <div class="section-content">
                                <!-- Trip Notes content will be added here -->
                                {!! $tour->trip_notes !!}
                            </div>
                        </div>
                    </div>

                    <!-- FAQ Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#faq"
                            aria-expanded="false" aria-controls="faq">
                            <div class="section-icon">
                                <i class="bi bi-question-circle"></i>
                            </div>
                            <h3 class="section-title">FAQ</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="faq">
                            <div class="section-content">
                                <!-- FAQ content will be added here -->
                                {!! $tour->faq !!}
                            </div>
                        </div>
                    </div>

                    <!-- Reviews Section -->
                    <div class="tour-section">
                        <div class="section-header" data-bs-toggle="collapse" data-bs-target="#reviews"
                            aria-expanded="false" aria-controls="reviews">
                            <div class="section-icon">
                                <i class="bi bi-star"></i>
                            </div>
                            <h3 class="section-title">Reviews</h3>
                            <i class="bi bi-chevron-down toggle-icon"></i>
                        </div>
                        <div class="collapse" id="reviews">
                            <div class="section-content">
                                <!-- Reviews content will be added here -->
                                {!! $tour->reviews !!}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Booking Card -->
                <div class="col-lg-4">
                    @include('frontend.tours.partials.book-form')
                </div>
            </div>
        </div>
        <!-- Fullscreen Modal -->
        <div class="fullscreen-modal" id="fullscreenModal">
            <button class="close-fullscreen" onclick="closeFullscreen()">&times;</button>
            <img id="fullscreenImage" src="" alt="Fullscreen Image" class="fullscreen-image">
        </div>
    </section>
@endsection
@push('scripts')
    {{-- axios cdn --}}
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        $(document).ready(function() {
            let currentIndex = 0;
            const images = @json($tour->tourImages);

            function changeMainImage(index) {
                if (!images.length) return;

                $("#mainGalleryImage").attr(
                    "src",
                    images[index]?.image_url || "/frontend/img/default.jpg" || "/frontend/img/default.jpg"
                );

                currentIndex = index;

                $(".thumbnail").removeClass("active");
                $(".thumbnail").eq(index).addClass("active");
            }

            // Thumbnail click
            $(".thumbnail").on("click", function() {
                const index = $(this).data("index");
                changeMainImage(index);
            });

            // Prev button
            $(".gallery-nav.prev").on("click", function() {
                const newIndex = (currentIndex - 1 + images.length) % images.length;
                changeMainImage(newIndex);
            });

            // Next button
            $(".gallery-nav.next").on("click", function() {
                const newIndex = (currentIndex + 1) % images.length;
                changeMainImage(newIndex);
            });


            const $form = $('#bookingForm');
            const $btn = $('#bookNowBtn');

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

                // Remove previous error messages
                $('.text-danger').remove();
                $('.is-invalid').removeClass('is-invalid');

                $btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2"></span> Processing...');

                const formData = new FormData(this);

                axios.post($form.attr('action'), formData)
                    .then(res => {
                        const data = res.data;

                        if (data.success) {
                            toastr.success(data.message ||
                                'Your booking has been added to cart successfully.');

                            $btn.html(
                                '<span class="spinner-border spinner-border-sm me-2"></span> Redirecting...'
                            );

                            setTimeout(() => {
                                window.location.href = data.redirect_url ??
                                    "{{ route('home.cart.index') }}";
                            }, 1500);
                        } else {
                            toastr.warning(data.message ||
                                'Something went wrong. Please check and try again.');
                            $btn.prop('disabled', false)
                                .html('<i class="bi bi-cart-plus me-2"></i>Book Now');
                        }
                    })
                    .catch(err => {
                        const response = err.response;

                        if (response?.status === 422 && response.data?.errors) {

                            $.each(response.data.errors, function(field, messages) {
                                const $input = $(`[name="${field}"]`);
                                if ($input.length) {
                                    $input.addClass('is-invalid');
                                    $input.after(
                                        `<span class="mt-1 text-danger d-block">${messages[0]}</span>`
                                    );
                                }
                            });
                        } else {
                            const viewCartUrl = response?.data?.viewCartUrl ??
                                "{{ route('home.cart.index') }}";
                            const message = response?.data?.message ?
                                `${response.data.message} <a class="p-0 btn btn-link" href="${viewCartUrl}" target="_blank">Go to Cart</a>` :
                                'An unexpected error occurred. Please try again.';

                            if (response?.data?.redirect_url) {
                                toastr.warning(response.data.message ||
                                    'Something went wrong. Please check and try again.');
                                window.location.href = response.data.redirect_url;
                            } else {
                                toastr.error(message, '', {
                                    timeOut: 10000,
                                    closeButton: true,
                                    escapeHtml: false
                                });
                            }


                        }
                    })
                    .finally(() => {
                        if (!$btn.html().includes('Redirecting')) {
                            $btn.prop('disabled', false)
                                .html('<i class="bi bi-cart-plus me-2"></i>Book Now');
                        }
                    });
            });
        });
    </script>

    <script>
        // Open fullscreen modal
        function openFullscreen(imageSrc) {
            const modal = document.getElementById('fullscreenModal');
            const fullscreenImage = document.getElementById('fullscreenImage');
            fullscreenImage.src = imageSrc;
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        // Close fullscreen modal
        function closeFullscreen() {
            const modal = document.getElementById('fullscreenModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // Add click event to main gallery image for fullscreen
        document.addEventListener('DOMContentLoaded', function() {
            const mainImage = document.getElementById('mainGalleryImage');
            mainImage.addEventListener('click', function() {
                openFullscreen(this.src);
            });

            // Close fullscreen when clicking outside the image
            const modal = document.getElementById('fullscreenModal');
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeFullscreen();
                }
            });

            // Close fullscreen with Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeFullscreen();
                }
            });

            // Keyboard navigation for gallery
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft') {
                    previousImage();
                } else if (e.key === 'ArrowRight') {
                    nextImage();
                }
            });
        });

        // Booking functionality
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const adultSelect = document.getElementById('number_of_adults');
            const kidSelect = document.getElementById('number_of_kids');

            const adultPriceDiv = document.getElementById('adultPrice');
            const kidPriceDiv = document.getElementById('kidPrice');

            const totalAmountSpan = document.getElementById('totalMinimumBookingAmount');
            const totalAmountSpanValue = document.getElementById('totalMinimumBookingValue');
            const bookingMoneyInput = document.getElementById('bookingMoney');
            const fullPaymentInput = document.getElementById('fullPayment');

            const fullPaymentAmountSpan = document.getElementById('fullPaymentBookingAmount');
            const fullPaymentAmountSpanValue = document.getElementById('fullPaymentBookingValue');


            const adultPrice =
                {{ ($tour->price_per_adult ?? 0) - ($tour->discount_price_per_adult ?? 0) }}; // Price per adult
            const kidPrice =
                {{ ($tour->price_per_kid ?? 0) - ($tour->discount_price_per_kid ?? 0) }}; //  price per kids

            const bookingAmountPerAdult = {{ $tour->booking_amount_per_adult ?? 0 }}; // Booking amount per adult
            const bookingAmountPerKid = {{ $tour->booking_amount_per_kid ?? 0 }}; // Booking amount per kid

            function updatePrices() {
                const adults = parseInt(adultSelect.value) || 0;
                const kids = parseInt(kidSelect.value) || 0;

                const totalAdultPrice = adults * adultPrice;
                const totalKidPrice = kids * kidPrice;

                // Update individual category prices
                if (adultPriceDiv) adultPriceDiv.textContent = `৳ ${totalAdultPrice.toFixed(2)}`;
                if (kidPriceDiv) kidPriceDiv.textContent = kids > 0 ? `৳ ${totalKidPrice.toFixed(2)}` : '';

                

                // Update total amount
                const totalAmount = totalAdultPrice + totalKidPrice;

                const totalBookingAmount = (adults * bookingAmountPerAdult) + (kids * bookingAmountPerKid);


                if (totalAmountSpan) totalAmountSpan.textContent = `৳ ${totalBookingAmount.toFixed(2)}`;
                if (totalAmountSpanValue) totalAmountSpanValue.value = totalBookingAmount.toFixed(2);

                // Update full payment amount
                if (fullPaymentAmountSpan) fullPaymentAmountSpan.textContent = `৳ ${totalAmount.toFixed(2)}`;
                if (fullPaymentAmountSpanValue) fullPaymentAmountSpanValue.value = totalAmount.toFixed(2);

                // Update all radio inputs value
                bookingMoneyInput.setAttribute('value', totalBookingAmount.toFixed(2));
                fullPaymentInput.setAttribute('value', totalAmount.toFixed(2));
            }

            // Event listeners
            if (adultSelect) adultSelect.addEventListener('change', updatePrices);
            if (kidSelect) kidSelect.addEventListener('change', updatePrices);

            // updatePrices();
        });
    </script>
@endpush