@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="hero-title fw-bold mb-4">{{ $tour->name }}</h1>
                <p class="hero-subtitle mb-4">{{ $tour->sub_title }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Breadcrumb -->
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <div class="container">
        <div class="d-flex align-items-center text-white">
            <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="fw-bold mb-1">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="fw-bold mb-1">Duration</h6>
                        <p class="mb-0 text-muted">{{ $tour->duration }} (+/-)</p>
                    </div>
                    <div class="info-card">
                        <i class="bi bi-people"></i>
                        <h6 class="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">Location</h6>
                        <p class="mb-0 text-muted">
                            {{ $tour->location }}
                        </p>
                    </div>
                    <div class="info-card">
                        <i class="bi bi-triangle"></i>
                        <h6 class="fw-bold mb-1">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="fw-bold mb-1">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="fw-bold mb-1">Departure From</h6>
                        <p class="mb-0 text-muted">
                            {{ $tour->departure_from }}
                        </p>
                    </div>
                </div>

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

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

                        <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('frontend/img/default.jpg') }}"
                            alt="Dhaka Tour {{ $index + 1 }}" class="thumbnail {{ $index === 0 ? 'active' : '' }}"
                            data-index="{{ $index }}" loading="lazy">
                        @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">
                                {!! $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">
                            <!-- Day 1 -->
                            @php
                            // Get the first itinerary
                            $itinerary = $tour->itineraries->first()->itinerary ?? [];

                            // If it's an object (stdClass), convert to array
                            if (is_object($itinerary)) {
                            $itinerary = (array) $itinerary;
                            }
                            @endphp
                            @foreach ($itinerary as $dayNumber => $content)
                            <div class="itinerary-day mb-4 p-4 border rounded">
                                <div class="day-header">
                                    <i class="bi bi-calendar-check text-success"></i>
                                    <h4>Day {{ $dayNumber }}</h4>
                                </div>
                                <div class="mt-2">
                                    {!! $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" loading="lazy">
                        </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>
</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="text-danger d-block mt-1">${messages[0]}</span>`);
                        }
                    });
                } else {
                    const viewCartUrl = response?.data?.viewCartUrl ?? "{{ route('home.cart.index') }}";
                    const message = response?.data?.message
                        ? `${response.data.message} <a class="btn btn-link p-0" href="${viewCartUrl}" target="_blank">Go to Cart</a>`
                        : 'An unexpected error occurred. Please try again.';

                    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>
@endpush