@extends('layouts.principal')

@section('titulo', 'Minha Licença - MNGD Sistemas')

@section('conteudo')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="dashboard-welcome">
            <h1>Gerenciar Licença</h1>
            <p>Visualize e gerencie sua licença</p>
        </div>
        <div class="dashboard-actions">
            <a href="{{ route('cliente.dashboard') }}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            {{ session('error') }}
        </div>
    @endif

    @if($licenca)
        <div class="licenca-detail-card">
            <div class="licenca-header-section">
                <div class="licenca-icon-large">
                    <i class="fas fa-key"></i>
                </div>
                <div class="licenca-title-section">
                    <h2>{{ $licenca->produto->nome }}</h2>
                    <p>{{ $licenca->produto->descricao }}</p>
                </div>
                <div class="licenca-status-badge {{ $licenca->status }}">
                    <span>{{ ucfirst($licenca->status) }}</span>
                </div>
            </div>

            <div class="licenca-info-grid">
                <div class="info-item">
                    <div class="info-label">
                        <i class="fas fa-calendar-alt"></i>
                        <span>Validade</span>
                    </div>
                    <div class="info-value">
                        @if($licenca->license_ends_at)
                            {{ $licenca->license_ends_at->format('d/m/Y H:i') }}
                        @elseif($licenca->paid_until)
                            {{ $licenca->paid_until->format('d/m/Y H:i') }}
                        @else
                            <span class="text-muted">Não definida</span>
                        @endif
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="fas fa-fingerprint"></i>
                        <span>Chave da Licença</span>
                    </div>
                    <div class="info-value">
                        <code class="license-key">{{ $licenca->chave ?? $licenca->license_key ?? 'N/A' }}</code>
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="fas fa-box"></i>
                        <span>Produto</span>
                    </div>
                    <div class="info-value">
                        {{ $licenca->produto->nome }}
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="fas fa-clock"></i>
                        <span>Status</span>
                    </div>
                    <div class="info-value">
                        <span class="status-badge {{ $licenca->status }}">
                            {{ ucfirst($licenca->status) }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="licenca-actions">
                @if($licenca->status != 'ativa')
                    <a href="{{ route('licenca.renovar') }}" class="btn-primary">
                        <i class="fas fa-sync-alt"></i>
                        <span>Renovar Licença</span>
                    </a>
                @else
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <span>Sua licença está ativa. Você pode renová-la antes do vencimento.</span>
                    </div>
                    <a href="{{ route('licenca.renovar') }}" class="btn-secondary">
                        <i class="fas fa-sync-alt"></i>
                        <span>Renovar Agora</span>
                    </a>
                @endif
            </div>
        </div>
    @else
        <div class="empty-state">
            <div class="empty-icon">
                <i class="fas fa-key"></i>
            </div>
            <h3>Você ainda não possui uma licença</h3>
            <p>Adquira uma licença para começar a usar nossos produtos.</p>
            <a href="{{ route('licenca.comprar') }}" class="btn-primary">
                <i class="fas fa-shopping-cart"></i>
                <span>Comprar Licença</span>
            </a>
        </div>
    @endif
</div>

<style>
.licenca-detail-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.licenca-header-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.licenca-icon-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.licenca-title-section {
    flex: 1;
}

.licenca-title-section h2 {
    margin: 0 0 0.5rem 0;
    color: #2d3748;
    font-size: 1.75rem;
}

.licenca-title-section p {
    margin: 0;
    color: #718096;
}

.licenca-status-badge {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
}

.licenca-status-badge.ativa {
    background: #c6f6d5;
    color: #22543d;
}

.licenca-status-badge.pendente {
    background: #fed7d7;
    color: #742a2a;
}

.licenca-status-badge.expirado {
    background: #e2e8f0;
    color: #2d3748;
}

.licenca-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-item {
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
}

.info-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #718096;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.info-value {
    color: #2d3748;
    font-weight: 600;
    font-size: 1rem;
}

.license-key {
    background: #2d3748;
    color: #68d391;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    display: inline-block;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.ativa {
    background: #c6f6d5;
    color: #22543d;
}

.status-badge.pendente {
    background: #fed7d7;
    color: #742a2a;
}

.licenca-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    margin-top: 2rem;
}

.empty-icon {
    font-size: 4rem;
    color: #cbd5e0;
    margin-bottom: 1rem;
}

.empty-state h3 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #718096;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .licenca-header-section {
        flex-direction: column;
        text-align: center;
    }

    .licenca-info-grid {
        grid-template-columns: 1fr;
    }

    .licenca-actions {
        flex-direction: column;
    }
}
</style>
@endsection