@extends('layouts.user')

@section('title', 'My Favorite Packages')

@section('content')
<div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    @include('user.sidebar')

    <!-- Main Content -->
    <main class="flex-1 overflow-auto">
        <!-- Top Header -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="px-8 py-4 flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">❤️ My Favorite Packages</h1>
                    <p class="text-sm text-gray-500 mt-1">Packages you've saved for later</p>
                </div>
                <a href="{{ route('home') }}" target="_blank" rel="noopener noreferrer"
                   class="inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg bg-white border border-gray-200 hover:border-emerald-300 hover:bg-emerald-50 text-gray-600 hover:text-emerald-700 transition-all">
                    <span>View Website</span>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                </a>
            </div>
        </header>

        <div class="p-8 max-w-7xl">
            
            @if (session('success'))
                <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    {{ session('error') }}
                </div>
            @endif

            @forelse ($favoritePackages as $package)
                <div class="bg-white rounded-xl shadow border border-gray-200 overflow-hidden mb-6 flex flex-col md:flex-row">
                    
                    <!-- Image -->
                    <div class="md:w-64 h-48 md:h-auto flex-shrink-0">
                        @if($package->main_image)
                            <img src="{{ $package->main_image }}" 
                                 class="w-full h-full object-cover" 
                                 alt="{{ $package->title }}">
                        @else
                            <div class="w-full h-full bg-gray-200 flex items-center justify-center text-gray-400">
                                📍 No Image
                            </div>
                        @endif
                    </div>

                    <!-- Content -->
                    <div class="flex-1 p-6 flex flex-col">
                        <div class="flex-1">
                            <div class="flex items-start justify-between">
                                <div>
                                    <a href="{{ route('packages.show', $package->slug) }}" 
                                       class="text-xl font-semibold text-gray-900 hover:text-blue-600 transition-colors">
                                        {{ $package->title }}
                                    </a>
                                    <p class="text-sm text-gray-500 mt-1">
                                        {{ $package->destination?->name ?? 'Multiple Destinations' }} • {{ $package->duration_days }} days
                                    </p>
                                </div>
                                
                                <div class="text-right">
                                    @if($package->has_discount)
                                        <div class="text-sm text-gray-400 line-through">{{ $package->formatted_price }}</div>
                                        <div class="text-lg font-bold text-green-600">{{ $package->formatted_discount_price }}</div>
                                    @else
                                        <div class="text-lg font-bold text-green-600">{{ $package->formatted_price }}</div>
                                    @endif
                                </div>
                            </div>

                            <div class="mt-3 flex items-center gap-4 text-sm text-gray-600">
                                <span>👥 {{ $package->bookings_count }} bookings</span>
                                @if($package->difficulty_level)
                                    <span class="px-2 py-0.5 bg-gray-100 rounded text-xs">{{ ucfirst($package->difficulty_level) }}</span>
                                @endif
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="mt-5 flex flex-wrap items-center gap-3">
                            <a href="{{ route('packages.show', $package->slug) }}" 
                               class="inline-flex items-center px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition-colors">
                                View Details & Book
                            </a>

                            <form action="{{ route('user.favorites.remove', $package->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" 
                                        class="inline-flex items-center px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg font-medium text-sm transition-colors">
                                    ❤️ Remove from Favorites
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-white rounded-2xl shadow border border-gray-200 p-12 text-center">
                    <div class="text-6xl mb-4">💔</div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">No favorite packages yet</h3>
                    <p class="text-gray-600 max-w-md mx-auto mb-6">
                        Browse our amazing tours and click the heart icon on any package to save it here for easy access later.
                    </p>
                    <a href="{{ route('packages.index') }}" 
                       class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors">
                        Browse All Packages →
                    </a>
                </div>
            @endforelse

        </div>
    </main>
</div>
@endsection