<?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>Report Fault</h5>
  <a href="<?= PROOT; ?>WorkRequests" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i>Back</a>
</div>

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

<div class="alert alert-info small">
  <i class="fas fa-info-circle me-1"></i>
  Report a fault that needs the workshop. After you save, you can list the parts/services needed and submit to Ops Manager for approval → Procurement sources → Fleet Manager creates a Work Order.
</div>

<form method="POST" action="<?= PROOT; ?>WorkRequests/save" class="card border-0 shadow-sm" autocomplete="off">
  <?= csrf_field(); ?>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label">Truck <span class="text-danger">*</span></label>
        <select name="truck_id" id="truckSel" class="form-select" required>
          <option value="">— select truck —</option>
          <?php foreach ($this->data['trucks'] as $t): ?>
            <option value="<?= (int)$t['c0d']; ?>" data-odo="<?= (int)$t['current_odometer']; ?>" <?= ($f['truck_id'] ?? '')==$t['c0d']?'selected':''; ?>>
              <?= htmlspecialchars($t['reg_no']); ?><?php if ($t['make']): ?> · <?= htmlspecialchars(trim($t['make'] . ' ' . $t['model'])); ?><?php endif; ?>
            </option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-6"><label class="form-label">Reported by (driver)</label>
        <select name="driver_id" class="form-select">
          <option value="">— none —</option>
          <?php foreach ($this->data['drivers'] as $d): ?>
            <option value="<?= (int)$d['c0d']; ?>" <?= ($f['driver_id'] ?? '')==$d['c0d']?'selected':''; ?>>
              <?= htmlspecialchars($d['full_name']); ?><?php if ($d['employee_no']): ?> · <?= htmlspecialchars($d['employee_no']); ?><?php endif; ?>
            </option>
          <?php endforeach; ?>
        </select></div>

      <div class="col-md-3"><label class="form-label">Urgency <span class="text-danger">*</span></label>
        <select name="urgency" class="form-select" required>
          <?php foreach (['low'=>'Low — cosmetic','normal'=>'Normal — schedule','high'=>'High — this week','breakdown'=>'Breakdown — truck off-road'] as $k=>$v): ?>
            <option value="<?= $k; ?>" <?= ($f['urgency'] ?? 'normal')===$k?'selected':''; ?>><?= $v; ?></option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-3"><label class="form-label">Truck odometer at fault (km)</label>
        <input type="text" name="truck_odometer" id="odoInput" class="form-control js-int" value="<?= htmlspecialchars((string)($f['truck_odometer'] ?? '')); ?>"></div>
      <div class="col-md-6"><label class="form-label">Fault location</label>
        <input type="text" name="fault_location" class="form-control" value="<?= htmlspecialchars($f['fault_location'] ?? ''); ?>" placeholder="e.g. On Chalinze route · at Twiga plant · in workshop"></div>

      <div class="col-12"><label class="form-label">Symptom / description <span class="text-danger">*</span></label>
        <textarea name="symptom" rows="4" class="form-control" required placeholder="e.g. Battery is completely dead. Truck won't start. Noticed dim lights for the last two days."><?= htmlspecialchars($f['symptom'] ?? ''); ?></textarea></div>
    </div>

    <hr class="my-4">
    <div class="row g-3">
      <div class="col-md-4"><label class="form-label">Save as</label>
        <select name="status" class="form-select">
          <option value="draft"     <?= ($f['status'] ?? 'draft')==='draft'    ?'selected':''; ?>>Draft (add parts/items first)</option>
          <option value="submitted" <?= ($f['status'] ?? '')==='submitted' ?'selected':''; ?>>Submitted (send to Ops Manager now)</option>
        </select></div>
    </div>
  </div>
  <div class="card-footer bg-white d-flex justify-content-end gap-2 py-3">
    <a href="<?= PROOT; ?>WorkRequests" class="btn btn-outline-secondary">Cancel</a>
    <button class="btn btn-primary"><i class="fas fa-save me-1"></i>Save request</button>
  </div>
</form>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script>
document.querySelectorAll('.js-int').forEach(el => new Cleave(el, { numeral: true, numeralThousandsGroupStyle: 'thousand', numeralDecimalScale: 0 }));
// Auto-fill odometer with truck's current when truck selected
document.getElementById('truckSel')?.addEventListener('change', function() {
    const opt = this.options[this.selectedIndex]; if (!opt || !opt.value) return;
    const odo = opt.getAttribute('data-odo');
    const odoIn = document.getElementById('odoInput');
    if (odo && odoIn && !odoIn.value.trim()) odoIn.value = odo;
});
</script>
<?php $this->end(); ?>
