@extends('layouts.app')

@section('title', $galleryType->name)

@section('content')
<x-app-layout>
    <x-module-hero
        title="{{ $galleryType->name }}"
        description="Gallery type details and associated galleries"
        icon="fa-layer-group">

        <x-slot name="backButton">
            <a href="{{ route('media.gallery-types.index') }}"
               class="inline-flex items-center gap-2 text-[#475569] hover:text-[#1e293b] text-sm transition">
                <i class="fas fa-arrow-left text-xs"></i> Back to Gallery Types
            </a>
        </x-slot>

        <x-slot name="actions">
            @can('edit gallery types')
            <a href="{{ route('media.gallery-types.edit', $galleryType) }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white text-sm font-semibold rounded-lg hover:bg-amber-700 transition">
                <i class="fas fa-edit"></i> Edit
            </a>
            @endcan
            @can('delete gallery types')
            <form action="{{ route('media.gallery-types.destroy', $galleryType) }}" method="POST" class="inline"
                  onsubmit="return confirm('Delete this gallery type?');">
                @csrf @method('DELETE')
                <button type="submit"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-sm font-semibold rounded-lg hover:bg-red-700 transition">
                    <i class="fas fa-trash"></i> Delete
                </button>
            </form>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        {{-- Flash Messages --}}
        @if(session('success'))
        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
        @endif

        {{-- Gallery Type Details --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            {{-- Main Info --}}
            <div class="lg:col-span-2 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Type Information</h2>

                {{-- Color & Icon Preview --}}
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <p class="text-sm text-gray-600 mb-3">Preview:</p>
                    <div class="flex items-center gap-4">
                        <div class="p-4 rounded-lg" style="background-color: {{ $galleryType->color }}20">
                            <i class="fas {{ $galleryType->icon }} text-3xl" style="color: {{ $galleryType->color }}"></i>
                        </div>
                        <div class="text-sm">
                            <p class="text-gray-700">
                                <strong>Color:</strong>
                                <span class="inline-block w-6 h-6 rounded border border-gray-300" 
                                      style="background-color: {{ $galleryType->color }}"></span>
                                {{ $galleryType->color }}
                            </p>
                            <p class="text-gray-700"><strong>Icon:</strong> {{ $galleryType->icon }}</p>
                        </div>
                    </div>
                </div>

                {{-- Description --}}
                @if($galleryType->description)
                <div class="mb-6">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">Description</h3>
                    <p class="text-gray-600 leading-relaxed">{{ $galleryType->description }}</p>
                </div>
                @endif

                {{-- Status --}}
                <div class="flex items-center gap-3">
                    <span class="text-sm font-medium text-gray-700">Status:</span>
                    <span class="px-3 py-1 text-xs font-semibold rounded-full
                        {{ $galleryType->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                        {{ $galleryType->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>

            {{-- Stats Card --}}
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow-sm border border-blue-200 p-6">
                <div class="text-center">
                    <p class="text-sm font-medium text-blue-600 mb-1">Total Galleries</p>
                    <p class="text-4xl font-bold text-blue-900">{{ $galleryType->galleries()->count() }}</p>
                    <p class="text-xs text-blue-600 mt-4">
                        <i class="fas fa-images"></i> Using this type
                    </p>
                </div>
            </div>
        </div>

        {{-- Associated Galleries --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-images text-blue-600"></i> Associated Galleries
                </h2>
                @can('create galleries')
                <a href="{{ route('media.galleries.create', ['type' => $galleryType->id]) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition">
                    <i class="fas fa-plus"></i> Add Gallery
                </a>
                @endcan
            </div>

            @if($galleryType->galleries()->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @forelse($galleryType->galleries()->ordered()->paginate(9) as $gallery)
                        <div class="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                            {{-- Gallery Image Thumbnail --}}
                            <div class="h-32 bg-gray-100 flex items-center justify-center overflow-hidden">
                                @if($gallery->images()->count() > 0)
                                    <img src="{{ asset('storage/' . $gallery->images()->first()->image_path) }}"
                                         alt="{{ $gallery->title }}"
                                         class="w-full h-full object-cover">
                                @else
                                    <div class="text-center">
                                        <i class="fas fa-image text-4xl text-gray-300 mb-2"></i>
                                        <p class="text-xs text-gray-500">No images</p>
                                    </div>
                                @endif
                            </div>

                            {{-- Gallery Info --}}
                            <div class="p-4">
                                <h4 class="font-semibold text-gray-900 mb-1 truncate">{{ $gallery->title }}</h4>
                                <p class="text-xs text-gray-500 mb-3">
                                    <i class="fas fa-images"></i> {{ $gallery->images()->count() }} images
                                </p>
                                <div class="flex gap-2">
                                    <a href="{{ route('media.galleries.show', $gallery) }}"
                                       class="flex-1 text-center text-xs px-3 py-1 bg-blue-50 text-blue-600 rounded hover:bg-blue-100 transition font-medium">
                                        View
                                    </a>
                                    @can('edit galleries')
                                    <a href="{{ route('media.galleries.edit', $gallery) }}"
                                       class="flex-1 text-center text-xs px-3 py-1 bg-amber-50 text-amber-600 rounded hover:bg-amber-100 transition font-medium">
                                        Edit
                                    </a>
                                    @endcan
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-3 text-center py-8">
                            <i class="fas fa-inbox text-3xl text-gray-300 mb-2"></i>
                            <p class="text-gray-500">No galleries using this type yet.</p>
                        </div>
                    @endforelse
                </div>

                {{-- Pagination --}}
                @if($galleryType->galleries()->paginate(9)->hasPages())
                <div class="mt-6">
                    {{ $galleryType->galleries()->ordered()->paginate(9)->links() }}
                </div>
                @endif
            @else
                <div class="text-center py-8">
                    <i class="fas fa-inbox text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-600 mb-4">No galleries have been created for this type yet.</p>
                    @can('create galleries')
                    <a href="{{ route('media.galleries.create', ['type' => $galleryType->id]) }}"
                       class="inline-flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        <i class="fas fa-plus"></i> Create First Gallery
                    </a>
                    @endcan
                </div>
            @endif
        </div>
    </div>
</x-app-layout>
@endsection
