@extends('layouts.app')
@section('title', 'API Keys')
@section('page-title', 'API Keys')
@section('content')
<div class="row g-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Create New Key</h6></div>
            <div class="card-body">
                <form method="POST" action="{{ route('dashboard.api-keys.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Key Name</label>
                        <input type="text" name="name" class="form-control" placeholder="e.g., Production" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Expires At (optional)</label>
                        <input type="date" name="expires_at" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-whatsapp w-100">Generate Key</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-white"><h6 class="mb-0">Your API Keys</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr><th>Name</th><th>Key</th><th>Status</th><th>Last Used</th><th>Expires</th><th>Actions</th></tr>
                        </thead>
                        <tbody>
                            @forelse($apiKeys as $key)
                            <tr>
                                <td class="fw-semibold">{{ $key->name }}</td>
                                <td><code class="small">{{ Str::limit($key->key, 20) }}</code></td>
                                <td><span class="badge bg-{{ $key->isValid() ? 'success' : 'danger' }}">{{ $key->isValid() ? 'Active' : 'Expired' }}</span></td>
                                <td class="small">{{ $key->last_used_at?->diffForHumans() ?? 'Never' }}</td>
                                <td class="small">{{ $key->expires_at?->format('M d, Y') ?? 'Never' }}</td>
                                <td>
                                    <form action="{{ route('dashboard.api-keys.destroy', $key->id) }}" method="POST" onsubmit="return confirm('Revoke this key?')">@csrf @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                    </form>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center text-muted py-4">No API keys yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-3">{{ $apiKeys->links() }}</div>
    </div>
</div>
@endsection