@extends('layouts.app')

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

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Formulário -->
        <div class="bg-[#0f1d36] text-white rounded-xl shadow-2xl shadow-black/30 border border-white/5 p-8">
            <!-- Comprador -->
            <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>

            <!-- Método de Pagamento -->
            <div>
                <h2 class="text-2xl font-bold mb-6">💳 Escolha o método de pagamento</h2>
                
                <form id="checkoutForm" action="{{ route('order.store') }}" method="POST">
                    @csrf
                    
                    <div class="space-y-4">
                        <!-- Multicaixa Express -->
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="multicaixa_express" class="hidden peer" id="multicaixa_express" 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-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.</p>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <!-- Multicaixa -->
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="multicaixa" class="hidden peer" id="multicaixa">
                            <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 normal.</p>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <!-- Transferência Bancária -->
                        <label class="block cursor-pointer">
                            <input type="radio" name="payment_method" value="transfer" class="hidden peer" id="transfer">
                            <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">Anexe o comprovativo da transferência.</p>
                                    </div>
                                </div>
                            </div>
                        </label>
                    </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 Pedido →
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Resumo -->
        <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
                $cart = session('cart', []);
                $total = 0;
                if(is_array($cart) && !empty($cart)) {
                    foreach($cart as $item) {
                        if(isset($item['price']) && isset($item['quantity'])) {
                            $total += $item['price'] * $item['quantity'];
                        }
                    }
                }
            @endphp

            <!-- Itens -->
            <div class="space-y-4 mb-6">
                @if(!empty($cart))
                    @foreach($cart as $item)
                    <div class="flex justify-between text-sm border-b border-white/10 pb-4">
                        <div>
                            <p class="font-semibold">{{ $item['name'] ?? 'Produto' }}</p>
                            <p class="text-gray-300">Quantidade: <span class="font-bold text-white">{{ $item['quantity'] ?? 1 }} ×</span></p>
                        </div>
                        <p class="font-semibold text-emerald-300">{{ number_format(($item['price'] ?? 0) * ($item['quantity'] ?? 1), 2, ',', '.') }} Akz</p>
                    </div>
                    @endforeach
                @else
                    <p class="text-gray-600">Seu carrinho está vazio</p>
                @endif
            </div>

            <!-- Totais -->
            <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, ',', '.') }} Akz</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>

            <!-- Total Final -->
            <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, ',', '.') }} Akz
                </span>
            </div>

            <!-- Info Segurança -->
            <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>
@endsection