@extends('admin.layouts.app')

@section('styles')
<style>
    .pa-index .filter-bar {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 16px;
        margin: 20px 0;
    }
    .pa-index .filter-bar select,
    .pa-index .filter-bar input {
        width: 100%;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 12px 14px;
        color: #fff;
        font-size: 13px;
    }
    .pa-index .section-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    .pa-index .section-head h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0; }
    .pa-index .create-btn {
        background: #22c55e;
        color: #fff;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
    }
    .pa-index table { width: 100%; border-collapse: collapse; }
    .pa-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);
    }
    .pa-index tbody td {
        color: #ddd;
        font-size: 13px;
        padding: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        vertical-align: middle;
    }
    .pa-index .pa-thumb {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        background: #222;
    }
    .pa-index .pa-thumb-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
        font-size: 11px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #222;
    }
    .pa-index .pa-title { color: #fff; font-weight: 500; }
    .pa-index .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }
    .pa-index .badge-active { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
    .pa-index .badge-inactive { background: rgba(248, 113, 113, 0.15); color: #f87171; }
    .pa-index .badge-entity { background: rgba(123, 97, 255, 0.15); color: #a78bfa; }
    .pa-index .action-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        color: #aaa;
        text-decoration: none;
        font-size: 13px;
    }
    .pa-index .action-btn.delete { color: #f87171; }
    .pa-index .empty-row { text-align: center; color: #888; padding: 32px; }
    .pa-index .pagination-wrap { margin-top: 18px; }
    .pa-index .pagination-wrap a, .pa-index .pagination-wrap span { color: #fff; }
    @media (max-width: 992px) {
        .pa-index .filter-bar { grid-template-columns: 1fr; }
    }
</style>
@endsection

@section('content')
<div class="pa-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">Past Achievements</span>
    </div>

    <form method="GET" action="{{ route('admin.past-achievements.index') }}" class="filter-bar">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by title or league...">
        <select name="entity_type" onchange="this.form.submit()">
            <option value="">All Types</option>
            @foreach (\App\Models\PastAchievement::ENTITY_LABELS as $value => $label)
                <option value="{{ $value }}" @selected(request('entity_type') === (string) $value)>{{ $label }}</option>
            @endforeach
        </select>
        <select name="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="1" @selected(request('status') === '1')>Active</option>
            <option value="0" @selected(request('status') === '0')>Inactive</option>
        </select>
    </form>

    <div class="section-head">
        <h3>All Achievements</h3>
        <a href="{{ route('admin.past-achievements.create') }}" class="create-btn">+ Add Achievement</a>
    </div>

    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th>League</th>
                    <th>Year</th>
                    <th>Order</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($achievements as $item)
                    <tr>
                        <td>
                            @if ($item->imageUrl())
                                <img src="{{ $item->imageUrl() }}" alt="" class="pa-thumb">
                            @else
                                <div class="pa-thumb-empty">—</div>
                            @endif
                        </td>
                        <td><div class="pa-title">{{ $item->title }}</div></td>
                        <td>
                            <span class="badge badge-entity">{{ \App\Models\PastAchievement::ENTITY_LABELS[$item->entity_type] ?? 'Unknown' }}</span>
                        </td>
                        <td>{{ $item->league_name ?: '—' }}</td>
                        <td>{{ $item->achievement_year ?: '—' }}</td>
                        <td>{{ $item->display_order }}</td>
                        <td>
                            <span class="badge {{ $item->status == \App\Models\PastAchievement::STATUS_ACTIVE ? 'badge-active' : 'badge-inactive' }}">
                                {{ \App\Models\PastAchievement::STATUS_LABELS[$item->status] ?? 'Unknown' }}
                            </span>
                        </td>
                        <td>
                            <a href="{{ route('admin.past-achievements.edit', $item->id) }}" class="action-btn">Edit</a>
                            <form action="{{ route('admin.past-achievements.destroy', $item->id) }}" method="POST" class="pa-delete-form" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="action-btn delete">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="empty-row">No achievements found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

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

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