@extends('layouts.app')
@section('title', 'Kategori Material')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <div><h4 class="fw-bold mb-0">Kategori Material</h4><p class="text-muted mb-0">Kelola kategori barang (Material Bangunan, Alat Kerja, dll)</p></div>
  <a href="{{ route('admin.item-categories.create') }}" class="btn btn-primary"><i class="bx bx-plus me-1"></i>Tambah Kategori</a>
</div>
<div class="card"><div class="card-body">
  <table id="catTable" class="table table-hover">
    <thead><tr><th>No.</th><th>Nama Kategori</th><th>Jumlah Material</th><th>Aksi</th></tr></thead>
    <tbody>
      @forelse($categories as $i => $c)
      <tr>
        <td>{{ $i+1 }}</td>
        <td class="fw-semibold">{{ $c->name }}</td>
        <td><span class="badge bg-label-primary">{{ $c->items_count }} item</span></td>
        <td>
          <a href="{{ route('admin.item-categories.edit', $c) }}" class="btn btn-sm btn-outline-warning me-1"><i class="bx bx-edit"></i></a>
          <form action="{{ route('admin.item-categories.destroy', $c) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus kategori 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 kategori.</td></tr>
      @endforelse
    </tbody>
  </table>
</div></div>
@endsection
@section('page-script')<script>$(document).ready(function(){ $('#catTable').DataTable(); });</script>@endsection