{% extends "scm/base.html" %}
{% block content %}
<div class="container-fluid tender-page">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
    <div><h3 class="mb-1">Create Tender</h3><div class="text-muted">Tender Header</div></div>
    <a class="btn btn-secondary" href="{% url 'tender_list' %}">Back to Tender Register</a>
  </div>
  <form method="post">{% csrf_token %}
    <section class="tender-panel mb-4"><div class="panel-heading">1. Tender Header</div><div class="panel-body"><div class="row g-3">
      <div class="col-md-3"><label class="form-label">Tender No.</label><input class="form-control" value="Generated on save" readonly></div>
      <div class="col-md-3"><label class="form-label">Tender Date</label><input class="form-control" value="{{ tender_date|date:'d-m-Y' }}" readonly></div>
      <div class="col-md-6"><label class="form-label">PR No. *</label><select class="form-select" id="pr_id" name="pr_id" required><option value="">Select approved PR...</option>{% for pr in approved_prs %}<option value="{{ pr.id }}" data-title="{{ pr.pr_title|escape }}" data-department="{{ pr.department|escape }}" data-requester="{{ pr.requester|escape }}">{{ pr.pr_no }} — {{ pr.pr_title }}</option>{% endfor %}</select></div>
      <div class="col-md-6"><label class="form-label">Tender / PR Title</label><input id="pr_title" class="form-control" readonly></div>
      <div class="col-md-3"><label class="form-label">Department</label><input id="department" class="form-control" readonly></div>
      <div class="col-md-3"><label class="form-label">Requester</label><input id="requester" class="form-control" readonly></div>
      <div class="col-md-3"><label class="form-label">SCM User</label><input class="form-control" value="{{ current_scm_user }}" readonly></div>
      <div class="col-md-3"><label class="form-label">Status</label><input class="form-control" value="BIDDING" readonly></div>
      <div class="col-12"><label class="form-label">Tender Remarks</label><textarea class="form-control" name="tender_remarks" rows="2"></textarea></div>
    </div></div></section>
    <div class="d-flex gap-2"><button class="btn btn-primary" type="submit">Create Tender</button><a class="btn btn-outline-secondary" href="{% url 'tender_list' %}">Cancel</a></div>
  </form>
</div>
<style>
.tender-page{padding-bottom:24px}.tender-panel{background:#dee2e6;border-radius:7px;padding:10px}.panel-heading{font-size:18px;font-weight:600;padding:8px 14px 12px;color:#17212b}.panel-body{background:#fff;border-radius:4px;padding:18px}.form-label{font-weight:600}
</style>
<script>
(function(){const s=document.getElementById('pr_id');function fill(){const o=s.options[s.selectedIndex];document.getElementById('pr_title').value=s.value?o.dataset.title:'';document.getElementById('department').value=s.value?o.dataset.department:'';document.getElementById('requester').value=s.value?o.dataset.requester:'';}s.addEventListener('change',fill);fill();})();
</script>
{% endblock %}