@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'View Product Category')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl font-semibold">Category</h1>
        <div class="flex gap-2">
            <a href="{{ route('admin.product-categories.edit', $productCategory->id) }}" class="btn btn-primary btn-black">
                <i class="fas fa-edit mr-2"></i> Edit
            </a>
            <a href="{{ route('admin.product-categories.index') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left mr-2"></i> Back to Categories
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            <div class="card">
                <h5 class="text-lg font-medium mb-4">Category Details</h5>
                <div class="overflow-x-auto">
                    <table class="w-full border border-gray-200">
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700 w-48">Name</th>
                            <td class="px-4 py-3">{{ $productCategory->name }}</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Slug</th>
                            <td class="px-4 py-3">{{ $productCategory->slug }}</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Description</th>
                            <td class="px-4 py-3">{{ $productCategory->description ?: 'No description' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Parent Category</th>
                            <td class="px-4 py-3">
                                @if ($productCategory->parent)
                                    <a href="{{ route('admin.product-categories.show', $productCategory->parent->id) }}"
                                        class="text-blue-600 hover:text-blue-800 underline">
                                        {{ $productCategory->parent->name }}
                                    </a>
                                @else
                                    None (Top Level)
                                @endif
                            </td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Language</th>
                            <td class="px-4 py-3">{{ $productCategory->language->name ?? 'Unknown' }}</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Sort Order</th>
                            <td class="px-4 py-3">{{ $productCategory->sort_order }}</td>
                        </tr>
                        <tr class="border-b border-gray-200">
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Created At</th>
                            <td class="px-4 py-3">{{ customDateTimeFormate($productCategory->created_at) }}</td>
                        </tr>
                        <tr>
                            <th class="bg-gray-50 px-4 py-3 text-left font-medium text-gray-700">Updated At</th>
                            <td class="px-4 py-3">{{ customDateTimeFormate($productCategory->updated_at) }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            @if ($productCategory->children->count() > 0)
                <div class="card">
                    <h5 class="text-lg font-medium mb-4">Child Categories</h5>
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Name</th>
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Products</th>
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($productCategory->children as $child)
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-4 py-3">{{ $child->name }}</td>
                                        <td class="px-4 py-3">{{ $child->contents->count() }}</td>
                                        <td class="px-4 py-3">
                                            <div class="flex gap-2">
                                                @include('backend::components.show-button', [
                                                    'route' => route('admin.product-categories.show', $child->id),
                                                ])

                                                @include('backend::components.edit-button', [
                                                    'route' => route('admin.product-categories.edit', $child->id),
                                                ])
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            @if ($productCategory->contents->count() > 0)
                <div class="card">
                    <h5 class="text-lg font-medium mb-4">Products in this Category</h5>

                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Title</th>
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Status</th>
                                    <th class="px-4 py-3 text-left font-medium text-gray-700">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($productCategory->contents as $product)
                                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                                        <td class="px-4 py-3">{{ $product->title }}</td>
                                        <td class="px-4 py-3">
                                            @php
                                                $statusClass = match ($product->status) {
                                                    'published' => 'bg-green-100 text-green-800',
                                                    'draft' => 'bg-gray-100 text-gray-800',
                                                    'scheduled' => 'bg-blue-100 text-blue-800',
                                                    'archived' => 'bg-yellow-100 text-yellow-800',
                                                    'trash' => 'bg-red-100 text-red-800',
                                                    default => 'bg-gray-100 text-gray-800',
                                                };
                                            @endphp
                                            <span
                                                class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $statusClass }}">
                                                {{ ucfirst($product->status) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3">
                                            <div class="flex gap-2">

                                                @include('backend::components.show-button', [
                                                    'route' => route('admin.product.show', $product->id),
                                                ])

                                                @include('backend::components.edit-button', [
                                                    'route' => route('admin.product.edit', $product->id),
                                                ])
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>

        <div class="space-y-6">
            @if ($productCategory->getFirstMediaUrl('featured'))
                <div class="card">
                    <h5 class="text-lg font-medium mb-4">Featured Image</h5>
                    <img src="{{ $productCategory->getFirstMediaUrl('featured') }}" alt="{{ $productCategory->name }}"
                        class="w-full h-auto rounded">
                </div>
            @endif

            @if ($productCategory->getFirstMediaUrl('icon'))
                <div class="card">
                    <h5 class="text-lg font-medium mb-4">Icon</h5>
                    <img src="{{ $productCategory->getFirstMediaUrl('icon') }}" alt="{{ $productCategory->name }} icon"
                        class="w-full h-auto max-h-24 object-contain rounded">
                </div>
            @endif
        </div>
    </div>
@endsection