@extends('layouts.principal')

@section('titulo', 'Comprar ' . $produto->nome . ' - MNGD Sistemas')

@section('conteudo')
<div class="comprar-container">
    <!-- Header -->
    <div class="page-header">
        <div class="header-content">
            <h1>Comprar {{ $produto->nome }}</h1>
            <p>Complete sua compra e ative sua licença</p>
        </div>
        <div class="header-actions">
            <a href="{{ route('product.index') }}" class="btn-secondary">
                <i class="fas fa-arrow-left"></i>
                <span>Voltar aos Produtos</span>
            </a>
        </div>
    </div>

    <div class="comprar-content">
        <!-- Detalhes do Produto -->
        <div class="produto-details">
            <div class="produto-card">
                <div class="produto-header">
                    <div class="produto-icon">
                        <i class="fas fa-cube"></i>
                    </div>
                    <div class="produto-info">
                        <h2>{{ $produto->nome }}</h2>
                        <p>{{ $produto->descricao }}</p>
                    </div>
                </div>
                
                <div class="produto-features">
                    <h3>Recursos Inclusos:</h3>
                    <ul>
                        <li><i class="fas fa-check"></i> Licença válida por 1 ano</li>
                        <li><i class="fas fa-check"></i> Suporte técnico completo</li>
                        <li><i class="fas fa-check"></i> Atualizações gratuitas</li>
                        <li><i class="fas fa-check"></i> Acesso ao painel de controle</li>
                    </ul>
                </div>
                
                <div class="produto-price">
                    <div class="price-value">
                        R$ {{ number_format($produto->valor, 2, ',', '.') }}
                    </div>
                    <div class="price-period">por ano</div>
                </div>
            </div>
        </div>

        <!-- Formulário de Compra -->
        <div class="compra-form">
            <div class="form-card">
                <div class="form-header">
                    <h2>Finalizar Compra</h2>
                    <p>Confirme os dados e complete sua compra</p>
                </div>

                @if (!Auth::guard('cliente')->check())
                    <div class="auth-notice">
                        <div class="notice-icon">
                            <i class="fas fa-user-lock"></i>
                        </div>
                        <div class="notice-content">
                            <h3>Faça login para continuar</h3>
                            <p>Você precisa estar logado para fazer uma compra</p>
                            <div class="auth-actions">
                                <a href="{{ route('cliente.login') }}" class="btn-primary">
                                    <i class="fas fa-sign-in-alt"></i>
                                    <span>Fazer Login</span>
                                </a>
                                <a href="{{ route('cliente.register') }}" class="btn-secondary">
                                    <i class="fas fa-user-plus"></i>
                                    <span>Criar Conta</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="cliente-info">
                        <div class="info-header">
                            <h3>Dados do Cliente</h3>
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-item">
                                <span class="label">Nome:</span>
                                <span class="value">{{ Auth::guard('cliente')->user()->nome }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">E-mail:</span>
                                <span class="value">{{ Auth::guard('cliente')->user()->email }}</span>
                            </div>
                            <div class="info-item">
                                <span class="label">CPF/CNPJ:</span>
                                <span class="value">{{ Auth::guard('cliente')->user()->cpf_cnpj }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="compra-summary">
                        <div class="summary-header">
                            <h3>Resumo da Compra</h3>
                            <i class="fas fa-receipt"></i>
                        </div>
                        
                        <div class="summary-items">
                            <div class="summary-item">
                                <span class="item-name">{{ $produto->nome }}</span>
                                <span class="item-price">R$ {{ number_format($produto->valor, 2, ',', '.') }}</span>
                            </div>
                            <div class="summary-item">
                                <span class="item-name">Licença Anual</span>
                                <span class="item-price">Incluído</span>
                            </div>
                            <div class="summary-item">
                                <span class="item-name">Suporte Técnico</span>
                                <span class="item-price">Incluído</span>
                            </div>
                        </div>
                        
                        <div class="summary-total">
                            <span class="total-label">Total:</span>
                            <span class="total-value">R$ {{ number_format($produto->valor, 2, ',', '.') }}</span>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('produto.comprar.post', $produto->id) }}" class="compra-form-submit">
                        @csrf
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" required>
                                <span class="checkmark"></span>
                                Li e aceito os <a href="#" class="link">Termos de Uso</a> e <a href="#" class="link">Política de Privacidade</a>
                            </label>
                        </div>
                        
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input type="checkbox" required>
                                <span class="checkmark"></span>
                                Confirmo que os dados estão corretos
                            </label>
                        </div>
                        
                        <button type="submit" class="btn-primary btn-large btn-full">
                            <i class="fas fa-credit-card"></i>
                            <span>Confirmar Compra</span>
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <!-- Informações Adicionais -->
    <div class="info-section">
        <div class="info-grid">
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>Segurança</h3>
                <p>Suas informações estão protegidas com criptografia SSL</p>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <h3>Ativação Imediata</h3>
                <p>Sua licença será ativada automaticamente após a compra</p>
            </div>
            
            <div class="info-item">
                <div class="info-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3>Suporte 24/7</h3>
                <p>Nossa equipe está sempre disponível para ajudar</p>
            </div>
        </div>
    </div>
</div>
@endsection