@extends('admin.layout')

@section('title', 'Sports')
@section('page_heading', 'Sports Management')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div></div>
    <a href="{{ route('admin.sports.create') }}" class="btn btn-primary">
        <i data-feather="plus" style="width:16px;height:16px;"></i> Add Sport
    </a>
</div>

@if(session('status'))
    <div class="alert alert-success">{{ session('status') }}</div>
@endif

<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Icon</th>
                    <th>Name</th>
                    <th>Images</th>
                    <th>Order</th>
                    <th>Active</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($sports as $sport)
                    <tr>
                        <td>{{ $sport->id }}</td>
                        <td><i class="{{ $sport->icon_class ?? 'fas fa-running' }} fa-lg"></i></td>
                        <td>
                            <strong>{{ $sport->name }}</strong>
                            @if($sport->short_description)
                                <br><small class="text-muted">{{ Str::limit($sport->short_description, 60) }}</small>
                            @endif
                        </td>
                        <td><span class="badge bg-secondary">{{ $sport->images_count ?? $sport->images->count() }}</span></td>
                        <td>{{ $sport->sort_order }}</td>
                        <td>
                            @if($sport->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-secondary">Hidden</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.sports.edit', $sport) }}" class="btn btn-sm btn-outline-primary">
                                <i data-feather="edit-2" style="width:13px;height:13px;"></i> Edit
                            </a>
                            <form method="POST" action="{{ route('admin.sports.destroy', $sport) }}" class="d-inline"
                                  onsubmit="return confirm('Delete {{ addslashes($sport->name) }} and all its images?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">
                                    <i data-feather="trash-2" style="width:13px;height:13px;"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="text-center text-muted py-4">No sports added yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection