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

$mblId = (int)($_GET['master_bl_id'] ?? 0);

/**
 * Preserve selected MBL for Select2
 */
$selectedMbl = null;
if ($mblId > 0) {
  $s = $db->prepare("
    SELECT id, mbl_no, vessel_name, voyage_no
    FROM master_bls
    WHERE id = ?
    LIMIT 1
  ");
  $s->execute([$mblId]);
  $selectedMbl = $s->fetch() ?: null;
}
?>

<div class="max-w-6xl">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5">
    <div>
      <div class="text-sm font-bold uppercase tracking-[0.2em] text-orange-600">Child Shipment Record</div>
      <h1 class="text-3xl font-extrabold text-ink-900">New House BL</h1>
      <div class="text-sm text-ink-500 mt-1">
        Create a standalone House BL linked to a parent shipment.
      </div>
    </div>

    <div class="flex gap-2">
      <a href="<?= h(to('/hbl' . ($mblId ? ('?master_bl_id=' . $mblId) : ''))) ?>"
         data-nav
         class="px-4 py-3 rounded-2xl border border-ink-200 bg-white hover:bg-orange-50 font-semibold">
        Back to HBL Register
      </a>

      <?php if ($mblId > 0): ?>
        <a href="<?= h(to('/shipments/view?id=' . $mblId . '&tab=hbls')) ?>"
           data-nav
           class="px-4 py-3 rounded-2xl border border-ink-200 bg-white hover:bg-orange-50 font-semibold">
          Back to Parent Shipment
        </a>
      <?php endif; ?>
    </div>
  </div>

  <div class="glass rounded-3xl p-6">
    <div class="flex items-center justify-between mb-5">
      <div>
        <div class="font-extrabold text-ink-900">HBL Details</div>
        <div class="text-sm text-ink-500 mt-1">Fill the shipment breakdown details below.</div>
      </div>

      <?php if ($selectedMbl): ?>
        <div class="text-right">
          <div class="text-xs uppercase tracking-[0.16em] text-ink-500 font-bold">Parent Shipment</div>
          <div class="mt-1 font-bold text-ink-900"><?= h($selectedMbl['mbl_no']) ?></div>
          <div class="text-xs text-ink-500">
            <?= h($selectedMbl['vessel_name'] ?: '—') ?> / <?= h($selectedMbl['voyage_no'] ?: '—') ?>
          </div>
        </div>
      <?php endif; ?>
    </div>

    <form
      class="grid grid-cols-1 md:grid-cols-6 gap-4"
      action="<?= h($basePath) ?>/api/hbl/create"
      method="post"
      data-ajax>

      <div class="md:col-span-2">
        <label class="form-label required">MBL <span class="text-red-600">*</span></label>
        <select name="master_bl_id" required class="js-mbl mt-1 w-full">
          <option value=""></option>
          <?php if ($selectedMbl): ?>
            <option value="<?= (int)$selectedMbl['id'] ?>" selected><?= h($selectedMbl['mbl_no']) ?></option>
          <?php endif; ?>
        </select>
      </div>

      <div class="md:col-span-2">
        <label class="form-label required">HBL No <span class="text-red-600">*</span></label>
        <input
          name="hbl_no"
          required
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="HBL No..." />
      </div>

      <div>
        <label class="form-label">Packages</label>
        <input
          name="packages"
          type="number"
          step="1"
          min="0"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="0" />
      </div>

      <div>
        <label class="form-label">Type</label>
        <select
          name="package_type"
          class="mt-1 w-full px-4 py-3 rounded-2xl">
          <option value=""></option>
          <option value="PALLET">PALLET</option>
          <option value="CARTONS">CARTONS</option>
          <option value="ROLLS">ROLLS</option>
          <option value="BOXES">BOXES</option>
        </select>
      </div>

      <div class="md:col-span-3">
        <label class="form-label required">Consignee <span class="text-red-600">*</span></label>
        <select name="consignee_customer_id" required class="js-customer mt-1 w-full">
          <option value=""></option>
        </select>
      </div>

      <div class="md:col-span-3">
        <div class="flex items-center justify-between">
          <label class="form-label required">Billing Party <span class="text-red-600">*</span></label>
          <button
            type="button"
            class="text-xs px-3 py-1 rounded-xl bg-ink-100 text-ink-700 hover:bg-ink-200 transition"
            onclick="copyConsigneeToBilling(this)">
            Copy from Consignee
          </button>
        </div>
        <select name="billing_party_customer_id" required class="js-customer mt-1 w-full">
          <option value=""></option>
        </select>
      </div>

      <div class="md:col-span-3">
        <div class="flex items-center justify-between">
          <label class="form-label">Notify Party</label>
          <button
            type="button"
            class="text-xs px-3 py-1 rounded-xl bg-ink-100 text-ink-700 hover:bg-ink-200 transition"
            onclick="copyConsigneeToNotify(this)">
            Copy from Consignee
          </button>
        </div>
        <select name="notify_party_customer_id" class="js-customer mt-1 w-full">
          <option value=""></option>
        </select>
      </div>

      <div class="md:col-span-1">
        <label class="form-label">Weight (kg)</label>
        <input
          name="gross_weight_kg"
          type="number"
          step="0.001"
          min="0"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="0.000" />
      </div>

      <div class="md:col-span-1">
        <label class="form-label">CBM</label>
        <input
          name="cbm"
          type="number"
          step="0.001"
          min="0"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="0.000" />
      </div>

      <div class="md:col-span-2">
        <label class="form-label">HS Code</label>
        <input
          name="hs_code"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="e.g. 9403.20" />
      </div>

      <div class="md:col-span-2">
        <label class="form-label">Manifest No.</label>
        <input
          name="manifest_no"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="Manifest No..." />
      </div>

      <div class="md:col-span-2">
        <label class="form-label">ICMS BL No</label>
        <input
          name="icms_bl_no"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="ICMS BL No..." />
      </div>

      <div class="md:col-span-3">
        <label class="form-label">CFS</label>
        <input
          name="cfs"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="Container Freight Station..." />
      </div>

      <div class="md:col-span-3">
        <label class="form-label">Marks &amp; Numbers</label>
        <input
          name="marks_numbers"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="e.g. ACME LTD / CTN 1-10 / NAIROBI" />
      </div>

      <div class="md:col-span-6">
        <label class="form-label">Goods Description</label>
        <textarea
          name="goods_description"
          rows="4"
          class="mt-1 w-full px-4 py-3 rounded-2xl"
          placeholder="Describe the cargo / goods..."></textarea>
      </div>

      <div class="md:col-span-6 flex items-center justify-end gap-3 pt-2">
        <a href="<?= h(to('/hbl' . ($mblId ? ('?master_bl_id=' . $mblId) : ''))) ?>"
           data-nav
           class="px-5 py-3 rounded-2xl border border-ink-200 bg-white hover:bg-orange-50 font-semibold">
          Cancel
        </a>

        <button class="px-5 py-3 rounded-2xl btn-primary">
          Save HBL
        </button>
      </div>
    </form>
  </div>
</div>

