@extends('layouts.admin')
@section('title', 'Alteration')
@section('page-title', 'Alteration #' . $alteration->id)
@section('content')
<div class="space-y-4 max-w-2xl">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <div><dt class="text-xs font-medium text-slate-500">Order</dt><dd class="mt-0.5"><a href="{{ route('orders.show', $alteration->order) }}" class="font-mono text-slate-800">{{ $alteration->order->order_number }}</a></dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Customer</dt><dd class="mt-0.5">{{ $alteration->order->customer->full_name ?? '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Requested on</dt><dd class="mt-0.5">{{ $alteration->requested_on ? $alteration->requested_on->format('d M Y') : '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Revised delivery</dt><dd class="mt-0.5">{{ $alteration->revised_delivery_date ? $alteration->revised_delivery_date->format('d M Y') : '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Status</dt><dd class="mt-0.5"><span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs">{{ $alteration->status }}</span></dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Tailor</dt><dd class="mt-0.5">{{ $alteration->tailor->name ?? '-' }}</dd></div>
            <div><dt class="text-xs font-medium text-slate-500">Sequence</dt><dd class="mt-0.5">{{ $alteration->sequence }}</dd></div>
        </dl>
        @if($alteration->notes)<div class="mt-4"><dt class="text-xs font-medium text-slate-500">Notes</dt><dd class="mt-1 text-sm text-slate-700">{{ $alteration->notes }}</dd></div>@endif
    </div>
    <div class="flex gap-3">
        @can('edit alterations')<a href="{{ route('alterations.edit', $alteration) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>@endcan
        <a href="{{ route('orders.show', $alteration->order) }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">View Order</a>
        <a href="{{ route('alterations.index') }}" class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700">Back to Alterations</a>
    </div>
</div>
@endsection