<?php
global $config;
$basePath = rtrim(($config['app']['base_path'] ?? ''), '/');
?>

<div class="max-w-3xl">
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-semibold">New Customer</h1>
    <a class="px-4 py-2 rounded-2xl bg-white/15 hover:bg-white/20 transition"
       href="<?= h($basePath) ?>/customers" data-nav>Back</a>
  </div>

  <form class="glass rounded-3xl p-6 grid md:grid-cols-2 gap-4"
        action="<?= h($basePath) ?>/api/customers/create" method="post" data-ajax>

    <div class="md:col-span-2">
      <label class="text-sm font-semibold text-slate-800">Customer Name</label>
      <input name="name" required class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div>
      <label class="text-sm font-semibold text-slate-800">Contact Person</label>
      <input name="contact_person" class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div>
      <label class="text-sm font-semibold text-slate-800">Phone</label>
      <input name="phone" class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div>
      <label class="text-sm text-white/90">Email</label>
      <input name="email" type="email" class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div>
      <label class="text-sm text-white/90">KRA PIN</label>
      <input name="kra_pin" class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div class="md:col-span-2">
      <label class="text-sm text-white/90">Address</label>
      <input name="address" class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 placeholder:text-slate-400 focus:ring-2 focus:ring-orange-300 outline-none" />
    </div>

    <div class="md:col-span-2">
      <button class="btn-primary px-5 py-3 rounded-2xl">
        Save Customer
      </button>
    </div>
  </form>
</div>