@extends('layouts.admin')

@section('title', 'System Settings')
@section('header_title', 'Sport Category Management')

@section('content')
<div class="data-card">
    <div class="card-header">
        <h2>Sport Category Directory</h2>
        <button class="btn btn-sm btn-primary" onclick="window.location.hash = '#create'"><i class="fas fa-plus"></i> Category</button>
    </div>
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Category Identity</th>
                    <th>Identifier (Slug)</th>
                    <th style="text-align: right;">Directory Operations</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sports as $sport)
                <tr>
                    <td>
                        <div style="display: flex; gap: 0.75rem; align-items: center;">
                            <div style="width: 32px; height: 32px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--secondary);">
                                <i class="fas {{ $sport->icon ?? 'fa-square' }}"></i>
                            </div>
                            <div style="font-weight: 700; color: var(--dark);">{{ $sport->name }}</div>
                        </div>
                    </td>
                    <td><span style="font-family: monospace; font-size: 0.8rem; color: var(--text-muted);">{{ $sport->slug }}</span></td>
                    <td style="text-align: right;">
                        <button class="btn btn-sm btn-outline"><i class="fas fa-edit"></i> Edit</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="data-card" style="margin-top: 2rem;" id="create">
    <div class="card-header">
        <h2>Deploy New Category</h2>
    </div>
    <div style="padding: 2rem;">
        <form action="{{ route('admin.sports.store') }}" method="POST">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
                <div>
                    <label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem;">Category Name</label>
                    <input type="text" name="name" required style="width: 100%; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--border); font-family: 'Montserrat', sans-serif; font-weight: 600;" placeholder="e.g. Volleyball">
                </div>
                <div>
                    <label style="display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem;">FA Icon Class</label>
                    <input type="text" name="icon" style="width: 100%; padding: 0.75rem; border-radius: 10px; border: 1px solid var(--border); font-family: 'Montserrat', sans-serif; font-weight: 600;" placeholder="e.g. fa-volleyball">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Initialize Discipline</button>
        </form>
    </div>
</div>
@endsection