@extends('layouts.panel', ['area' => 'user'])
@section('title', 'پکیج‌ها و ارتقا')
@section('content')
<div class="card mb-6 flex flex-wrap items-center justify-between gap-3 bg-gradient-to-l from-indigo-50 to-white dark:from-slate-800 dark:to-slate-800">
  <div>
    <div class="text-xs text-slate-500">پکیج فعلی شما</div>
    <div class="text-xl font-extrabold text-indigo-600">{{ $current->name }}</div>
    <div class="text-sm text-slate-500">{{ $user->package_expires_at ? 'تا '.jd($user->package_expires_at, 'Y/m/d').' ('.$user->package_expires_at->diffForHumans().')' : ($current->is_free ? 'پکیج رایگان' : 'بدون محدودیت زمانی') }}</div>
  </div>
  @if($credit > 0)<div class="badge bg-emerald-50 text-emerald-700 !text-sm">اعتبار باقی‌مانده برای ارتقا: {{ toman($credit) }}</div>@endif
</div>

<div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-5">
  @foreach($packages as $p)
    @php
      $isCurrent = $current->id && $current->id === $p->id;
      $label = $p->is_free ? null : ($isCurrent ? 'تمدید پکیج' : (!$current->is_free && $p->price > $current->price ? 'ارتقا به این پکیج' : 'خرید پکیج'));
    @endphp
    <div class="card flex flex-col {{ $p->is_featured ? 'ring-2 ring-indigo-500' : '' }} {{ $isCurrent ? 'bg-indigo-50/50 dark:bg-slate-700/40' : '' }}">
      <div class="flex items-center justify-between"><div class="font-bold text-lg">{{ $p->name }}</div>
        @if($isCurrent || ($p->is_free && $current->is_free))<span class="badge bg-emerald-50 text-emerald-600">فعلی</span>@elseif($p->is_featured)<span class="badge bg-indigo-600 text-white">محبوب</span>@endif</div>
      <div class="text-2xl font-extrabold text-indigo-600 my-2">{{ $p->price > 0 ? number_format($p->price) : 'رایگان' }}
        @if($p->price > 0)<span class="text-xs font-normal text-slate-400">تومان / {{ $p->duration_days ? $p->duration_days.' روز' : 'دائمی' }}</span>@endif</div>
      <p class="text-xs text-slate-500 mb-3 min-h-[2rem]">{{ $p->description }}</p>
      <ul class="space-y-1.5 text-sm flex-1">@foreach($p->featuresList() as $f)<li class="flex gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5"></i>{{ $f }}</li>@endforeach</ul>
      @if($label)
        <form method="POST" action="{{ route('user.packages.buy', $p) }}" class="mt-5 space-y-2">@csrf
          <input name="coupon" placeholder="کد تخفیف (اختیاری)" dir="ltr" class="inp text-left text-xs">
          <button class="btn-p w-full">{{ $label }}</button>
        </form>
      @endif
    </div>
  @endforeach
</div>
@endsection