@extends('layouts.admin')
@section('title', 'Adjustment Details')

@section('content')
{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <a href="{{ route('admin.adjustments.index') }}" class="hover:text-brand-500">Adjustment</a><span>/</span>
  <span class="text-slate-800 dark:text-slate-200 font-medium">ADJ-{{ str_pad($adjustment->id, 4, '0', STR_PAD_LEFT) }}</span>
</div>

<div class="p-6 lg:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
  <div class="grid sm:grid-cols-3 gap-6 text-sm">
    <div>
      <div class="text-slate-500">Reference</div>
      <div class="mt-1 font-bold text-lg">ADJ-{{ str_pad($adjustment->id, 4, '0', STR_PAD_LEFT) }}</div>
    </div>
    <div>
      <div class="text-slate-500">Date</div>
      <div class="mt-1 font-semibold">{{ $adjustment->date->format('d M Y') }}</div>
    </div>
    <div>
      <div class="text-slate-500">Note</div>
      <div class="mt-1 font-semibold">{{ $adjustment->note ?: '—' }}</div>
    </div>
  </div>
</div>

<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
  <div class="p-6 pb-3 font-bold text-lg">Products</div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-6 py-3">Product</th>
          <th>Code</th>
          <th>Type</th>
          <th class="px-6 text-right">Quantity</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @foreach ($adjustment->items as $item)
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3 font-semibold">{{ $item->product->name }}</td>
            <td class="text-slate-500">{{ $item->product->code }}</td>
            <td>
              @if ($item->type === 'add')
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">Add (+)</span>
              @else
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-red-500/10 text-red-500">Subtract (−)</span>
              @endif
            </td>
            <td class="px-6 text-right font-bold">{{ $item->type === 'add' ? '+' : '−' }}{{ $item->quantity }}</td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<div>
  <a href="{{ route('admin.adjustments.index') }}" class="h-11 px-6 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 font-semibold hover:bg-slate-100 dark:hover:bg-slate-800">← Back</a>
</div>
@endsection