<?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>Add Driver</h5>
  <a href="<?= PROOT; ?>Drivers" 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; ?>Drivers/save" class="card border-0 shadow-sm" autocomplete="off" enctype="multipart/form-data">
  <?= csrf_field(); ?>
  <div class="card-body">

    <h6 class="text-uppercase text-muted small mb-3">Identity</h6>

    <div class="row g-3 mb-1">

      <!-- Portrait upload with live preview -->
      <div class="col-md-3">
        <label class="form-label">Photo</label>
        <div class="border rounded p-2 text-center d-flex align-items-center justify-content-center"
             style="aspect-ratio:3/4; background:#F5F7FB; overflow:hidden;">
          <img id="photoPreview" alt="" style="display:none; max-width:100%; max-height:100%; object-fit:cover;">
          <div id="photoPlaceholder" class="text-muted small">Portrait &middot; 3:4 crop</div>
        </div>
        <input type="file" name="photo" id="photoInput" accept="image/jpeg,image/png,image/webp" class="form-control form-control-sm mt-2">
        <div class="form-text small">JPG / PNG / WEBP &middot; used on the Staff&nbsp;ID card.</div>
      </div>

      <!-- Identity fields -->
      <div class="col-md-9">
        <div class="row g-3">
          <div class="col-md-6"><label class="form-label">Full name <span class="text-danger">*</span></label>
            <input type="text" name="full_name" class="form-control" required value="<?= htmlspecialchars($f['full_name'] ?? ''); ?>"></div>
          <div class="col-md-3"><label class="form-label">Employee #</label>
            <input type="text" name="employee_no" class="form-control" value="<?= htmlspecialchars($f['employee_no'] ?? ''); ?>"></div>
          <div class="col-md-3"><label class="form-label">Gender</label>
            <select name="gender" class="form-select">
              <option value="">—</option>
              <?php foreach (['male'=>'Male','female'=>'Female','other'=>'Other'] as $k=>$v): ?>
                <option value="<?= $k; ?>" <?= ($f['gender'] ?? '')===$k?'selected':''; ?>><?= $v; ?></option>
              <?php endforeach; ?>
            </select></div>

          <div class="col-md-4"><label class="form-label">National ID (NIDA)</label>
            <input type="text" name="id_no" class="form-control" value="<?= htmlspecialchars($f['id_no'] ?? ''); ?>"></div>
          <div class="col-md-3"><label class="form-label">DOB</label>
            <input type="date" name="dob" class="form-control" value="<?= htmlspecialchars($f['dob'] ?? ''); ?>"></div>
          <div class="col-md-2">
            <label class="form-label">Blood group</label>
            <select name="blood_group" class="form-select">
              <option value="">—</option>
              <?php foreach (['O+','O-','A+','A-','B+','B-','AB+','AB-'] as $bg): ?>
                <option value="<?= $bg; ?>" <?= ($f['blood_group'] ?? '')===$bg?'selected':''; ?>><?= $bg; ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-3"><label class="form-label">Phone 1</label>
            <input type="text" name="phone_1" class="form-control" value="<?= htmlspecialchars($f['phone_1'] ?? ''); ?>"></div>

          <div class="col-md-3"><label class="form-label">Phone 2</label>
            <input type="text" name="phone_2" class="form-control" value="<?= htmlspecialchars($f['phone_2'] ?? ''); ?>"></div>
          <div class="col-md-5"><label class="form-label">Email</label>
            <input type="email" name="email" class="form-control" value="<?= htmlspecialchars($f['email'] ?? ''); ?>"></div>
          <div class="col-md-4"><label class="form-label">City</label>
            <input type="text" name="city" class="form-control" value="<?= htmlspecialchars($f['city'] ?? ''); ?>"></div>

          <div class="col-md-8"><label class="form-label">Address</label>
            <input type="text" name="address" class="form-control" value="<?= htmlspecialchars($f['address'] ?? ''); ?>"></div>
          <div class="col-md-4"><label class="form-label">Country</label>
            <input type="text" name="country" class="form-control" value="<?= htmlspecialchars($f['country'] ?? 'TANZANIA'); ?>"></div>
        </div>
      </div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Licence</h6>
    <div class="row g-3">
      <div class="col-md-4"><label class="form-label">Licence no</label><input type="text" name="licence_no" class="form-control" value="<?= htmlspecialchars($f['licence_no'] ?? ''); ?>"></div>
      <div class="col-md-3"><label class="form-label">Class</label>
        <select name="licence_class" class="form-select">
          <option value="">—</option>
          <?php foreach (['A','B','C','C1','D','DE','BCE'] as $c): ?>
            <option value="<?= $c; ?>" <?= ($f['licence_class'] ?? '')===$c?'selected':''; ?>><?= $c; ?></option>
          <?php endforeach; ?>
        </select></div>
      <div class="col-md-3"><label class="form-label">Expires</label><input type="date" name="licence_expires" class="form-control" value="<?= htmlspecialchars($f['licence_expires'] ?? ''); ?>"></div>
      <div class="col-md-2">
        <label class="form-label">Status</label>
        <select name="status" class="form-select">
          <?php foreach (['available'=>'Available','on_trip'=>'On trip','on_leave'=>'On leave','suspended'=>'Suspended','terminated'=>'Terminated'] as $k=>$v): ?>
            <option value="<?= $k; ?>" <?= ($f['status'] ?? 'available')===$k?'selected':''; ?>><?= $v; ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>

    <hr class="my-4">
    <h6 class="text-uppercase text-muted small mb-3">Employment &amp; Next of Kin</h6>
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">Hire date</label><input type="date" name="hire_date" class="form-control" value="<?= htmlspecialchars($f['hire_date'] ?? ''); ?>"></div>
      <div class="col-md-4"><label class="form-label">Next of kin</label><input type="text" name="next_of_kin_name" class="form-control" value="<?= htmlspecialchars($f['next_of_kin_name'] ?? ''); ?>"></div>
      <div class="col-md-3"><label class="form-label">Next of kin phone</label><input type="text" name="next_of_kin_phone" class="form-control" value="<?= htmlspecialchars($f['next_of_kin_phone'] ?? ''); ?>"></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; ?>Drivers" class="btn btn-outline-secondary">Cancel</a>
    <button class="btn btn-primary"><i class="fas fa-save me-1"></i>Save driver</button>
  </div>
</form>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script>
document.getElementById('photoInput')?.addEventListener('change', function() {
    const f = this.files && this.files[0];
    if (!f) return;
    const url = URL.createObjectURL(f);
    const img = document.getElementById('photoPreview');
    const ph  = document.getElementById('photoPlaceholder');
    img.src = url; img.style.display = 'block';
    if (ph) ph.style.display = 'none';
});
</script>
<?php $this->end(); ?>
