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

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

    <div class="grid grid-cols-1 gap-6">
        <div class="col-span-1">
            <!-- Tag Details Card -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h5 class="text-lg font-medium">Tag Details</h5>
                </div>
                <div class="px-6 py-4">
                    <table class="min-w-full divide-y divide-gray-200">
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <th class="text-left w-48 py-2">Name</th>
                                <td class="py-2">{{ $productTag->name }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Slug</th>
                                <td class="py-2">{{ $productTag->slug }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Description</th>
                                <td class="py-2">{{ $productTag->description ?: 'No description' }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Language</th>
                                <td class="py-2">{{ $productTag->language->name ?? 'Unknown' }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Color</th>
                                <td class="py-2">
                                    @if ($productTag->color)
                                        <span class="inline-block w-5 h-5 rounded border border-gray-300 mr-2"
                                            style="background-color: {{ $productTag->color }};"></span>
                                        {{ $productTag->color }}
                                    @else
                                        No color
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Sort Order</th>
                                <td class="py-2">{{ $productTag->sort_order }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Created At</th>
                                <td class="py-2">{{ $productTag->created_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                            <tr>
                                <th class="text-left py-2">Updated At</th>
                                <td class="py-2">{{ $productTag->updated_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Products with this Tag -->
            @if ($productTag->contents->count() > 0)
                <div class="bg-white shadow rounded-lg overflow-hidden mt-6">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h5 class="text-lg font-medium">Products with this Tag</h5>
                    </div>
                    <div class="px-6 py-4 overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="text-left px-4 py-2">Title</th>
                                    <th class="text-left px-4 py-2">Status</th>
                                    <th class="text-left px-4 py-2">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                @foreach ($productTag->contents as $product)
                                    @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
                                    <tr>
                                        <td class="px-4 py-2">{{ $product->title }}</td>
                                        <td class="px-4 py-2">
                                            <span
                                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $statusClass }}">{{ ucfirst($product->status) }}</span>
                                        </td>
                                        <td class="px-4 py-2">
                                            <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>
@endsection