@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@section('content')
    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('admin.dashboard') }}">
                            Home
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a class="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400" href="{{ route('ref.index') }}">
                            Parameter
                            <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </a>
                    </li>
                    <li class="text-sm text-gray-800 dark:text-white/90" x-text="pageName"></li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="space-y-5">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="flex items-center justify-between px-5 py-4 sm:px-6 sm:py-5">
                <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Parameter Detail</h3>
                <div class="flex gap-2">
                    @can('ref.update')
                        <a href="{{ route('ref.edit', $ref->id) }}"
                            class="inline-flex items-center gap-1.5 rounded-lg bg-warning-50 px-3 py-2 text-sm font-medium text-warning-600 hover:bg-warning-100 dark:bg-warning-500/10 dark:text-warning-400">
                            Edit
                        </a>
                    @endcan
                    <a href="{{ route('ref.index') }}"
                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">
                        Back
                    </a>
                </div>
            </div>

            <div class="border-t border-gray-100 dark:border-gray-800">
                <dl class="divide-y divide-gray-100 dark:divide-gray-800">
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">ID</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->id }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Category</dt>
                        <dd class="col-span-2">
                            <span class="inline-flex items-center rounded-md bg-brand-50 px-2 py-1 text-xs font-medium text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                                {{ $ref->cat ?? '-' }}
                            </span>
                        </dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Code</dt>
                        <dd class="col-span-2 text-sm font-semibold text-gray-800 dark:text-white/90">{{ $ref->code ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Description (BM)</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->descr ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Description (EN)</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->descr_en ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Sort</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->sort ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Parent</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->parent ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Icon Name</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->icon_name ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Created By</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->created_by ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Updated By</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">{{ $ref->updated_by ?? '-' }}</dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Created At</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">
                            {{ $ref->created_at ? $ref->created_at->format('d F Y, H:i') : '-' }}
                        </dd>
                    </div>
                    <div class="grid grid-cols-3 gap-4 px-6 py-4">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Updated At</dt>
                        <dd class="col-span-2 text-sm text-gray-800 dark:text-white/90">
                            {{ $ref->updated_at ? $ref->updated_at->format('d F Y, H:i') : '-' }}
                        </dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
@endsection