@php($title = 'Activation Center')
@php($heading = 'Activation Center')
@php($sidebar = view()->make('dashboard.partials.customer-sidebar')->render())

@extends('layouts.dashboard', compact('title','heading','sidebar'))

@section('content')
    <div class="bg-white rounded-lg shadow p-4">
        @if(session('status'))
            <div class="mb-3 p-2 rounded bg-green-50 text-green-700 text-sm">{{ session('status') }}</div>
        @endif

        <div class="rounded-lg border border-slate-200 p-3 mb-4">
            <div class="flex items-center justify-between">
                <div class="text-sm">
                    <span class="font-semibold">Activation Quota</span>
                    <span class="ml-2 text-slate-600">{{ $quotaUsed }} used / {{ ($quotaLimit > 0 ? $quotaLimit : 'Unlimited') }} allowed</span>
                </div>
                <span class="text-xs px-2 py-1 rounded {{ ($quotaLimit > 0 ? ($quotaRemaining ?? 0) > 0 : true) ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">{{ $quotaLimit > 0 ? (($quotaRemaining ?? 0).' remaining') : 'Unlimited' }}</span>
            </div>
        </div>

        <h2 class="font-semibold mb-2">Request Activation</h2>
        <form method="POST" action="{{ route('customer.activation_center.store') }}" class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-6">
            @csrf
            <select name="product_id" class="border rounded px-3 py-1 text-sm" required>
                <option value="">Select product</option>
                @foreach($availableProducts as $p)
                    <option value="{{ $p->id }}" {{ (old('product_id', $prefillProductId ?? null) == $p->id) ? 'selected' : '' }}>{{ $p->name }}</option>
                @endforeach
            </select>
            <input type="url" name="temp_login_url" placeholder="Temporary login URL" class="border rounded px-3 py-1 text-sm" required>
            <input type="text" name="note" placeholder="Note (optional)" class="border rounded px-3 py-1 text-sm">
            <div class="md:col-span-3">
                <button class="px-3 py-1 rounded text-white text-sm {{ ($quotaLimit > 0 && ($quotaRemaining ?? 0) <= 0) ? 'bg-slate-400 cursor-not-allowed opacity-60' : 'bg-violet-600 hover:bg-violet-500' }}" {{ ($quotaLimit > 0 && ($quotaRemaining ?? 0) <= 0) ? 'disabled' : '' }}>Submit Request</button>
                @if($quotaLimit > 0 && ($quotaRemaining ?? 0) <= 0)
                    <p class="text-xs text-rose-700 mt-1">You’ve reached your activation quota.</p>
                @endif
            </div>
        </form>

        <h2 class="font-semibold mb-2">My Activation Requests</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="text-left border-b">
                        <th class="py-2 px-2">Product</th>
                        <th class="py-2 px-2">Temp Login URL</th>
                        <th class="py-2 px-2">Status</th>
                        <th class="py-2 px-2">Requested</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($myRequests as $r)
                        <tr class="border-b">
                            <td class="py-2 px-2">{{ $r->product->name ?? '—' }}</td>
                            <td class="py-2 px-2"><a class="text-violet-700 hover:underline" href="{{ $r->temp_login_url }}" target="_blank">Open</a></td>
                            <td class="py-2 px-2">{{ ucfirst($r->status ?? 'pending') }}</td>
                            <td class="py-2 px-2 text-slate-600">{{ $r->created_at->format('M d, Y H:i') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="py-3 px-2 text-center text-slate-500">No activation requests</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-3">{{ method_exists(($myRequests ?? null), 'links') ? $myRequests->links() : '' }}</div>
    </div>
@endsection