@extends('layouts.principal')

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

@section('conteudo')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="dashboard-welcome">
            <h1>Renovar Licença</h1>
            <p>Renove sua licença para continuar usando o produto</p>
        </div>
        <div class="dashboard-actions">
            <a href="{{ route('licenca.index') }}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

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

    <div class="renovacao-card">
        <div class="renovacao-header">
            <div class="licenca-icon-large">
                <i class="fas fa-sync-alt"></i>
            </div>
            <div class="renovacao-info">
                <h2>{{ $produto->nome }}</h2>
                <p>{{ $produto->descricao }}</p>
            </div>
        </div>

        <div class="renovacao-details">
            <div class="detail-section">
                <h3>Informações da Licença Atual</h3>
                <div class="detail-grid">
                    <div class="detail-item">
                        <span class="label">Status:</span>
                        <span class="value status-badge {{ $licenca->status }}">
                            {{ ucfirst($licenca->status) }}
                        </span>
                    </div>
                    <div class="detail-item">
                        <span class="label">Validade Atual:</span>
                        <span class="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
                        </span>
                    </div>
                </div>
            </div>

            <div class="renovacao-planos">
                <h3 style="margin-bottom: 1.5rem; color: #2d3748;">Escolha o Plano de Renovação</h3>
                
                @if($planos->isEmpty())
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        Nenhum plano disponível para este produto.
                    </div>
                @else
                    <div class="planos-grid">
                        @foreach($planos as $plano)
                            <div class="plano-card" data-plano-id="{{ $plano->id }}">
                                <input 
                                    type="radio" 
                                    name="plano_id" 
                                    id="plano_{{ $plano->id }}" 
                                    value="{{ $plano->id }}"
                                    class="plano-radio"
                                    {{ $loop->first ? 'checked' : '' }}
                                    required
                                >
                                <label for="plano_{{ $plano->id }}" class="plano-label">
                                    <div class="plano-header">
                                        <div class="plano-badge plano-badge-{{ $plano->periodicidade }}">
                                            {{ ucfirst($plano->periodicidade) }}
                                        </div>
                                        @if($plano->desconto_percentual)
                                            <div class="plano-desconto">
                                                <i class="fas fa-tag"></i>
                                                {{ $plano->desconto_percentual }}% OFF
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <div class="plano-body">
                                        <div class="plano-preco">
                                            <span class="plano-valor">R$ {{ number_format($plano->preco, 2, ',', '.') }}</span>
                                            <span class="plano-periodo">
                                                @if($plano->periodicidade === 'mensal')
                                                    /mês
                                                @elseif($plano->periodicidade === 'trimestral')
                                                    /3 meses
                                                @else
                                                    /ano
                                                @endif
                                            </span>
                                        </div>
                                        
                                        <div class="plano-duracao">
                                            <i class="fas fa-calendar-alt"></i>
                                            {{ $plano->duracao_dias }} dias de acesso
                                        </div>
                                        
                                        @if($plano->descricao)
                                            <p class="plano-descricao">{{ $plano->descricao }}</p>
                                        @endif
                                    </div>
                                    
                                    <div class="plano-footer">
                                        <div class="plano-check">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <div class="renovacao-actions">
            <form method="POST" action="{{ route('licenca.renovar.post') }}" id="renovacao-form">
                @csrf
                <input type="hidden" name="plano_id" id="plano_id_selected" value="{{ $planos->first()->id ?? '' }}" required>
                <button type="submit" class="btn-primary btn-full" id="btn-confirmar">
                    <i class="fas fa-credit-card"></i>
                    <span>Confirmar Renovação</span>
                </button>
            </form>
        </div>
    </div>
</div>

<style>
.renovacao-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.renovacao-header {
    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;
}

.renovacao-info h2 {
    margin: 0 0 0.5rem 0;
    color: #2d3748;
    font-size: 1.75rem;
}

.renovacao-info p {
    margin: 0;
    color: #718096;
}

.renovacao-details {
    margin-bottom: 2rem;
}

.detail-section {
    margin-bottom: 2rem;
}

.detail-section h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.detail-grid {
    display: grid;
    gap: 1rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
}

.detail-item .label {
    color: #718096;
    font-size: 0.875rem;
}

.detail-item .value {
    color: #2d3748;
    font-weight: 600;
}

.renovacao-preco {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: white;
    margin-bottom: 2rem;
}

.preco-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preco-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.preco-value {
    font-size: 2.5rem;
    font-weight: 700;
}

.preco-periodo {
    font-size: 1rem;
    opacity: 0.9;
}

.renovacao-actions {
    margin-top: 2rem;
}

.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;
}

.renovacao-planos {
    margin-bottom: 2rem;
}

.planos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 1.5rem;
}

.plano-card {
    position: relative;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.plano-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.plano-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plano-radio:checked + .plano-label .plano-card {
    border-color: #667eea;
}

.plano-radio:checked + .plano-label {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.plano-radio:checked + .plano-label .plano-check {
    opacity: 1;
    transform: scale(1);
}

.plano-label {
    display: block;
    padding: 0;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.plano-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.plano-badge {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plano-desconto {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.plano-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plano-preco {
    margin-bottom: 1rem;
}

.plano-valor {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    display: block;
}

.plano-periodo {
    font-size: 0.875rem;
    color: #718096;
    margin-left: 0.5rem;
}

.plano-duracao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4a5568;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
}

.plano-descricao {
    color: #718096;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.plano-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: center;
    background: #f7fafc;
}

.plano-check {
    width: 32px;
    height: 32px;
    background: #667eea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.plano-radio:checked + .plano-label .plano-check {
    opacity: 1;
    transform: scale(1);
}

.plano-card.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

@media (max-width: 1024px) {
    .planos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .planos-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const planos = document.querySelectorAll('.plano-card');
    const planoIdInput = document.getElementById('plano_id_selected');
    
    planos.forEach(plano => {
        plano.addEventListener('click', function() {
            // Remove seleção anterior
            planos.forEach(p => p.classList.remove('selected'));
            
            // Adiciona seleção atual
            this.classList.add('selected');
            
            // Atualiza o input hidden
            const radio = this.querySelector('.plano-radio');
            if (radio) {
                radio.checked = true;
                planoIdInput.value = radio.value;
            }
        });
    });
    
    // Seleciona o primeiro plano por padrão
    if (planos.length > 0) {
        planos[0].click();
    }
});
</script>
@endsection