@extends('admin.layouts.app')

@section('title', 'Videos Management')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Videos Management</h1>
                <p class="text-gray-600">Manage your product videos and media content</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('videos.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200 transform hover:scale-105">
                        <i class="fas fa-plus mr-2"></i>
                        Add New Video
                    </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Videos</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $videos->total() }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-video text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Active Videos</p>
                    <p class="text-2xl font-bold text-green-600">{{ $videos->where('is_active', true)->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-play-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Inactive Videos</p>
                    <p class="text-2xl font-bold text-red-600">{{ $videos->where('is_active', false)->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-pause-circle text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">With Thumbnails</p>
                    <p class="text-2xl font-bold text-purple-600">{{ $videos->whereNotNull('thumbnail')->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-image text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
                <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Search Videos</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" id="search" name="search" placeholder="Search by title or product name..."
                           class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                </div>
            </div>
            <div class="md:w-48">
                <label for="status_filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select id="status_filter" name="status_filter"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
            <div class="md:w-48">
                <label for="sort_by" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                <select id="sort_by" name="sort_by"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                    <option value="title">Title (A-Z)</option>
                    <option value="title_desc">Title (Z-A)</option>
                    <option value="created_at">Newest First</option>
                    <option value="created_at_old">Oldest First</option>
                </select>
            </div>
        </div>
    </div>

    <!-- View Toggle -->
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center space-x-2">
            <button id="table_view" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                <i class="fas fa-table mr-2"></i>Table View
            </button>
            <button id="card_view" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                <i class="fas fa-th mr-2"></i>Card View
            </button>
        </div>
        <div class="text-sm text-gray-500">
            Showing {{ $videos->count() }} videos
        </div>
    </div>

    <!-- Videos Table View -->
    <div id="videos_table_view" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">All Videos</h3>
        </div>

        <div class="overflow-x-auto">
            <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">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">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</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-left 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 class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($video->thumbnail)
                                <img class="h-16 w-24 rounded-lg object-cover border border-gray-200" src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}">
                            @else
                                <div class="h-16 w-24 rounded-lg bg-gradient-to-r from-gray-200 to-gray-300 flex items-center justify-center border border-gray-200">
                                    <i class="fas fa-video text-gray-600 text-lg"></i>
                                </div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ $video->title }}</div>
                            <div class="text-sm text-gray-500">{{ Str::limit($video->url, 40) }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $video->product ? $video->product->name : 'N/A' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $video->formatted_duration }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <form action="{{ route('videos.toggle-status', $video) }}" method="POST" class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors duration-200
                                    {{ $video->is_active ? 'bg-green-100 text-green-800 hover:bg-green-200' : 'bg-red-100 text-red-800 hover:bg-red-200' }}">
                                    <i class="fas {{ $video->is_active ? 'fa-play-circle' : 'fa-pause-circle' }} mr-1"></i>
                                    {{ $video->is_active ? 'Active' : 'Inactive' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex items-center space-x-2">
                                <a href="{{ route('videos.show', $video) }}" class="text-blue-600 hover:text-blue-900 p-1 rounded" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('videos.edit', $video) }}" class="text-indigo-600 hover:text-indigo-900 p-1 rounded" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('videos.destroy', $video) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Are you sure you want to delete this video?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900 p-1 rounded" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-video text-gray-400 text-4xl mb-4"></i>
                                <h3 class="text-lg font-medium text-gray-900 mb-2">No Videos Found</h3>
                                <p class="text-gray-500 mb-4">Get started by creating your first video.</p>
                                <a href="{{ route('videos.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90">
                                    <i class="fas fa-plus mr-2"></i>
                                    Add New Video
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Videos Card View -->
    <div id="videos_card_view" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @forelse($videos as $video)
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow duration-200">
            <div class="relative">
                @if($video->thumbnail)
                    <img class="w-full h-48 object-cover" src="{{ asset('storage/' . $video->thumbnail) }}" alt="{{ $video->title }}">
                @else
                    <div class="w-full h-48 bg-gradient-to-r from-gray-200 to-gray-300 flex items-center justify-center">
                        <i class="fas fa-video text-gray-600 text-3xl"></i>
                    </div>
                @endif
                <div class="absolute top-2 right-2">
                    <form action="{{ route('videos.toggle-status', $video) }}" method="POST" class="inline">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium transition-colors duration-200
                            {{ $video->is_active ? 'bg-green-100 text-green-800 hover:bg-green-200' : 'bg-red-100 text-red-800 hover:bg-red-200' }}">
                            <i class="fas {{ $video->is_active ? 'fa-play-circle' : 'fa-pause-circle' }}"></i>
                        </button>
                    </form>
                </div>
                <div class="absolute bottom-2 right-2 bg-black bg-opacity-75 text-white px-2 py-1 rounded text-xs">
                    {{ $video->formatted_duration }}
                </div>
            </div>

            <div class="p-6">
                <h3 class="text-sm font-semibold text-gray-900 mb-2 line-clamp-2">{{ $video->title }}</h3>

                <p class="text-xs text-gray-600 mb-3">
                    Product: {{ $video->product ? $video->product->name : 'N/A' }}
                </p>

                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-2">
                        <a href="{{ route('videos.show', $video) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-lg text-xs font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary transition-colors">
                            <i class="fas fa-eye mr-1"></i>
                            View
                        </a>
                        <a href="{{ route('videos.edit', $video) }}" class="inline-flex items-center px-3 py-1.5 border border-indigo-300 rounded-lg text-xs font-medium text-indigo-700 bg-indigo-50 hover:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors">
                            <i class="fas fa-edit mr-1"></i>
                            Edit
                        </a>
                    </div>
                    <form action="{{ route('videos.destroy', $video) }}" method="POST" class="inline"
                          onsubmit="return confirm('Are you sure you want to delete this video?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="inline-flex items-center px-2 py-1.5 border border-red-300 rounded-lg text-xs font-medium text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @empty
        <div class="col-span-full">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center">
                <i class="fas fa-video text-gray-400 text-4xl mb-4"></i>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No Videos Found</h3>
                <p class="text-gray-500 mb-4">Get started by creating your first video.</p>
                <a href="{{ route('videos.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90">
                    <i class="fas fa-plus mr-2"></i>
                    Add New Video
                </a>
            </div>
        </div>
        @endforelse
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableViewBtn = document.getElementById('table_view');
    const cardViewBtn = document.getElementById('card_view');
    const tableView = document.getElementById('videos_table_view');
    const cardView = document.getElementById('videos_card_view');

    tableViewBtn.addEventListener('click', function() {
        tableView.classList.remove('hidden');
        cardView.classList.add('hidden');
        tableViewBtn.classList.add('bg-primary', 'text-white', 'border-primary');
        tableViewBtn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
        cardViewBtn.classList.remove('bg-primary', 'text-white', 'border-primary');
        cardViewBtn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
    });

    cardViewBtn.addEventListener('click', function() {
        cardView.classList.remove('hidden');
        tableView.classList.add('hidden');
        cardViewBtn.classList.add('bg-primary', 'text-white', 'border-primary');
        cardViewBtn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
        tableViewBtn.classList.remove('bg-primary', 'text-white', 'border-primary');
        tableViewBtn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
    });

    // Search functionality
    const searchInput = document.getElementById('search');
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('#videos_table_view tbody tr, #videos_card_view > div');

        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });

    // Status filter
    const statusFilter = document.getElementById('status_filter');
    statusFilter.addEventListener('change', function() {
        const filterValue = this.value;
        const rows = document.querySelectorAll('#videos_table_view tbody tr, #videos_card_view > div');

        rows.forEach(row => {
            if (filterValue === '') {
                row.style.display = '';
            } else {
                const statusText = row.querySelector('.bg-green-100, .bg-red-100')?.textContent.toLowerCase() || '';
                if (statusText.includes(filterValue)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });
});
</script>

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endsection