@extends('layouts.admin')

@section('title', 'Kelola Kriteria')
@section('page-title', 'Kelola Kriteria')

@section('header-actions')
    <a href="{{ route('admin.criteria.create') }}" class="btn btn-primary">
        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Tambah Kriteria
    </a>
@endsection

@section('content')
<div class="card">
    <div class="card-body">
        @if($criteria->isEmpty())
            <div class="empty-state">
                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                <h3>Belum ada kriteria</h3>
                <p>Tambahkan kriteria untuk memulai penilaian beasiswa.</p>
                <a href="{{ route('admin.criteria.create') }}" class="btn btn-primary">Tambah Kriteria</a>
            </div>
        @else
            <div class="table-container">
                <table>
                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Nama Kriteria</th>
                            <th>Tipe</th>
                            <th>Bobot</th>
                            <th>Sub Kriteria</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($criteria as $criterion)
                            <tr>
                                <td><span class="badge badge-gray">{{ $criterion->code }}</span></td>
                                <td>
                                    <span class="font-medium">{{ $criterion->name }}</span>
                                    @if($criterion->description)
                                        <br><span class="text-sm text-muted">{{ Str::limit($criterion->description, 50) }}</span>
                                    @endif
                                </td>
                                <td>
                                    @if($criterion->type->value === 'benefit')
                                        <span class="badge badge-green">Benefit</span>
                                    @else
                                        <span class="badge badge-red">Cost</span>
                                    @endif
                                </td>
                                <td class="font-medium">{{ $criterion->weight }}</td>
                                <td>{{ $criterion->sub_criteria_count }} item</td>
                                <td>
                                    <div class="flex gap-2">
                                        <a href="{{ route('admin.criteria.edit', $criterion) }}" class="btn btn-secondary btn-sm">Edit</a>
                                        <form action="{{ route('admin.criteria.destroy', $criterion) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus kriteria ini?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

@push('styles')
<style>
    .empty-state {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--gray-500);
    }
    
    .empty-state svg {
        margin: 0 auto 1rem;
        color: var(--gray-300);
    }
    
    .empty-state h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }
    
    .empty-state p {
        margin-bottom: 1.5rem;
    }
</style>
@endpush
@endsection