@extends('layouts.app')

@section('title', 'Kategori Barang')
@section('page_title', 'Kategori Barang')
@section('page_pretitle', 'Master Data')

@section('content')
  <div class="row row-deck row-cards">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Tambah Kategori</h3>
            <p class="card-subtitle">Kategori digunakan untuk aturan umur pakai dan interval pemeliharaan.</p>
          </div>
        </div>
        <form action="{{ route('categories.store') }}" method="POST">
          @csrf
          <div class="card-body">
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Nama Kategori</label>
                <input class="form-control" name="name" value="{{ old('name') }}" placeholder="Furniture" required>
              </div>
              <div class="col-md-3">
                <label class="form-label">Kode</label>
                <input class="form-control" name="code" value="{{ old('code') }}" placeholder="FUR" required>
              </div>
              <div class="col-12">
                <label class="form-label">Deskripsi</label>
                <textarea class="form-control" name="description" rows="3" placeholder="Keterangan kategori barang">{{ old('description') }}</textarea>
              </div>
            </div>
          </div>
          <div class="card-footer text-end">
            <button class="btn btn-primary" type="submit">
              <i class="ti ti-device-floppy me-1"></i>
              Simpan Kategori
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Kategori Barang</h3>
            <p class="card-subtitle">Furniture, elektronik, senjata, dan sarana klinik.</p>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>Nama</th>
                <th>Kode</th>
                <th>Deskripsi</th>
                <th>Jumlah Barang</th>
                <th class="w-1">Aksi</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($categories as $category)
                <tr>
                  <td data-label="Nama">
                    <div class="fw-bold">{{ $category->nama_kategori }}</div>
                  </td>
                  <td data-label="Kode"><span class="badge bg-blue-lt text-blue">{{ $category->kode_kategori }}</span></td>
                  <td data-label="Deskripsi">{{ $category->deskripsi ?? '-' }}</td>
                  <td data-label="Jumlah Barang">{{ $category->inventory_items_count }}</td>
                  <td data-label="Aksi">
                    <div class="btn-list flex-nowrap">
                      <a class="btn btn-icon btn-sm" href="{{ route('categories.edit', $category) }}" title="Edit kategori">
                        <i class="ti ti-pencil"></i>
                      </a>
                      <form
                        action="{{ route('categories.destroy', $category) }}"
                        method="POST"
                        data-confirm-submit
                        data-confirm-title="Hapus kategori?"
                        data-confirm-message="Kategori {{ $category->nama_kategori }} akan dihapus. Pastikan tidak ada barang yang masih memakai kategori ini."
                      >
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-icon btn-sm btn-outline-danger" title="Hapus kategori">
                          <i class="ti ti-trash"></i>
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="5" class="text-center text-secondary py-5">Belum ada kategori.</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endsection
