@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ $gallery->isDesign() ? route('gallery.designs') : route('gallery.portfolio') }}"
               class="inline-flex items-center text-blue-600 hover:text-blue-800">
                <svg class="w-5 h-5 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"></path>
                </svg>
                Back to {{ $gallery->isDesign() ? 'Flash Designs' : 'Portfolio' }}
            </a>
        </div>

        <!-- Main Content -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- Image -->
            <div class="aspect-video bg-gray-200 relative">
                <img src="{{ $gallery->getImageUrl() }}"
                     alt="{{ $gallery->title }}"
                     class="w-full h-full object-cover">

                @if($gallery->isDesign())
                    @if(!$gallery->is_available)
                        <div class="absolute top-4 left-4">
                            <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-red-100 text-red-800">
                                Unavailable
                            </span>
                        </div>
                    @elseif($gallery->isTrending())
                        <div class="absolute top-4 left-4">
                            <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-purple-100 text-purple-800">
                                🔥 Trending
                            </span>
                        </div>
                    @elseif($gallery->isPopular())
                        <div class="absolute top-4 left-4">
                            <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800">
                                ⭐ Popular
                            </span>
                        </div>
                    @endif
                @else
                    @if($gallery->is_featured)
                        <div class="absolute top-4 left-4">
                            <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-yellow-100 text-yellow-800">
                                ⭐ Featured
                            </span>
                        </div>
                    @endif
                @endif
            </div>

            <!-- Content -->
            <div class="p-6">
                <!-- Header -->
                <div class="mb-6">
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $gallery->title }}</h1>
                    <div class="flex items-center text-gray-600">
                        <span class="text-lg">By {{ $gallery->artist->name }}</span>
                        @if($gallery->isPortfolio() && $gallery->completed_date)
                            <span class="mx-2">•</span>
                            <span>Completed {{ $gallery->completed_date->format('F Y') }}</span>
                        @endif
                        @if($gallery->isDesign())
                            <span class="mx-2">•</span>
                            <span>{{ $gallery->view_count }} views</span>
                        @endif
                    </div>
                </div>

                <!-- Description -->
                @if($gallery->description)
                    <div class="mb-6">
                        <p class="text-gray-700 leading-relaxed">{{ $gallery->description }}</p>
                    </div>
                @endif

                <!-- Details Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- Styles -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Styles</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($gallery->getStyleBadges() as $style => $class)
                                <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full {{ $class }}">
                                    {{ ucfirst($style) }}
                                </span>
                            @endforeach
                        </div>
                    </div>

                    <!-- Details -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Details</h3>
                        <div class="space-y-2">
                            @if($gallery->isDesign())
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Size:</span>
                                    <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $gallery->size_category)) }}</span>
                                </div>
                                @if($gallery->difficulty_level)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Difficulty:</span>
                                        <span class="inline-flex items-center px-2 py-1 text-sm font-medium rounded-full {{ $gallery->getDifficultyBadgeColor() }}">
                                            {{ ucfirst($gallery->difficulty_level) }}
                                        </span>
                                    </div>
                                @endif
                                @if($gallery->is_customizable)
                                    <div class="flex justify-between">
                                        <span class="text-gray-600">Customizable:</span>
                                        <span class="text-green-600 font-medium">Yes</span>
                                    </div>
                                @endif
                            @else
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Body Part:</span>
                                    <span class="font-medium">{{ ucfirst($gallery->body_part) }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Sessions:</span>
                                    <span class="inline-flex items-center px-2 py-1 text-sm font-medium rounded-full {{ $gallery->getSessionBadgeColor() }}">
                                        {{ $gallery->session_count }} session{{ $gallery->session_count > 1 ? 's' : '' }}
                                    </span>
                                </div>
                            @endif

                            @if($gallery->estimated_hours)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Duration:</span>
                                    <span class="font-medium">{{ $gallery->getFormattedDuration() }}</span>
                                </div>
                            @endif

                            @if($gallery->isDesign() && $gallery->base_price)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Price Range:</span>
                                    <span class="font-medium">{{ $gallery->getPriceRange() }}</span>
                                </div>
                            @elseif($gallery->isPortfolio() && $gallery->estimated_cost)
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Estimated Cost:</span>
                                    <span class="font-medium">{{ $gallery->getFormattedCost() }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Color Palette (Designs only) -->
                @if($gallery->isDesign() && $gallery->hasColorPalette())
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Color Palette</h3>
                        <p class="text-gray-700">{{ $gallery->getColorPaletteDisplay() }}</p>
                    </div>
                @endif

                <!-- Artist Notes (Designs only) -->
                @if($gallery->isDesign() && $gallery->artist_notes)
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Artist Notes</h3>
                        <p class="text-gray-700">{{ $gallery->artist_notes }}</p>
                    </div>
                @endif

                <!-- Client Testimonial (Portfolio only) -->
                @if($gallery->isPortfolio() && $gallery->hasClientFeedback())
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Client Feedback</h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            @if($gallery->client_rating)
                                <div class="text-yellow-400 text-lg mb-2">
                                    {{ $gallery->getRatingStars() }}
                                </div>
                            @endif
                            @if($gallery->client_testimonial)
                                <p class="text-gray-700 italic">"{{ $gallery->client_testimonial }}"</p>
                            @endif
                        </div>
                    </div>
                @endif

                <!-- Tags -->
                @if($gallery->tags && count($gallery->tags) > 0)
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-3">Tags</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach($gallery->tags as $tag)
                                <span class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-gray-100 text-gray-800">
                                    #{{ $tag }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Book Button (Designs only) -->
                @if($gallery->isBookable())
                    <div class="border-t pt-6">
                        <form action="{{ route('gallery.book', $gallery) }}" method="POST">
                            @csrf
                            <button type="submit"
                                    class="w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                                Book This Design
                            </button>
                        </form>
                    </div>
                @endif
            </div>
        </div>

        <!-- Related Items -->
        @if($relatedItems->count() > 0)
            <div class="mt-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">
                    Related {{ $gallery->isDesign() ? 'Designs' : 'Work' }}
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($relatedItems as $item)
                        @if($item->isDesign())
                            @include('gallery.partials.design-card', ['design' => $item])
                        @else
                            @include('gallery.partials.portfolio-card', ['portfolio' => $item])
                        @endif
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection