{{-- resources/views/trips/show.blade.php --}}
@extends('layouts.dashboard')

@section('title', $trip->title . ' - PangoQ')

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Breadcrumb Navigation -->
            <div class="mb-8">
                <nav class="flex items-center space-x-2 text-sm">
                    <a href="{{ route('trips.index') }}"
                        class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        Back to My Trips
                    </a>
                    <span class="text-gray-400">/</span>
                    <span class="text-gray-700 font-medium">{{ $trip->title }}</span>
                </nav>
            </div>

            <!-- Trip Hero Section -->
            <div class="bg-white shadow-2xl rounded-3xl overflow-hidden mb-8">
                <div class="relative h-80 bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-800">
                    @if ($trip->image_url)
                        <img src="{{ $trip->image_url }}" alt="{{ $trip->title }}"
                            class="absolute inset-0 w-full h-full object-cover mix-blend-overlay">
                    @endif
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>

                    <!-- Trip Status Badge -->
                    <div class="absolute top-6 right-6">
                        <span
                            class="inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold backdrop-blur-sm border {{ $trip->status === 'planning' ? 'bg-yellow-500/20 text-yellow-100 border-yellow-400/30' : ($trip->status === 'active' ? 'bg-green-500/20 text-green-100 border-green-400/30' : 'bg-blue-500/20 text-blue-100 border-blue-400/30') }}">
                            <span
                                class="w-2 h-2 rounded-full mr-2 {{ $trip->status === 'planning' ? 'bg-yellow-400' : ($trip->status === 'active' ? 'bg-green-400' : 'bg-blue-400') }}"></span>
                            {{ ucfirst($trip->status) }}
                        </span>
                    </div>

                    <!-- Hero Content -->
                    <div class="absolute bottom-0 left-0 right-0 p-8">
                        <div class="max-w-4xl">
                            <h1 class="text-4xl md:text-5xl font-bold text-white mb-3 drop-shadow-lg">
                                {{ $trip->title }}
                            </h1>
                            <p class="text-xl md:text-2xl text-white/90 mb-6 drop-shadow">
                                {{ $trip->destination_name }}
                            </p>

                            <!-- Quick Stats -->
                            <div class="flex flex-wrap gap-6 text-white">
                                <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    {{ $trip->date_range }}
                                </div>
                                <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    {{ $trip->duration }} {{ Str::plural('day', $trip->duration) }}
                                </div>
                                @if ($trip->budget)
                                    <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path
                                                d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z">
                                            </path>
                                            <path fill-rule="evenodd"
                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm-6-8a6 6 0 1112 0 6 6 0 01-12 0z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        ${{ number_format($trip->budget, 0) }} budget
                                    </div>
                                @endif
                                <div class="flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z">
                                        </path>
                                    </svg>
                                    {{ $trip->members->count() }} {{ Str::plural('traveler', $trip->members->count()) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Left Column - Main Content -->
                <div class="lg:col-span-2 space-y-8">

                    <!-- Trip Details Card -->
                    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                        <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                            <h2 class="text-xl font-bold text-gray-900 flex items-center">
                                <svg class="w-6 h-6 mr-3 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H4a1 1 0 110-2V4z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                Trip Details
                            </h2>
                        </div>
                        <div class="px-6 py-6">
                            <dl class="grid grid-cols-1 gap-6">
                                <!-- Description -->
                                @if ($trip->description)
                                    <div>
                                        <dt class="text-sm font-semibold text-gray-500 mb-2">Description</dt>
                                        <dd class="text-gray-900 leading-relaxed">{{ $trip->description }}</dd>
                                    </div>
                                @endif

                                <!-- Dates -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <dt class="text-sm font-semibold text-gray-500 mb-2">Duration</dt>
                                        <dd class="text-gray-900">
                                            <div class="flex items-center">
                                                <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor"
                                                    viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd"
                                                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                                        clip-rule="evenodd"></path>
                                                </svg>
                                                <div>
                                                    <div class="font-medium">{{ $trip->date_range }}</div>
                                                    <div class="text-sm text-gray-500">{{ $trip->duration }}
                                                        {{ Str::plural('day', $trip->duration) }}
                                                    </div>
                                                </div>
                                            </div>
                                        </dd>
                                    </div>

                                    <div>
                                        <dt class="text-sm font-semibold text-gray-500 mb-2">Budget</dt>
                                        <dd class="text-gray-900">
                                            <div class="flex items-center">
                                                <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor"
                                                    viewBox="0 0 20 20">
                                                    <path
                                                        d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z">
                                                    </path>
                                                    <path fill-rule="evenodd"
                                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm-6-8a6 6 0 1112 0 6 6 0 01-12 0z"
                                                        clip-rule="evenodd"></path>
                                                </svg>
                                                <div>
                                                    <div class="font-medium text-lg">
                                                        {{ $trip->budget ? '$' . number_format($trip->budget, 0) : 'Not specified' }}
                                                    </div>
                                                    @if ($trip->budget)
                                                        <div class="text-sm text-gray-500">
                                                            ${{ $trip->duration > 0 ? number_format($trip->budget / $trip->duration, 0) : '0' }}
                                                            per day</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </dd>
                                    </div>
                                </div>
                            </dl>
                        </div>
                    </div>

                    <!-- Savings Progress Card -->
                    @if ($trip->savingsWallet)
                        <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                            <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50">
                                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    Savings Progress
                                </h2>
                            </div>
                            <div class="px-6 py-6">
                                <div class="flex justify-between items-center mb-4">
                                    <div>
                                        <div class="text-2xl font-bold text-gray-900">
                                            ${{ number_format($trip->savingsWallet->current_amount, 0) }}
                                        </div>
                                        <div class="text-sm text-gray-500">
                                            of ${{ number_format($trip->savingsWallet->target_amount, 0) }} goal
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-3xl font-bold text-green-600">
                                            {{ $trip->savingsWallet->progress_percentage }}%
                                        </div>
                                        <div class="text-sm text-gray-500">Complete</div>
                                    </div>
                                </div>

                                <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
                                    <div class="bg-gradient-to-r from-green-500 to-emerald-600 h-4 rounded-full transition-all duration-500 ease-out"
                                        style="width: {{ $trip->savingsWallet->progress_percentage }}%"></div>
                                </div>

                                <div class="flex justify-between text-sm text-gray-600 mb-6">
                                    <span>${{ number_format($trip->savingsWallet->remaining_amount, 0) }} remaining</span>
                                    @if ($trip->savingsWallet->target_date)
                                        <span>Due
                                            {{ \Carbon\Carbon::parse($trip->savingsWallet->target_date)->format('M j, Y') }}</span>
                                    @endif
                                </div>

                                <div class="flex gap-4">
                                    <a href="{{ route('wallet.index', $trip) }}"
                                        class="flex-1 inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        Manage Savings
                                    </a>
                                    <button
                                        class="px-4 py-3 border border-green-300 text-sm font-medium rounded-xl text-green-700 bg-green-50 hover:bg-green-100 transition-colors duration-200">
                                        Add Funds
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Itinerary Preview -->
                    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                        <div class="px-6 py-5 border-b border-gray-200 bg-gradient-to-r from-indigo-50 to-purple-50">
                            <div class="flex items-center justify-between">
                                <h2 class="text-xl font-bold text-gray-900 flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    Itinerary Preview
                                </h2>
                                <a href="{{ route('trips.itinerary.edit', $trip) }}"
                                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z"
                                            clip-rule="evenodd"></path>
                                        <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h10a1 1 0 110 2H4a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    View Full Itinerary
                                </a>
                            </div>
                        </div>
                        <div class="px-6 py-6">
                            @php
                                // Check if we have activities in itineraries first
                                $hasItineraryActivities =
                                    $trip->itineraries->sum(function ($i) {
                                        return $i->activities->count();
                                    }) > 0;

                                // For pre-planned trips, try to get template activities
                                $templateActivities = collect();
                                if (!$hasItineraryActivities && $trip->planning_type === 'pre_planned') {
                                    if ($trip->tripTemplate) {
                                        // Use the relationship if it exists
                                        $templateActivities = $trip->tripTemplate->activities;
                                    } else {
                                        // Fallback: try to find template by destination name
                                        $template = \App\Models\TripTemplate::whereHas('destination', function (
                                            $q,
                                        ) use ($trip) {
                                            $q->where('name', $trip->destination);
                                        })->first();

                                        if ($template) {
                                            $templateActivities = $template->activities;
                                        }
                                    }
                                }

                                $useTemplateActivities = $templateActivities->count() > 0;
                            @endphp



                            @if ($hasItineraryActivities)
                                {{-- Show regular itinerary activities --}}
                                <div class="space-y-6">
                                    @foreach ($trip->itineraries->sortBy('day_number')->take(3) as $itinerary)
                                        <div
                                            class="border border-gray-200 rounded-xl p-4 hover:border-indigo-300 hover:bg-indigo-50/50 transition-all duration-200">
                                            <div class="flex items-center justify-between mb-3">
                                                <h3 class="text-lg font-semibold text-gray-900">
                                                    Day {{ $itinerary->day_number }}
                                                </h3>
                                                <span class="text-sm text-gray-500 font-medium">
                                                    {{ $itinerary->date->format('M j, Y') }}
                                                </span>
                                            </div>

                                            @if ($itinerary->activities->count() > 0)
                                                <div class="space-y-3">
                                                    @foreach ($itinerary->activities->take(3) as $activity)
                                                        <div
                                                            class="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
                                                            <div class="flex-1">
                                                                <div class="font-medium text-gray-900">
                                                                    {{ $activity->title }}
                                                                    @if ($activity->is_highlight)
                                                                        <span class="ml-1 text-yellow-500">⭐</span>
                                                                    @endif
                                                                    @if ($activity->is_optional)
                                                                        <span
                                                                            class="ml-2 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Optional</span>
                                                                    @endif
                                                                </div>
                                                                @if ($activity->location)
                                                                    <div
                                                                        class="text-sm text-gray-500 flex items-center mt-1">
                                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                                            viewBox="0 0 20 20">
                                                                            <path fill-rule="evenodd"
                                                                                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                                                                clip-rule="evenodd"></path>
                                                                        </svg>
                                                                        {{ $activity->location }}
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            <div class="flex flex-col items-end">
                                                                @if ($activity->start_time)
                                                                    <div class="text-sm text-gray-500 font-medium">
                                                                        {{ \Carbon\Carbon::parse($activity->start_time)->format('g:i A') }}
                                                                        @if ($activity->end_time)
                                                                            -
                                                                            {{ \Carbon\Carbon::parse($activity->end_time)->format('g:i A') }}
                                                                        @endif
                                                                    </div>
                                                                @endif
                                                                @if ($activity->cost > 0)
                                                                    <div class="text-sm text-green-600 font-medium">
                                                                        ${{ number_format($activity->cost, 0) }}
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach

                                                    @if ($itinerary->activities->count() > 3)
                                                        <div class="text-center pt-2">
                                                            <span class="text-sm text-gray-500">
                                                                +{{ $itinerary->activities->count() - 3 }} more activities
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>
                                            @else
                                                <p class="text-gray-500 text-sm italic">No activities planned for this day
                                                </p>
                                            @endif
                                        </div>
                                    @endforeach

                                    @if ($trip->itineraries->count() > 3)
                                        <div class="text-center py-4 border-t border-gray-200">
                                            <span class="text-sm text-gray-500">
                                                +{{ $trip->itineraries->count() - 3 }} more days planned
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @elseif ($useTemplateActivities)
                                {{-- Fallback to template activities for pre-planned trips --}}
                                <div class="space-y-6">
                                    @for ($day = 1; $day <= min($trip->duration_days, 3); $day++)
                                        @php
                                            $dayActivities = $templateActivities
                                                ->where('day_number', $day)
                                                ->where('is_optional', false)
                                                ->sortBy('start_time');

                                            $dayDate = $trip->start_date ? $trip->start_date->addDays($day - 1) : null;
                                        @endphp

                                        <div
                                            class="border border-gray-200 rounded-xl p-4 hover:border-indigo-300 hover:bg-indigo-50/50 transition-all duration-200">
                                            <div class="flex items-center justify-between mb-3">
                                                <h3 class="text-lg font-semibold text-gray-900">
                                                    Day {{ $day }}
                                                </h3>
                                                <span class="text-sm text-gray-500 font-medium">
                                                    {{ $dayDate ? $dayDate->format('M j, Y') : 'Date TBD' }}
                                                </span>
                                            </div>

                                            @if ($dayActivities->count() > 0)
                                                <div class="space-y-3">
                                                    @foreach ($dayActivities->take(3) as $activity)
                                                        <div
                                                            class="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0">
                                                            <div class="flex-1">
                                                                <div class="font-medium text-gray-900">
                                                                    {{ $activity->title }}
                                                                    @if ($activity->is_highlight)
                                                                        <span class="ml-1 text-yellow-500">⭐</span>
                                                                    @endif
                                                                </div>
                                                                @if ($activity->location)
                                                                    <div
                                                                        class="text-sm text-gray-500 flex items-center mt-1">
                                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                                            viewBox="0 0 20 20">
                                                                            <path fill-rule="evenodd"
                                                                                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                                                                clip-rule="evenodd"></path>
                                                                        </svg>
                                                                        {{ $activity->location }}
                                                                    </div>
                                                                @endif
                                                            </div>
                                                            <div class="flex flex-col items-end">
                                                                @if ($activity->start_time)
                                                                    <div class="text-sm text-gray-500 font-medium">
                                                                        {{ \Carbon\Carbon::parse($activity->start_time)->format('g:i A') }}
                                                                        @if ($activity->end_time)
                                                                            -
                                                                            {{ \Carbon\Carbon::parse($activity->end_time)->format('g:i A') }}
                                                                        @endif
                                                                    </div>
                                                                @endif
                                                                @if ($activity->cost > 0)
                                                                    <div class="text-sm text-green-600 font-medium">
                                                                        ${{ number_format($activity->cost, 0) }}
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach

                                                    @if ($dayActivities->count() > 3)
                                                        <div class="text-center pt-2">
                                                            <span class="text-sm text-gray-500">
                                                                +{{ $dayActivities->count() - 3 }} more activities
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>
                                            @else
                                                <p class="text-gray-500 text-sm italic">No activities planned for this day
                                                </p>
                                            @endif
                                        </div>
                                    @endfor

                                    @if ($trip->duration_days > 3)
                                        <div class="text-center py-4 border-t border-gray-200">
                                            <span class="text-sm text-gray-500">
                                                +{{ $trip->duration_days - 3 }} more days planned
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            @else
                                {{-- Empty state --}}
                                <div class="text-center py-12">
                                    <div
                                        class="mx-auto h-16 w-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                                        <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24"
                                            stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
                                            </path>
                                        </svg>
                                    </div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">No itinerary items yet</h3>
                                    <p class="text-gray-500 mb-6">Start planning your trip by adding activities and
                                        destinations.</p>
                                    <a href="{{ route('trips.itinerary.edit', $trip) }}"
                                        class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition-all duration-200">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        Plan Itinerary
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Right Column - Sidebar -->
                <div class="space-y-6">
                    <!-- Travel Companions -->
                    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-indigo-50">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z">
                                    </path>
                                </svg>
                                Travel Companions
                                <span
                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $trip->members->count() }}
                                </span>
                            </h3>
                        </div>
                        <div class="px-6 py-4">
                            <div class="space-y-3">
                                @foreach ($trip->members as $member)
                                    <div
                                        class="flex items-start space-x-3 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-all duration-200">
                                        <div class="flex-shrink-0">
                                            <div
                                                class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
                                                <span class="text-white text-sm font-medium">
                                                    {{ strtoupper(substr($member->display_name, 0, 2)) }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-gray-900 truncate">
                                                {{ $member->display_name }}
                                            </p>

                                            <!-- Contact Information -->
                                            <div class="mt-1 space-y-1">
                                                @if ($member->display_email)
                                                    <p class="text-xs text-gray-600 flex items-center">
                                                        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="none"
                                                            stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                                            </path>
                                                        </svg>
                                                        <span class="truncate">{{ $member->display_email }}</span>
                                                    </p>
                                                @endif

                                                @if ($member->display_phone)
                                                    <p class="text-xs text-gray-600 flex items-center">
                                                        <svg class="w-3 h-3 mr-1 flex-shrink-0" fill="none"
                                                            stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                                            </path>
                                                        </svg>
                                                        <span>{{ $member->formatted_phone ?: $member->display_phone }}</span>
                                                    </p>
                                                @endif
                                            </div>

                                            <!-- Status Badges -->
                                            <div class="flex items-center space-x-2 mt-2">
                                                @if ($member->user_id === $trip->creator_id)
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM15.657 6.343a1 1 0 011.414 0A9.972 9.972 0 0119 12a9.972 9.972 0 01-1.929 5.657 1 1 0 11-1.414-1.414A7.971 7.971 0 0017 12c0-1.933-.685-3.711-1.829-5.101a1 1 0 010-1.414z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        Organizer
                                                    </span>
                                                @endif

                                                @if ($member->invitation_status === 'pending')
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-yellow-100 text-yellow-800">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        Pending
                                                    </span>
                                                @elseif($member->invitation_status === 'accepted')
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-100 text-green-800">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        Confirmed
                                                    </span>
                                                @elseif($member->invitation_status === 'declined')
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-red-100 text-red-800">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        Declined
                                                    </span>
                                                @endif

                                                <!-- New Member Badge -->
                                                @if (!$member->user_id && $member->invitation_email)
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-gray-100 text-gray-700">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path
                                                                d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1a1 1 0 00.293.707L15 9.414V13a1 1 0 001 1h2a1 1 0 001-1V9.414l.707-.707A1 1 0 0020 8V7a1 1 0 10-2 0v1.586l-.293-.293A1 1 0 0017 8h-2a1 1 0 00-.707.293L14 8.586V7z">
                                                            </path>
                                                        </svg>
                                                        Guest
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Action Dropdown -->
                                        @if (auth()->id() === $trip->creator_id && $member->user_id !== $trip->creator_id)
                                            <div class="flex-shrink-0">
                                                <div class="relative" x-data="{ open: false }">
                                                    <button @click="open = !open"
                                                        class="p-1 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-200">
                                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                            <path
                                                                d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z">
                                                            </path>
                                                        </svg>
                                                    </button>

                                                    <div x-show="open" @click.away="open = false"
                                                        x-transition:enter="transition ease-out duration-100"
                                                        x-transition:enter-start="transform opacity-0 scale-95"
                                                        x-transition:enter-end="transform opacity-100 scale-100"
                                                        x-transition:leave="transition ease-in duration-75"
                                                        x-transition:leave-start="transform opacity-100 scale-100"
                                                        x-transition:leave-end="transform opacity-0 scale-95"
                                                        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-10">

                                                        @if ($member->invitation_status === 'pending')
                                                            <button onclick="resendInvite({{ $member->id }})"
                                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center">
                                                                <svg class="w-4 h-4 mr-2" fill="none"
                                                                    stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        stroke-width="2"
                                                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                                                    </path>
                                                                </svg>
                                                                Resend Invitation
                                                            </button>
                                                        @endif

                                                        <button onclick="removeMember({{ $member->id }})"
                                                            class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center">
                                                            <svg class="w-4 h-4 mr-2" fill="none"
                                                                stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                                    stroke-width="2"
                                                                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                                </path>
                                                            </svg>
                                                            Remove Member
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>

                            <!-- Traveler Composition Summary -->
                            @if ($trip->adults_count > 0 || $trip->children_count > 0)
                                <div
                                    class="mt-4 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center space-x-4">
                                            @if ($trip->adults_count > 0)
                                                <div class="flex items-center text-blue-700">
                                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd"
                                                            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                                            clip-rule="evenodd"></path>
                                                    </svg>
                                                    <span class="text-sm font-medium">{{ $trip->adults_count }}
                                                        {{ $trip->adults_count === 1 ? 'Adult' : 'Adults' }}</span>
                                                </div>
                                            @endif

                                            @if ($trip->children_count > 0)
                                                <div class="flex items-center text-green-700">
                                                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                        <path fill-rule="evenodd"
                                                            d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zM8 6a2 2 0 114 0v1H8V6z"
                                                            clip-rule="evenodd"></path>
                                                    </svg>
                                                    <span class="text-sm font-medium">{{ $trip->children_count }}
                                                        {{ $trip->children_count === 1 ? 'Child' : 'Children' }}</span>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="text-xs text-blue-600 font-medium">
                                            Total: {{ $trip->adults_count + $trip->children_count }}
                                            {{ $trip->adults_count + $trip->children_count === 1 ? 'Traveler' : 'Travelers' }}
                                        </div>
                                    </div>

                                    @if ($trip->children_count > 0)
                                        <div class="mt-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1 text-green-600" fill="currentColor"
                                                viewBox="0 0 20 20">
                                                <path fill-rule="evenodd"
                                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                                    clip-rule="evenodd"></path>
                                            </svg>
                                            <span class="text-xs text-green-700 font-medium">Child-friendly trip</span>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <div class="mt-6">
                                <button type="button" onclick="openInviteModal()"
                                    class="w-full inline-flex items-center justify-center px-4 py-3 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transition-all duration-200">
                                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1a1 1 0 00.293.707L15 9.414V13a1 1 0 001 1h2a1 1 0 001-1V9.414l.707-.707A1 1 0 0020 8V7a1 1 0 10-2 0v1.586l-.293-.293A1 1 0 0017 8h-2a1 1 0 00-.707.293L14 8.586V7z">
                                        </path>
                                    </svg>
                                    Invite More Friends
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-pink-50">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                Quick Actions
                            </h3>
                        </div>
                        <div class="px-6 py-4">
                            <div class="space-y-3">
                                <a href="{{ route('trips.edit', $trip) }}"
                                    class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200 group">
                                    <svg class="w-4 h-4 mr-2 text-gray-500 group-hover:text-blue-500 transition-colors duration-200"
                                        fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                                        </path>
                                    </svg>
                                    Edit Trip Details
                                </a>

                                <a href="{{ route('trips.itinerary.edit', $trip) }}"
                                    class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200 group">
                                    <svg class="w-4 h-4 mr-2 text-gray-500 group-hover:text-indigo-500 transition-colors duration-200"
                                        fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    Edit Itinerary
                                </a>

                                @if (!$trip->savingsWallet)
                                    <a href="{{ route('trips.savings.start', $trip) }}"
                                        class="w-full inline-flex items-center justify-center px-4 py-3 border border-transparent shadow-sm text-sm font-medium rounded-xl text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd"
                                                d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                        Set Up Savings
                                    </a>
                                @endif

                                <button type="button" onclick="shareTrip()"
                                    class="w-full inline-flex items-center justify-center px-4 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200 group">
                                    <svg class="w-4 h-4 mr-2 text-gray-500 group-hover:text-blue-500 transition-colors duration-200"
                                        fill="currentColor" viewBox="0 0 20 20">
                                        <path
                                            d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z">
                                        </path>
                                    </svg>
                                    Share Trip
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Trip Statistics -->
                    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-orange-50 to-red-50">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
                                    <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
                                </svg>
                                Trip Statistics
                            </h3>
                        </div>
                        <div class="px-6 py-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div class="text-center p-3 bg-blue-50 rounded-lg">
                                    <div class="text-2xl font-bold text-blue-600">{{ $trip->itineraries->count() }}</div>
                                    <div class="text-sm text-blue-800">
                                        {{ Str::plural('Day', $trip->itineraries->count()) }}
                                    </div>
                                </div>
                                <div class="text-center p-3 bg-green-50 rounded-lg">
                                    <div class="text-2xl font-bold text-green-600">
                                        {{ $trip->itineraries->sum(function ($itinerary) {
                                            return $itinerary->activities->count();
                                        }) }}
                                    </div>
                                    <div class="text-sm text-green-800">Activities</div>
                                </div>
                                <div class="text-center p-3 bg-purple-50 rounded-lg">
                                    <div class="text-2xl font-bold text-purple-600">{{ $trip->members->count() }}</div>
                                    <div class="text-sm text-purple-800">
                                        {{ Str::plural('Traveler', $trip->members->count()) }}
                                    </div>
                                </div>
                                <div class="text-center p-3 bg-orange-50 rounded-lg">
                                    <div class="text-2xl font-bold text-orange-600">
                                        @if ($trip->budget && $trip->duration > 0)
                                            ${{ number_format($trip->budget / $trip->duration, 0) }}
                                        @else
                                            --
                                        @endif
                                    </div>
                                    <div class="text-sm text-orange-800">Per Day</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('trips.edit', $trip) }}"
                    class="inline-flex items-center justify-center px-8 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z">
                        </path>
                    </svg>
                    Edit Trip
                </a>

                @if (!$trip->savingsWallet)
                    <a href="{{ route('trips.savings.start', $trip) }}"
                        class="inline-flex items-center justify-center px-8 py-3 border border-transparent shadow-sm text-base font-medium rounded-xl text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transition-all duration-200">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
                                clip-rule="evenodd"></path>
                        </svg>
                        Set Up Savings
                    </a>
                @endif

                <button type="button" onclick="confirmDelete()"
                    class="inline-flex items-center justify-center px-8 py-3 border border-transparent shadow-sm text-base font-medium rounded-xl text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 transition-all duration-200">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                            clip-rule="evenodd"></path>
                    </svg>
                    Delete Trip
                </button>
            </div>
        </div>
    </div>

    <!-- Enhanced Invite Modal -->
    <div id="inviteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-2xl bg-white">
            <div class="mt-3">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z">
                            </path>
                        </svg>
                        Invite Friend to Trip
                    </h3>
                    <button onclick="closeInviteModal()"
                        class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <form id="inviteForm" action="{{ route('trips.invite', $trip) }}" method="POST" class="space-y-4">
                    @csrf

                    <!-- Friend's Name -->
                    <div>
                        <label for="friend_name" class="block text-sm font-medium text-gray-700 mb-2">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                Friend's Name *
                            </span>
                        </label>
                        <input type="text" id="friend_name" name="friend_name" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="Enter their full name">
                    </div>

                    <!-- Email Address -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                                Email Address *
                            </span>
                        </label>
                        <input type="email" id="email" name="email" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="friend@example.com">
                    </div>

                    <!-- Phone Number -->
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                    </path>
                                </svg>
                                Phone Number <span class="text-gray-400 font-normal">(Optional)</span>
                            </span>
                        </label>
                        <input type="tel" id="phone" name="phone"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="07XXXXXXXX or +254XXXXXXXXX">
                        <p class="mt-1 text-xs text-gray-500">
                            <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            We'll format this automatically. Kenyan: 07XXXXXXXX, International: +CountryCodeXXXXXXX
                        </p>
                    </div>

                    <!-- Personal Message -->
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-2">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
                                    </path>
                                </svg>
                                Personal Message <span class="text-gray-400 font-normal">(Optional)</span>
                            </span>
                        </label>
                        <textarea id="message" name="message" rows="3"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                            placeholder="Join me on this amazing trip to {{ $trip->destination }}!"></textarea>
                    </div>

                    <div class="flex gap-3 pt-4">
                        <button type="button" onclick="closeInviteModal()"
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                            Cancel
                        </button>
                        <button type="submit"
                            class="flex-1 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all duration-200 font-medium">
                            Send Invitation
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-2xl bg-white">
            <div class="mt-3">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                    <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.268 16c-.77.833.192 2.5 1.732 2.5z">
                        </path>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 text-center mb-2">Delete Trip</h3>
                <p class="text-sm text-gray-500 text-center mb-6">
                    Are you sure you want to delete "{{ $trip->title }}"? This action cannot be undone and all trip data
                    will be permanently removed.
                </p>
                <div class="flex gap-3">
                    <button type="button" onclick="closeDeleteModal()"
                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                        Cancel
                    </button>
                    <button type="button" onclick="deleteTrip()"
                        class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">
                        Delete Trip
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden Delete Form -->
    <form id="delete-trip-form" action="{{ route('trips.destroy', $trip) }}" method="POST" class="hidden">
        @csrf
        @method('DELETE')
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Enhanced trip show page loaded');

            // Initialize page features
            initializeTripShowFeatures();
        });

        function initializeTripShowFeatures() {
            // Initialize any specific features for the trip show page
            console.log('Trip show features initialized');

            // Handle modal close on outside click
            document.addEventListener('click', function(e) {
                if (e.target.id === 'inviteModal') {
                    closeInviteModal();
                }
                if (e.target.id === 'deleteModal') {
                    closeDeleteModal();
                }
            });

            // Handle escape key for modals
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeInviteModal();
                    closeDeleteModal();
                }
            });
        }

        function openInviteModal() {
            document.getElementById('inviteModal').classList.remove('hidden');
            document.getElementById('email').focus();
        }

        function closeInviteModal() {
            document.getElementById('inviteModal').classList.add('hidden');
            // Reset form
            const form = document.getElementById('inviteForm');
            if (form) {
                form.reset();
            }
        }

        function resendInvite(memberId) {
            if (confirm('Are you sure you want to resend the invitation?')) {
                fetch(`/trip-members/${memberId}/resend-invite`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification('Invitation resent successfully!', 'success');
                        } else {
                            showNotification(data.message || 'Failed to resend invitation', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('An error occurred while resending the invitation', 'error');
                    });
            }
        }

        function removeMember(memberId) {
            if (confirm('Are you sure you want to remove this member from the trip?')) {
                fetch(`/trip-members/${memberId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showNotification('Member removed successfully', 'success');
                            // Refresh the page to update the member list
                            setTimeout(() => {
                                location.reload();
                            }, 1500);
                        } else {
                            showNotification(data.message || 'Failed to remove member', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showNotification('An error occurred while removing the member', 'error');
                    });
            }
        }

        // Enhanced invite form submission with phone number support
        document.addEventListener('DOMContentLoaded', function() {
            const inviteForm = document.getElementById('inviteForm');
            if (inviteForm) {
                inviteForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(this);
                    const submitButton = this.querySelector('button[type="submit"]');
                    const originalText = submitButton.textContent;

                    // Show loading state
                    submitButton.disabled = true;
                    submitButton.innerHTML = `
                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Sending...
                    `;

                    fetch(this.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                    .getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showNotification('Invitation sent successfully!', 'success');
                                closeInviteModal();
                                // Refresh the page to show new member
                                setTimeout(() => {
                                    location.reload();
                                }, 1500);
                            } else {
                                showNotification(data.message || 'Failed to send invitation', 'error');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showNotification('An error occurred while sending the invitation', 'error');
                        })
                        .finally(() => {
                            submitButton.disabled = false;
                            submitButton.innerHTML = originalText;
                        });
                });
            }
        });

        function shareTrip() {
            if (navigator.share) {
                navigator.share({
                    title: '{{ $trip->title }}',
                    text: 'Check out my trip to {{ $trip->destination_name }}!',
                    url: window.location.href
                }).catch(console.error);
            } else {
                // Fallback: copy to clipboard
                navigator.clipboard.writeText(window.location.href).then(() => {
                    showNotification('Trip link copied to clipboard!', 'success');
                }).catch(() => {
                    showNotification('Unable to copy link', 'error');
                });
            }
        }

        function confirmDelete() {
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
        }

        function deleteTrip() {
            document.getElementById('delete-trip-form').submit();
        }

        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className =
                `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300 ${getNotificationClasses(type)}`;
            notification.textContent = message;

            document.body.appendChild(notification);

            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);

            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        function getNotificationClasses(type) {
            switch (type) {
                case 'success':
                    return 'bg-green-500 text-white';
                case 'error':
                    return 'bg-red-500 text-white';
                case 'warning':
                    return 'bg-yellow-500 text-white';
                default:
                    return 'bg-blue-500 text-white';
            }
        }

        // Handle invite form submission
        document.getElementById('inviteForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const submitButton = this.querySelector('button[type="submit"]');

            // Show loading state
            submitButton.disabled = true;
            submitButton.textContent = 'Sending...';

            fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showNotification('Invitation sent successfully!', 'success');
                        closeInviteModal();
                        // Optionally refresh the page to show new member
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    } else {
                        showNotification(data.message || 'Failed to send invitation', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showNotification('An error occurred while sending the invitation', 'error');
                })
                .finally(() => {
                    submitButton.disabled = false;
                    submitButton.textContent = 'Send Invite';
                });
        });

        console.log('Trip show page JavaScript fully loaded');
    </script>

    <style>
        /* Custom styles for enhanced trip show page */
        .trip-hero-overlay {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8));
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .progress-animation {
            transition: width 1s ease-in-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        .modal-backdrop {
            backdrop-filter: blur(4px);
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .hero-stats {
                flex-direction: column;
                gap: 0.75rem;
            }

            .hero-stats>div {
                min-width: auto;
            }
        }
    </style>

@endsection