{{-- resources/views/livewire/pages/trips/itinerary-edit.blade.php --}}
@extends('layouts.dashboard')

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

@section('content')
    <div class="min-h-screen bg-gray-50 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header Section -->
            <div class="mb-8">
                <nav class="flex items-center space-x-2 text-sm mb-4">
                    <a href="{{ route('trips.index') }}"
                        class="text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">
                        My Trips
                    </a>
                    <span class="text-gray-400">/</span>
                    <a href="{{ route('trips.show', $trip) }}"
                        class="text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200">
                        {{ $trip->title }}
                    </a>
                    <span class="text-gray-400">/</span>
                    <span class="text-gray-700 font-medium">Itinerary</span>
                </nav>

                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">Trip Itinerary</h1>
                        <p class="mt-2 text-gray-600">Your complete travel plan for {{ $trip->title }}</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <a href="{{ route('trips.show', $trip) }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 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 Trip
                        </a>
                        <button onclick="printItinerary()"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                            </svg>
                            Print Itinerary
                        </button>
                    </div>
                </div>
            </div>

            <!-- Trip Info Bar -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-6">
                        <div class="flex items-center text-sm text-gray-600">
                            <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            </svg>
                            <span class="font-medium">{{ $trip->destination }}</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <span>{{ $trip->date_range }}</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-600">
                            <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                            <span>{{ $trip->total_travelers }} travelers</span>
                        </div>
                        @if ($trip->planning_type === 'pre_planned')
                            <div class="flex items-center text-sm text-blue-600">
                                <svg class="w-4 h-4 mr-2" 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>
                                <span class="font-medium">Pre-planned Package</span>
                            </div>
                        @endif
                    </div>
                    <div class="flex items-center space-x-2">
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ $trip->duration_days }} days
                        </span>
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                            {{ $trip->status === 'planning'
                                ? 'bg-yellow-100 text-yellow-800'
                                : ($trip->status === 'active'
                                    ? 'bg-green-100 text-green-800'
                                    : 'bg-gray-100 text-gray-800') }}">
                            {{ ucfirst($trip->status) }}
                        </span>
                    </div>
                </div>
            </div>

            @php
                // Use the same logic as the itinerary preview
                $hasItineraryActivities =
                    $trip->itineraries->sum(function ($i) {
                        return $i->activities->count();
                    }) > 0;

                // Get template activities if needed
                $templateActivities = collect();
                if (!$hasItineraryActivities && $trip->planning_type === 'pre_planned') {
                    if ($trip->tripTemplate) {
                        $templateActivities = $trip->tripTemplate->activities;
                    } else {
                        // Fallback: find template by destination
                        $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



            <!-- Itinerary Days -->
            <div class="space-y-6">
                @if ($hasItineraryActivities)
                    {{-- Show regular itinerary activities --}}
                    @forelse($trip->itineraries->sortBy('day_number') as $itinerary)
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <!-- Day Header -->
                            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-gray-200">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4">
                                        <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
                                            <span class="text-white font-semibold">{{ $itinerary->day_number }}</span>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900">
                                                Day {{ $itinerary->day_number }}
                                            </h3>
                                            <p class="text-sm text-gray-600">
                                                {{ $itinerary->date ? $itinerary->date->format('l, F j, Y') : 'Date TBD' }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $itinerary->activities->count() }}
                                        {{ Str::plural('activity', $itinerary->activities->count()) }}
                                    </div>
                                </div>
                            </div>

                            <!-- Activities List -->
                            <div class="p-6">
                                @forelse($itinerary->activities->sortBy('start_time') as $activity)
                                    <div class="flex items-start space-x-4 py-4 border-b border-gray-100 last:border-b-0">
                                        <div
                                            class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 5H7a2 2 0 00-2 2v6a2 2 0 002 2h2m0 0h6a2 2 0 002-2V7a2 2 0 00-2-2h-6m0 0V5a2 2 0 012-2h4a2 2 0 012 2v2M7 7h10" />
                                            </svg>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-start justify-between">
                                                <div class="flex-1">
                                                    <h4 class="font-medium text-gray-900">
                                                        {{ $activity->title }}
                                                        @if ($activity->is_highlight)
                                                            <span class="ml-2 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
                                                    </h4>
                                                    @if ($activity->description)
                                                        <p class="text-sm text-gray-600 mt-1">{{ $activity->description }}
                                                        </p>
                                                    @endif
                                                </div>
                                                @if ($activity->start_time)
                                                    <div class="text-sm text-gray-500 font-medium ml-4">
                                                        {{ \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
                                            </div>
                                            <div class="flex items-center space-x-4 mt-2">
                                                @if ($activity->location)
                                                    <span class="text-xs text-gray-500 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        </svg>
                                                        {{ $activity->location }}
                                                    </span>
                                                @endif
                                                @if ($activity->cost > 0)
                                                    <span class="text-xs text-green-600 flex items-center font-medium">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                                                        </svg>
                                                        ${{ number_format($activity->cost, 0) }}
                                                    </span>
                                                @endif
                                                @if ($activity->category)
                                                    <span class="text-xs text-purple-600 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        {{ ucfirst($activity->category) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center py-8">
                                        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5H7a2 2 0 00-2 2v6a2 2 0 002 2h2m0 0h6a2 2 0 002-2V7a2 2 0 00-2-2h-6m0 0V5a2 2 0 012-2h4a2 2 0 012 2v2M7 7h10" />
                                        </svg>
                                        <h3 class="text-sm font-medium text-gray-900 mb-2">No activities planned</h3>
                                        <p class="text-sm text-gray-500">This day doesn't have any activities scheduled yet
                                        </p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    @empty
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                            <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <h3 class="text-lg font-medium text-gray-900 mb-2">No itinerary created yet</h3>
                            <p class="text-gray-500">This trip doesn't have a detailed itinerary yet</p>
                        </div>
                    @endforelse
                @elseif($useTemplateActivities)
                    {{-- Show template activities --}}
                    @for ($day = 1; $day <= $trip->duration_days; $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="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                            <!-- Day Header -->
                            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 px-6 py-4 border-b border-gray-200">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-4">
                                        <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
                                            <span class="text-white font-semibold">{{ $day }}</span>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-semibold text-gray-900">
                                                Day {{ $day }}
                                            </h3>
                                            <p class="text-sm text-gray-600">
                                                {{ $dayDate ? $dayDate->format('l, F j, Y') : 'Date TBD' }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        {{ $dayActivities->count() }}
                                        {{ Str::plural('activity', $dayActivities->count()) }}
                                    </div>
                                </div>
                            </div>

                            <!-- Activities List -->
                            <div class="p-6">
                                @forelse($dayActivities as $activity)
                                    <div class="flex items-start space-x-4 py-4 border-b border-gray-100 last:border-b-0">
                                        <div
                                            class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor"
                                                viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M9 5H7a2 2 0 00-2 2v6a2 2 0 002 2h2m0 0h6a2 2 0 002-2V7a2 2 0 00-2-2h-6m0 0V5a2 2 0 012-2h4a2 2 0 012 2v2M7 7h10" />
                                            </svg>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-start justify-between">
                                                <div class="flex-1">
                                                    <h4 class="font-medium text-gray-900">
                                                        {{ $activity->title }}
                                                        @if ($activity->is_highlight)
                                                            <span class="ml-2 text-yellow-500">⭐</span>
                                                        @endif
                                                    </h4>
                                                    @if ($activity->description)
                                                        <p class="text-sm text-gray-600 mt-1">{{ $activity->description }}
                                                        </p>
                                                    @endif
                                                </div>
                                                @if ($activity->start_time)
                                                    <div class="text-sm text-gray-500 font-medium ml-4">
                                                        {{ \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
                                            </div>
                                            <div class="flex items-center space-x-4 mt-2">
                                                @if ($activity->location)
                                                    <span class="text-xs text-gray-500 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        </svg>
                                                        {{ $activity->location }}
                                                    </span>
                                                @endif
                                                @if ($activity->cost > 0)
                                                    <span class="text-xs text-green-600 flex items-center font-medium">
                                                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
                                                            viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                stroke-width="2"
                                                                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                                                        </svg>
                                                        ${{ number_format($activity->cost, 0) }}
                                                    </span>
                                                @endif
                                                @if ($activity->category)
                                                    <span class="text-xs text-purple-600 flex items-center">
                                                        <svg class="w-3 h-3 mr-1" fill="currentColor"
                                                            viewBox="0 0 20 20">
                                                            <path fill-rule="evenodd"
                                                                d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"
                                                                clip-rule="evenodd"></path>
                                                        </svg>
                                                        {{ ucfirst($activity->category) }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center py-8">
                                        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none"
                                            stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 5H7a2 2 0 00-2 2v6a2 2 0 002 2h2m0 0h6a2 2 0 002-2V7a2 2 0 00-2-2h-6m0 0V5a2 2 0 012-2h4a2 2 0 012 2v2M7 7h10" />
                                        </svg>
                                        <h3 class="text-sm font-medium text-gray-900 mb-2">No activities planned</h3>
                                        <p class="text-sm text-gray-500">This day doesn't have any activities scheduled</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    @endfor
                @else
                    {{-- Empty state --}}
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
                        <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No itinerary available</h3>
                        <p class="text-gray-500">This trip doesn't have a detailed itinerary yet</p>
                    </div>
                @endif
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex justify-center space-x-4">
                <a href="{{ route('trips.show', $trip) }}"
                    class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 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 Trip Overview
                </a>
                <button onclick="printItinerary()"
                    class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                    </svg>
                    Print Itinerary
                </button>
            </div>
        </div>
    </div>

    <script>
        function printItinerary() {
            window.print();
        }

        // Print styles
        const printStyles = `
            <style>
                @media print {
                    body * { visibility: hidden; }
                    .print-area, .print-area * { visibility: visible; }
                    .print-area { 
                        position: absolute; 
                        left: 0; 
                        top: 0; 
                        width: 100%; 
                    }
                    .no-print { display: none !important; }
                    .bg-gradient-to-r { background: #f8fafc !important; }
                    .shadow-lg, .shadow-sm { box-shadow: none !important; }
                    .border { border: 1px solid #e5e7eb !important; }
                }
            </style>
        `;

        // Add print styles to head
        document.head.insertAdjacentHTML('beforeend', printStyles);

        // Add print-area class to the main content for better print layout
        document.addEventListener('DOMContentLoaded', function() {
            const mainContent = document.querySelector('.max-w-7xl');
            if (mainContent) {
                mainContent.classList.add('print-area');
            }

            // Add no-print class to buttons and navigation
            const noPrintElements = document.querySelectorAll('nav, .no-print, button:not(.print-keep)');
            noPrintElements.forEach(el => el.classList.add('no-print'));
        });
    </script>

@endsection