@extends('layout.app')

@section('seo')
    <x-seo-meta
        :title="$tour->name"
        :description="Str::limit(strip_tags($translation->description ?? ''), 160)"
        :image="$tour->image ? url('storage/' . $tour->image) : ''"
        type="article"
        :keywords="$tour->name . ', ' . __('tour.keywords')"
        :author="config('app.name')"
    />
@endsection

@section('content')
    <div class="breadcumb-wrapper background-image" style="background-image: url('{{ $tour->image ? asset('storage/' . $tour->image) : asset('assets/img/bg/breadcumb-bg.jpg') }}');">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">{{ $tour->name }}</h1>
                <ul class="breadcumb-menu">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li>{{ $tour->name }}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tour-details-area space">
        <div class="container">
            <div class="row">
                <div class="col-xxl-8 col-lg-7">
                    <div class="tour-details-wrap">

                        <div class="slider-area tour-slider1 mb-4">
                            @if(count($tour->images) > 0)
                            <div class="swiper th-slider tour-details-slider" id="tourSlider4" data-slider-options='{"effect":"fade","loop":true,"thumbs":{"swiper":".tour-thumb-slider"},"autoplayDisableOnInteraction":"true"}'>
                                <div class="swiper-wrapper">
                                    @foreach($tour->images as $img)
                                    <div class="swiper-slide">
                                        <div class="tour-img">
                                            <img
                                                src="{{ url('storage/' . $img) }}"
                                                alt="{{ $tour->name }}"
                                                loading="lazy"
                                            />
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <div style="margin-top:15px;" class="swiper th-slider tour-thumb-slider" data-slider-options='{"effect":"slide","loop":true,"breakpoints":{"0":{"slidesPerView":2},"576":{"slidesPerView":"2"},"768":{"slidesPerView":"3"},"992":{"slidesPerView":"3"},"1200":{"slidesPerView":"3"}},"autoplayDisableOnInteraction":"true"}'>
                                <div class="swiper-wrapper">
                                    @foreach($tour->images as $img)
                                    <div class="swiper-slide">
                                        <div class="tour-img" style="height: 150px;">
                                            <img
                                                src="{{ asset('storage/' . $img) }}" alt="{{ $tour->name }}"
                                                loading="lazy"
                                            />
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            <button data-slider-prev="#tourSlider4" class="slider-arrow style3 slider-prev"><img src="{{ asset('assets/img/icon/hero-arrow-left.svg') }}" alt=""></button>
                            <button data-slider-next="#tourSlider4" class="slider-arrow style3 slider-next"><img src="{{ asset('assets/img/icon/hero-arrow-right.svg') }}" alt=""></button>
                            @endif
                        </div>

                        @if($tour->youtube_video_id)
                        <div class="tour-video mb-4">
                            <iframe
                                style="width: 50%; height: 300px;margin-left: 25%"
                                src="https://www.youtube.com/embed/{{ $tour->youtube_video_id }}?controls=0&modestbranding=1&rel=0&showinfo=0"
                                title="{{ $tour->name }}" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin"
                                allowfullscreen>
                            </iframe>
                        </div>
                        @endif

                        <div class="tour-details-content">
                            <div class="tour-meta d-flex gap-4 mb-4">
                                <div class="meta-item d-flex align-items-center">
                                    <div class="meta-icon me-2">
                                        <i class="fa-light fa-clock text-primary"></i>
                                    </div>
                                    <div class="meta-content">
                                        <span class="d-block text-muted small">{{ __('tour.duration') }}</span>
                                        <span class="fw-bold">{{ $tour->duration }}</span>
                                    </div>
                                </div>
                                <div class="meta-item d-flex align-items-center">
                                    <div class="meta-icon me-2">
                                        <i class="fa-light fa-users text-primary"></i>
                                    </div>
                                    <div class="meta-content">
                                        <span class="d-block text-muted small">{{ __('tour.max_participants') }}</span>
                                        <span class="fw-bold">{{ $tour->max_participants }}</span>
                                    </div>
                                </div>
                                <div class="meta-item d-flex align-items-center">
                                    <div class="meta-icon me-2">
                                        <i class="fa-light fa-signal text-primary"></i>
                                    </div>
                                    <div class="meta-content">
                                        <span class="d-block text-muted small">{{ __('tour.difficulty') }}</span>
                                        <span class="fw-bold">{{ __('tour.difficulty_levels.' . $tour->difficulty_level) }}</span>
                                    </div>
                                </div>
                                <div class="meta-item d-flex align-items-center">
                                    <div class="meta-icon me-2">
                                        <i class="fa-light fa-tag text-primary"></i>
                                    </div>
                                    <div class="meta-content">
                                        <span class="d-block text-muted small">{{ __('tour.price') }}</span>
                                        @php
                                            $tourService = app(App\Services\TourService::class);
                                            $lowestPriceInfo = $tourService->getLowestPrice($tour);
                                        @endphp
                                        @if($lowestPriceInfo)
                                            <span class="fw-bold">{{ number_format($lowestPriceInfo['price'], 2) }} €</span>
                                            <small class="d-block text-muted">{{ __('tour.up_to_participants', ['count' => $lowestPriceInfo['max_persons']]) }}</small>
                                        @else
                                            <span class="fw-bold">{{ __('tour.price_not_available') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="tour-details-text">
                                <strong>{{ __('tour.private_tour_note') }}</strong><br><br>
                                {!! isset($translation) ? $translation->description : '' !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-4 col-lg-5">
                    <aside class="sidebar-area">
                        <div class="widget widget_booking booking-form">
                            <h3 class="widget_title">{{ __('tour.book_now') }}</h3>
                            <div class="price-summary">
                                <h4>{{ __('tour.price_summary') }}</h4>
                                @if($lowestPriceInfo)
                                    <div class="participants-options">
                                        @foreach($tour->prices as $price)
                                            <div class="form-check mb-2">
                                                <input class="form-check-input price-option" type="radio"
                                                       name="price_option"
                                                       id="price_{{ $price['max_persons'] }}"
                                                       value="{{ $price['price'] }}"
                                                       data-max-persons="{{ $price['max_persons'] }}"
                                                       data-price="{{ $price['price'] }}"
                                                       {{ $loop->first ? 'checked' : '' }}>
                                                <label class="form-check-label" for="price_{{ $price['max_persons'] }}">
                                                    {{ __('tour.up_to_participants', ['count' => $price['max_persons']]) }} - €{{ number_format($price['price'], 2) }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <p>{{ __('tour.price_not_available') }}</p>
                                @endif
                            </div>
                            <form action="{{ url(app()->getLocale() . '/tours/' . urlencode($translation->slug) . '/checkout') }}" method="POST" id="tourCheckoutForm">
                                @csrf
                                <div class="form-group">
                                    <label for="name" class="form-label">{{ __('tour.form.name') }}</label>
                                    <input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required style="color: #000;">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="email" class="form-label">{{ __('tour.form.email') }}</label>
                                    <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required style="color: #000;">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="phone" class="form-label">{{ __('tour.form.phone') }}</label>
                                    <input type="tel" id="phone" name="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}" required style="color: #000;">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="tour_date" class="form-label">{{ __('tour.form.tour_date') }}</label>
                                    <input type="date" id="tour_date" name="tour_date" class="form-control @error('tour_date') is-invalid @enderror" value="{{ old('tour_date') }}" required style="color: #000;">
                                    @error('tour_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="notes" class="form-label">{{ __('tour.form.notes') }}</label>
                                    <textarea id="notes" name="notes" class="form-control @error('notes') is-invalid @enderror" rows="3" style="color: #000;">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                @if($lowestPriceInfo)
                                <div class="form-group">
                                    <button type="button" 
                                            class="th-btn pay-now-btn"
                                            data-id="tour-booking-{{ $tour->id }}"
                                            data-event="click"
                                            data-component="button"
                                            data-context="{{ json_encode([
                                                'tour_id' => $tour->id,
                                                'tour_name' => $tour->name,
                                                'tour_slug' => $translation->slug,
                                                'price' => $tour->prices[0]['price'] ?? 0,
                                                'page' => 'tour-detail'
                                            ]) }}">
                                        {{ __('tour.pay_now') }}: €<span class="selected-price">{{ number_format($tour->prices[0]['price'], 2) }}</span>
                                    </button>
                                </div>
                                @endif
                            </form>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>

    <div class="reviews-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <h3 class="section-title mb-4">
                        <i class="fas fa-star text-warning me-2"></i>
                        {{ __('review.reviews') }}
                    </h3>
                    @include('partials.review-list', ['reviews' => $reviews, 'averageRating' => 5, 'totalReviews' => $reviews->count()])
                </div>
                <div class="col-lg-4">
                    <h3 class="section-title mb-4">
                        <i class="fas fa-edit text-primary me-2"></i>
                        {{ __('review.submit_review') }}
                    </h3>
                    <livewire:review-form :tour="$tour" />
                </div>
            </div>
        </div>
    </div>

@include('partials.payment-modal')
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const priceOptions = document.querySelectorAll('.price-option');
    const payNowBtn = document.querySelector('.pay-now-btn');
    const selectedPriceSpan = document.querySelector('.selected-price');

    priceOptions.forEach(option => {
        option.addEventListener('change', function() {
            const price = parseFloat(this.dataset.price);
            selectedPriceSpan.textContent = price.toFixed(2);
        });
    });
});
</script>
@endpush