@extends('layouts.auth.app')

@section('title', 'Central Menu Details')

@section('content')
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Central Menu Details</h3>
                <p class="text-sm text-gray-500 mt-1">View menu information</p>
            </div>
            <a href="{{ route('central-menu.list') }}" class="flex items-center space-x-2 px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors duration-200">
                <span>Back to List</span>
            </a>
        </div>
    </div>

    <!-- Details -->
    <div class="px-6 py-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-500">Parent Menu</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->ParentCentralMenuName ?? 'N/A' }}</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-500">Menu Name</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->CentralMenuName ?? 'N/A' }}</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-500">Sort Order</label>
                <p class="mt-1 text-sm text-gray-900">{{ $menu->SortOrder ?? 0 }}</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-500">Status</label>
                <p class="mt-1">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ ($menu->Active ?? false) ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ ($menu->Active ?? false) ? 'Active' : 'Inactive' }}
                    </span>
                </p>
            </div>
        </div>

        <div class="mt-6 flex space-x-4">
            <a href="{{ route('central-menu.edit', ['id' => $menu->CentralMenuID ?? 0]) }}" class="px-4 py-2 bg-teal-600 text-white text-sm font-medium rounded-lg hover:bg-teal-700 transition-colors duration-200">
                Edit Menu
            </a>
            <a href="{{ route('central-menu.screen-list', ['id' => $menu->CentralMenuID ?? 0]) }}" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200">
                Manage Screens
            </a>
        </div>
    </div>
</div>
@endsection