@extends('layouts.app')

@section('title', 'Check out')

@section('content')
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>Secure checkout</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><a href="{{ route('cart') }}">Cart</a><i></i><span>Check out</span></nav>
  </div>
</div>

<main class="container section co-page">
  <ol class="co-steps" aria-label="Progress">
    <li class="done"><span><svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-10"/></svg></span>Cart</li>
    <li class="on"><span>2</span>Checkout</li>
    <li><span>3</span>Confirmation</li>
  </ol>

  <div id="done" class="empty" hidden>
    <h2>Thank you! Your order is placed.</h2>
    <p>Order <b id="orderNo"></b> is confirmed. A confirmation email is on its way.</p>
    <a href="{{ route('home') }}" class="btn">Continue shopping</a>
  </div>

  @guest
  <div id="loginPrompt" class="empty" hidden>
    <h2>Please log in to check out</h2>
    <p>Log in or create an account so we can save your order and delivery address.</p>
    <a class="btn" href="{{ route('login') }}">Log in</a>
    <a class="btn light" href="{{ route('register') }}">Register</a>
  </div>
  @endguest

  <div id="emptyCart" class="empty" hidden>
    <p>Your cart is empty.</p>
    <a href="{{ route('home') }}#products" class="btn">Continue shopping</a>
  </div>

  <form id="checkoutForm" class="co-grid" hidden>
    <div class="co-left">
      <div id="addrBox">
        <section class="co-card">
          <div class="co-step"><span>1</span><h3>Billing address</h3></div>
          <div class="addr-list" id="addrBilling"></div>
        </section>

        <section class="co-card">
          <div class="co-step"><span>2</span><h3>Shipping address</h3></div>
          <div class="addr-list" id="addrShipping"></div>
        </section>
      </div>

      <section class="co-card">
        <div class="co-step"><span>3</span><h3>Delivery</h3></div>
        <label class="radio"><input type="radio" name="ship" value="0" checked> <i class="rd-ic fa-solid fa-truck-fast"></i> <span>Standard delivery <small class="muted">(5-7 business days)</small></span> <b>Free</b></label>
      </section>

      <section class="co-card">
        <div class="co-step"><span>4</span><h3>Payment</h3></div>
        <label class="radio"><input type="radio" name="pay" value="razorpay" checked> <i class="rd-ic fa-solid fa-credit-card"></i> <span>Pay online <small class="muted">(UPI, cards, netbanking, wallets)</small></span> <b class="rz">Razorpay</b></label>
        <label class="radio"><input type="radio" name="pay" value="cod"> <i class="rd-ic fa-solid fa-money-bill-wave"></i> <span>Cash on delivery <small class="muted">(pay when it arrives)</small></span></label>
        <p class="co-note" id="payNote">A secure Razorpay window opens to complete the payment. Nothing is charged until you confirm there.</p>
      </section>
    </div>

    <aside class="co-right">
      <h3>Order summary</h3>
      <div id="items"></div>
      <div class="sum"><span>Subtotal</span><b id="sub"></b></div>
      <div class="sum"><span>Shipping</span><b id="shipTotal"></b></div>
      <div class="sum total"><span>Total</span><b id="total"></b></div>
      <button class="btn block"><svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="1"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>Place order</button>
      <ul class="co-trust">
        <li><svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.500 8-8 9-4.500-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>Secure, encrypted payment</li>
        <li><svg viewBox="0 0 24 24"><path d="M2 6h12v10H2z"/><path d="M14 9h4l3 3v4h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>Free delivery on every order</li>
        <li><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.300 5.700"/><path d="M20 5v5h-5"/></svg>Easy returns within {{ $company->return_days ?: 30 }} days</li>
      </ul>
    </aside>
  </form>

  @auth
  <div class="am-overlay" id="amOverlay" hidden>
    <div class="am" role="dialog" aria-modal="true" aria-labelledby="amTitle">
      <div class="am-head">
        <h3 id="amTitle">Add new address</h3>
        <button type="button" class="am-x" id="amClose" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
      </div>
      <form id="amForm" novalidate>
        <input type="hidden" name="type"><input type="hidden" name="id">
        <div class="two">
          <label class="field">First name<input name="first_name" autocomplete="given-name"><small class="ferr"></small></label>
          <label class="field">Last name<input name="last_name" autocomplete="family-name"><small class="ferr"></small></label>
        </div>
        <div class="two">
          <label class="field">Phone<input name="phone" type="tel" autocomplete="tel"><small class="ferr"></small></label>
          <label class="field">Email<input name="email" type="email" autocomplete="email"><small class="ferr"></small></label>
        </div>
        <label class="field">Address<input name="address" autocomplete="street-address"><small class="ferr"></small></label>
        <label class="field">Landmark <span class="muted">(optional)</span><input name="landmark"><small class="ferr"></small></label>
        <div class="two">
          <label class="field">City<input name="city" autocomplete="address-level2"><small class="ferr"></small></label>
          <label class="field">State
            <select name="state_id"><option value="">Select state</option>@foreach ($states as $st)<option value="{{ $st['id'] }}">{{ $st['name'] }}</option>@endforeach</select>
            <small class="ferr"></small>
          </label>
        </div>
        <div class="two">
          <label class="field">PIN code<input name="postal_code" inputmode="numeric" maxlength="6" autocomplete="postal-code"><small class="ferr"></small></label>
          <label class="field">Country<input value="India" disabled></label>
        </div>
        <div class="am-actions">
          <button type="button" class="btn light" id="amCancel">Cancel</button>
          <button class="btn" id="amSave">Save address</button>
        </div>
      </form>
    </div>
  </div>
  @endauth
</main>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var form = document.getElementById('checkoutForm');
function ship() { return parseFloat(form.ship.value); }

function render() {
  if (ORDER_DONE) return;                       // the order is placed: keep the summary empty
  var cart = Store.get('cart');
  var lp = document.getElementById('loginPrompt');
  document.getElementById('emptyCart').hidden = cart.length > 0;
  if (lp) lp.hidden = cart.length === 0;
  form.hidden = !ADDR_MODE || cart.length === 0;
  document.getElementById('items').innerHTML = cart.map(function (p, i) {
    return '<div class="line"><div class="ph p' + (i % 4 + 1) + ' thumb">' + (p.image ? '<img src="' + p.image + '" alt="">' : '') + '</div>' +
      '<div class="li"><b>' + p.name + '</b><div class="qty">' +
      '<button type="button" data-i="' + i + '" data-d="-1">&minus;</button><span>' + p.qty + '</span>' +
      '<button type="button" data-i="' + i + '" data-d="1">+</button>' +
      '</div></div>' +
      '<span>' + Store.money(p.price * p.qty) + '</span>' +
      '<button type="button" class="x-btn rm" data-i="' + i + '" aria-label="Remove ' + p.name.replace(/"/g, '&quot;') + '" title="Remove"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>';
  }).join('');
  var sub = cart.reduce(function (n, p) { return n + p.price * p.qty; }, 0);
  var s = ship();
  document.getElementById('sub').textContent = Store.money(sub);
  document.getElementById('shipTotal').textContent = s ? Store.money(s) : 'Free';
  document.getElementById('total').textContent = Store.money(sub + s);
}

document.addEventListener('click', function (e) {
  var b = e.target.closest('[data-d]'), r = e.target.closest('.rm');
  if (b) Store.changeQty(+b.dataset.i, parseInt(b.dataset.d, 10));
  else if (r) { e.preventDefault(); Store.removeCart(+r.dataset.i); }
  else return;
  render();
});
var URLS = {
  razorpay: @json(route('checkout.razorpay.order')),
  verify: @json(route('checkout.razorpay.verify')),
  cod: @json(route('checkout.cod'))
};
var placeBtn = form.querySelector('.co-right .btn');

function post(url, body) {
  return fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
    body: JSON.stringify(body)
  }).then(function (r) {
    return r.json().catch(function () { return {}; }).then(function (j) {
      if (!r.ok) throw { status: r.status, body: j };
      return j;
    });
  });
}
function firstError(err) {
  var b = err.body || {};
  if (b.errors) { var k = Object.keys(b.errors)[0]; return b.errors[k][0]; }
  if (err.status === 419) return 'Your session expired. Please refresh the page and try again.';
  if (err.status === 429) return 'Too many attempts. Please wait a minute and try again.';
  return b.message || 'Something went wrong. Please try again.';
}
function busy(on) {
  placeBtn.disabled = on;
  placeBtn.textContent = on ? 'Please wait...' : (form.pay.value === 'cod' ? 'Place order' : 'Pay now');
}
function payload() {
  var items = Store.get('cart').map(function (l) { return { name: l.name, qty: l.qty }; });
  if (ADDR_MODE) return { billing_id: chosen.Billing, shipping_id: chosen.Shipping, items: items };
  var f = form, v = function (n) { return f.elements[n].value.trim(); };
  return {
    customer: { email: v('email'), first: v('first'), last: v('last'), address: v('address'), city: v('city'), zip: v('zip'), country: v('country'), phone: v('phone') },
    items: items
  };
}
var ORDER_DONE = false;
function success(res) {
  ORDER_DONE = true;
  Store.set('cart', []); Store.refresh();
  // the order summary is emptied and hidden in place: no page reload
  ['items', 'sub', 'shipTotal', 'total'].forEach(function (id) { document.getElementById(id).innerHTML = ''; });
  form.hidden = true;
  document.getElementById('emptyCart').hidden = true;
  document.getElementById('orderNo').textContent = res.ref;
  document.getElementById('done').hidden = false;
  Store.toast('success', res.message || 'Order placed');
  window.scrollTo(0, 0);
}
function openRazorpay(r) {
  var rz = new Razorpay({
    key: r.key, amount: r.amount, currency: r.currency, name: r.name, description: r.description,
    order_id: r.order_id, prefill: r.prefill, theme: { color: '#1a1a1a' },
    modal: { ondismiss: function () { busy(false); Store.toast('info', 'Payment cancelled. Your cart is safe.'); } },
    handler: function (resp) {
      placeBtn.textContent = 'Confirming payment...';
      post(URLS.verify, resp).then(success).catch(function (err) { busy(false); Store.toast('error', firstError(err)); });
    }
  });
  rz.on('payment.failed', function (resp) { Store.toast('error', (resp.error && resp.error.description) || 'Payment failed. Please try again.'); });
  rz.open();
}

form.addEventListener('change', function (e) {
  if (e.target.name === 'ship') render();
  if (e.target.name === 'pay') {
    busy(false);
    document.getElementById('payNote').textContent = form.pay.value === 'cod'
      ? 'Pay in cash when your order is delivered.'
      : 'A secure Razorpay window opens to complete the payment. Nothing is charged until you confirm there.';
  }
});
form.onsubmit = function (e) {
  e.preventDefault();
  if (placeBtn.disabled) return;
  if (ADDR_MODE) {
    if (!chosen.Billing || !chosen.Shipping) { Store.toast('error', 'Please add your billing address and shipping address first.'); return; }
  } else if (!form.reportValidity()) return;
  busy(true);
  if (form.pay.value === 'cod') {
    post(URLS.cod, payload()).then(success).catch(function (err) { busy(false); Store.toast('error', firstError(err)); });
    return;
  }
  if (typeof Razorpay === 'undefined') { busy(false); Store.toast('error', 'The payment window could not load. Check your connection and try again.'); return; }
  post(URLS.razorpay, payload()).then(openRazorpay).catch(function (err) { busy(false); Store.toast('error', firstError(err)); });
};

// ---- saved addresses (logged-in customers): pick one Billing + one Shipping, add / edit in a pop-up
var ADDR_MODE = @json(auth()->check());
var ADDRESSES = @json($addresses);
var chosen = { Billing: null, Shipping: null };
function aesc(t) { return String(t == null ? '' : t).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }

function addrBody(a) {
  return '<div class="addr-body"><b>' + aesc(a.name) + '</b>' +
    '<p>' + aesc(a.address) + (a.landmark ? ', ' + aesc(a.landmark) : '') + ', ' + aesc(a.city) + (a.state ? ', ' + aesc(a.state) : '') + ' - ' + aesc(a.postal_code) + '</p>' +
    '<p><span>Phone : ' + aesc(a.phone) + '</span><span>Country : ' + aesc(a.country) + '</span></p></div>';
}
function drawAddresses() {
  if (!ADDR_MODE) return;
  // Billing: one address, edited in place
  var bill = ADDRESSES.filter(function (a) { return a.type === 'Billing'; })[0] || null;
  chosen.Billing = bill ? bill.id : null;
  document.getElementById('addrBilling').innerHTML = bill ?
    '<div class="addr-item on" data-id="' + bill.id + '" data-type="Billing">' + addrBody(bill) +
      '<div class="addr-act"><button type="button" class="addr-edit" data-edit="' + bill.id + '" aria-label="Edit billing address" title="Edit"><i class="fa-regular fa-pen-to-square"></i></button></div></div>' :
    '<div class="addr-empty"><p class="muted">No billing address saved yet.</p><button type="button" class="addr-edit" data-add="Billing" title="Add address" aria-label="Add billing address"><i class="fa-solid fa-plus"></i></button></div>';

  // Shipping: any number of addresses, pick the one to deliver to
  var ships = ADDRESSES.filter(function (a) { return a.type === 'Shipping'; });
  if (!ships.some(function (a) { return a.id === chosen.Shipping; })) chosen.Shipping = ships.length ? ships[0].id : null;
  document.getElementById('addrShipping').innerHTML = ships.map(function (a) {
    return '<div class="addr-item pick' + (a.id === chosen.Shipping ? ' on' : '') + '" data-id="' + a.id + '" data-type="Shipping" tabindex="0" role="radio" aria-checked="' + (a.id === chosen.Shipping) + '">' +
      '<span class="addr-check"></span>' + addrBody(a) +
      '<div class="addr-act"><button type="button" class="addr-edit" data-edit="' + a.id + '" aria-label="Edit address" title="Edit"><i class="fa-regular fa-pen-to-square"></i></button>' +
      '<button type="button" class="addr-edit" data-del="' + a.id + '" aria-label="Delete address" title="Delete"><i class="fa-regular fa-trash-can"></i></button></div></div>';
  }).join('') +
    '<button type="button" class="addr-new" data-add="Shipping"><i class="fa-solid fa-plus"></i> Add new shipping address</button>';
}

var am = document.getElementById('amOverlay'), amForm = document.getElementById('amForm');
function openModal(type, addr) {
  amForm.reset();
  amForm.querySelectorAll('.ferr').forEach(function (x) { x.textContent = ''; });
  amForm.querySelectorAll('.invalid').forEach(function (x) { x.classList.remove('invalid'); });
  amForm.elements.type.value = type;
  amForm.elements.id.value = addr ? addr.id : '';
  document.getElementById('amTitle').textContent = (addr ? 'Edit ' : 'Add new ') + type.toLowerCase() + ' address';
  if (addr) ['first_name', 'last_name', 'phone', 'email', 'address', 'landmark', 'city', 'state_id', 'postal_code'].forEach(function (n) { amForm.elements[n].value = addr[n] == null ? '' : addr[n]; });
  else if (AUTH) amForm.elements.email.value = AUTH.email || '';
  am.hidden = false;
  document.body.classList.add('cd-lock');
  amForm.elements.first_name.focus();
}
function closeModal() { am.hidden = true; document.body.classList.remove('cd-lock'); }

if (ADDR_MODE) {
  document.getElementById('addrBox').addEventListener('click', function (e) {
    var add = e.target.closest('[data-add]'), edit = e.target.closest('[data-edit]'), del = e.target.closest('[data-del]'), item = e.target.closest('.addr-item');
    if (add) { openModal(add.dataset.add, null); return; }
    if (edit) { openModal(edit.closest('.addr-item').dataset.type, ADDRESSES.filter(function (a) { return a.id === +edit.dataset.edit; })[0]); return; }
    if (del) {
      if (!confirm('Delete this address?')) return;
      fetch(@json(url('/account/addresses')) + '/' + del.dataset.del, { method: 'DELETE', headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content } })
        .then(function (r) { return r.json().then(function (j) { if (!r.ok) throw j; return j; }); })
        .then(function (res) { ADDRESSES = res.addresses; drawAddresses(); Store.toast('success', res.message); })
        .catch(function () { Store.toast('error', 'Could not delete the address. Please try again.'); });
      return;
    }
    if (item && item.classList.contains('pick')) { chosen.Shipping = +item.dataset.id; drawAddresses(); }
  });
  document.getElementById('addrBox').addEventListener('keydown', function (e) {
    var item = e.target.closest('.addr-item.pick');
    if (item && (e.key === 'Enter' || e.key === ' ') && e.target === item) { e.preventDefault(); chosen.Shipping = +item.dataset.id; drawAddresses(); }
  });
  document.getElementById('amClose').onclick = closeModal;
  document.getElementById('amCancel').onclick = closeModal;
  am.addEventListener('click', function (e) { if (e.target === am) closeModal(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !am.hidden) closeModal(); });

  amForm.onsubmit = function (e) {
    e.preventDefault();
    var saveBtn = document.getElementById('amSave'), id = amForm.elements.id.value;
    var body = {};
    ['type', 'first_name', 'last_name', 'phone', 'email', 'address', 'landmark', 'city', 'state_id', 'postal_code'].forEach(function (n) { body[n] = amForm.elements[n].value.trim(); });
    amForm.querySelectorAll('.ferr').forEach(function (x) { x.textContent = ''; });
    amForm.querySelectorAll('.invalid').forEach(function (x) { x.classList.remove('invalid'); });
    saveBtn.disabled = true; saveBtn.textContent = 'Saving...';
    fetch(@json(url('/account/addresses')) + (id ? '/' + id : ''), {
      method: id ? 'PUT' : 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
      body: JSON.stringify(body)
    }).then(function (r) {
      return r.json().catch(function () { return {}; }).then(function (j) { if (!r.ok) throw { status: r.status, body: j }; return j; });
    }).then(function (res) {
      ADDRESSES = res.addresses;
      chosen[body.type] = res.id;
      drawAddresses();
      closeModal();
      Store.toast('success', res.message);
    }).catch(function (err) {
      var errs = (err.body && err.body.errors) || null, first = null;
      if (errs) Object.keys(errs).forEach(function (k) {
        var input = amForm.elements[k];
        if (input && input.closest('.field')) { input.classList.add('invalid'); input.closest('.field').querySelector('.ferr').textContent = errs[k][0]; }
        if (first === null) first = errs[k][0];
      });
      Store.toast('error', first || (err.status === 419 ? 'Your session expired. Please refresh the page.' : 'Could not save the address. Please try again.'));
    }).then(function () { saveBtn.disabled = false; saveBtn.textContent = 'Save address'; });
  };
  drawAddresses();
}
busy(false);
if (AUTH && form.elements.email) form.email.value = AUTH.email;
render();
document.addEventListener('cart:changed', render);
</script>
@endpush