@extends('layouts.app')

@section('title', 'Proforma #' . $pedido->numero_proforma . ' | AMD-Topografia')

@section('content')
<div class="min-h-screen bg-slate-50/70 pt-36 pb-24 px-4 sm:px-6 md:px-12 relative z-10">
    <div class="max-w-4xl mx-auto">

        {{-- Cartão de Sucesso --}}
        <div class="bg-white rounded-3xl border border-slate-200/80 shadow-xl overflow-hidden mb-8">
            
            {{-- Header com Confirmação --}}
            <div class="bg-[#06458F] p-8 sm:p-10 text-white text-center relative overflow-hidden">
                <div class="absolute -right-10 -bottom-10 w-48 h-48 bg-white/5 rounded-full blur-2xl pointer-events-none"></div>
                <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-emerald-500/20 border-2 border-emerald-400 text-emerald-300 mb-5 animate-bounce">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>
                </div>
                <span class="block text-xs font-bold uppercase tracking-[0.25em] text-[#8BCB4A] mb-2">Pedido Registado com Sucesso</span>
                <h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight mb-3">Fatura Proforma Emitida</h1>
                <p class="text-white/80 text-sm max-w-xl mx-auto font-light leading-relaxed">
                    A sua solicitação foi gerada com a referência <span class="font-mono font-bold text-white bg-white/10 px-2 py-0.5 rounded">#{{ $pedido->numero_proforma }}</span>. Pode descarregar o documento oficial em PDF abaixo e efetuar o pagamento.
                </p>
            </div>

            {{-- Corpo de Informações --}}
            <div class="p-6 sm:p-10 space-y-8">
                
                {{-- Resumo Rápido em Grid --}}
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 p-5 bg-slate-50 rounded-2xl border border-slate-100">
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Referência</span>
                        <span class="font-mono font-extrabold text-[#06458F] text-base">{{ $pedido->numero_proforma }}</span>
                    </div>
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Cliente</span>
                        <span class="font-bold text-slate-800 text-sm block truncate">{{ $pedido->cliente_nome }}</span>
                        <span class="text-xs text-slate-500">{{ $pedido->cliente_email }}</span>
                    </div>
                    <div>
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Total a Liquidar</span>
                        <span class="text-xl font-black text-emerald-600 block">{{ number_format($pedido->total, 2, ',', '.') }} <small class="text-xs font-semibold text-slate-500">Kz</small></span>
                    </div>
                </div>

                {{-- Bloco de Coordenadas Bancárias (Angola) com Cópia em 1 Clique --}}
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-base font-extrabold text-[#06458F] tracking-tight">Coordenadas Bancárias para Liquidação</h3>
                            <p class="text-xs text-slate-500 mt-0.5">Efetue a transferência via Multicaixa Express, Internet Banking ou Depósito:</p>
                        </div>
                        <span class="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 bg-blue-50 text-[#06458F] rounded-full text-[11px] font-bold">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Contas Oficiais
                        </span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {{-- Banco BAI --}}
                        @php $ibanBai = !empty($banco['bai']) ? $banco['bai'] : 'AO06 0040.0000.8245.9184.1018.4'; @endphp
                        <div class="p-5 bg-gradient-to-br from-slate-50 to-white rounded-2xl border border-slate-200/90 shadow-sm flex flex-col justify-between">
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-xs font-black text-[#06458F] uppercase tracking-wider">Banco BAI</span>
                                    <span class="text-[10px] bg-blue-100/70 text-blue-800 font-bold px-2 py-0.5 rounded-full">Kwanza (AOA)</span>
                                </div>
                                <p class="text-[11px] text-slate-500 mb-1">IBAN Oficial:</p>
                                <p class="font-mono text-xs sm:text-sm font-bold text-slate-800 select-all tracking-wider break-all mb-4">{{ $ibanBai }}</p>
                            </div>
                            <button onclick="copiarIban('{{ $ibanBai }}', this)" 
                                    type="button"
                                    class="w-full py-2.5 px-4 rounded-xl bg-white border border-slate-200 hover:border-[#06458F] hover:bg-blue-50/50 text-[#06458F] text-xs font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-2">
                                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                <span>Copiar IBAN BAI</span>
                            </button>
                        </div>

                        {{-- Banco BFA --}}
                        @php $ibanBfa = !empty($banco['bfa']) ? $banco['bfa'] : 'AO06 0006.0000.4192.8375.1012.9'; @endphp
                        <div class="p-5 bg-gradient-to-br from-slate-50 to-white rounded-2xl border border-slate-200/90 shadow-sm flex flex-col justify-between">
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-xs font-black text-amber-700 uppercase tracking-wider">Banco BFA</span>
                                    <span class="text-[10px] bg-amber-100/70 text-amber-900 font-bold px-2 py-0.5 rounded-full">Kwanza (AOA)</span>
                                </div>
                                <p class="text-[11px] text-slate-500 mb-1">IBAN Oficial:</p>
                                <p class="font-mono text-xs sm:text-sm font-bold text-slate-800 select-all tracking-wider break-all mb-4">{{ $ibanBfa }}</p>
                            </div>
                            <button onclick="copiarIban('{{ $ibanBfa }}', this)" 
                                    type="button"
                                    class="w-full py-2.5 px-4 rounded-xl bg-white border border-slate-200 hover:border-amber-600 hover:bg-amber-50/50 text-amber-800 text-xs font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-2">
                                <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                                <span>Copiar IBAN BFA</span>
                            </button>
                        </div>
                    </div>

                    <div class="p-3 bg-slate-100/70 rounded-xl text-center text-xs text-slate-600">
                        <strong>Titular da Conta:</strong> {{ !empty($banco['titular']) ? $banco['titular'] : 'AMD-II TOPOGRAFIA ENGENHARIA & PROJECTOS, LDA' }}
                    </div>
                </div>

                {{-- Botões de Ação Principal --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-slate-100">
                    {{-- Baixar PDF --}}
                    <a href="{{ route('proforma.download', ['locale' => app()->getLocale(), 'numero' => $pedido->numero_proforma]) }}"
                       target="_blank"
                       class="w-full py-4 px-6 rounded-2xl bg-[#06458F] hover:bg-[#053A78] text-white text-xs font-bold uppercase tracking-widest shadow-lg shadow-[#06458F]/25 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3">
                        <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        <span>Baixar Fatura Proforma (PDF)</span>
                    </a>

                    {{-- Enviar Comprovativo pelo WhatsApp --}}
                    @php
                        $msgZap = "Olá AMD-Topografia! Acabei de gerar a Proforma #" . $pedido->numero_proforma . " no valor de " . number_format($pedido->total, 2, ',', '.') . " Kz em nome de " . $pedido->cliente_nome . ". Segue o comprovativo da transferência para validação.";
                    @endphp
                    <a href="https://wa.me/{{ $cleanPhone }}?text={{ urlencode($msgZap) }}"
                       target="_blank" rel="noopener noreferrer"
                       class="w-full py-4 px-6 rounded-2xl bg-[#25D366] hover:bg-[#20bd5a] text-white text-xs font-bold uppercase tracking-widest shadow-lg shadow-[#25D366]/25 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3">
                        <svg class="w-5 h-5 fill-current shrink-0" viewBox="0 0 24 24">
                            <path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.694.074-2.127-.521-1.625-.676-2.678-2.327-2.759-2.435-.08-.109-.659-.877-.659-1.671 0-.795.418-1.186.566-1.345.148-.16.323-.2.43-.2.107 0 .216.002.311.006.1.006.234-.038.366.279.136.327.464 1.134.505 1.217.042.083.07.18.014.29-.056.11-.084.18-.167.279-.083.1-.175.223-.25.299-.083.084-.17.176-.073.344.097.168.431.714.927 1.155.637.568 1.175.744 1.343.827.169.083.268.07.368-.046.101-.116.43-.502.545-.674.116-.172.23-.143.388-.083.158.06 1.005.474 1.177.56.173.086.288.128.33.2.042.072.042.417-.102.822z"/>
                        </svg>
                        <span>Enviar Comprovativo pelo WhatsApp</span>
                    </a>
                </div>

                {{-- Tabela de Itens --}}
                <div class="pt-6 border-t border-slate-100">
                    <h3 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-4">Itens Incluídos na Proforma</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-xs">
                            <thead>
                                <tr class="border-b border-slate-200 text-slate-400 font-bold uppercase tracking-wider text-[10px]">
                                    <th class="py-2">Item</th>
                                    <th class="py-2 text-center">Tipo</th>
                                    <th class="py-2 text-center">Qtd</th>
                                    <th class="py-2 text-right">Preço Unit.</th>
                                    <th class="py-2 text-right">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                @foreach($pedido->carrinho_data ?? [] as $item)
                                    <tr>
                                        <td class="py-3 font-semibold text-slate-800">
                                            {{ $item['nome'] ?? 'Equipamento Topográfico' }}
                                            @if(!empty($item['aluguer_periodo']))
                                                <span class="block text-[11px] text-slate-400 font-normal">Período: {{ $item['aluguer_periodo'] }}</span>
                                            @endif
                                        </td>
                                        <td class="py-3 text-center capitalize text-slate-500">{{ $item['tipo'] ?? 'venda' }}</td>
                                        <td class="py-3 text-center font-bold text-slate-700">{{ $item['quantidade'] ?? 1 }}</td>
                                        <td class="py-3 text-right text-slate-600">{{ number_format($item['preco'] ?? 0, 2, ',', '.') }} Kz</td>
                                        <td class="py-3 text-right font-bold text-[#06458F]">{{ number_format(($item['preco'] ?? 0) * ($item['quantidade'] ?? 1), 2, ',', '.') }} Kz</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Voltar à Loja --}}
                <div class="text-center pt-4">
                    <a href="{{ route('loja.index') }}" class="inline-flex items-center gap-2 text-xs font-bold text-[#06458F] hover:underline uppercase tracking-wider">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                        <span>Voltar ao Catálogo de Equipamentos</span>
                    </a>
                </div>

            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
function copiarIban(texto, botao) {
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(texto).then(() => {
            feedbackCopiado(botao);
        });
    } else {
        const input = document.createElement('textarea');
        input.value = texto;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        feedbackCopiado(botao);
    }
}

function feedbackCopiado(botao) {
    const originalHtml = botao.innerHTML;
    botao.classList.add('bg-emerald-50', 'text-emerald-700', 'border-emerald-300');
    botao.innerHTML = '<svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg><span>IBAN Copiado!</span>';
    setTimeout(() => {
        botao.innerHTML = originalHtml;
        botao.classList.remove('bg-emerald-50', 'text-emerald-700', 'border-emerald-300');
    }, 2500);
}
</script>
@endsection