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

@section('content')


    <div class="max-w-8xl mx-auto">

        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold">{{ $blogTag->name }}</h1>
            <div class="space-x-2 flex gap-2 flex-wrap">
                <a href="{{ route('admin.blog-tags.edit', $blogTag->id) }}" class="btn btn-primary btn-black">
                    <i class="fas fa-edit mr-2"></i> Edit
                </a>
                <a href="{{ route('admin.blog-tags.index') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Tags
                </a>
            </div>
        </div>

        <div class="card mb-6">
            <h3 class="font-semibold mb-4">Tag Details</h3>
            <table class="w-full text-sm text-left border border-gray-200">
                <tbody>
                    <tr class="border-b border-gray-200">
                        <th class="w-48 px-4 py-2 font-medium">Name</th>
                        <td class="px-4 py-2">{{ $blogTag->name }}</td>
                    </tr>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-2 font-medium">Slug</th>
                        <td class="px-4 py-2">{{ $blogTag->slug }}</td>
                    </tr>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-2 font-medium">Description</th>
                        <td class="px-4 py-2">{{ $blogTag->description ?: 'No description' }}</td>
                    </tr>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-2 font-medium">Language</th>
                        <td class="px-4 py-2">{{ $blogTag->language->name ?? 'Unknown' }}</td>
                    </tr>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-2 font-medium">Sort Order</th>
                        <td class="px-4 py-2">{{ $blogTag->sort_order }}</td>
                    </tr>
                    <tr class="border-b border-gray-200">
                        <th class="px-4 py-2 font-medium">Created At</th>
                        <td class="px-4 py-2">{{ customDateTimeFormate($blogTag->created_at) }}</td>
                    </tr>
                    <tr>
                        <th class="px-4 py-2 font-medium">Updated At</th>
                        <td class="px-4 py-2">{{ customDateTimeFormate($blogTag->updated_at) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        @if ($blogTag->contents->count() > 0)
            <div class="card mb-6">
                <h3 class="font-semibold mb-4">Products with this Tag</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm text-left border border-gray-200">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-2">Title</th>
                                <th class="px-4 py-2">Status</th>
                                <th class="px-4 py-2">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($blogTag->contents as $content)
                                <tr class="border-b border-gray-200 hover:bg-gray-50">
                                    <td class="px-4 py-2">{{ $content->title }}</td>
                                    <td class="px-4 py-2">
                                        @php
                                            $statusClasses = [
                                                '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="px-2 py-1 text-xs font-semibold rounded {{ $statusClasses[$content->status] ?? 'bg-gray-100 text-gray-800' }}">
                                            {{ ucfirst($content->status) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-2">
                                        <div class="flex space-x-2">

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

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