@extends('layouts.app')

@section('title', $category->name . ' - Category - Smart ERP')
@section('page-title', 'Category Details')

@section('content')

<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
    <div class="flex items-center gap-3">
        <a href="{{ route('master.categories.index') }}" class="w-9 h-9 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-gray-600 transition-colors">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold text-lg">
                {{ substr($category->name, 0, 1) }}
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-800">{{ $category->name }}</h2>
                <span class="px-2 py-0.5 rounded-full text-xs font-bold {{ $category->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }}">
                    {{ $category->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('master.categories.edit', $category) }}" class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-semibold transition-colors">
            <i class="fas fa-edit mr-2"></i>Edit
        </a>
        <form action="{{ route('master.categories.destroy', $category) }}" method="POST" class="inline" onsubmit="return confirm('Delete this category?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-4 py-2.5 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg text-sm font-semibold transition-colors">
                <i class="fas fa-trash mr-2"></i>Delete
            </button>
        </form>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card p-6">
        <h3 class="text-sm font-bold text-gray-500 uppercase mb-4">Category Information</h3>
        <div class="space-y-4">
            <div>
                <p class="text-xs text-gray-400 uppercase font-semibold">Name</p>
                <p class="text-sm font-semibold text-gray-800">{{ $category->name }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-400 uppercase font-semibold">Code</p>
                @if($category->code)
                    <span class="px-2 py-0.5 rounded text-xs font-mono font-bold bg-gray-100 text-gray-700">{{ $category->code }}</span>
                @else
                    <span class="text-sm text-gray-400">—</span>
                @endif
            </div>
            <div>
                <p class="text-xs text-gray-400 uppercase font-semibold">Description</p>
                <p class="text-sm text-gray-700">{{ $category->description ?? '—' }}</p>
            </div>
        </div>
    </div>

    <div class="card p-6">
        <h3 class="text-sm font-bold text-gray-500 uppercase mb-4">Products in this Category</h3>
        <div class="space-y-4">
            <div>
                <p class="text-xs text-gray-400 uppercase font-semibold">Total Products</p>
                <p class="text-2xl font-bold text-indigo-600">{{ $category->products->count() }}</p>
            </div>
            @if($category->products->count() > 0)
            <div class="mt-4">
                <p class="text-xs text-gray-400 uppercase font-semibold mb-2">Recent Products</p>
                <div class="space-y-2">
                    @foreach($category->products->take(5) as $product)
                    <div class="flex items-center gap-2 text-sm">
                        <i class="fas fa-box text-gray-400 text-xs"></i>
                        <span class="text-gray-700">{{ $product->name }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<div class="card p-4">
    <div class="flex flex-wrap items-center gap-6 text-xs text-gray-500">
        <span><i class="fas fa-calendar-alt mr-1"></i> Created: {{ $category->created_at->format('d M Y, h:i A') }}</span>
        <span><i class="fas fa-clock mr-1"></i> Last Updated: {{ $category->updated_at->format('d M Y, h:i A') }}</span>
        <span><i class="fas fa-hashtag mr-1"></i> ID: {{ $category->id }}</span>
    </div>
</div>

@endsection