@extends('layouts.admin')
@section('title', $urgentServiceCharge->name)
@section('page-title', $urgentServiceCharge->name)
@section('content')
<div class="max-w-3xl space-y-6">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid gap-4 sm:grid-cols-2">
            <div><dt class="text-sm font-medium text-slate-500">Name</dt><dd class="mt-1 text-sm font-medium text-slate-800">{{ $urgentServiceCharge->name }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Code</dt><dd class="mt-1 text-sm font-mono text-slate-800">{{ $urgentServiceCharge->code }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Fixed amount</dt><dd class="mt-1 text-sm text-slate-800">{{ number_format($urgentServiceCharge->fixed_amount, 2) }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Percentage</dt><dd class="mt-1 text-sm text-slate-800">{{ number_format($urgentServiceCharge->percentage, 2) }}%</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Status</dt><dd class="mt-1"><span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $urgentServiceCharge->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-800' }}">{{ $urgentServiceCharge->status }}</span></dd></div>
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Description</dt><dd class="mt-1 text-sm text-slate-800">{{ $urgentServiceCharge->description ?: '—' }}</dd></div>
        </dl>
        <div class="mt-6 flex gap-3">
            @can('edit orders')<a href="{{ route('urgent-service-charges.edit', $urgentServiceCharge) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white">Edit</a>@endcan
            <a href="{{ route('urgent-service-charges.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700">Back to list</a>
        </div>
    </div>
</div>
@endsection