@extends('layouts.app')

@section('title', 'Gift Card Adquirido - ' . \App\Models\Setting::get('store_name', 'LaravelStore'))

@section('content')
<div class="container py-3 py-md-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-3 p-md-5 text-center">
                    <div style="font-size: 4rem; margin-bottom: 16px;">🎁</div>
                    <h1 class="fw-bold mb-2" style="font-size: clamp(1.3rem, 4vw, 2rem);">Gift Card Adquirido!</h1>
                    <p class="text-muted mb-4" style="font-size: clamp(0.9rem, 2.5vw, 1.1rem);">O gift card foi criado e enviado por email.</p>

                    <div style="background: #fefce8; border: 2px dashed #f59e0b; border-radius: 16px; padding: clamp(16px, 4vw, 32px); margin-bottom: 24px;">
                        <div style="font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;">Código do Gift Card</div>
                        <div style="font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: clamp(3px, 1.5vw, 6px); color: #92400e; margin-top: 8px; font-family: 'Courier New', monospace; word-break: break-all;">{{ $giftCard->code }}</div>
                        <div style="font-size: clamp(1.2rem, 4vw, 1.8rem); font-weight: 700; color: #059669; margin-top: 8px;">{{ number_format($giftCard->amount, 2) }}€</div>
                    </div>

                    <div style="background: #f0fdf4; border-radius: 12px; padding: clamp(12px, 3vw, 20px); margin-bottom: 24px; text-align: left;">
                        <h6 style="color: #166534; font-weight: 700; margin-bottom: 12px;"><i class="fas fa-check-circle me-2"></i>Detalhes</h6>
                        <div class="d-flex justify-content-between mb-2" style="font-size: clamp(0.85rem, 2vw, 0.95rem);">
                            <span style="color: #6b7280;">Para</span>
                            <span style="font-weight: 600; color: #166534;">{{ $giftCard->recipient_name }} ({{ $giftCard->recipient_email }})</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2" style="font-size: clamp(0.85rem, 2vw, 0.95rem);">
                            <span style="color: #6b7280;">Valor</span>
                            <span style="font-weight: 600; color: #166534;">{{ number_format($giftCard->amount, 2) }}€</span>
                        </div>
                        @if($giftCard->message)
                        <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #bbf7d0;">
                            <small style="color: #6b7280;">Mensagem:</small>
                            <p style="margin-top: 4px; color: #166534; font-style: italic;">{{ $giftCard->message }}</p>
                        </div>
                        @endif
                    </div>

                    @if(count($paymentMethods) > 0)
                    <div style="text-align: left; margin-bottom: 24px;">
                        <h5 style="font-weight: 700; margin-bottom: 16px; font-size: clamp(0.95rem, 3vw, 1.1rem);"><i class="fas fa-credit-card me-2"></i>Dados para Pagamento</h5>
                        <p class="text-muted mb-3" style="font-size: clamp(0.85rem, 2vw, 0.95rem);">O gift card está ativo. Escolhe um método para efetuar o pagamento:</p>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($paymentMethods as $key => $method)
                                @if($key === 'mbway')
                                <div class="p-3 rounded border flex-fill" style="min-width: 200px; background: #f0f9ff;">
                                    <i class="fas fa-mobile-alt me-2" style="color: #0369a1;"></i>
                                    <strong>MB WAY</strong>
                                    <div style="font-size: 0.85rem; color: #4b5563; margin-top: 4px;">{{ $method['number'] }}</div>
                                    <button class="btn btn-primary btn-sm mt-2 w-100" onclick="navigator.clipboard.writeText('{{ $method['number'] }}');this.textContent='Copiado!';setTimeout(()=>this.innerHTML='<i class=\'fas fa-mobile-alt\'></i> Pagar por MB WAY',2000);"><i class="fas fa-mobile-alt"></i> Pagar por MB WAY</button>
                                </div>
                                @elseif($key === 'paypal')
                                <div class="p-3 rounded border flex-fill" style="min-width: 200px; background: #f0f9ff;">
                                    <i class="fab fa-paypal me-2" style="color: #0369a1;"></i>
                                    <strong>PayPal</strong>
                                    @if($method['email'])
                                    <div style="font-size: 0.85rem; color: #4b5563; margin-top: 4px;">{{ $method['email'] }}</div>
                                    @endif
                                    @if($method['link'])
                                    <a href="{{ $method['link'] }}" target="_blank" class="btn btn-primary btn-sm mt-2 w-100"><i class="fab fa-paypal"></i> Pagar Agora</a>
                                    @else
                                    <button class="btn btn-primary btn-sm mt-2 w-100" onclick="navigator.clipboard.writeText('{{ $method['email'] }}');this.textContent='Email Copiado!';setTimeout(()=>this.innerHTML='<i class=\'fab fa-paypal\'></i> Pagar por PayPal',2000);"><i class="fab fa-paypal"></i> Pagar por PayPal</button>
                                    @endif
                                    <a href="https://wa.me/{{ \App\Models\Setting::get('whatsapp_number', '') }}?text=Olá, efetuei o pagamento por PayPal. Segue o comprovativo." target="_blank" class="btn btn-success btn-sm mt-2 w-100">
                                        <i class="fab fa-whatsapp me-1"></i> Enviar Comprovativo
                                    </a>
                                </div>
                                @elseif($key === 'whatsapp')
                                <div class="p-3 rounded border flex-fill" style="min-width: 200px; background: #f0fdf4;">
                                    <i class="fab fa-whatsapp me-2" style="color: #25D366;"></i>
                                    <strong>WhatsApp</strong>
                                    <div style="font-size: 0.85rem; color: #4b5563; margin-top: 4px;">{{ $method['number'] }}</div>
                                    <a href="https://wa.me/{{ $method['number'] }}?text=Olá, quero pagar um Gift Card de {{ number_format($giftCard->amount, 2) }}€ (Código: {{ $giftCard->code }})" target="_blank" class="btn btn-success btn-sm mt-2 w-100"><i class="fab fa-whatsapp"></i> Pagar por WhatsApp</a>
                                </div>
                                @elseif($key === 'bank')
                                <div class="p-3 rounded border flex-fill" style="min-width: 200px; background: #f0f9ff;">
                                    <i class="fas fa-university me-2" style="color: #0369a1;"></i>
                                    <strong>Transferência Bancária</strong>
                                    <div style="font-size: 0.85rem; color: #4b5563; margin-top: 4px; word-break: break-all;">IBAN: {{ $method['iban'] }}</div>
                                    <button class="btn btn-primary btn-sm mt-2 w-100" onclick="navigator.clipboard.writeText('{{ $method['iban'] }}');this.textContent='IBAN Copiado!';setTimeout(()=>this.innerHTML='<i class=\'fas fa-university\'></i> Pagar por Transferência',2000);"><i class="fas fa-university"></i> Copiar IBAN</button>
                                </div>
                                @elseif($key === 'bunq')
                                <div class="p-3 rounded border flex-fill" style="min-width: 200px; background: #f0f9ff;">
                                    <i class="fas fa-link me-2" style="color: #0369a1;"></i>
                                    <strong>Link (bunq)</strong>
                                    <a href="{{ $method['link'] }}" target="_blank" class="btn btn-primary btn-sm mt-2 w-100"><i class="fas fa-external-link-alt"></i> Pagar Agora</a>
                                </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <div class="d-flex flex-wrap gap-2 justify-content-center">
                        <a href="{{ route('gift-cards') }}" class="btn btn-outline-success" style="font-size: clamp(0.85rem, 2.5vw, 1rem); padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 28px);"><i class="fas fa-arrow-left me-2"></i>Voltar</a>
                        <a href="{{ route('shop') }}" class="btn btn-success" style="font-size: clamp(0.85rem, 2.5vw, 1rem); padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 28px);"><i class="fas fa-store me-2"></i>Ir para a Loja</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection