@extends('layouts.admin')

@section('content')
<div class="sm:flex sm:items-center sm:justify-between mb-8">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Gallery Management</h1>
        <p class="mt-2 text-sm text-gray-700">A list of all gallery items including images and videos.</p>
    </div>
    <div class="mt-4 sm:mt-0">
        <a href="{{ route('admin.gallery.create') }}" class="inline-flex items-center justify-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700">
            Add New Item
        </a>
    </div>
</div>

<div class="bg-white shadow overflow-hidden sm:rounded-md">
    <ul class="divide-y divide-gray-200">
        @forelse($items as $item)
        <li>
            <div class="px-4 py-4 sm:px-6 flex items-center justify-between">
                <div class="flex items-center min-w-0 flex-1">
                    <div class="flex-shrink-0 h-16 w-24 bg-gray-100 rounded-md overflow-hidden flex items-center justify-center">
                        @if($item->type === 'image')
                            <img src="{{ asset($item->media_url) }}" alt="" class="h-full w-full object-cover">
                        @elseif($item->type === 'youtube')
                            <svg class="h-8 w-8 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
                        @elseif($item->type === 'tiktok')
                            <svg class="h-8 w-8 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.63-.51 3.27-1.46 4.58-1.52 2.09-4.14 3.26-6.74 3.07-2.73-.2-5.18-1.92-6.24-4.47-1.07-2.58-.64-5.6 1.14-7.79 1.5-1.85 3.86-2.9 6.19-2.92v4.04c-1.35.03-2.65.65-3.52 1.68-.88 1.05-1.25 2.5-.94 3.85.3 1.34 1.34 2.5 2.63 3 1.25.48 2.71.4 3.86-.27 1.17-.67 1.95-1.92 2.1-3.26.1-1.01.07-2.03.07-3.04V.02z"/></svg>
                        @endif
                    </div>
                    <div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
                        <div>
                            <p class="text-sm font-medium text-teal-600 truncate">{{ $item->title ?: 'Untitled' }}</p>
                            <p class="mt-2 flex items-center text-sm text-gray-500 space-x-2">
                                <span class="capitalize px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                    {{ $item->type }}
                                </span>
                                @if($item->show_on_homepage)
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-teal-100 text-teal-800">
                                    On Homepage
                                </span>
                                @endif
                            </p>
                        </div>
                        <div class="hidden md:block">
                            <div>
                                <p class="text-sm text-gray-900">
                                    Status: 
                                    @if($item->is_active)
                                        <span class="text-green-600 font-medium">Active</span>
                                    @else
                                        <span class="text-red-600 font-medium">Inactive</span>
                                    @endif
                                </p>
                                <p class="mt-2 text-sm text-gray-500">
                                    Added on {{ $item->created_at->format('M d, Y') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="{{ route('admin.gallery.edit', $item) }}" class="text-teal-600 hover:text-teal-900 font-medium">Edit</a>
                    <form action="{{ route('admin.gallery.destroy', $item) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this item?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900 font-medium">Delete</button>
                    </form>
                </div>
            </div>
        </li>
        @empty
        <li class="px-4 py-8 text-center text-gray-500">
            No gallery items found. Click "Add New Item" to create one.
        </li>
        @endforelse
    </ul>
</div>
@endsection
