<?php $this->start('body'); ?>
<?php $f = $this->data['form']; ?>

<div class="d-flex align-items-center justify-content-between mb-3">
  <h5 class="mb-0 fw-semibold"><i class="fas fa-plus me-2 text-muted"></i>New Trip Request</h5>
  <a href="<?= PROOT; ?>TripRequests" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i>Back</a>
</div>

<?= $this->raw('fb_msg'); ?>

<form method="POST" action="<?= PROOT; ?>TripRequests/save" class="card border-0 shadow-sm" autocomplete="off">
  <?= csrf_field(); ?>
  <div class="card-body">

    <h6 class="text-uppercase text-muted small mb-3">Customer &amp; Route</h6>
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label">Customer</label>
        <select name="customer_id" class="form-select">
          <option value="">— internal / no customer —</option>
          <?php foreach ($this->data['customers'] as $c): ?>
            <option value="<?= (int)$c['c0d']; ?>" <?= ($f['customer_id'] ?? '')==$c['c0d']?'selected':''; ?>>
              <?= htmlspecialchars($c['fname']); ?>
              <?php if ($c['customer_no']): ?> · <?= htmlspecialchars($c['customer_no']); ?><?php endif; ?>
            </option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-6"><label class="form-label">Route (optional)</label>
        <select name="route_id" class="form-select" id="routeSel">
          <option value="">— free-form origin/destination below —</option>
          <?php foreach ($this->data['routes'] as $r): ?>
            <option value="<?= (int)$r['c0d']; ?>"
                    data-origin="<?= htmlspecialchars($r['origin_city'] ?? ''); ?>"
                    data-destination="<?= htmlspecialchars($r['destination_city'] ?? ''); ?>"
                    <?= ($f['route_id'] ?? '')==$r['c0d']?'selected':''; ?>>
              <?= htmlspecialchars($r['name']); ?>
              <?php if ($r['distance_km']): ?> · <?= number_format((float)$r['distance_km'],0); ?> km<?php endif; ?>
            </option>
          <?php endforeach; ?>
        </select></div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Cargo</h6>
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">Cargo type</label>
        <select name="cargo_type" class="form-select">
          <?php foreach (['general'=>'General cargo','construction_materials'=>'Construction materials','bulk_liquid'=>'Bulk liquid','containerised'=>'Containerised','hazardous'=>'Hazardous','refrigerated'=>'Refrigerated','other'=>'Other'] as $k=>$v): ?>
            <option value="<?= $k; ?>" <?= ($f['cargo_type'] ?? 'general')===$k?'selected':''; ?>><?= $v; ?></option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-9"><label class="form-label">Description</label>
        <input type="text" name="cargo_description" class="form-control" value="<?= htmlspecialchars($f['cargo_description'] ?? ''); ?>" placeholder="e.g. 30 tons of Portland cement, 42 pallets"></div>

      <div class="col-md-3"><label class="form-label">Weight (kg)</label>
        <input type="text" name="weight_kg" class="form-control js-num" value="<?= htmlspecialchars((string)($f['weight_kg'] ?? '')); ?>"></div>
      <div class="col-md-3"><label class="form-label">Volume (m³)</label>
        <input type="text" name="volume_m3" class="form-control js-num" value="<?= htmlspecialchars((string)($f['volume_m3'] ?? '')); ?>"></div>
      <div class="col-md-3"><label class="form-label">Packages / units</label>
        <input type="text" name="packages_count" class="form-control js-int" value="<?= htmlspecialchars((string)($f['packages_count'] ?? '')); ?>"></div>
      <div class="col-md-3"><label class="form-label">Priority</label>
        <select name="priority" class="form-select">
          <?php foreach (['low'=>'Low','normal'=>'Normal','high'=>'High','urgent'=>'Urgent'] as $k=>$v): ?>
            <option value="<?= $k; ?>" <?= ($f['priority'] ?? 'normal')===$k?'selected':''; ?>><?= $v; ?></option>
          <?php endforeach; ?>
        </select></div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Origin &amp; Destination</h6>
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label">Pickup address</label>
        <input type="text" name="origin_address" id="originAddr" class="form-control" value="<?= htmlspecialchars($f['origin_address'] ?? ''); ?>"></div>
      <div class="col-md-6"><label class="form-label">Delivery address</label>
        <input type="text" name="destination_address" id="destAddr" class="form-control" value="<?= htmlspecialchars($f['destination_address'] ?? ''); ?>"></div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Schedule</h6>
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">Pickup date</label>
        <input type="date" name="pickup_date" class="form-control" value="<?= htmlspecialchars($f['pickup_date'] ?? ''); ?>"></div>
      <div class="col-md-3"><label class="form-label">Pickup time</label>
        <input type="time" name="pickup_time" class="form-control" value="<?= htmlspecialchars($f['pickup_time'] ?? ''); ?>"></div>
      <div class="col-md-3"><label class="form-label">Delivery date</label>
        <input type="date" name="delivery_date" class="form-control" value="<?= htmlspecialchars($f['delivery_date'] ?? ''); ?>"></div>
      <div class="col-md-3"><label class="form-label">Delivery time</label>
        <input type="time" name="delivery_time" class="form-control" value="<?= htmlspecialchars($f['delivery_time'] ?? ''); ?>"></div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Pricing &amp; Status</h6>
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">Quote amount</label>
        <input type="text" name="quote_amount" class="form-control js-money" value="<?= htmlspecialchars((string)($f['quote_amount'] ?? '')); ?>"></div>
      <div class="col-md-2"><label class="form-label">Currency</label>
        <select name="currency" class="form-select">
          <?php foreach (['TZS','USD','EUR','KES','UGX'] as $c): ?>
            <option value="<?= $c; ?>" <?= ($f['currency'] ?? 'TZS')===$c?'selected':''; ?>><?= $c; ?></option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-3"><label class="form-label">Save as</label>
        <select name="status" class="form-select">
          <option value="draft" <?= ($f['status'] ?? 'draft')==='draft'?'selected':''; ?>>Draft</option>
          <option value="pending_review" <?= ($f['status'] ?? '')==='pending_review'?'selected':''; ?>>Pending review (submit)</option>
        </select></div>
      <div class="col-md-12"><label class="form-label">Notes</label>
        <textarea name="notes" rows="2" class="form-control"><?= htmlspecialchars($f['notes'] ?? ''); ?></textarea></div>
    </div>

  </div>
  <div class="card-footer bg-white d-flex justify-content-end gap-2 py-3">
    <a href="<?= PROOT; ?>TripRequests" class="btn btn-outline-secondary">Cancel</a>
    <button class="btn btn-primary"><i class="fas fa-save me-1"></i>Create request</button>
  </div>
</form>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script>
document.querySelectorAll('.js-num').forEach(el   => new Cleave(el, { numeral: true, numeralThousandsGroupStyle: 'thousand', numeralDecimalScale: 2 }));
document.querySelectorAll('.js-int').forEach(el   => new Cleave(el, { numericOnly: true }));
document.querySelectorAll('.js-money').forEach(el => new Cleave(el, { numeral: true, numeralThousandsGroupStyle: 'thousand', numeralDecimalScale: 2 }));

// When user picks a route, auto-fill origin/destination if fields are still empty
document.getElementById('routeSel')?.addEventListener('change', function () {
    const opt   = this.options[this.selectedIndex];
    if (!opt) return;
    const oIn   = document.getElementById('originAddr');
    const dIn   = document.getElementById('destAddr');
    if (oIn && !oIn.value.trim() && opt.dataset.origin)      oIn.value = opt.dataset.origin;
    if (dIn && !dIn.value.trim() && opt.dataset.destination) dIn.value = opt.dataset.destination;
});
</script>
<?php $this->end(); ?>
