<?php $pageTitle = 'New Calibration Request'; include __DIR__ . '/header.php'; ?>

<div class="page-header">
  <div>
    <div class="page-title"><i class="bi bi-plus-circle me-2"></i>New Calibration Request</div>
    <div class="page-subtitle">Initiate a new calibration or testing request</div>
  </div>
  <a href="<?= APP_URL ?>/index.php?page=requests" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back</a>
</div>

<div class="row">
  <div class="col-lg-8">
    <form method="POST">
      <input type="hidden" name="csrf_token" value="<?= csrfToken() ?>">

      <!-- Company & Equipment -->
      <div class="form-section">
        <div class="form-section-title"><i class="bi bi-briefcase me-2"></i>Company &amp; Equipment</div>
        <div class="row g-3">
          <div class="col-md-12">
            <label class="form-label">Company <span class="text-danger">*</span></label>
            <select name="company_id" id="company_id" class="form-select" required>
              <option value="">Select company...</option>
              <?php foreach ($companies as $co): ?>
                <option value="<?= $co['company_id'] ?>"><?= e($co['company_name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-12">
            <label class="form-label">Equipment <span class="text-danger">*</span></label>
            <select name="equipment_id" id="equipment_id" class="form-select" required>
              <option value="">— select company first —</option>
            </select>
            <div class="form-text">Equipment list will load after selecting a company.</div>
          </div>
          <div class="col-md-12">
            <label class="form-label">Contact Person <small class="text-muted">(optional)</small></label>
            <select name="contact_id" id="contact_id" class="form-select">
              <option value="">— select company first —</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Laboratory -->
      <div class="form-section">
        <div class="form-section-title"><i class="bi bi-building me-2"></i>Laboratory Assignment</div>
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label">Laboratory <span class="text-danger">*</span></label>
            <select name="lab_id" class="form-select" required>
              <option value="">Select laboratory...</option>
              <?php foreach ($labs as $lab): ?>
                <option value="<?= $lab['lab_id'] ?>"><?= e($lab['lab_name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label">Priority</label>
            <select name="priority" class="form-select">
              <option value="normal">Normal</option>
              <option value="urgent">Urgent</option>
            </select>
          </div>
          <div class="col-md-6">
            <label class="form-label">Request Date <span class="text-danger">*</span></label>
            <input type="date" name="request_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
          </div>
        </div>
      </div>

      <!-- Notes -->
      <div class="form-section">
        <div class="form-section-title"><i class="bi bi-chat-text me-2"></i>Additional Notes</div>
        <textarea name="notes" class="form-control" rows="3" placeholder="Any special instructions or remarks..."></textarea>
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary btn-lg">
          <i class="bi bi-send me-2"></i>Submit Request
        </button>
        <a href="<?= APP_URL ?>/index.php?page=requests" class="btn btn-outline-secondary btn-lg">Cancel</a>
      </div>
    </form>
  </div>

  <!-- Help panel -->
  <div class="col-lg-4">
    <div class="card border-0 bg-light">
      <div class="card-body">
        <h6 class="fw-bold text-primary"><i class="bi bi-info-circle me-2"></i>How It Works</h6>
        <ol class="small text-muted ps-3 mb-0">
          <li class="mb-2">Select the <strong>company</strong> whose equipment needs calibration.</li>
          <li class="mb-2">Choose the specific <strong>equipment</strong> item.</li>
          <li class="mb-2">Assign to the appropriate <strong>laboratory</strong>.</li>
          <li class="mb-2">Submit — the lab officer will process and complete the work form.</li>
          <li>A <strong>certificate</strong> (PDF &amp; XML) is generated upon completion.</li>
        </ol>
      </div>
    </div>

    <div class="card mt-3 border-0 bg-light">
      <div class="card-body">
        <h6 class="fw-bold text-primary"><i class="bi bi-building me-2"></i>Available Laboratories</h6>
        <ul class="small text-muted ps-3 mb-0">
          <?php foreach ($labs as $lab): ?>
            <li><?= e($lab['lab_name']) ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
// AJAX load equipment and contacts by company
document.getElementById('company_id').addEventListener('change', function () {
  const cid = this.value;
  const equipSel   = document.getElementById('equipment_id');
  const contactSel = document.getElementById('contact_id');

  equipSel.innerHTML   = '<option value="">Loading...</option>';
  contactSel.innerHTML = '<option value="">Loading...</option>';

  if (!cid) {
    equipSel.innerHTML   = '<option value="">— select company first —</option>';
    contactSel.innerHTML = '<option value="">— select company first —</option>';
    return;
  }

  // Load equipment
  fetch(`<?= APP_URL ?>/ajax.php?action=equipment&company_id=${cid}`)
    .then(r => r.json()).then(data => {
      equipSel.innerHTML = '<option value="">Select equipment...</option>';
      if (!data.length) {
        equipSel.innerHTML = '<option value="">No equipment found for this company</option>';
        return;
      }
      data.forEach(e => {
        equipSel.innerHTML += `<option value="${e.equipment_id}">${e.equipment_name} — ${e.serial_number || 'no serial'}</option>`;
      });
    }).catch(() => { equipSel.innerHTML = '<option value="">Error loading equipment</option>'; });

  // Load contacts
  fetch(`<?= APP_URL ?>/ajax.php?action=contacts&company_id=${cid}`)
    .then(r => r.json()).then(data => {
      contactSel.innerHTML = '<option value="">None (optional)</option>';
      data.forEach(c => {
        contactSel.innerHTML += `<option value="${c.contact_id}">${c.contact_name}${c.position ? ' — ' + c.position : ''}</option>`;
      });
    }).catch(() => { contactSel.innerHTML = '<option value="">Error loading contacts</option>'; });
});
</script>

<?php include __DIR__ . '/footer.php'; ?>
