@extends('layouts.dasht')
@section('content')
<div class="max-w-7xl mx-auto">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Panel Slots</h1>
            <p class="text-gray-600 dark:text-gray-400">Track active investments and completed panel slots.</p>
        </div>
        <a href="{{ route('panels.index') }}" class="inline-flex items-center px-4 py-2 bg-primary-500 text-white rounded-lg text-sm font-medium">Browse Panels</a>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 rounded-lg bg-green-50 text-green-800">{{ session('success') }}</div>
    @endif

    <div class="flex gap-2 mb-6">
        @foreach(['all','active','completed','cancelled'] as $s)
            <a href="{{ route('panels.my-slots', $s !== 'all' ? ['status' => $s] : []) }}"
               class="px-3 py-1.5 rounded-lg text-sm {{ ($status ?? 'all') === $s ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300' }}">{{ ucfirst($s) }}</a>
        @endforeach
    </div>

    @if($userPanels->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        @foreach($userPanels as $slot)
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="h-36 bg-gray-100 dark:bg-gray-700">
                @if($slot->panel && $slot->panel->image)
                    <img src="{{ asset('dash/' . $slot->panel->image) }}" class="w-full h-full object-cover" alt="">
                @endif
            </div>
            <div class="p-5">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-gray-900 dark:text-white">{{ $slot->panel->name ?? 'Panel' }}</h3>
                    <span class="text-xs px-2 py-1 rounded-full {{ $slot->status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">{{ ucfirst($slot->status) }}</span>
                </div>
                <dl class="mt-4 grid grid-cols-2 gap-2 text-sm">
                    <div><dt class="text-gray-500">Invested</dt><dd class="font-semibold">{{ $settings->currency }}{{ number_format($slot->amount_invested, 2) }}</dd></div>
                    <div><dt class="text-gray-500">Earned</dt><dd class="font-semibold text-green-600">{{ $settings->currency }}{{ number_format($slot->total_earned, 2) }}</dd></div>
                    <div><dt class="text-gray-500">Next payout</dt><dd>{{ $slot->next_payout_at ? $slot->next_payout_at->format('M d, H:i') : '—' }}</dd></div>
                    <div><dt class="text-gray-500">Expires</dt><dd>{{ $slot->expires_at ? $slot->expires_at->format('M d, Y') : '—' }}</dd></div>
                </dl>
            </div>
        </div>
        @endforeach
    </div>
    <div class="mt-8">{{ $userPanels->links() }}</div>
    @else
    <div class="text-center py-16 text-gray-500">No panel slots yet. <a href="{{ route('panels.index') }}" class="text-primary-500">Browse available panels</a>.</div>
    @endif
</div>
@endsection
