@extends('layouts.app')
@section('title', 'Master Satuan')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 class="fw-bold mb-0">Master Satuan</h4>
    <p class="text-muted mb-0">Kelola master data satuan pengukuran (cth: M3, Sak, Kg, Pcs, Btg)</p>
  </div>
  <a href="{{ route('admin.units.create') }}" class="btn btn-primary"><i class="bx bx-plus me-1"></i>Tambah Satuan</a>
</div>
<div class="card">
  <div class="card-body">
    <table id="unitsTable" class="table table-hover">
      <thead>
        <tr>
          <th style="width:50px;">No.</th>
          <th>Nama Satuan</th>
          <th>Keterangan</th>
          <th style="width:120px;">Aksi</th>
        </tr>
      </thead>
      <tbody>
        @forelse($units as $u)
        <tr>
          <td>{{ $loop->iteration }}</td>
          <td><span class="badge bg-label-primary fw-bold fs-6">{{ $u->nama_satuan }}</span></td>
          <td class="text-muted">{{ $u->keterangan ?? '-' }}</td>
          <td>
            <a href="{{ route('admin.units.edit', $u) }}" class="btn btn-sm btn-outline-warning me-1"><i class="bx bx-edit"></i></a>
            <form action="{{ route('admin.units.destroy', $u) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus satuan ini?')">
              @csrf @method('DELETE')
              <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bx bx-trash"></i></button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="4" class="text-center text-muted py-4">Belum ada data satuan.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection
@section('page-script')
<script>$(document).ready(function(){ $('#unitsTable').DataTable(); });</script>
@endsection