@extends('layouts.app')
@section('title', 'View Sale Post Category')
@section('description', 'Sale post category details')
@section('content')

    <!-- Page Content -->
    <main class="p-8">
        <div class="max-w-4xl mx-auto">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('admin.sale-post-category.index') }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to Categories
                </a>
            </div>

            <!-- Category Details Card -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <!-- Header -->
                <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-8 py-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            @if($salePostCategory->icon)
                            <div class="w-16 h-16 flex items-center justify-center bg-white/20 backdrop-blur-sm rounded-xl text-white text-3xl">
                                {!! $salePostCategory->icon !!}
                            </div>
                            @endif
                            <div>
                                <h2 class="text-2xl font-bold text-white">{{ $salePostCategory->name }}</h2>
                                <p class="text-blue-100 mt-1">Category Details</p>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="{{ route('admin.sale-post-category.edit', encryptor('encrypt', $salePostCategory->id)) }}" class="px-4 py-2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white rounded-lg transition-colors duration-200">
                                <svg class="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                </svg>
                                Edit
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Body -->
                <div class="p-8 space-y-6">
                    <!-- Basic Information -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Name -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Category Name</label>
                            <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ $salePostCategory->name }}</p>
                        </div>

                        <!-- Slug -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Slug</label>
                            <code class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg inline-block">{{ $salePostCategory->slug ?? 'N/A' }}</code>
                        </div>

                        <!-- Status -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Status</label>
                            @if($salePostCategory->status == 1 || $salePostCategory->status == 'active')
                            <span class="inline-flex items-center px-3 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-sm font-semibold rounded-lg">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                </svg>
                                Active
                            </span>
                            @else
                            <span class="inline-flex items-center px-3 py-2 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 text-sm font-semibold rounded-lg">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                                Inactive
                            </span>
                            @endif
                        </div>

                        <!-- Parent Category -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Parent Category</label>
                            @if($salePostCategory->parent)
                            <a href="{{ route('admin.sale-post-category.show', encryptor('encrypt', $salePostCategory->parent->id)) }}" class="inline-flex items-center px-3 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-sm font-medium rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors">
                                {{ $salePostCategory->parent->name }}
                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </a>
                            @else
                            <span class="inline-flex items-center px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-sm font-medium rounded-lg">
                                Root Category
                            </span>
                            @endif
                        </div>
                    </div>

                    <!-- Description -->
                    @if($salePostCategory->description)
                    <div>
                        <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Description</label>
                        <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                            <p class="text-gray-900 dark:text-white">{{ $salePostCategory->description }}</p>
                        </div>
                    </div>
                    @endif

                    <!-- Icon -->
                    @if($salePostCategory->icon)
                    <div>
                        <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Icon</label>
                        <div class="flex items-center space-x-4">
                            <div class="w-16 h-16 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl text-white text-3xl shadow-lg">
                                {!! $salePostCategory->icon !!}
                            </div>
                            <code class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg text-sm">{{ $salePostCategory->icon }}</code>
                        </div>
                    </div>
                    @endif

                    <!-- Timestamps -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Created At</label>
                            <p class="text-gray-900 dark:text-white">{{ $salePostCategory->created_at ? $salePostCategory->created_at->format('M d, Y h:i A') : 'N/A' }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2">Last Updated</label>
                            <p class="text-gray-900 dark:text-white">{{ $salePostCategory->updated_at ? $salePostCategory->updated_at->format('M d, Y h:i A') : 'N/A' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Subcategories -->
            @if($salePostCategory->children->count() > 0)
            <div class="mt-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <div class="px-8 py-6 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Subcategories ({{ $salePostCategory->children->count() }})</h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($salePostCategory->children as $child)
                        <a href="{{ route('admin.sale-post-category.show', encryptor('encrypt', $child->id)) }}" class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
                            @if($child->icon)
                            <div class="w-12 h-12 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg text-white text-xl mr-4">
                                {!! $child->icon !!}
                            </div>
                            @endif
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-900 dark:text-white">{{ $child->name }}</h4>
                                @if($child->description)
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ Str::limit($child->description, 60) }}</p>
                                @endif
                            </div>
                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Actions -->
            <div class="mt-6 flex justify-between items-center">
                <a href="{{ route('admin.sale-post-category.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                    Back to List
                </a>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.sale-post-category.edit', encryptor('encrypt', $salePostCategory->id)) }}" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200">
                        <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                        Edit Category
                    </a>
                    <form action="{{ route('admin.sale-post-category.destroy', encryptor('encrypt', $salePostCategory->id)) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this category?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-colors duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection