@extends('layouts.admin.app')
@section('title', 'Player Categories')
@push('style')
<style>
    .pc-index .filter-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        margin: 20px 0;
        flex-wrap: wrap;
    }
    .pc-index .filter-bar .field-group {
        min-width: 260px;
    }
    .pc-index .filter-bar label {
        display: block;
        color: #888;
        font-size: 12px;
        margin-bottom: 6px;
    }
    .pc-index .filter-bar select {
        width: 100%;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        color: #fff;
        font-size: 13px;
    }
    .pc-index .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .pc-index .section-head h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0; }
    .pc-index .create-btn {
        background: #22c55e;
        color: #fff;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }
    .pc-index table { width: 100%; border-collapse: collapse; }
    .pc-index thead th {
        text-align: left;
        color: #888;
        font-size: 12px;
        font-weight: 600;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .pc-index tbody td {
        color: #ddd;
        font-size: 13px;
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }
    .pc-index .category-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #eee;
    }
    .pc-index .color-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        flex: none;
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    }
    .pc-index .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }
    .pc-index .badge-active { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .pc-index .badge-inactive { background: rgba(248, 113, 113, 0.15); color: #f87171; }
    .pc-index .action-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        color: #aaa;
        text-decoration: none;
        font-size: 13px;
    }
    .pc-index .empty-row { text-align: center; color: #888; padding: 32px; }
    .pc-index .pagination-wrap { margin-top: 18px; }
    .pc-index .pagination-wrap a, .pc-index .pagination-wrap span { color: #fff; }
</style>
@endpush

@section('content')
<div class="pc-index content_area users_list">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <span class="active">Player Categories</span>
    </div>

    <form method="GET" action="{{ route('admin.player-categories.index') }}" class="filter-bar">
        <div class="field-group">
            <label>Select League</label>
            <select name="league_id" onchange="this.form.submit()">
                @forelse ($leagues as $league)
                    <option value="{{ $league->id }}" @selected((int) $leagueId === $league->id)>{{ $league->name }}</option>
                @empty
                    <option value="">No leagues found</option>
                @endforelse
            </select>
        </div>
    </form>

    <div class="section-head">
        <h3>All Player Categories</h3>
        <a href="{{ route('admin.player-categories.create', ['league_id' => $leagueId]) }}" class="create-btn">+ Add Category</a>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>League</th>
                    <th>Base ICL Coins</th>
                    <th>Color</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($categories as $category)
                    <tr>
                        <td>
                            <span class="category-pill" style="border-left: 3px solid {{ $category->color_code }};">
                                <span class="color-dot" style="background: {{ $category->color_code }};"></span>
                                {{ $category->name }}
                            </span>
                        </td>
                        <td>{{ $category->league->name ?? '—' }}</td>
                        <td>{{ number_format($category->base_points) }}</td>
                        <td>{{ $category->color_code }}</td>
                        <td>
                            <span class="badge {{ $category->is_active == \App\Models\PlayerCategory::IS_ACTIVE ? 'badge-active' : 'badge-inactive' }}">
                                {{ $category->is_active == \App\Models\PlayerCategory::IS_ACTIVE ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>{{ $category->created_at?->format('d M Y, H:i') }}</td>
                        <td>
                            <a href="{{ route('admin.player-categories.edit', $category->id) }}" class="action-btn" title="Edit">Edit</a>
                            <form action="{{ route('admin.player-categories.destroy', $category->id) }}" method="POST" class="pc-delete-form" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="action-btn" title="Delete" style="color:#f87171;">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="empty-row">No player categories found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="pagination-wrap">
        {{ $categories->links() }}
    </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).on('submit', '.pc-delete-form', function (e) {
        if (!confirm('Delete this player category?')) {
            e.preventDefault();
        }
    });
</script>
@endpush