@extends('layouts.app')

@section('content')
<div class="py-12 px-4 md:px-0">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Checkout</h1>
    </div>

    @if(session('error'))
        <div class="mb-6 p-4 rounded-xl border border-red-500 bg-red-500/10 text-white font-semibold">
            ❌ {{ session('error') }}
        </div>
    @endif

    @if(session('success'))
        <div class="mb-6 p-4 rounded-xl border border-emerald-500 bg-emerald-500/10 text-white font-semibold">
            ✅ {{ session('success') }}
        </div>
    @endif

    @if(session('info'))
        <div class="mb-6 p-4 rounded-xl border border-yellow-500 bg-yellow-500/10 text-white font-semibold">
            ℹ️ {{ session('info') }}
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-[#0f1d36] text-white rounded-xl shadow-2xl shadow-black/30 border border-white/5 p-8">
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-6">👤 Comprador</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-bold mb-2">Nome</label>
                        <input type="text" value="{{ auth()->user()->name }}" readonly class="w-full px-4 py-3 bg-white/5 text-white rounded border border-white/10 font-semibold">
                    </div>
                    <div>
                        <label class="block text-sm font-bold mb-2">Email</label>
                        <input type="email" value="{{ auth()->user()->email }}" readonly class="w-full px-4 py-3 bg-white/5 text-white rounded border border-white/10 font-semibold">
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-2xl font-bold mb-6">💳 Escolha o método de pagamento</h2>

                {{-- ✅ AQUI estava o erro: agora envia para checkout.pay --}}
                <form id="checkoutForm" action="{{ route('checkout.pay') }}" method="POST">
                    @csrf
                    <input type="hidden" name="order_id" value="{{ $order->id }}">

                    <div class="space-y-4">
                        {{-- Multicaixa Express --}}
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="express" class="hidden peer payment-option" id="express">
                            <div class="p-5 border border-white/10 rounded-xl bg-white/5 hover:border-emerald-400 transition peer-checked:border-emerald-400 peer-checked:bg-emerald-500/10">
                                <div class="flex items-center gap-4">
                                    <img src="{{ asset('images/multicaixa-express.png') }}" alt="Multicaixa Express" class="w-16 h-16 object-contain">
                                    <div>
                                        <h3 class="text-lg font-bold">Multicaixa Express</h3>
                                        <p class="text-sm text-gray-400">Receba uma notificação no app e confirme no seu telemóvel.</p>
                                    </div>
                                </div>
                            </div>
                        </label>

                        {{-- Multicaixa Referência --}}
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="multicaixa" class="hidden peer payment-option" id="multicaixa" checked>
                            <div class="p-5 border border-white/10 rounded-xl bg-white/5 hover:border-emerald-400 transition peer-checked:border-emerald-400 peer-checked:bg-emerald-500/10">
                                <div class="flex items-center gap-4">
                                    <img src="{{ asset('images/multicaixa.png') }}" alt="Multicaixa" class="w-16 h-16 object-contain">
                                    <div>
                                        <h3 class="text-lg font-bold">Multicaixa</h3>
                                        <p class="text-sm text-gray-400">Pagamento por referência Multicaixa.</p>
                                    </div>
                                </div>
                            </div>
                        </label>

                        {{-- Transferência --}}
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="bank" class="hidden peer payment-option" id="bank">
                            <div class="p-5 border border-white/10 rounded-xl bg-white/5 hover:border-emerald-400 transition peer-checked:border-emerald-400 peer-checked:bg-emerald-500/10">
                                <div class="flex items-center gap-4">
                                    <span class="text-4xl">🏦</span>
                                    <div>
                                        <h3 class="text-lg font-bold">Transferência Bancária</h3>
                                        <p class="text-sm text-gray-400">Pagamento por transferência bancária.</p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>

                    {{-- Campo do Express --}}
                    <div id="express-phone-box" class="mt-6 hidden">
                        <label class="block text-sm font-bold mb-2">📱 Número Multicaixa Express</label>
                        <input
                            type="text"
                            name="phone"
                            id="phone"
                            maxlength="9"
                            placeholder="923230094"
                            class="w-full px-4 py-3 bg-white/5 text-white rounded border border-white/10 font-semibold"
                        >
                        <p class="text-sm text-gray-400 mt-2">Insere o teu número Multicaixa Express (9 dígitos).</p>
                    </div>

                    <div class="mt-8 flex gap-4">
                        <a href="{{ route('cart.index') }}" class="flex-1 px-6 py-3 bg-white/10 border border-white/20 text-white font-bold rounded-full hover:bg-white/20 transition text-center">
                            ← Voltar
                        </a>
                        <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-emerald-500 to-green-600 text-white font-bold rounded-full hover:shadow-emerald-500/40 shadow-lg transform hover:scale-105 transition">
                            Confirmar Pagamento ✓
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="bg-[#0f1d36] text-white rounded-xl shadow-2xl shadow-black/30 border border-white/5 p-8 h-fit sticky top-24">
            <h2 class="text-2xl font-bold mb-6">Resumo</h2>

            @php
                $total = (float) $order->total_price;
            @endphp

            <div class="space-y-4 mb-6">
                @foreach($order->items as $item)
                    <div class="flex justify-between text-sm border-b border-white/10 pb-4">
                        <div>
                            <p class="font-semibold">{{ $item->product->name }}</p>
                            <p class="text-gray-300">Quantidade: <span class="font-bold text-white">{{ $item->quantity }} ×</span></p>
                        </div>
                        <p class="font-semibold text-emerald-300">
                            {{ number_format($item->price * $item->quantity, 2, ',', '.') }} Kz
                        </p>
                    </div>
                @endforeach
            </div>

            <div class="space-y-3 border-t border-white/10 pt-4">
                <div class="flex justify-between text-gray-300">
                    <span>Subtotal</span>
                    <span class="font-semibold text-white">{{ number_format($total, 2, ',', '.') }} Kz</span>
                </div>
                <div class="flex justify-between text-gray-300">
                    <span>Frete</span>
                    <span class="font-semibold text-emerald-300">Grátis 🎉</span>
                </div>
            </div>

            <div class="mt-6 flex justify-between items-center bg-gradient-to-r from-emerald-500/15 to-green-500/10 p-4 rounded-xl border border-emerald-500/40">
                <span class="text-xl font-bold">Total</span>
                <span class="text-3xl font-bold text-emerald-300">
                    {{ number_format($total, 2, ',', '.') }} Kz
                </span>
            </div>

            <div class="mt-6 p-4 bg-white/5 rounded-lg border border-emerald-500/40">
                <p class="text-sm text-emerald-200">
                    <span class="font-bold text-emerald-300">✓ Pagamentos 100% seguros</span><br>
                    Seus dados são protegidos com criptografia.
                </p>
            </div>
        </div>
    </div>
</div>

<style>
    input[type="radio"]:checked + div {
        border-color: #16a34a !important;
        background-color: rgba(22, 163, 74, 0.1) !important;
    }

    label {
        transition: all 0.3s ease;
    }

    label:hover {
        transform: translateY(-2px);
    }

    button[type="submit"] {
        box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
    }

    button[type="submit"]:hover {
        box-shadow: 0 7px 25px rgba(22, 163, 74, 0.5);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const expressRadio = document.getElementById('express');
    const multicaixaRadio = document.getElementById('multicaixa');
    const bankRadio = document.getElementById('bank');
    const expressBox = document.getElementById('express-phone-box');

    function togglePhoneBox() {
        if (expressRadio.checked) {
            expressBox.classList.remove('hidden');
        } else {
            expressBox.classList.add('hidden');
        }
    }

    expressRadio.addEventListener('change', togglePhoneBox);
    multicaixaRadio.addEventListener('change', togglePhoneBox);
    bankRadio.addEventListener('change', togglePhoneBox);

    togglePhoneBox();
});
</script>
@endsection