@extends('layouts.principal')

@section('titulo', 'Pagamento PIX - MNGD Sistemas')

@section('conteudo')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="dashboard-welcome">
            <h1>Pagamento PIX</h1>
            <p>Escaneie o QR Code ou copie o código para pagar</p>
        </div>
    </div>

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

    <div class="pagamento-card">
        <div class="pagamento-header">
            <div class="pagamento-icon">
                <i class="fas fa-qrcode"></i>
            </div>
            <h2>Pagamento Pendente</h2>
            <p class="pagamento-id">ID: {{ $pagamento->id }}</p>
        </div>

        <div class="pagamento-body">
            <div class="valor-section">
                <span class="valor-label">Valor a Pagar</span>
                <span class="valor-amount">R$ {{ number_format($pagamento->valor, 2, ',', '.') }}</span>
            </div>

            @if($pagamento->qr_code)
                <div class="qr-code-section">
                    <h3>Escaneie o QR Code</h3>
                    <div class="qr-code-container">
                        <img src="data:image/png;base64,{{ $pagamento->qr_code }}" alt="QR Code PIX" class="qr-code-image">
                    </div>
                    <p class="qr-code-hint">Abra o app do seu banco e escaneie o QR Code acima</p>
                </div>
            @else
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    QR Code não disponível. Entre em contato com o suporte.
                </div>
            @endif

            <div class="pagamento-status">
                <div class="status-indicator {{ $pagamento->status }}">
                    <div class="status-dot"></div>
                    <span>Status: {{ ucfirst($pagamento->status) }}</span>
                </div>
            </div>
        </div>

        <div class="pagamento-footer">
            <div class="pagamento-actions">
                <a href="{{ route('pagamento.retorno', $pagamento->id) }}" class="btn-primary">
                    <i class="fas fa-check"></i>
                    <span>Verificar Pagamento</span>
                </a>
                <a href="{{ route('licenca.index') }}" class="btn-secondary">
                    <i class="fas fa-arrow-left"></i>
                    <span>Voltar</span>
                </a>
            </div>

            <div class="pagamento-info">
                <p><i class="fas fa-info-circle"></i> O pagamento pode levar alguns minutos para ser confirmado.</p>
                <p><i class="fas fa-clock"></i> Este pagamento expira em 30 minutos.</p>
            </div>
        </div>
    </div>
</div>

<style>
.pagamento-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;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pagamento-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.pagamento-icon {
    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;
    margin: 0 auto 1rem;
}

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

.pagamento-id {
    color: #718096;
    font-size: 0.875rem;
    margin: 0;
}

.pagamento-body {
    margin-bottom: 2rem;
}

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

.valor-label {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.valor-amount {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
}

.qr-code-section {
    text-align: center;
    margin-bottom: 2rem;
}

.qr-code-section h3 {
    color: #2d3748;
    margin-bottom: 1.5rem;
}

.qr-code-container {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.qr-code-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

.qr-code-hint {
    color: #718096;
    font-size: 0.875rem;
    margin: 0;
}

.pagamento-status {
    text-align: center;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #2d3748;
    font-weight: 600;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-indicator.pendente .status-dot {
    background: #f6ad55;
}

.status-indicator.pago .status-dot {
    background: #48bb78;
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pagamento-footer {
    margin-top: 2rem;
}

.pagamento-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

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

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

@media (max-width: 768px) {
    .pagamento-card {
        padding: 1.5rem;
    }

    .qr-code-image {
        max-width: 250px;
    }

    .pagamento-actions {
        flex-direction: column;
    }
}
</style>

<script>
// Auto-refresh para verificar status do pagamento
setInterval(function() {
    fetch('{{ route("pagamento.retorno", $pagamento->id) }}')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'pago') {
                window.location.reload();
            }
        })
        .catch(error => console.error('Erro ao verificar pagamento:', error));
}, 10000); // Verifica a cada 10 segundos
</script>
@endsection