{% 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">Tender {{ tender.tender_no }}</h3><div class="text-muted">PR {{ tender.pr.pr_no }} — {{ tender.pr.pr_title }}</div></div>
    <a class="btn btn-secondary" href="{% url 'tender_list' %}">Tender Register</a>
  </div>
  <div class="tender-panel mb-4"><div class="panel-heading">Tender Summary</div><div class="panel-body"><div class="row g-3">
    <div class="col-md-3"><strong>Status</strong><div>{{ tender.status }}</div></div><div class="col-md-3"><strong>Initiated By</strong><div>{{ tender.initiated_by }}</div></div><div class="col-md-3"><strong>Initiated At</strong><div>{{ tender.initiated_at|date:"d-m-Y H:i" }}</div></div><div class="col-md-3"><strong>Department</strong><div>{{ tender.pr.department }}</div></div>
  </div></div></div>

  {% if tender.status == "BIDDING" or tender.status == "EVALUATION" %}
  <div class="tender-panel mb-4"><div class="panel-heading">Vendor Bidding — {% if edit_bid %}Edit Quotation{% else %}Add Quotation{% endif %}</div><div class="panel-body">
    <form method="post">{% csrf_token %}<input type="hidden" name="action" value="save_bid"><input type="hidden" name="bid_id" value="{% if edit_bid %}{{ edit_bid.id }}{% endif %}">
      <div class="row g-3 mb-3"><div class="col-md-6"><label class="form-label">Vendor *</label><select class="form-select" name="vendor_code" required><option value="">Select vendor...</option>{% for v in vendors %}<option value="{{ v.vendorcode }}" {% if edit_bid and edit_bid.vendor_code == v.vendorcode %}selected{% endif %}>{{ v.vendorcode }} — {{ v.vendorname }}</option>{% endfor %}</select></div>
      <div class="col-md-3"><label class="form-label">Quotation No.</label><input class="form-control" name="quotation_no" value="{% if edit_bid %}{{ edit_bid.quotation_no }}{% endif %}"></div><div class="col-md-3"><label class="form-label">Quotation Date</label><input class="form-control" type="date" name="quotation_date" value="{% if edit_bid and edit_bid.quotation_date %}{{ edit_bid.quotation_date|date:'Y-m-d' }}{% else %}{% now 'Y-m-d' %}{% endif %}"></div>
      <div class="col-md-2"><label class="form-label">Currency</label><select class="form-select" name="currency"><option {% if edit_bid and edit_bid.currency == "USD" or not edit_bid %}selected{% endif %}>USD</option><option {% if edit_bid and edit_bid.currency == "IDR" %}selected{% endif %}>IDR</option></select></div><div class="col-md-5"><label class="form-label">Payment Terms</label><input class="form-control" name="payment_terms" value="{% if edit_bid %}{{ edit_bid.payment_terms }}{% else %}30 days{% endif %}"></div><div class="col-md-5"><label class="form-label">Delivery Terms</label><input class="form-control" id="delivery_terms" name="delivery_terms" value="{% if edit_bid %}{{ edit_bid.delivery_terms }}{% else %}7 days{% endif %}"></div><div class="col-md-3"><label class="form-label">Delivery Date</label><input class="form-control" type="date" id="delivery_date" name="delivery_date" value="{% if edit_bid and edit_bid.delivery_date %}{{ edit_bid.delivery_date|date:'Y-m-d' }}{% else %}{% now 'Y-m-d' %}{% endif %}"></div></div>
      <div class="table-responsive"><table class="table table-bordered"><thead><tr><th>Line</th><th>KIMAP</th><th>Description</th><th>Quantity</th><th>UOM</th><th>Quoted Unit Price</th></tr></thead><tbody>{% for d in pr_details %}<tr><td>{{ d.line_no }}</td><td>{{ d.kimap }}</td><td>{{ d.description }}</td><td>{{ d.quantity }}</td><td>{{ d.uom }}</td><td><input class="form-control unit-price-input" type="text" inputmode="decimal" pattern="[0-9,]+([.][0-9]{1,4})?" name="unit_price_{{ d.id }}" value="{% if edit_bid %}{{ d.edit_unit_price|default_if_none:'0' }}{% else %}0{% endif %}" autocomplete="off" required></td></tr>{% empty %}<tr><td colspan="6">No PR detail lines.</td></tr>{% endfor %}</tbody></table></div>
      <button class="btn btn-primary" type="submit">{% if edit_bid %}Update Quotation{% else %}Save Quotation{% endif %}</button>{% if edit_bid %} <a class="btn btn-secondary" href="{% url 'tender_detail' tender.id %}">Cancel Edit</a>{% endif %}
    </form>
  </div></div>
  {% endif %}

  <div class="tender-panel mb-4"><div class="panel-heading">Vendor Quotation Register</div><div class="panel-body table-responsive"><table class="table table-bordered"><thead><tr><th>Vendor</th><th>Quotation</th><th>Currency</th><th>Total</th><th>Technical</th><th>Commercial</th><th>Delivery</th><th>Status</th><th>Action</th></tr></thead><tbody>
  {% for b in bids %}<tr><td>{{ b.vendor_code }} — {{ b.vendor_name }}</td><td>{{ b.quotation_no }}<br>{{ b.quotation_date|date:"d-m-Y" }}</td><td>{{ b.currency }}</td><td class="text-end">{{ b.total_amount|floatformat:2 }}</td><td>{{ b.technical_result }}</td><td>{{ b.commercial_result }}</td><td>{{ b.delivery_date|date:"d-m-Y" }}<br>{{ b.delivery_terms }}</td><td>{{ b.status }}</td><td class="text-nowrap">{% if tender.status == "BIDDING" or tender.status == "EVALUATION" %}{% if tender.recommendation_bid_id != b.id %}<a class="btn btn-sm btn-secondary" href="{% url 'tender_detail' tender.id %}?edit_bid={{ b.id }}" title="Edit quotation"><i class="bi bi-pencil"></i></a> <form method="post" class="d-inline" onsubmit="return confirm('Delete quotation from {{ b.vendor_name|escapejs }}?');">{% csrf_token %}<input type="hidden" name="action" value="delete_bid"><input type="hidden" name="bid_id" value="{{ b.id }}"><button class="btn btn-sm btn-danger" type="submit" title="Delete quotation"><i class="bi bi-trash"></i></button></form>{% endif %}{% endif %}</td></tr>
  {% empty %}<tr><td colspan="9" class="text-center text-muted py-4">No quotations recorded.</td></tr>{% endfor %}</tbody></table></div></div>

  {% if bids %}
  <div class="tender-panel mb-4"><div class="panel-heading">Technical &amp; Commercial Evaluation</div><div class="panel-body">
    {% for b in bids %}<form method="post" class="border rounded p-3 mb-3">{% csrf_token %}<input type="hidden" name="action" value="save_evaluation"><input type="hidden" name="bid_id" value="{{ b.id }}"><h6>{{ b.vendor_name }}</h6>
      <div class="row g-3"><div class="col-md-3"><label class="form-label">Technical Result</label><select class="form-select" name="technical_result"><option value="PENDING" {% if b.technical_result == "PENDING" %}selected{% endif %}>Pending</option><option value="PASS" {% if b.technical_result == "PASS" %}selected{% endif %}>Pass</option><option value="FAIL" {% if b.technical_result == "FAIL" %}selected{% endif %}>Fail</option></select></div><div class="col-md-3"><label class="form-label">Commercial Result</label><select class="form-select" name="commercial_result"><option value="PENDING" {% if b.commercial_result == "PENDING" %}selected{% endif %}>Pending</option><option value="PASS" {% if b.commercial_result == "PASS" %}selected{% endif %}>Pass</option><option value="FAIL" {% if b.commercial_result == "FAIL" %}selected{% endif %}>Fail</option></select></div><div class="col-md-6"><label class="form-label">Evaluation Remarks</label><input class="form-control" name="technical_remarks" value="{{ b.technical_remarks }}"></div></div><button class="btn btn-secondary btn-sm mt-3" type="submit">Save Evaluation</button>
    </form>{% endfor %}
  </div></div>
  {% endif %}

  {% if tender.status == "EVALUATION" %}
  <div class="tender-panel mb-4"><div class="panel-heading">Award Recommendation</div><div class="panel-body"><form method="post">{% csrf_token %}<input type="hidden" name="action" value="recommend_award"><div class="row g-3"><div class="col-md-6"><label class="form-label">Qualified Vendor</label><select class="form-select" name="bid_id" required><option value="">Select qualified vendor...</option>{% for b in bids %}{% if b.technical_result == "PASS" and b.commercial_result == "PASS" %}<option value="{{ b.id }}">{{ b.vendor_name }} — {{ b.currency }} {{ b.total_amount|floatformat:2 }}</option>{% endif %}{% endfor %}</select></div><div class="col-md-6"><label class="form-label">Justification</label><input class="form-control" name="award_remarks"></div></div><button class="btn btn-primary mt-3" type="submit">Submit Recommendation</button></form></div></div>
  {% endif %}

  {% if tender.status == "PENDING PRESIDENT" %}
  <div class="tender-panel mb-4"><div class="panel-heading">President Approval</div><div class="panel-body"><p>Recommended vendor: {% if recommended_bid %}{{ recommended_bid.vendor_name }} — {{ recommended_bid.currency }} {{ recommended_bid.total_amount|floatformat:2 }}{% endif %}</p><form method="post" action="{% url 'tender_president_decision' tender.id %}" class="d-flex flex-wrap gap-2">{% csrf_token %}<button class="btn btn-success" name="decision" value="approve" type="submit">Approve Award</button><input class="form-control" name="rejection_remarks" placeholder="Reason if rejecting" style="max-width:360px"><button class="btn btn-danger" name="decision" value="reject" type="submit">Reject Award</button></form></div></div>
  {% endif %}

  {% if tender.status == "AWARDED" %}
  <div class="tender-panel"><div class="panel-heading">PO Handover</div><div class="panel-body"><div class="alert alert-success mb-0">Award approved. Winner and approved quotation are ready for the PO handover step. PO creation integration remains subject to the existing PO flow.</div></div></div>
  {% endif %}
</div>
<script>
(function () {
  const quotationDate = document.querySelector('input[name="quotation_date"]');
  const deliveryTerms = document.getElementById('delivery_terms');
  const deliveryDate = document.getElementById('delivery_date');

  function setDeliveryDate() {
    if (!deliveryDate || !deliveryTerms) return;
    const match = (deliveryTerms.value || '').match(/\d+/);
    const days = match ? parseInt(match[0], 10) : 0;
    const base = quotationDate && quotationDate.value
      ? new Date(quotationDate.value + 'T00:00:00')
      : new Date();
    if (Number.isNaN(base.getTime())) return;
    base.setDate(base.getDate() + days);
    const year = base.getFullYear();
    const month = String(base.getMonth() + 1).padStart(2, '0');
    const day = String(base.getDate()).padStart(2, '0');
    deliveryDate.value = `${year}-${month}-${day}`;
  }

  if (quotationDate) quotationDate.addEventListener('change', setDeliveryDate);
  if (deliveryTerms) deliveryTerms.addEventListener('input', setDeliveryDate);
  setDeliveryDate();

  document.querySelectorAll('.unit-price-input').forEach((input) => {
    input.addEventListener('focus', () => {
      input.value = input.value.replace(/,/g, '');
    });
    input.addEventListener('blur', () => {
      const raw = input.value.replace(/,/g, '').trim();
      if (!raw || !/^\d+(\.\d{0,4})?$/.test(raw)) return;
      const parts = raw.split('.');
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      input.value = parts.join('.');
    });
  });
})();
</script>
<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}.tender-panel .table thead th{background:#56636f;color:#fff;white-space:nowrap}
</style>
{% endblock %}