@extends('layouts.public')

{{-- Define o cabeçalho da página --}}
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
        {{ __('Meu Painel') }}
    </h2>
</x-slot>

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        {{-- Mensagem de Boas-Vindas --}}
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                {{ __("Bem-vindo(a) de volta, ") }} {{ $user->name }}!
            </div>
        </div>

        {{-- Card de Status da Assinatura --}}
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-6">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                <h3 class="text-lg font-medium mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">Status da
                    Assinatura</h3>

                @if ($activeSubscription)
                {{-- Informações da Assinatura Ativa --}}
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4">
                    <div class="col-span-1">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Plano Ativo</dt>
                        <dd class="mt-1 text-lg font-semibold text-indigo-600 dark:text-indigo-400">
                            {{ $activeSubscription->plan->name }}</dd>
                    </div>
                    <div class="col-span-1">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Expira em</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                            @if($activeSubscription->expires_at)
                            {{ $activeSubscription->expires_at->format('d/m/Y H:i') }}
                            {{-- Mostra "Expira em X dias" se estiver perto --}}
                            @if($activeSubscription->expires_at->isFuture() &&
                            $activeSubscription->expires_at->diffInDays(now()) <= 7) <span
                                class="text-xs text-yellow-600 dark:text-yellow-400 ml-2">
                                ({{ $activeSubscription->expires_at->diffForHumans(['parts' => 1, 'short' => true]) }})</span>
                                @endif
                                @else
                                <span class="font-semibold">Vitalício / Não Expira</span>
                                @endif
                        </dd>
                    </div>
                    <div class="col-span-1">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Chave de Licença</dt>
                        {{-- Adiciona Alpine.js para copiar chave --}}
                        <dd x-data="{ key: '{{ $activeSubscription->license_key }}' }" class="mt-1 text-sm">
                            <code
                                class="text-xs bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded">{{ $activeSubscription->license_key }}</code>
                            <button @click="navigator.clipboard.writeText(key); $el.innerText='Copiado!';"
                                title="Copiar chave"
                                class="ml-2 text-blue-500 hover:text-blue-700 text-xs">[Copiar]</button>
                        </dd>
                    </div>
                    <div class="col-span-1">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Domínio Permitido</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
                            {{ $activeSubscription->allowed_domain }}</dd>
                    </div>
                </dl>

                {{-- Links Rápidos Relacionados à Assinatura --}}
                <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex flex-wrap gap-4">
                    <a href="{{ route('user.themes.index') }}"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
                        Ver Temas Permitidos
                    </a>
                    <a href="{{ route('user.subscriptions.index') }}"
                        class="inline-flex items-center px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-md hover:bg-gray-600">
                        Ver Histórico de Assinaturas
                    </a>
                </div>

                @else
                {{-- Mensagem se não houver assinatura ativa --}}
                <p class="text-gray-600 dark:text-gray-400 mb-4">Você não possui nenhuma assinatura ativa no momento.
                </p>
                {{-- Botão para ver planos --}}
                @if(Route::has('public.plans.index'))
                <a href="{{ route('public.plans.index') }}"
                    class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">
                    Ver Planos Disponíveis
                </a>
                @endif
                @endif
            </div>
        </div>

        {{-- Outros Cards/Seções (Opcional) --}}
        {{-- <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <h3 class="text-lg font-medium mb-4">Links Rápidos</h3>
                    <a href="{{ route('profile.edit') }}" class="text-blue-600 hover:underline">Editar Perfil</a>
    </div>
</div> --}}

</div>
</div>
@endsection

{{-- Adicione @push('scripts') aqui se precisar de JS específico --}}