@extends('layouts.store')
@section('title','Finalizar compra')
@section('content')<section class="container page-section"><div class="breadcrumb"><a href="{{ route('cart') }}">Mi bolsa</a><x-icon name="chevron" size="12"/><span>Finalizar compra</span></div><h1 class="page-title">Ya casi son tuyos.</h1>
@if(config('store.demo') && app()->environment('local'))<div class="notice info">Estás en una tienda de muestra. Podés crear un pedido de prueba sin realizar ningún pago.</div>@elseif(!$mpReady)<div class="notice info">Los pagos online todavía no están habilitados. Contactá a la tienda para coordinar tu compra.</div>@endif
<form method="post" action="{{ route('checkout.place') }}" data-once id="checkout-form">@csrf<input type="hidden" name="checkout_key" value="{{ session('checkout_key') }}"><div class="two-columns"><div>
<section class="form-section"><h2>01. Tus datos</h2><div class="form-grid"><label class="span-2">Nombre y apellido<input name="name" value="{{ old('name') }}" autocomplete="name" required maxlength="120"></label><label>Correo electrónico<input type="email" name="email" value="{{ old('email') }}" autocomplete="email" required></label><label>Teléfono<input name="phone" value="{{ old('phone') }}" autocomplete="tel" required maxlength="40"></label></div></section>
<section class="form-section"><h2>02. Cómo querés recibirlo</h2><label class="choice-card"><input type="radio" name="delivery" value="pickup" @checked(old('delivery','pickup')==='pickup')><span>Retiro coordinado <small>{{ $settings['pickup_address'] ?? 'A coordinar con la tienda' }} · Sin costo</small></span></label><label class="choice-card"><input type="radio" name="delivery" value="shipping" @checked(old('delivery')==='shipping')><span>Envío a domicilio<small>Tarifa @money((int)($settings['shipping_cost']??650000)). @if((int)($settings['free_shipping']??0)>0)Gratis desde @money((int)$settings['free_shipping']).@endif</small></span></label><div data-shipping-fields @if(old('delivery','pickup')!=='shipping') hidden @endif><div class="form-grid" style="margin-top:20px"><label class="span-2">Calle, número, piso y departamento<input name="address" value="{{ old('address') }}" autocomplete="street-address" maxlength="250"></label><label>Localidad<input name="city" value="{{ old('city') }}" autocomplete="address-level2"></label><label>Provincia<input name="province" value="{{ old('province') }}" autocomplete="address-level1"></label><label>Código postal<input name="postal_code" value="{{ old('postal_code') }}" autocomplete="postal-code" maxlength="15"></label></div></div></section>
<section class="form-section"><h2>03. Medio de pago</h2>@if($mpReady)<label class="choice-card"><input type="radio" name="payment_method" value="mercadopago" checked required><span>Mercado Pago<small>Continuarás al checkout de Mercado Pago para pagar.</small></span></label>@endif @if(config('store.demo') && app()->environment('local'))<label class="choice-card"><input type="radio" name="payment_method" value="demo" @checked(!$mpReady) required><span>Pedido de prueba<small>No se cobra dinero. Se confirma desde el panel de administración.</small></span></label>@endif</section>
<label>¿Algo que debamos saber? <span class="form-note">(Opcional)</span><textarea name="notes" maxlength="1000" placeholder="Indicaciones para la entrega…">{{ old('notes') }}</textarea></label>
</div><aside class="summary-card"><h2>Resumen del pedido</h2>@foreach($items as $item)<div class="summary-line"><span>{{ $item['quantity'] }} × {{ $item['variant']->product->name }}<small style="display:block;color:var(--muted)">{{ $item['variant']->color }} / {{ $item['variant']->size }}</small></span><span>@money($item['total'])</span></div>@endforeach<div class="coupon-row"><input name="coupon" value="{{ old('coupon') }}" placeholder="Código de descuento" aria-label="Código de descuento" maxlength="40"><button type="button" class="button outline small" data-quote>Aplicar</button></div><p class="form-note" id="quote-message" aria-live="polite"></p><div class="summary-line" style="margin-top:25px"><span>Subtotal</span><span>@money($items->sum('total'))</span></div><div class="summary-line"><span>Descuento</span><span id="quote-discount">$ 0</span></div><div class="summary-line"><span>Envío</span><span id="quote-shipping">Sin costo</span></div><div class="summary-line total"><span>Total</span><span id="quote-total">@money($items->sum('total'))</span></div><button class="button primary full" @disabled(!$mpReady && !(config('store.demo') && app()->environment('local')))>Confirmar pedido <x-icon name="arrow"/></button><p class="form-note">Reservaremos tus prendas durante {{ config('store.reservation_minutes') }} minutos para que completes el pago.</p></aside></div></form></section>@endsection
@push('scripts')<script>
document.addEventListener('DOMContentLoaded',()=>{
 const form=document.getElementById('checkout-form'); let seq=0;
 async function quote(){ const current=++seq; const message=document.getElementById('quote-message'); message.textContent='Calculando…';
 try { const response=await fetch(@json(route('checkout.quote')),{method:'POST',headers:{'X-CSRF-TOKEN':form.querySelector('[name=_token]').value,'Accept':'application/json','Content-Type':'application/json'},body:JSON.stringify({delivery:form.querySelector('[name=delivery]:checked').value,coupon:form.querySelector('[name=coupon]').value})}); const data=await response.json(); if(current!==seq)return;
 if(!response.ok){message.textContent=Object.values(data.errors||{}).flat().join(' ')||'No se pudo calcular. Revisá el cupón.';return;}
 ['discount','shipping','total'].forEach(key=>document.getElementById('quote-'+key).textContent=data[key]);message.textContent=data.applied?'Cupón aplicado.':'';
 }catch{if(current===seq)message.textContent='No pudimos actualizar el total. Intentá nuevamente.';}}
 form.querySelector('[data-quote]').addEventListener('click',quote);form.querySelectorAll('[name=delivery]').forEach(r=>r.addEventListener('change',quote));quote();
});
</script>@endpush