@extends('layouts.shop')

@section('title', 'Checkout - O Rei dos Queijos')

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-10 md:py-12">
    <span class="section-label">Checkout</span>
    <h1 class="section-title mb-8">Finalizar Encomenda</h1>

    <form action="{{ route('checkout.store') }}" method="POST" id="checkout-form" class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
        @csrf

        <div class="lg:col-span-2 space-y-5">
            <div class="card p-6">
                <h2 class="font-semibold text-ink mb-4 flex items-center gap-2">
                    <span class="w-6 h-6 rounded-full bg-gold-light text-gold-dark text-xs flex items-center justify-center font-bold">1</span>
                    Dados do Cliente
                </h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="form-label">Nome completo *</label>
                        <input type="text" name="customer_name" value="{{ old('customer_name') }}" required class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Email *</label>
                        <input type="email" name="customer_email" value="{{ old('customer_email') }}" required class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Telefone *</label>
                        <input type="tel" name="customer_phone" value="{{ old('customer_phone') }}" required class="form-input">
                    </div>
                    <div>
                        <label class="form-label">NIF (opcional)</label>
                        <input type="text" name="customer_nif" value="{{ old('customer_nif') }}" class="form-input">
                    </div>
                </div>
            </div>

            <div class="card p-6">
                <h2 class="font-semibold text-ink mb-4 flex items-center gap-2">
                    <span class="w-6 h-6 rounded-full bg-gold-light text-gold-dark text-xs flex items-center justify-center font-bold">2</span>
                    Método de Entrega
                </h2>
                <div class="space-y-3">
                    <label class="flex items-start gap-3 p-4 border border-stone-200 rounded-xl cursor-pointer hover:border-gold hover:bg-gold-light/30 transition has-[:checked]:border-gold has-[:checked]:bg-gold-light/40">
                        <input type="radio" name="shipping_method" value="delivery" checked class="shipping-method mt-1 accent-amber-600">
                        <div>
                            <span class="font-medium text-ink">Entrega ao domicílio</span>
                            @if($settings->free_shipping_threshold)
                                <p class="text-sm text-stone-500 mt-0.5">Portes grátis a partir de {{ number_format($settings->free_shipping_threshold, 2, ',', '.') }} €</p>
                            @endif
                        </div>
                    </label>
                    <label class="flex items-start gap-3 p-4 border border-stone-200 rounded-xl cursor-pointer hover:border-gold hover:bg-gold-light/30 transition has-[:checked]:border-gold has-[:checked]:bg-gold-light/40">
                        <input type="radio" name="shipping_method" value="pickup" class="shipping-method mt-1 accent-amber-600">
                        <div>
                            <span class="font-medium text-ink">Levantamento na loja</span>
                            <p class="text-sm text-stone-500 mt-0.5">Sem custos de envio</p>
                        </div>
                    </label>
                </div>

                <div id="delivery-fields" class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="sm:col-span-2">
                        <label class="form-label">Morada *</label>
                        <input type="text" name="address" value="{{ old('address') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Cidade *</label>
                        <input type="text" name="city" value="{{ old('city') }}" class="form-input">
                    </div>
                    <div>
                        <label class="form-label">Código Postal *</label>
                        <input type="text" name="postal_code" id="postal_code" value="{{ old('postal_code') }}" class="form-input">
                    </div>
                </div>
            </div>

            <div class="card p-6">
                <h2 class="font-semibold text-ink mb-4 flex items-center gap-2">
                    <span class="w-6 h-6 rounded-full bg-gold-light text-gold-dark text-xs flex items-center justify-center font-bold">3</span>
                    Método de Pagamento
                </h2>
                <div class="space-y-3">
                    @foreach(['mbway' => 'MB WAY', 'multibanco' => 'Referência Multibanco', 'stripe' => 'Cartão de Crédito (Stripe)'] as $value => $label)
                        <label class="flex items-center gap-3 p-4 border border-stone-200 rounded-xl cursor-pointer hover:border-gold transition has-[:checked]:border-gold has-[:checked]:bg-gold-light/40">
                            <input type="radio" name="payment_method" value="{{ $value }}" {{ $value === 'mbway' ? 'checked' : '' }} class="accent-amber-600">
                            <span class="font-medium text-ink">{{ $label }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="card p-6">
                <label class="form-label">Notas (opcional)</label>
                <textarea name="notes" rows="3" class="form-input resize-none">{{ old('notes') }}</textarea>
            </div>
        </div>

        <div class="lg:col-span-1">
            <div class="card p-6 sticky top-24">
                <h2 class="font-semibold text-ink mb-4">Resumo</h2>
                <ul class="space-y-2.5 text-sm text-stone-600 mb-4">
                    @foreach($items as $item)
                        <li class="flex justify-between gap-2">
                            <span class="truncate">{{ $item['name'] }} × {{ $item['quantity'] }}{{ $item['unit_type'] === 'kg' ? 'kg' : '' }}</span>
                            <span class="font-medium text-ink shrink-0">{{ number_format($item['line_total'], 2, ',', '.') }} €</span>
                        </li>
                    @endforeach
                </ul>
                <hr class="border-stone-100 my-4">
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between text-stone-600">
                        <span>Subtotal</span>
                        <span id="subtotal" class="font-medium text-ink">{{ number_format($subtotal, 2, ',', '.') }} €</span>
                    </div>
                    <div class="flex justify-between text-stone-600">
                        <span>Portes (<span id="shipping-label">a calcular</span>)</span>
                        <span id="shipping-cost" class="font-medium text-ink">-</span>
                    </div>
                </div>
                <hr class="border-stone-100 my-4">
                <div class="flex justify-between font-bold text-lg text-ink">
                    <span>Total</span>
                    <span id="total">{{ number_format($subtotal, 2, ',', '.') }} €</span>
                </div>
                <button type="submit" class="btn btn-primary w-full mt-6">Confirmar Encomenda</button>
            </div>
        </div>
    </form>
</div>

<script>
const subtotal = {{ $subtotal }};
const csrf = '{{ csrf_token() }}';

function calcShipping() {
    const method = document.querySelector('input[name="shipping_method"]:checked')?.value;
    const postalCode = document.getElementById('postal_code')?.value || '';
    document.getElementById('delivery-fields').style.display = method === 'pickup' ? 'none' : 'grid';

    fetch('{{ route('checkout.shipping') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        body: JSON.stringify({ shipping_method: method, postal_code: postalCode })
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('shipping-label').textContent = data.label;
        document.getElementById('shipping-cost').textContent = data.shipping_cost.toFixed(2).replace('.', ',') + ' €';
        document.getElementById('total').textContent = data.total.toFixed(2).replace('.', ',') + ' €';
    });
}

document.querySelectorAll('.shipping-method').forEach(el => el.addEventListener('change', calcShipping));
document.getElementById('postal_code')?.addEventListener('blur', calcShipping);
calcShipping();
</script>
@endsection