<?php
global $config;

// Base path for IIS subfolder deployments (e.g. /wsc/public)
$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 text-slate-900">New Master BL</h1>

    <a class="px-4 py-2 rounded-2xl border border-orange-200 bg-white text-orange-700 hover:bg-orange-50 transition"
       href="<?= h($basePath) ?>/mbl" data-nav>
       Back
    </a>
  </div>

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

    <div class="md:col-span-2">
      <label class="form-label">MBL Number</label>
      <input name="mbl_no" required
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div>
      <label class="form-label">Shipping Line</label>
      <select name="shipping_line_id" required class="js-shipping-line mt-1 w-full">
        <option value="">Search shipping line…</option>
      </select>
    </div>

    <div>
      <label class="form-label">ETA</label>
      <input type="date" name="eta_date"
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div>
      <label class="form-label">Port of Loading (POL)</label>
      <select name="pol_port_id" required class="js-port mt-1 w-full">
        <option value="">Search port…</option>
      </select>
    </div>

    <div>
      <label class="form-label">Port of Destination (POD)</label>
      <select name="pod_port_id" required class="js-port mt-1 w-full">
        <option value="">Search port…</option>
      </select>
    </div>

    <div>
      <label class="form-label">Vessel Name</label>
      <input name="vessel_name"
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div>
      <label class="form-label">Voyage No</label>
      <input name="voyage_no"
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div>
      <label class="form-label">Container No.</label>
      <input name="container_no"
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div>
      <label class="form-label">Container Type</label>
      <select name="container_type"
              class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0">
        <option value="">Select container type…</option>
        <option value="20ft SD">20ft SD</option>
        <option value="40ft SD">40ft SD</option>
        <option value="40ft HC">40ft HC</option>
        <option value="20ft OT">20ft OT</option>
        <option value="40ft HC-OT">40ft HC-OT</option>
        <option value="20ft RF">20ft RF</option>
      </select>
    </div>

    <div>
      <label class="form-label">Seal No.</label>
      <input name="seal_no"
             class="mt-1 w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white focus:ring-0" />
    </div>

    <div class="md:col-span-2 pt-2">
      <button type="submit" class="btn-primary px-6 py-3 rounded-2xl transition">
        Save MBL
      </button>
    </div>

  </form>

</div>