{% extends 'base.html' %}{% load static %}{% block title %}Checkout{% endblock %}{% block breadcrumb %}Checkout{% endblock %}{% block content %}
<div class="page-head"><div><h2>Checkout &amp; delivery quote</h2><p>See the print subtotal, courier charge and estimated production plus delivery timeline before placing the order.</p></div></div>
<div class="cart-grid"><section class="card card-pad"><h3>Contact, destination &amp; artwork</h3><form class="stack" action="{% url 'checkout' %}" method="post" enctype="multipart/form-data" data-artwork-preflight data-preflight-url="{% url 'artwork_preflight_preview' %}" data-ng-location data-lga-url="{% url 'nigeria_lga_options' %}" data-state-region-map="{{ state_region_map_json }}">{% csrf_token %}<input type="hidden" name="checkout_nonce" value="{{ checkout_nonce }}">{{ form.non_field_errors }}
{% for field in form %}<label class="field">{{ field.label }}{{ field }}{% if field.help_text %}<span class="muted small">{{ field.help_text }}</span>{% endif %}{% for err in field.errors %}<span class="form-error">{{ err }}</span>{% endfor %}{% if field.name == 'delivery_rate' %}<span id="delivery-quote-status" class="muted small" role="status" aria-live="polite">Choose a state to load delivery options.</span>{% endif %}{% if field.name == 'artwork' %}<button class="btn small outline" type="button" data-preflight-button>Check artwork file</button><div class="v26-preflight-feedback" data-preflight-result role="status" aria-live="polite">Choose a file and run a quick check before submitting. This preview is not saved unless you submit the order.</div>{% endif %}</label>{% endfor %}<button class="btn small outline" type="button" data-ng-capture>Capture my current map point</button><p class="small muted" data-ng-status role="status" aria-live="polite">Town and street address identify the delivery point. Capture a device location only if you choose.</p>
<div class="notice info">The delivery price and estimated days come from Genez-managed courier rate cards. Quote availability depends on the packed weights and routes configured by Genez. The order remains unpaid until you review it. The server recalculates the selected delivery price when you submit.</div><button class="btn block" type="submit">Confirm quote &amp; create order</button><p class="small muted">Need a made-to-order product? <a href="{% url 'genez_project_new' %}">Tell us your idea and request a complete project quote</a>.</p>
</form></section><aside class="card card-pad"><h3>Products in your order</h3>{% for item in items %}<div class="line-item"><div><strong>{{ item.product.name }}</strong>{% if item.design %}<p class="v5-cart-artwork">✎ Artwork: {{ item.design.title }} · Snapshot taken at checkout</p>{% endif %}<p class="small muted">{{ item.size }} · {{ item.paper }} · {{ item.qty }}</p></div><strong>₦{{ item.total|floatformat:2 }}</strong></div>{% endfor %}<div class="summary-lines"><div class="total"><span>Print subtotal</span><span>₦{{ subtotal|floatformat:2 }}</span></div><div><span>Delivery</span><strong id="delivery-fee-preview">Choose a service</strong></div><div class="total"><span>Estimated total</span><strong id="grand-total-preview">—</strong></div><div><span>Estimated production + delivery</span><strong id="journey-eta-preview">Choose a courier</strong></div></div>{% if estimated_weight %}<p class="small muted">Estimated packed weight: {{ estimated_weight }} kg</p>{% else %}<p class="small muted">No packed-weight data is set for one or more products. Flat-route tariffs can still be available.</p>{% endif %}</aside></div>
<script>
(function(){
 const state=document.getElementById('id_delivery_state'),service=document.getElementById('id_delivery_rate');
 if(!state||!service)return;
 const status=document.getElementById('delivery-quote-status'),fee=document.getElementById('delivery-fee-preview'),total=document.getElementById('grand-total-preview'),journey=document.getElementById('journey-eta-preview');
 const subtotal=Number('{{ subtotal|floatformat:2 }}');
 const productionMin={{ production_days_min|default:0 }}; const productionMax={{ production_days_max|default:0 }};
 const url='{% url "delivery_quote_options" %}';
 async function load(){
   service.innerHTML='<option value="">Loading delivery options…</option>';service.disabled=true;
   fee.textContent='—';total.textContent='—';journey.textContent='Choose a courier';
   if(!state.value){service.innerHTML='<option value="">Choose a destination state first</option>';status.textContent='Choose a state to load available services.';service.disabled=false;return;}
   try{
     const response=await fetch(url+'?state='+encodeURIComponent(state.value),{credentials:'same-origin',headers:{'Accept':'application/json'}});
     const data=await response.json();service.innerHTML='<option value="">Choose a delivery service</option>';
     for(const option of data.options){const el=document.createElement('option');el.value=option.id;el.textContent=option.carrier+' · '+option.service+' · ₦'+option.fee+' · '+option.eta_min_days+'–'+option.eta_max_days+' days (from '+option.origin_state+')';el.dataset.fee=option.fee;el.dataset.etaMin=option.eta_min_days;el.dataset.etaMax=option.eta_max_days;service.append(el);}
     status.textContent=data.message||('Packed weight used: '+(data.weight_kg||'flat rate')+' kg. Choose a courier to see the total.');
     if(!data.options.length)service.innerHTML='<option value="">No configured service for this route</option>';
   }catch(error){service.innerHTML='<option value="">Unable to load delivery rates</option>';status.textContent='Refresh the page and try again, or submit a project request for a delivery quote.';}
   service.disabled=false;
 }
 service.addEventListener('change',function(){const selected=service.options[service.selectedIndex];const amount=Number(selected.dataset.fee||0);if(amount){fee.textContent='₦'+amount.toLocaleString('en-NG',{minimumFractionDigits:2});total.textContent='₦'+(subtotal+amount).toLocaleString('en-NG',{minimumFractionDigits:2});const emin=Number(selected.dataset.etaMin||0),emax=Number(selected.dataset.etaMax||0);journey.textContent=(productionMin&&productionMax?productionMin+'–'+productionMax+' working days production + ':'')+emin+'–'+emax+' days delivery after dispatch';}});
 state.addEventListener('change',load);if(state.value)load();
})();
</script>
<script src="{% static 'fulfillment/nigeria-location.js' %}" defer></script>
{% endblock %}