@extends('layouts.admin')

@section('header', 'Hero Video Cards')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <h2 class="text-xl font-semibold text-gray-800">Video Cards (Homepage Carousel)</h2>
    <a href="{{ route('admin.hero-videos.create') }}" class="px-5 py-2.5 bg-theme-900 text-white rounded-lg text-sm font-medium hover:bg-theme-800 transition-colors">+ Add Video</a>
</div>

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-lg">{{ session('success') }}</div>
@endif

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Thumbnail</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Video URL</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($videos as $video)
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $video->sort_order }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    @if($video->thumbnail)
                        <img src="{{ asset('storage/' . $video->thumbnail) }}" alt="" class="h-16 w-24 object-cover rounded-lg">
                    @else
                        <div class="h-16 w-24 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 text-xs">No Thumb</div>
                    @endif
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $video->title }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 truncate max-w-xs"><a href="{{ $video->video_url }}" target="_blank">{{ Str::limit($video->video_url, 40) }}</a></td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full {{ $video->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                        {{ $video->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-3">
                    <a href="{{ route('admin.hero-videos.edit', $video) }}" class="text-theme-700 hover:text-theme-900">Edit</a>
                    <form action="{{ route('admin.hero-videos.destroy', $video) }}" method="POST" class="inline" onsubmit="return confirm('Delete this video card?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-800">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" class="px-6 py-12 text-center text-gray-500">No video cards yet. Add one to start the homepage carousel!</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection