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

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

    <div class="card mb-4">
        <h3 class="font-medium mb-4">Taxonomy Details</h3>

        <table class="w-full mb-4">
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Type</th>
                <td class="py-2">{{ ucfirst($taxonomy->taxonomy_type) }}</td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Slug</th>
                <td class="py-2">{{ $taxonomy->slug }}</td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Language</th>
                <td class="py-2">{{ $taxonomy->language->name ?? 'Unknown' }}</td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Parent</th>
                <td class="py-2">
                    @if ($taxonomy->parent)
                        <a href="{{ route('admin.taxonomy.show', $taxonomy->parent_id) }}"
                            class="text-blue-600 hover:underline">
                            {{ $taxonomy->parent->name }}
                        </a>
                    @else
                        None (Top Level)
                    @endif
                </td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Color</th>
                <td class="py-2">
                    @if ($taxonomy->color)
                        <span class="color-box" style="background-color: {{ $taxonomy->color }}"></span>
                        {{ $taxonomy->color }}
                    @else
                        Not set
                    @endif
                </td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Icon</th>
                <td class="py-2">
                    @if ($taxonomy->getFirstMediaUrl('icon'))
                        <img src="{{ $taxonomy->getFirstMediaUrl('icon') }}" alt="Icon" style="max-height: 30px">
                    @elseif($taxonomy->icon)
                        <i class="{{ $taxonomy->icon }}"></i> {{ $taxonomy->icon }}
                    @else
                        Not set
                    @endif
                </td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Sort Order</th>
                <td class="py-2">{{ $taxonomy->sort_order }}</td>
            </tr>
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Created</th>
                <td class="py-2">{{ $taxonomy->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @if ($taxonomy->getFirstMediaUrl('featured'))
                <tr class="border-b">
                    <th class="py-2 text-left font-medium max-w-3">Featured Image</th>
                    <td class="py-2">
                        <img src="{{ $taxonomy->getFirstMediaUrl('featured') }}" alt="{{ $taxonomy->name }}"
                            class="max-w-32 h-auto rounded">
                    </td>
                </tr>
            @endif
            <tr class="border-b">
                <th class="py-2 text-left font-medium max-w-3">Description</th>
                <td class="py-2">
                    {!! $taxonomy->description ?? '<em>No description provided</em>' !!}
                </td>
            </tr>

        </table>
    </div>

    <div class="card mb-4">
        <div class="flex justify-between items-center">
            <h3 class="font-medium mb-3">Associated Content ({{ $taxonomy->contents->count() }})</h3>
            <p>{{ $taxonomy->contents->where('status', 'published')->count() }} Published</p>
        </div>
        <div>
            @if ($taxonomy->contents->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full border-collapse">
                        <thead>
                            <tr class="border-b bg-gray-50">
                                <th class="text-left py-2 px-3">Title</th>
                                <th class="text-left py-2 px-3">Type</th>
                                <th class="text-left py-2 px-3">Status</th>
                                <th class="text-left py-2 px-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($taxonomy->contents->take(10) as $content)
                                <tr class="border-b">
                                    <td class="py-2 px-3">{{ $content->title }}</td>
                                    <td class="py-2 px-3">{{ ucfirst($content->content_type) }}</td>
                                    <td class="py-2 px-3">
                                        <span
                                            class="px-2 py-1 text-xs rounded {{ $content->status === 'published' ? 'bg-green-600 text-white' : 'bg-gray-600 text-white' }}">
                                            {{ ucfirst($content->status) }}
                                        </span>
                                    </td>
                                    <td class="py-2 px-3">
                                        <div class="flex gap-3">
                                            @include('backend::components.edit-button', [
                                            'route' => route('admin.content.edit', $content->id)
                                        ])
                                        @include('backend::components.show-button', [
                                            'route' => route('admin.content.show', $content->id)
                                        ])
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if ($taxonomy->contents->count() > 10)
                    <div class="text-center mt-3">
                        <a href="{{ route('admin.content.index', ['taxonomy_type' => $taxonomy->taxonomy_type, 'taxonomy_id' => $taxonomy->id]) }}"
                            class="px-4 py-2 border border-blue-600 text-blue-600 rounded hover:bg-blue-50">
                            View All {{ $taxonomy->contents->count() }} Content Items
                        </a>
                    </div>
                @endif
            @else
                <p>
                    No content is associated with this taxonomy yet.
                </p>
            @endif
        </div>
    </div>


    <div class="card mb-4">
        <h3 class="font-medium mb-3">Child Taxonomies</h3>
        <div>
            @if ($taxonomy->children->count() > 0)
                <ul class="space-y-2">
                    @foreach ($taxonomy->children as $child)
                        <li class="flex justify-between items-center p-2 border rounded">
                            <a href="{{ route('admin.taxonomy.show', $child->id) }}"
                                class="text-blue-600 hover:underline">{{ $child->name }}</a>
                            <span
                                class="px-2 py-1 bg-blue-600 text-white text-xs rounded-full">{{ $child->contents->count() }}</span>
                        </li>
                    @endforeach
                </ul>
            @else
                <p>
                    This taxonomy has no children.
                </p>
            @endif
            <div class="mt-4">
                <a href="{{ route('admin.taxonomy.create', ['parent_id' => $taxonomy->id, 'taxonomy_type' => $taxonomy->taxonomy_type]) }}"
                    class="btn btn-primary max-w-40">
                    <i class="fas fa-plus"></i> Add Child
                </a>
            </div>
        </div>
    </div>

    @if ($taxonomy->meta_data && count($taxonomy->meta_data) > 0)
        <div class="card mb-4">
            <h3 class="font-medium mb-3">Meta Data</h5>

                <table class="w-full text-sm">
                    <tbody>
                        @foreach ($taxonomy->meta_data as $key => $value)
                            <tr class="border-b">
                                <th class="py-2 text-left font-medium max-w-3">{{ $key }}</th>
                                <td class="py-2">
                                    @if (is_array($value) || is_object($value))
                                        <pre class="text-xs">{{ json_encode($value, JSON_PRETTY_PRINT) }}</pre>
                                    @else
                                        {{ $value }}
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
        </div>
    @endif

@endsection

@push('styles')
    <style>
        .color-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            margin-right: 5px;
            vertical-align: middle;
        }
    </style>
@endpush