{% extends 'base.html' %}
{% block title %}{{ contract.contract_no }}{% endblock %}
{% block content %}

<!-- Breadcrumb -->
<div class="kvpl-breadcrumb no-print">
  <a href="{{ url_for('dashboard') }}">Dashboard</a>
  <span class="sep">/</span>
  <a href="{{ url_for('contracts') }}">Contracts</a>
  <span class="sep">/</span>
  <span class="current">{{ contract.contract_no }}</span>
</div>

<!-- Page header -->
<div class="page-header">
  <div>
    <div class="d-flex align-items-center gap-2 mb-1">
      <span class="factory-chip fchip-{{ contract.factory_code }}">{{ contract.factory_code }}</span>
      <span class="badge badge-{{ contract.status }}">{{ contract.status|capitalize }}</span>
      {% if delivery_due and delivery_due < today and contract.status == 'open' %}
      <span class="badge badge-overdue"><i class="bi bi-exclamation-triangle-fill me-1"></i>Overdue</span>
      {% endif %}
    </div>
    <div class="page-title">
      {{ contract.contract_no }}
      <small>{{ factory_name }} – {{ contract.customer_name }}</small>
    </div>
  </div>
  <div class="d-flex gap-2 flex-wrap no-print">
    {% if can_edit() %}
    <a href="{{ url_for('edit_contract', cid=contract.id) }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-pencil me-1"></i> Edit
    </a>
    <form method="post" action="{{ url_for('duplicate_contract', cid=contract.id) }}" style="display:inline"
          onsubmit="return confirm('Duplicate this contract?')">
      <button type="submit" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-copy me-1"></i> Duplicate
      </button>
    </form>
    <form method="post" action="{{ url_for('toggle_status', cid=contract.id) }}" style="display:inline"
          onsubmit="return confirm('{% if contract.status == "open" %}Close this contract?{% else %}Reopen this contract?{% endif %}')">
      <button type="submit" class="btn btn-sm {% if contract.status == 'open' %}btn-warning{% else %}btn-success{% endif %}">
        {% if contract.status == 'open' %}
        <i class="bi bi-lock me-1"></i> Close Contract
        {% else %}
        <i class="bi bi-unlock me-1"></i> Reopen Contract
        {% endif %}
      </button>
    </form>
    {% endif %}
    <a href="{{ url_for('contracts') }}" class="btn btn-outline-secondary btn-sm">← Back</a>
  </div>
</div>

<!-- Status banners -->
{% if contract.status == 'closed' %}
<div class="alert alert-secondary d-flex align-items-center gap-2 mb-4">
  <i class="bi bi-lock-fill"></i>
  <span>This contract is <strong>closed</strong>. Reopen it to add deliveries.</span>
</div>
{% elif delivery_due and delivery_due < today %}
<div class="alert alert-danger d-flex align-items-center gap-2 mb-4">
  <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
  <span>Delivery period has <strong>passed</strong> (due {{ delivery_due }}). This contract is overdue.</span>
</div>
{% endif %}

<!-- Contract Details -->
<div class="card mb-4">
  <div class="card-header">
    <span class="card-title"><i class="bi bi-file-earmark-text me-2"></i>Contract Details</span>
    {% if creator %}<span class="text-sm text-muted">Created by {{ creator }}</span>{% endif %}
  </div>
  <div class="card-body">
    <div class="detail-grid">
      <div class="detail-item">
        <div class="detail-label">Contract No</div>
        <div class="detail-value" style="font-family:'IBM Plex Mono',monospace">{{ contract.contract_no }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Sale Order No</div>
        <div class="detail-value">{{ contract.sale_order_no or '–' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Customer</div>
        <div class="detail-value">{{ contract.customer_name }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Broker</div>
        <div class="detail-value">{{ contract.broker or '–' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Price</div>
        <div class="detail-value">{{ "{:,.2f}".format(contract.price) if contract.price else '–' }}</div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Total Declared Qty</div>
        <div class="detail-value number">{{ "{:,.3f}".format(contract.qty) }} kg</div>
      </div>
      {% if has_cf_alloc %}
      <div class="detail-item">
        <div class="detail-label">Wet Qty (CF)</div>
        <div class="detail-value number">{{ "{:,.3f}".format(contract.wet_qty) if contract.wet_qty else '–' }}</div>
      </div>
      {% endif %}
      <div class="detail-item">
        <div class="detail-label">Delivery Period</div>
        <div class="detail-value">
          {% if contract.delivery_start %}{{ contract.delivery_start }} – {% endif %}{{ delivery_due or '–' }}
        </div>
      </div>
      <div class="detail-item">
        <div class="detail-label">Created</div>
        <div class="detail-value text-sm">{{ contract.created_at[:10] if contract.created_at else '–' }}</div>
      </div>
      {% if contract.updated_at and contract.updated_at != contract.created_at %}
      <div class="detail-item">
        <div class="detail-label">Last Updated</div>
        <div class="detail-value text-sm">{{ contract.updated_at[:10] }}</div>
      </div>
      {% endif %}
    </div>

    <!-- Materials -->
    <div style="margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0">
      <div class="detail-label mb-2">Materials</div>
      {% if contract_mats %}
      <div class="d-flex gap-2 flex-wrap">
        {% for m in contract_mats %}
        <span class="badge badge-open" style="font-size:13px;padding:5px 12px">
          {{ m.name }}{% if m.mat_qty %} – {{ "{:,.3f}".format(m.mat_qty) }} {{ m.unit }}{% endif %}
        </span>
        {% endfor %}
      </div>
      {% else %}
      <span class="text-muted">No materials specified</span>
      {% endif %}
    </div>

    {% if contract.notes %}
    <div style="margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0">
      <div class="detail-label mb-1">Notes</div>
      <div style="font-size:13.5px;color:#374151">{{ contract.notes }}</div>
    </div>
    {% endif %}
  </div>
</div>

<!-- Factory Allocations -->
{% if allocations %}
<div class="card mb-4">
  <div class="card-header">
    <span class="card-title"><i class="bi bi-diagram-3 me-2"></i>Factory Allocations</span>
    <span class="badge badge-open">{{ allocations|length }} factor{{ 'y' if allocations|length == 1 else 'ies' }}</span>
  </div>
  <div class="table-wrap">
    <table>
      <thead><tr>
        <th>Factory</th>
        <th class="text-right">Allocated Qty</th>
        <th class="text-right">Delivered</th>
        <th class="text-right">Balance</th>
        <th style="min-width:140px">Progress</th>
      </tr></thead>
      <tbody>
      {% for a in allocations %}
        {% set pct = (a.delivered / a.qty * 100)|round(1) if a.qty > 0 else 0 %}
        <tr>
          <td>
            <span class="factory-chip fchip-{{ a.factory_code }}">{{ a.factory_code }}</span>
            <span class="text-muted text-sm ms-2">{{ a.factory_name }}</span>
          </td>
          <td class="text-right number">{{ "{:,.3f}".format(a.qty) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(a.delivered) }}</td>
          <td class="text-right number fw-600">
            {% if a.balance < 0 %}
              <span style="color:#7c3aed">({{ "{:,.3f}".format(a.balance|abs) }} over)</span>
            {% else %}{{ "{:,.3f}".format(a.balance) }}{% endif %}
          </td>
          <td>
            <div class="kvpl-progress mb-1">
              <div class="kvpl-progress-bar {% if pct > 100 %}cf-over{% endif %}" style="width:{{ [pct,100]|min }}%"></div>
            </div>
            <div class="text-muted text-sm">{{ pct }}%</div>
          </td>
        </tr>
      {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td><strong>Total</strong></td>
          <td class="text-right number">{{ "{:,.3f}".format(contract.qty) }}</td>
          <td class="text-right number">{{ "{:,.3f}".format(delivered) }}</td>
          <td class="text-right number">
            {% if balance < 0 %}
              <span style="color:#7c3aed">({{ "{:,.3f}".format(balance|abs) }} over)</span>
            {% else %}{{ "{:,.3f}".format(balance) }}{% endif %}
          </td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endif %}

<!-- Delivery Summary Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card stat-blue">
      <div class="stat-card-stripe"></div>
      <div class="stat-icon"><i class="bi bi-clipboard-data"></i></div>
      <div class="stat-value number">{{ "{:,.3f}".format(contract.qty) }}</div>
      <div class="stat-label">Declared</div>
      <div class="stat-sub">kg</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card stat-green">
      <div class="stat-card-stripe"></div>
      <div class="stat-icon"><i class="bi bi-truck"></i></div>
      <div class="stat-value number" style="color:#146c3c">{{ "{:,.3f}".format(delivered) }}</div>
      <div class="stat-label">Delivered</div>
      <div class="stat-sub">{{ deliveries|length }} entr{{ 'y' if deliveries|length == 1 else 'ies' }}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card {% if balance < 0 %}stat-purple{% elif balance == 0 %}stat-green{% else %}stat-amber{% endif %}">
      <div class="stat-card-stripe"></div>
      <div class="stat-icon"><i class="bi bi-{% if balance < 0 %}arrow-up-circle{% elif balance == 0 %}check-circle{% else %}hourglass-split{% endif %}"></i></div>
      <div class="stat-value number">
        {% if balance < 0 %}({{ "{:,.3f}".format(balance|abs) }}){% else %}{{ "{:,.3f}".format(balance) }}{% endif %}
      </div>
      <div class="stat-label">Balance</div>
      <div class="stat-sub">{% if balance < 0 %}over-delivered{% elif balance == 0 %}complete{% else %}remaining{% endif %}</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card stat-green">
      <div class="stat-card-stripe"></div>
      <div class="stat-icon"><i class="bi bi-pie-chart"></i></div>
      {% set pct = (delivered / contract.qty * 100)|round(1) if contract.qty > 0 else 0 %}
      <div class="stat-value">{{ pct }}%</div>
      <div class="stat-label">Progress</div>
      <div class="stat-sub">
        <div class="kvpl-progress mt-1">
          <div class="kvpl-progress-bar" style="width:{{ [pct,100]|min }}%"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Delivery -->
{% if contract.status == 'open' and can_edit() %}
<div class="card mb-4 no-print">
  <div class="card-header">
    <span class="card-title"><i class="bi bi-plus-circle me-2"></i>Add Delivery</span>
  </div>
  <div class="card-body">
    <form method="post" action="{{ url_for('add_delivery', cid=contract.id) }}">
      <div class="delivery-add-form">
        <div class="form-group">
          <label>Date *</label>
          <input type="date" name="delivery_date" required value="{{ today }}">
        </div>
        <div class="form-group">
          <label>Invoice No *</label>
          <input type="text" name="invoice_no" required placeholder="e.g. INV-001">
        </div>
        {% if allocations|length > 1 %}
        <div class="form-group">
          <label>Factory</label>
          <select name="allocation_id">
            <option value="">– All / Unspecified –</option>
            {% for a in allocations %}
            <option value="{{ a.id }}">{{ a.factory_code }} – {{ a.factory_name }}</option>
            {% endfor %}
          </select>
        </div>
        {% elif allocations %}
        <input type="hidden" name="allocation_id" value="{{ allocations[0].id }}">
        {% endif %}
        <div class="form-group">
          <label>Qty (kg) *</label>
          <input type="number" step="0.001" min="0.001" name="qty" required placeholder="0">
        </div>
        {% if has_cf_alloc %}
        <div class="form-group">
          <label>Wet Qty</label>
          <input type="number" step="0.001" min="0" name="wet_qty" placeholder="0">
        </div>
        {% endif %}
        <div class="form-group">
          <label>Notes</label>
          <input type="text" name="notes" placeholder="Optional">
        </div>
        <div class="form-group" style="justify-content:flex-end">
          <label>&nbsp;</label>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i> Add
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endif %}

<!-- Delivery History -->
{% set col_count = 6 + (1 if allocations|length > 1 else 0) + (1 if has_cf_alloc else 0) %}
<div class="card">
  <div class="card-header">
    <span class="card-title"><i class="bi bi-clock-history me-2"></i>Delivery History</span>
    <span class="badge badge-open">{{ deliveries|length }} entr{{ 'y' if deliveries|length == 1 else 'ies' }}</span>
  </div>
  <div class="table-wrap">
    <table>
      <thead><tr>
        <th>#</th>
        <th>Date</th>
        <th>Invoice No</th>
        {% if allocations|length > 1 %}<th>Factory</th>{% endif %}
        <th class="text-right">Qty (kg)</th>
        {% if has_cf_alloc %}<th class="text-right">Wet Qty</th>{% endif %}
        <th>Notes</th>
        <th>Recorded By</th>
        {% if contract.status == 'open' and can_edit() %}<th class="no-print"></th>{% endif %}
      </tr></thead>
      <tbody>
      {% for d in deliveries %}
        <tr>
          <td class="text-muted text-sm">{{ loop.index }}</td>
          <td>{{ d.delivery_date }}</td>
          <td style="font-family:'IBM Plex Mono',monospace;font-size:12.5px">{{ d.invoice_no }}</td>
          {% if allocations|length > 1 %}
          <td>
            {% if d.alloc_factory %}
              <span class="factory-chip fchip-{{ d.alloc_factory }}">{{ d.alloc_factory }}</span>
            {% else %}<span class="text-muted">–</span>{% endif %}
          </td>
          {% endif %}
          <td class="text-right number">{{ "{:,.3f}".format(d.qty) }}</td>
          {% if has_cf_alloc %}
          <td class="text-right number">{{ "{:,.3f}".format(d.wet_qty) if d.wet_qty else '–' }}</td>
          {% endif %}
          <td class="text-muted text-sm">{{ d.notes or '–' }}</td>
          <td class="text-muted text-sm">{{ d.created_by_name or '–' }}</td>
          {% if contract.status == 'open' and can_edit() %}
          <td class="no-print">
            {# SAFE: all delivery values passed via data-* attributes, never inline JS strings #}
            <div class="d-flex gap-1">
              <button class="btn btn-outline-secondary btn-sm btn-edit-delivery"
                data-did="{{ d.id }}"
                data-date="{{ d.delivery_date }}"
                data-invoice="{{ d.invoice_no }}"
                data-qty="{{ d.qty }}"
                data-wet="{{ d.wet_qty or '' }}"
                data-notes="{{ d.notes or '' }}"
                data-alloc="{{ d.allocation_id or '' }}"
                title="Edit delivery" data-bs-toggle="tooltip">
                <i class="bi bi-pencil"></i><span class="btn-icon-label"> Edit</span>
              </button>
              <form method="post" action="{{ url_for('delete_delivery', did=d.id) }}"
                    onsubmit="return confirm('Delete this delivery entry? This cannot be undone.')">
                <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete delivery">
                  <i class="bi bi-trash"></i><span class="btn-icon-label"> Del</span>
                </button>
              </form>
            </div>
          </td>
          {% endif %}
        </tr>
      {% else %}
        <tr>
          <td colspan="{{ col_count }}" class="empty-state">No deliveries recorded yet</td>
        </tr>
      {% endfor %}
      </tbody>
      {% if deliveries %}
      <tfoot>
        <tr>
          <td colspan="{% if allocations|length > 1 %}4{% else %}3{% endif %}"><strong>Total</strong></td>
          <td class="text-right number">{{ "{:,.3f}".format(delivered) }}</td>
          {% if has_cf_alloc %}<td class="text-right number">{{ "{:,.3f}".format(wet_delivered) }}</td>{% endif %}
          <td colspan="2"></td>
          {% if contract.status == 'open' and can_edit() %}<td class="no-print"></td>{% endif %}
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
</div>

<!-- Edit Delivery Modal -->
<div class="modal fade" id="editDeliveryModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>Edit Delivery Entry</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" id="editDeliveryForm">
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-6">
              <div class="form-group">
                <label>Date *</label>
                <input type="date" name="delivery_date" id="ed_date" required>
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label>Invoice No *</label>
                <input type="text" name="invoice_no" id="ed_invoice" required>
              </div>
            </div>
            {% if allocations|length > 1 %}
            <div class="col-12">
              <div class="form-group">
                <label>Factory</label>
                <select name="allocation_id" id="ed_alloc">
                  <option value="">– All / Unspecified –</option>
                  {% for a in allocations %}
                  <option value="{{ a.id }}">{{ a.factory_code }} – {{ a.factory_name }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            {% elif allocations|length == 1 %}
            <input type="hidden" name="allocation_id" id="ed_alloc" value="{{ allocations[0].id }}">
            {% endif %}
            <div class="col-6">
              <div class="form-group">
                <label>Qty (kg) *</label>
                <input type="number" step="0.001" min="0.001" name="qty" id="ed_qty" required>
              </div>
            </div>
            {% if has_cf_alloc %}
            <div class="col-6">
              <div class="form-group">
                <label>Wet Qty</label>
                <input type="number" step="0.001" min="0" name="wet_qty" id="ed_wet">
              </div>
            </div>
            {% endif %}
            <div class="col-12">
              <div class="form-group">
                <label>Notes</label>
                <input type="text" name="notes" id="ed_notes" placeholder="Optional">
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script>
// XSS-safe edit delivery — reads values from data-* attributes, never from inline JS strings
document.querySelectorAll('.btn-edit-delivery').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var did     = this.dataset.did;
    var dt      = this.dataset.date;
    var invoice = this.dataset.invoice;
    var qty     = this.dataset.qty;
    var wet     = this.dataset.wet;
    var notes   = this.dataset.notes;
    var allocId = this.dataset.alloc;

    var form = document.getElementById('editDeliveryForm');
    form.action = (window.SCRIPT_ROOT || '') + '/deliveries/' + did + '/edit';
    document.getElementById('ed_date').value    = dt;
    document.getElementById('ed_invoice').value = invoice;
    document.getElementById('ed_qty').value     = qty;
    var wetEl = document.getElementById('ed_wet');
    if (wetEl) wetEl.value = wet || '';
    document.getElementById('ed_notes').value = notes || '';
    var allocEl = document.getElementById('ed_alloc');
    if (allocEl && allocId) allocEl.value = allocId;

    new bootstrap.Modal(document.getElementById('editDeliveryModal')).show();
  });
});

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
  new bootstrap.Tooltip(el);
});
</script>
{% endblock %}