@extends('layouts.admin')

@section('content')
    <div class="container mx-auto p-6">
        <h1 class="text-2xl font-bold mb-4 text-gray-800">{{ $category->name }}</h1>
        <div class="bg-white p-6 shadow rounded-lg">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <p class="text-gray-600"><strong class="text-gray-800">Parent:</strong> {{ $category->parent ? $category->parent->name : 'None' }}</p>
                    <p class="text-gray-600"><strong class="text-gray-800">Active:</strong> {{ $category->active ? 'Yes' : 'No' }}</p>
                    <p class="text-gray-600"><strong class="text-gray-800">Hours:</strong> {{ $category->hours ?? 'N/A' }}</p>
                    <p class="text-gray-600"><strong class="text-gray-800">Cuisine:</strong> {{ $category->cuisine ?? 'N/A' }}</p>
                    <p class="text-gray-600"><strong class="text-gray-800">Rating:</strong> {{ $category->rating ?? 'N/A' }}</p>
                    <p class="text-gray-600"><strong class="text-gray-800">Address:</strong> {{ $category->address ?? 'N/A' }}</p>
                </div>
                <div>
                    @if($category->thumb)
                        <p class="text-gray-600"><strong class="text-gray-800">Thumbnail:</strong></p>
                        <img src="{{ asset('storage/' . $category->thumb) }}" alt="{{ $category->name }}" class="max-w-full h-auto rounded mb-4">
                    @endif
                    @if($category->header)
                        <p class="text-gray-600"><strong class="text-gray-800">Header Image:</strong></p>
                        <img src="{{ asset('storage/' . $category->header) }}" alt="{{ $category->name }}" class="max-w-full h-auto rounded">
                    @endif
                </div>
            </div>
            <div class="mt-4">
                <p class="text-gray-600"><strong class="text-gray-800">Description:</strong></p>
                <div class="prose max-w-none">{!! $category->description !!}</div>
            </div>
            <div class="mt-6 flex space-x-4">
                <a href="{{ route('admin.categories.edit', $category) }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">Edit</a>
                <form action="{{ route('admin.categories.destroy', $category) }}" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition" onclick="return confirm('Are you sure?')">Delete</button>
                </form>
                <a href="{{ route('admin.categories.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition">Back</a>
            </div>
        </div>
    </div>
@endsection