@extends('admin.layouts.app')

@section('title', 'Subcategories')
@section('page-title', 'Subcategories: ' . $category->name)

@section('content')
<div class="mb-4 md:mb-6 flex flex-col gap-4">
    <div>
        <a href="{{ route('admin.categories.index') }}" class="text-blue-600 hover:text-blue-800 mb-2 inline-flex items-center font-medium">
            <i class="fas fa-arrow-left mr-2"></i>Back to Categories
        </a>
    </div>
    <a href="{{ route('admin.categories.subcategories.create', $category) }}" class="btn-primary text-white font-semibold py-2.5 md:py-3 px-4 md:px-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 inline-flex items-center w-full sm:w-auto justify-center">
        <i class="fas fa-plus mr-2"></i>Add New Subcategory
    </a>
</div>

<!-- Desktop Table View -->
<div class="hidden md:block bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Subcategory</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Code</th>
                    <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            @forelse($subcategories as $subcategory)
                <tr class="table-row-hover transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center space-x-4">
                            @if($subcategory->image)
                                <img src="{{ $subcategory->image }}" alt="{{ $subcategory->name }}" 
                                     class="h-16 w-24 rounded-lg object-cover border-2 border-gray-200 shadow-md hover:shadow-lg transition-shadow"
                                     onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'96\' height=\'64\'%3E%3Crect width=\'96\' height=\'64\' fill=\'%23e5e7eb\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' text-anchor=\'middle\' dy=\'.3em\' fill=\'%239ca3af\' font-size=\'12\'%3ENo Image%3C/text%3E%3C/svg%3E';">
                            @else
                                <div class="h-16 w-24 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg flex items-center justify-center border-2 border-gray-200 shadow-md">
                                    <i class="fas fa-tags text-white text-xl"></i>
                                </div>
                            @endif
                            <div>
                                <div class="text-sm font-semibold text-gray-900">{{ $subcategory->name }}</div>
                                @if($subcategory->name_km)
                                    <div class="text-sm text-gray-500">{{ $subcategory->name_km }}</div>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $subcategory->code }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center space-x-2">
                            <a href="{{ route('admin.categories.show', $subcategory) }}" 
                               class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" 
                               title="View">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('admin.categories.edit', $subcategory) }}" 
                               class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 
                               title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('admin.categories.destroy', $subcategory) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" 
                                        class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" 
                                        title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="3" class="px-6 py-12 text-center">
                        <div class="flex flex-col items-center">
                            <i class="fas fa-folder-open text-gray-300 text-6xl mb-4"></i>
                            <p class="text-gray-500 font-medium text-lg mb-2">No subcategories found</p>
                            <p class="text-gray-400 text-sm mb-4">Get started by creating your first subcategory</p>
                            <a href="{{ route('admin.categories.subcategories.create', $category) }}" class="btn-primary text-white font-semibold py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 inline-flex items-center">
                                <i class="fas fa-plus mr-2"></i>Create Subcategory
                            </a>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
    </div>
</div>

<!-- Mobile Card View -->
<div class="md:hidden space-y-4">
    @forelse($subcategories as $subcategory)
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-4">
            <div class="flex items-start space-x-4 mb-4">
                @if($subcategory->image)
                    <img src="{{ $subcategory->image }}" alt="{{ $subcategory->name }}" 
                         class="h-20 w-20 rounded-lg object-cover border-2 border-gray-200 shadow-md flex-shrink-0">
                @else
                    <div class="h-20 w-20 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg flex items-center justify-center border-2 border-gray-200 shadow-md flex-shrink-0">
                        <i class="fas fa-tags text-white text-xl"></i>
                    </div>
                @endif
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold text-gray-900 text-lg mb-1">{{ $subcategory->name }}</h3>
                    @if($subcategory->name_km)
                        <p class="text-sm text-gray-600 mb-2">{{ $subcategory->name_km }}</p>
                    @endif
                    <p class="text-xs text-gray-500">Code: {{ $subcategory->code }}</p>
                </div>
            </div>
            
            <div class="border-t border-gray-200 pt-3 mt-3">
                <div class="flex items-center justify-end space-x-2">
                    <a href="{{ route('admin.categories.show', $subcategory) }}" 
                       class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" 
                       title="View">
                        <i class="fas fa-eye"></i>
                    </a>
                    <a href="{{ route('admin.categories.edit', $subcategory) }}" 
                       class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 
                       title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
                    <form action="{{ route('admin.categories.destroy', $subcategory) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors" 
                                title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-8 text-center">
            <i class="fas fa-folder-open text-gray-300 text-6xl mb-4"></i>
            <p class="text-gray-500 font-medium text-lg mb-2">No subcategories found</p>
            <p class="text-gray-400 text-sm mb-4">Get started by creating your first subcategory</p>
            <a href="{{ route('admin.categories.subcategories.create', $category) }}" class="btn-primary text-white font-semibold py-2 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 inline-flex items-center">
                <i class="fas fa-plus mr-2"></i>Create Subcategory
            </a>
        </div>
    @endforelse
</div>

@if($subcategories->hasPages())
<div class="mt-4 md:mt-6 flex justify-center">
    <div class="bg-white rounded-lg shadow-md border border-gray-200 p-2">
        {{ $subcategories->links() }}
    </div>
</div>
@endif
@endsection