@extends('theme::layouts.app', ['title' => $pageHeader['title'] ?? __('account.My Licenses')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            {{-- Account Navigation Sidebar --}}
            @include('theme::partials.account.nav')

            {{-- Main Content --}}
            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8">
                    <div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                    </div>
                </div>
                @endif

                <div class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 overflow-hidden shadow-soft">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-sm text-text-main dark:text-gray-300">
                            <thead class="bg-gray-50 dark:bg-gray-800/50 text-text-muted dark:text-gray-400 font-semibold uppercase tracking-wider text-[11px] border-b border-gray-100 dark:border-gray-800">
                                <tr>
                                    <th class="px-6 py-4">{{ __('account.License Key') }}</th>
                                    <th class="px-6 py-4">{{ __('account.Product') }}</th>
                                    <th class="px-6 py-4">{{ __('account.Expiry Date') }}</th>
                                    <th class="px-6 py-4">{{ __('account.Status') }}</th>
                                    <th class="px-6 py-4 text-right">{{ __('account.Action') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @forelse($licenses as $license)
                                    <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
                                        <td class="px-6 py-4">
                                            <div class="font-mono text-sm font-medium bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded inline-block text-gray-800 dark:text-gray-200">
                                                {{ $license->license_key }}
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 font-medium text-text-main dark:text-white">
                                            {!! $license->product_name ?? 'Unknown Product' !!}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-text-muted dark:text-gray-400">
                                            {{ $license->expiry_date ? \Carbon\Carbon::parse($license->expiry_date)->format('M d, Y') : __('account.Lifetime') }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            @if (is_null($license->expiry_date) || $license->expiry_date > now())
                                                @if($license->is_revoked)
                                                    <span class="px-2.5 py-1 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold rounded-full uppercase tracking-wider">
                                                        {{ __('account.Revoked') }}
                                                    </span>
                                                @else
                                                    <span class="px-2.5 py-1 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-xs font-bold rounded-full uppercase tracking-wider">
                                                        {{ __('account.Active') }}
                                                    </span>
                                                @endif
                                            @else
                                                <span class="px-2.5 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs font-bold rounded-full uppercase tracking-wider">
                                                    {{ __('account.Expired') }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium border-l border-gray-50 dark:border-gray-800/50">
                                            <a href="{{ route('frontend.account.licenses.show', $license->id) }}" class="inline-flex items-center gap-2 text-primary hover:text-primary-dark transition-colors font-semibold group bg-primary/5 hover:bg-primary/10 px-4 py-2 rounded-lg">
                                                <span class="material-symbols-outlined text-[18px]">settings</span>
                                                {{ __('account.Manage') }}
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="px-6 py-12 text-center text-text-muted dark:text-gray-400">
                                            <div class="flex flex-col items-center justify-center">
                                                <span class="material-symbols-outlined text-[48px] text-gray-300 dark:text-gray-700 mb-4">key_off</span>
                                                <p class="text-lg font-medium">{{ __('account.No licenses found.') }}</p>
                                                <p class="text-sm mt-1">{{ __('account.When you purchase products with licenses, they will appear here.') }}</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                
                @if($licenses->hasPages())
                    <div class="mt-8 flex justify-center">
                        {{ $licenses->links('theme::vendor.pagination.tailwind') }}
                    </div>
                @endif
            </section>
        </div>
    </main>
@endsection