@extends(auth()->check() ? 'layouts.dasht' : 'layouts.base')
@section('content')
<div class="max-w-4xl mx-auto">
    <a href="{{ route('panels.index') }}" class="text-sm text-primary-500 hover:underline">&larr; Back to panels</a>
    <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-800 aspect-[4/3]">
            @if($panel->image)
                <img src="{{ asset('dash/' . $panel->image) }}" alt="{{ $panel->name }}" class="w-full h-full object-cover">
            @endif
        </div>
        <div>
            <span class="text-xs font-semibold uppercase tracking-wide text-primary-500">{{ $panel->category_label }}</span>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ $panel->name }}</h1>
            @if($panel->description)
                <p class="mt-4 text-gray-600 dark:text-gray-400">{{ $panel->description }}</p>
            @endif
            <div class="mt-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 space-y-2 text-sm">
                <p><strong>Slot price:</strong> {{ $settings->currency }}{{ number_format($panel->price, 2) }}</p>
                <p><strong>ROI:</strong> {{ $panel->roi_percentage }}% per {{ $panel->roi_interval }}</p>
                <p><strong>Duration:</strong> {{ $panel->duration }} days</p>
                <p><strong>Capital return:</strong> {{ $panel->return_capital ? 'Yes (if enabled globally)' : 'No' }}</p>
            </div>
            @auth
                <a href="{{ route('panels.purchase', $panel) }}" class="mt-6 inline-flex items-center px-6 py-3 bg-primary-500 text-white rounded-xl font-semibold">Purchase Slot</a>
            @else
                <a href="{{ route('login') }}" class="mt-6 inline-flex items-center px-6 py-3 bg-primary-500 text-white rounded-xl font-semibold">Login to Purchase</a>
            @endauth
        </div>
    </div>
</div>
@endsection
