@extends('admin.layouts.app')

@section('title', 'Manage Mods')

@section('content')
<div class="glass-panel" style="padding: 24px;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="font-size: 20px;">All Mods</h2>
        <a href="{{ route('admin.mods.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New Mod
        </a>
    </div>

    @if(session('success'))
        <div class="alert" style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #6ee7b7;">
            {{ session('success') }}
        </div>
    @endif

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <thead>
                <tr style="border-bottom: 1px solid var(--glass-border);">
                    <th style="padding: 16px; color: var(--text-secondary); font-weight: 600;">Name</th>
                    <th style="padding: 16px; color: var(--text-secondary); font-weight: 600;">Category</th>
                    <th style="padding: 16px; color: var(--text-secondary); font-weight: 600;">Status</th>
                    <th style="padding: 16px; color: var(--text-secondary); font-weight: 600;">Keys Available</th>
                    <th style="padding: 16px; color: var(--text-secondary); font-weight: 600; text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($mods as $mod)
                <tr style="border-bottom: 1px solid rgba(255,255,255,0.05);">
                    <td style="padding: 16px; font-weight: 600;">{{ $mod->name }}</td>
                    <td style="padding: 16px;">
                        <span style="background: rgba(139, 92, 246, 0.2); color: #c4b5fd; padding: 4px 10px; border-radius: 12px; font-size: 12px;">
                            {{ $mod->category ?? 'Android' }}
                        </span>
                    </td>
                    <td style="padding: 16px;">
                        @if($mod->status === 'active')
                            <span style="color: #6ee7b7;"><i class="fas fa-circle" style="font-size: 10px; margin-right: 4px;"></i> Active</span>
                        @else
                            <span style="color: #fca5a5;"><i class="fas fa-circle" style="font-size: 10px; margin-right: 4px;"></i> Inactive</span>
                        @endif
                    </td>
                    <td style="padding: 16px;">
                        {{ \App\Models\LicenseKey::where('mod_id', $mod->id)->where('status', 'available')->count() }}
                    </td>
                    <td style="padding: 16px; text-align: right;">
                        <a href="{{ route('admin.mods.edit', $mod->id) }}" style="color: var(--accent-color); margin-right: 12px;"><i class="fas fa-edit"></i></a>
                        <form action="{{ route('admin.mods.destroy', $mod->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this mod?');" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="background: transparent; border: none; color: var(--danger); cursor: pointer;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="padding: 32px; text-align: center; color: var(--text-secondary);">No mods found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div style="margin-top: 24px;">
        {{ $mods->links() }}
    </div>
</div>
@endsection