@extends('layouts.app')
@section('title', 'Quản lý gói')

@section('content')
    @include('partials.header')

    <!-- Main content offset for sidebar -->
    <div class="lg:ml-64">
        @include('partials.topbar')

        <div class="max-w-3xl mx-auto py-8 px-4 sm:px-6">

            {{-- Page Title --}}
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-text">📦 Quản lý gói</h1>
                <p class="text-sm text-text-muted mt-1">Xem thông tin gói đang sử dụng</p>
            </div>

            {{-- Current Plan Card --}}
            <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden mb-6 bg-secondary">
                <div class="px-6 py-5 border-b border-accent/10">
                    <h2 class="text-base font-bold text-text">Gói hiện tại</h2>
                </div>
                <div class="p-6">
                    @if($user->current_plan)
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 rounded-2xl bg-primary border border-accent/20 flex items-center justify-center text-3xl shadow-sm">
                            @if($user->current_plan === 'premium') 👑
                            @elseif($user->current_plan === 'pro') ⚡
                            @else 🌟
                            @endif
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-text">
                                {{ $plans[$user->current_plan]['name'] ?? $user->current_plan }}
                            </h3>
                            <p class="text-sm text-text-muted mt-0.5 flex items-center gap-2">
                                {{ $plans[$user->current_plan]['duration'] ?? '' }}
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-500/10 text-green-400 border border-green-500/20">✅ Đang sử dụng</span>
                            </p>
                            @if($user->plan_expires_at)
                            <p class="text-xs text-red-400 mt-1 font-medium">
                                ⏰ Hết hạn: {{ \Carbon\Carbon::parse($user->plan_expires_at)->format('d/m/Y H:i') }}
                            </p>
                            @endif
                        </div>
                    </div>
                    @else
                    <div class="flex items-center gap-4">
                        <div class="w-14 h-14 rounded-2xl bg-primary border border-accent/10 flex items-center justify-center text-3xl shadow-sm">🔒</div>
                        <div>
                            <h3 class="text-xl font-bold text-text-muted">Chưa kích hoạt</h3>
                            <p class="text-sm text-text-muted mt-0.5">Bạn chưa mua gói nào. Hãy nâng cấp để trải nghiệm!</p>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Account Details --}}
            <div class="rounded-2xl shadow-sm border border-accent/15 overflow-hidden mb-6 bg-secondary">
                <div class="px-6 py-5 border-b border-accent/10">
                    <h2 class="text-base font-bold text-text">📋 Chi tiết tài khoản</h2>
                </div>
                <div class="divide-y divide-accent/10">
                    <div class="flex items-center justify-between px-6 py-4">
                        <span class="text-sm text-text-muted">Username</span>
                        <span class="text-sm font-semibold text-text">{{ $user->username }}</span>
                    </div>
                    <div class="flex items-center justify-between px-6 py-4">
                        <span class="text-sm text-text-muted">Email</span>
                        <span class="text-sm font-semibold text-text">{{ $user->email }}</span>
                    </div>
                    <div class="flex items-center justify-between px-6 py-4">
                        <span class="text-sm text-text-muted">Gói hiện tại</span>
                        @if($user->current_plan)
                            <span class="text-sm font-bold text-accent">{{ $plans[$user->current_plan]['name'] ?? $user->current_plan }}</span>
                        @else
                            <span class="text-sm font-bold text-text-muted">Chưa kích hoạt</span>
                        @endif
                    </div>
                    <div class="flex items-center justify-between px-6 py-4">
                        <span class="text-sm text-text-muted">Giá</span>
                        @if($user->current_plan)
                            <span class="text-sm font-bold text-red-400">{{ number_format($plans[$user->current_plan]['price'] ?? 0) }}đ</span>
                        @else
                            <span class="text-sm font-bold text-text-muted">—</span>
                        @endif
                    </div>
                    <div class="flex items-center justify-between px-6 py-4">
                        <span class="text-sm text-text-muted">Hạn sử dụng</span>
                        @if($user->plan_expires_at)
                            <span class="text-sm font-bold text-red-400">⏰ {{ \Carbon\Carbon::parse($user->plan_expires_at)->format('d/m/Y H:i:s') }}</span>
                        @else
                            <span class="text-sm font-bold text-green-400">♾️ Vĩnh viễn</span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Upgrade CTA --}}
            <div class="text-center">
                <a href="{{ url('/pricing') }}" class="inline-flex items-center gap-2 px-6 py-3.5 bg-accent hover:bg-accent-dark text-white font-bold text-sm rounded-xl transition-all shadow-lg shadow-accent/20 hover:-translate-y-0.5 border-0">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    Nâng cấp gói
                </a>
            </div>

        </div>

        @include('partials.footer')
    </div>
@endsection