@extends('layouts.app')

@section('title',
    (\App\Models\Setting::get('site_name') ?: 'My Website')
    . ' - '
    . ($package->seo_title ?: \App\Models\Setting::get('seo_packages_title') ?: $package->title)
)

@section('content')

@push('scripts')
@if($package)
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "TouristTrip",
    "name": "{{ $package->seo_title ?: $package->title }}",
    "description": "{{ $package->seo_description ?: Str::limit(strip_tags($package->description), 200) }}",
    "url": "{{ route('packages.show', $package->slug) }}",
    "image": "{{ $package->main_image ? asset('storage/' . $package->main_image) : '' }}",
    "touristType": "Leisure travelers",
    "offers": {
        "@type": "Offer",
        "price": "{{ $package->discount_price ?: $package->price }}",
        "priceCurrency": "{{ $package->currency }}",
        "availability": "{{ $package->is_available ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
        "url": "{{ route('packages.show', $package->slug) }}"
    }
}
</script>
@endif
@endpush
<div class="min-h-screen bg-[#f5f1ea]">
    <!-- Package Hero -->
    <div class="relative h-[60vh] min-h-[400px] bg-[#0c2340]">
        @if ($package->main_image)
            <img src="{{ asset('storage/' . $package->main_image) }}" alt="{{ $package->title }}"
                 class="w-full h-full object-cover opacity-70">
        @else
            <div class="absolute inset-0 opacity-20">
                <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="url(#grid)"></path>
                </svg>
                <defs>
                    <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#c9a84c" stroke-width="0.5"></path>
                    </pattern>
                </defs>
            </div>
        @endif

        <div class="absolute inset-0 bg-gradient-to-t from-[#0c2340] via-[#0c2340]/40 to-transparent"></div>

        <div class="absolute bottom-0 inset-x-0 pb-16">
            <div class="max-w-7xl mx-auto px-6 lg:px-10">
                <span class="inline-block bg-[#c9a84c] text-[#0c2340] px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-4">
                    {{ ucfirst($package->category) }}
                </span>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-serif text-white leading-tight max-w-4xl">{{ $package->title }}</h1>

                <div class="flex flex-wrap items-center gap-6 mt-6 text-white/80">
                    <div class="flex items-center gap-2">
                        <i data-feather="map-pin" class="w-5 h-5 text-[#c9a84c]"></i>
                        <span>{{ $package->destination }}</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i data-feather="clock" class="w-5 h-5 text-[#c9a84c]"></i>
                        <span>{{ $package->duration_days }} Days</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i data-feather="users" class="w-5 h-5 text-[#c9a84c]"></i>
                        <span>{{ $package->min_people }}-{{ $package->max_people }} Pax</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Package Details -->
    <div class="max-w-7xl mx-auto px-6 lg:px-10 py-12 -mt-10 relative z-20">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-8">

                <!-- Description -->
                <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 md:p-10 border border-[#0c2340]/5">
                    <h2 class="font-serif text-3xl text-[#0c2340] mb-6">About This Package</h2>
                    <div class="prose max-w-none text-[#0c2340]/70 leading-relaxed">
                        <p>{{ $package->description }}</p>
                    </div>
                </div>

                <!-- Itinerary -->
                @if ($package->itinerary)
                    <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 md:p-10 border border-[#0c2340]/5">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-10 h-10 rounded-xl bg-[#c9a84c]/20 text-[#c9a84c] flex items-center justify-center">
                                <i data-feather="calendar" class="w-5 h-5"></i>
                            </div>
                            <h2 class="font-serif text-3xl text-[#0c2340]">Itinerary</h2>
                        </div>
                        <div class="prose max-w-none text-[#0c2340]/70 leading-relaxed">
                            <p>{!! nl2br(e($package->itinerary)) !!}</p>
                        </div>
                    </div>
                @endif

                <div class="grid md:grid-cols-2 gap-8">
                    <!-- Highlights -->
                    @if ($package->highlights && count($package->highlights) > 0)
                        <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5">
                            <div class="flex items-center gap-3 mb-6">
                                <div class="w-10 h-10 rounded-xl bg-[#c9a84c]/20 text-[#c9a84c] flex items-center justify-center">
                                    <i data-feather="star" class="w-5 h-5"></i>
                                </div>
                                <h2 class="font-serif text-2xl text-[#0c2340]">Highlights</h2>
                            </div>
                            <ul class="space-y-4">
                                @foreach ($package->highlights as $highlight)
                                    <li class="flex items-start gap-3 text-[#0c2340]/70">
                                        <i data-feather="check-circle" class="w-5 h-5 text-green-500 shrink-0 mt-0.5"></i>
                                        <span>{{ $highlight }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Inclusions -->
                    @if ($package->inclusions && count($package->inclusions) > 0)
                        <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5">
                            <div class="flex items-center gap-3 mb-6">
                                <div class="w-10 h-10 rounded-xl bg-green-500/20 text-green-600 flex items-center justify-center">
                                    <i data-feather="plus" class="w-5 h-5"></i>
                                </div>
                                <h2 class="font-serif text-2xl text-[#0c2340]">Included</h2>
                            </div>
                            <ul class="space-y-4">
                                @foreach ($package->inclusions as $inclusion)
                                    <li class="flex items-start gap-3 text-[#0c2340]/70">
                                        <i data-feather="check" class="w-5 h-5 text-green-500 shrink-0 mt-0.5"></i>
                                        <span>{{ $inclusion }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>

                <div class="grid md:grid-cols-2 gap-8">
                    <!-- Exclusions -->
                    @if ($package->exclusions && count($package->exclusions) > 0)
                        <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5">
                            <div class="flex items-center gap-3 mb-6">
                                <div class="w-10 h-10 rounded-xl bg-red-500/20 text-red-600 flex items-center justify-center">
                                    <i data-feather="minus" class="w-5 h-5"></i>
                                </div>
                                <h2 class="font-serif text-2xl text-[#0c2340]">Not Included</h2>
                            </div>
                            <ul class="space-y-4">
                                @foreach ($package->exclusions as $exclusion)
                                    <li class="flex items-start gap-3 text-[#0c2340]/70">
                                        <i data-feather="x" class="w-5 h-5 text-red-500 shrink-0 mt-0.5"></i>
                                        <span>{{ $exclusion }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- What to Bring -->
                    @if ($package->what_to_bring)
                        <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5">
                            <div class="flex items-center gap-3 mb-6">
                                <div class="w-10 h-10 rounded-xl bg-[#c9a84c]/20 text-[#c9a84c] flex items-center justify-center">
                                    <i data-feather="briefcase" class="w-5 h-5"></i>
                                </div>
                                <h2 class="font-serif text-2xl text-[#0c2340]">What to Bring</h2>
                            </div>
                            <p class="text-[#0c2340]/70 leading-relaxed">{{ $package->what_to_bring }}</p>
                        </div>
                    @endif
                </div>

                <!-- Meeting Point -->
                @if ($package->meeting_point)
                    <div class="bg-[#0c2340] text-white rounded-3xl shadow-xl p-8 border border-[#0c2340]/5">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-10 h-10 rounded-xl bg-[#c9a84c] text-[#0c2340] flex items-center justify-center">
                                <i data-feather="map-pin" class="w-5 h-5"></i>
                            </div>
                            <h2 class="font-serif text-2xl">Meeting Point</h2>
                        </div>
                        <p class="text-white/80 leading-relaxed">{{ $package->meeting_point }}</p>
                    </div>
                @endif

            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1 space-y-8">
                <!-- Price and Booking -->
                <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5 sticky top-28">

                    @if ($package->has_discount)
                        <div class="inline-block bg-[#c9a84c] text-[#0c2340] px-3 py-1 rounded-full text-xs font-bold mb-4">
                            Save {{ $package->discount_percentage }}%
                        </div>
                        <div class="flex items-end gap-3 mb-2">
                            <div class="font-serif text-4xl text-[#0c2340]">{{ $package->formatted_discount_price }}</div>
                            <div class="text-xl text-[#0c2340]/40 line-through mb-1">{{ $package->formatted_price }}</div>
                        </div>
                    @else
                        <div class="text-sm uppercase tracking-widest text-[#0c2340]/50 mb-2">Price From</div>
                        <div class="font-serif text-4xl text-[#0c2340] mb-2">{{ $package->formatted_price }}</div>
                    @endif

                    <div class="text-sm text-[#0c2340]/60 mb-8 pb-8 border-b border-[#0c2340]/10">Per Person</div>

                    @if ($package->is_available)
                        <a href="{{ route('packages.book', $package->slug) }}"
                           class="flex items-center justify-center gap-2 w-full bg-[#0c2340] text-white px-6 py-4 rounded-full hover:bg-[#c9a84c] hover:text-[#0c2340] transition duration-300 font-medium text-lg">
                            Book Now <i data-feather="arrow-right" class="w-5 h-5"></i>
                        </a>
                    @else
                        <button disabled
                                class="w-full bg-gray-200 text-gray-500 px-6 py-4 rounded-full font-medium cursor-not-allowed">
                            Currently Unavailable
                        </button>
                    @endif

                    <!-- Availability -->
                    <div class="mt-6 text-center text-sm">
                        @if ($package->is_available)
                            <span class="text-green-600 flex items-center justify-center gap-2">
                                <i data-feather="check-circle" class="w-4 h-4"></i> {{ $package->available_slots_count }} slots available
                            </span>
                        @else
                            <span class="text-red-500 flex items-center justify-center gap-2">
                                <i data-feather="x-circle" class="w-4 h-4"></i> Fully Booked
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Package Info -->
                <div class="bg-white rounded-3xl shadow-xl shadow-[#0c2340]/5 p-8 border border-[#0c2340]/5">
                    <h3 class="font-serif text-2xl text-[#0c2340] mb-6">Quick Info</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between border-b border-[#0c2340]/5 pb-4">
                            <span class="text-[#0c2340]/60 flex items-center gap-2">
                                <i data-feather="bar-chart-2" class="w-4 h-4"></i> Difficulty
                            </span>
                            <span class="font-medium text-[#0c2340]">{{ ucfirst($package->difficulty_level) }}</span>
                        </div>
                        @if ($package->accommodation_type)
                            <div class="flex items-center justify-between border-b border-[#0c2340]/5 pb-4">
                                <span class="text-[#0c2340]/60 flex items-center gap-2">
                                    <i data-feather="home" class="w-4 h-4"></i> Stay
                                </span>
                                <span class="font-medium text-[#0c2340]">{{ $package->accommodation_type }}</span>
                            </div>
                        @endif
                        @if ($package->transportation)
                            <div class="flex items-center justify-between border-b border-[#0c2340]/5 pb-4">
                                <span class="text-[#0c2340]/60 flex items-center gap-2">
                                    <i data-feather="navigation" class="w-4 h-4"></i> Transport
                                </span>
                                <span class="font-medium text-[#0c2340]">{{ $package->transportation }}</span>
                            </div>
                        @endif
                        <div class="flex items-center justify-between pb-2">
                            <span class="text-[#0c2340]/60 flex items-center gap-2">
                                <i data-feather="activity" class="w-4 h-4"></i> Category
                            </span>
                            <span class="font-medium text-[#0c2340]">{{ ucfirst($package->category) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Contact -->
                <div class="bg-[#f5f1ea] rounded-3xl p-8 border border-[#0c2340]/10 text-center">
                    <h3 class="font-serif text-xl text-[#0c2340] mb-2">Need Help?</h3>
                    <p class="text-sm text-[#0c2340]/70 mb-6">Have questions about this package? We're here to help!</p>
                    <div class="space-y-3">
                        <a href="{{ route('contact') }}" class="flex items-center justify-center gap-2 w-full bg-white text-[#0c2340] px-4 py-3 rounded-full hover:bg-[#0c2340] hover:text-white transition-colors border border-[#0c2340]/10 font-medium">
                            <i data-feather="mail" class="w-4 h-4"></i> Contact Us
                        </a>
                        <a href="https://wa.me/{{ str_replace(['+', '-', ' ', '(', ')'], '', Setting::get('whatsapp_number', '+1234567890')) }}"
                           class="flex items-center justify-center gap-2 w-full bg-[#25D366] text-white px-4 py-3 rounded-full hover:bg-[#128C7E] transition-colors font-medium">
                            <i data-feather="message-circle" class="w-4 h-4"></i> WhatsApp Us
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Packages -->
        @if ($relatedPackages->count() > 0)
            <div class="mt-20">
                <div class="flex items-center justify-between mb-10">
                    <h2 class="font-serif text-3xl md:text-4xl text-[#0c2340]">Similar Journeys</h2>
                    <a href="{{ route('packages.index') }}" class="text-[#0c2340] hover:text-[#c9a84c] transition font-medium flex items-center gap-2">
                        View All <i data-feather="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach ($relatedPackages as $rp)
                        <a href="{{ route('packages.show', $rp->slug) }}" class="group block">
                            <div class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-[#0c2340]/5">
                                <div class="relative h-56 overflow-hidden">
                                    <img src="{{ $rp->main_image ? asset('storage/' . $rp->main_image) : asset('images/package-placeholder.jpg') }}"
                                         alt="{{ $rp->title }}"
                                         class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                                    @if ($rp->has_discount)
                                        <div class="absolute top-4 left-4 bg-[#c9a84c] text-[#0c2340] px-3 py-1.5 rounded-full text-xs font-bold">
                                            -{{ $rp->discount_percentage }}%
                                        </div>
                                    @endif
                                </div>
                                <div class="p-6">
                                    <h3 class="font-serif text-xl text-[#0c2340] mb-2 group-hover:text-[#c9a84c] transition-colors">{{ $rp->title }}</h3>
                                    <div class="flex items-center gap-4 text-xs text-[#0c2340]/60 mb-4">
                                        <span class="flex items-center gap-1"><i data-feather="map-pin" class="w-3.5 h-3.5"></i> {{ $rp->destination }}</span>
                                        <span class="flex items-center gap-1"><i data-feather="clock" class="w-3.5 h-3.5"></i> {{ $rp->duration_days }} Days</span>
                                    </div>
                                    <div class="flex items-center justify-between pt-4 border-t border-[#0c2340]/10">
                                        <span class="font-serif text-xl text-[#0c2340]">{{ $rp->has_discount ? $rp->formatted_discount_price : $rp->formatted_price }}</span>
                                        <span class="w-8 h-8 rounded-full bg-[#0c2340] text-white flex items-center justify-center group-hover:bg-[#c9a84c] group-hover:text-[#0c2340] transition-colors">
                                            <i data-feather="arrow-right" class="w-4 h-4"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection