@extends('layouts.admin')

@section('title', 'Data Jurusan')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Data Jurusan</h2>
    @can('create departments')
    <a href="{{ route('departments.create') }}" class="btn btn-primary">+ Tambah Jurusan</a>
    @endcan
</div>

<x-alert />

<div class="card">
    <div class="card-body">
        <div class="table-responsive table-mobile-cards">
        <table class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Kode</th>
                    <th>Nama Jurusan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($departments as $department)
                <tr>
                    <td data-label="No">{{ $loop->iteration }}</td>
                    <td data-label="Kode"><span class="badge bg-secondary">{{ $department->code }}</span></td>
                    <td data-label="Nama Jurusan">{{ $department->name }}</td>
                    <td data-label="Aksi">
                        @can('update departments')
                        <a href="{{ route('departments.edit', $department) }}" class="btn btn-sm btn-warning">Edit</a>
                        @endcan
                        @can('delete departments')
                        <form method="POST" action="{{ route('departments.destroy', $department) }}" class="d-inline" onsubmit="return confirm('Hapus jurusan ini? PERINGATAN: semua siswa beserta histori PKL-nya juga akan terhapus permanen.')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                        </form>
                        @endcan
                    </td>
                </tr>
                @empty
                <tr>
                    <td data-label="" colspan="4" class="text-center text-muted">Belum ada data jurusan.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>
</div>
@endsection