@extends('layouts.site')

@section('title', 'Pague seu Pedido')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm text-center">
                    <div class="card-header bg-danger text-white">
                        <h1 class="mb-0 fs-4">Finalize seu Pagamento</h1>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="card-title">Pedido #{{ $order->id }} Realizado com Sucesso!</h5>
                        <p class="lead">Para confirmar sua compra, realize o pagamento via PIX abaixo.</p>
                        
                        <div class="my-4">
                            {{-- A imagem do QR Code em Base64 é inserida aqui --}}
                            <img src="data:image/png;base64, {{ $qrCodeBase64 }}" alt="QR Code PIX" class="img-fluid" style="max-width: 250px;">
                        </div>

                        <p class="fw-bold">Ou use o PIX Copia e Cola:</p>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" value="{{ $qrCode }}" id="pixCode" readonly>
                            <button class="btn btn-outline-secondary" type="button" id="copyButton">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        </div>

                        <p class="text-muted mt-4"><i class="fas fa-exclamation-triangle me-2"></i>Atenção: O pagamento deve ser realizado para que o pedido seja processado. Após o pagamento, aguarde a confirmação.</p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('site.home') }}" class="btn btn-secondary">Voltar para a Loja</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Script para o botão "Copiar" --}}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const copyButton = document.getElementById('copyButton');
            const pixCodeInput = document.getElementById('pixCode');

            copyButton.addEventListener('click', function () {
                pixCodeInput.select();
                pixCodeInput.setSelectionRange(0, 99999); // Para mobile

                try {
                    document.execCommand('copy');
                    copyButton.innerText = 'Copiado!';
                    setTimeout(() => {
                        copyButton.innerHTML = '<i class="fas fa-copy"></i> Copiar';
                    }, 2000);
                } catch (err) {
                    alert('Não foi possível copiar o código.');
                }
            });
        });
    </script>
@endsection