{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width:1100px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="bi bi-arrow-left-right me-2"></i> Asset Allocations</h4>
  </div>

  <form class="card shadow-sm border-0 mb-3" method="GET">
    <div class="card-body py-2">
      <div class="row g-2 align-items-end">
        <div class="col-md-5">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm"
                 placeholder="Asset / Employee">
        </div>
        <div class="col-md-3">
          <label class="form-label mb-0">Status</label>
          <select name="status" class="form-select form-select-sm">
            <option value="">All</option>
            <option value="allocated" {% if status == 'allocated' %}selected{% endif %}>Allocated</option>
            <option value="return_pending" {% if status == 'return_pending' %}selected{% endif %}>Return Pending</option>
            <option value="returned" {% if status == 'returned' %}selected{% endif %}>Returned</option>
          </select>
        </div>
        <div class="col-md-2 text-end">
          <button type="submit" class="btn btn-sm btn-outline-primary mt-3">
            <i class="bi bi-search"></i> Filter
          </button>
        </div>
        <div class="col-md-2 text-end">
          <a class="btn btn-sm btn-outline-secondary mt-3" href="{{ url_for('assets.allocations') }}">
            <i class="bi bi-arrow-counterclockwise"></i> Reset
          </a>
        </div>
      </div>
    </div>
  </form>

  <div class="card shadow-sm border-0">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-sm align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>Asset</th>
              <th>Employee</th>
              <th>Allocated On</th>
              <th class="text-center">Qty</th>
              <th>Due Back</th>
              <th>Returned On</th>
              <th>Status</th>
              <th style="width:160px;" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% if allocations %}
              {% for a in allocations %}
              {# IMPORTANT: don't do "or 1" here, qty can be 0 in bad legacy rows and we should show it #}
              {% set qty = (a.quantity if a.quantity is not none else 1) %}
              <tr>
                <td>
                  <div class="fw-semibold">{{ a.asset.asset_tag }} - {{ a.asset.name }}</div>
                  <div class="text-muted small">
                    Stock: {{ a.asset.quantity_available if a.asset.quantity_available is not none else '-' }}
                    /
                    {{ a.asset.quantity_total if a.asset.quantity_total is not none else '-' }}
                  </div>
                </td>

                <td>{{ a.employee.employee_code }} - {{ a.employee.full_name }}</td>

                <td>{{ a.allocated_on.strftime('%d-%m-%Y') if a.allocated_on else '-' }}</td>

                <td class="text-center">
                  {% if qty <= 0 %}
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle"
                          title="Invalid qty in record (legacy).">0</span>
                  {% else %}
                    <span class="badge bg-primary">{{ qty }}</span>
                  {% endif %}
                </td>

                <td>
                  {% if a.expected_return_date %}
                    {{ a.expected_return_date.strftime('%d-%m-%Y') }}
                  {% else %}
                    -
                  {% endif %}
                </td>

                <td>
                  {% if a.actual_return_date %}
                    {{ a.actual_return_date.strftime('%d-%m-%Y') }}
                  {% else %}
                    -
                  {% endif %}
                </td>

                <td>
                  {% if a.status == 'allocated' %}
                    <span class="badge bg-success-subtle text-success border border-success-subtle">Allocated</span>
                  {% elif a.status == 'return_pending' %}
                    <span class="badge bg-warning-subtle text-warning border border-warning-subtle">Return Pending</span>
                  {% elif a.status == 'returned' %}
                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Returned</span>
                  {% else %}
                    <span class="badge bg-dark-subtle text-dark border border-dark-subtle">{{ a.status }}</span>
                  {% endif %}
                </td>

                <td class="text-end">
                  {% if a.status == 'allocated' %}
                    {% if qty <= 0 %}
                      <span class="text-danger small">Invalid qty</span>
                    {% else %}
                      <button
                        type="button"
                        class="btn btn-sm btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#returnModal"
                        data-allocation-id="{{ a.id }}"
                        data-asset="{{ a.asset.asset_tag }} - {{ a.asset.name }}"
                        data-qty="{{ qty }}"
                      >
                        <i class="bi bi-box-arrow-in-left"></i> Return
                      </button>
                    {% endif %}
                  {% elif a.status == 'return_pending' %}
                    <span class="text-muted small">Pending approval</span>
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="8" class="text-center text-muted py-3">
                  No allocations found.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{# ---------------- Return Modal (lets user pick date + remarks; prevents accidental returns) ---------------- #}
<div class="modal fade" id="returnModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="bi bi-box-arrow-in-left me-2"></i> Raise Return Request
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form id="returnForm" method="post" action="">
        <div class="modal-body">
          <div class="small text-muted mb-2" id="returnAssetText">-</div>

          <div class="row g-2">
            <div class="col-6">
              <label class="form-label">Returned On</label>
              <input type="date" name="returned_on" class="form-control" id="returned_on">
              <div class="form-text">Leave blank to use today.</div>
            </div>
            <div class="col-6">
              <label class="form-label">Qty</label>
              <input type="number" class="form-control" id="return_qty" disabled>
            </div>
            <div class="col-12">
              <label class="form-label">Remarks</label>
              <textarea class="form-control" name="return_remarks" rows="2"
                        placeholder="Condition / notes (optional)"></textarea>
            </div>
          </div>

          <div class="alert alert-warning mt-3 mb-0 py-2 small">
            This will mark the allocation as <b>Return Pending</b>. Stock will be updated only after approval.
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="returnSubmitBtn">
            <i class="bi bi-check2-circle me-1"></i> Submit Return Request
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(function () {
  const modal = document.getElementById('returnModal');
  const form = document.getElementById('returnForm');
  const assetText = document.getElementById('returnAssetText');
  const qtyInput = document.getElementById('return_qty');
  const returnedOn = document.getElementById('returned_on');
  const submitBtn = document.getElementById('returnSubmitBtn');

  function todayISO() {
    const d = new Date();
    const yyyy = d.getFullYear();
    const mm = String(d.getMonth() + 1).padStart(2, '0');
    const dd = String(d.getDate()).padStart(2, '0');
    return `${yyyy}-${mm}-${dd}`;
  }

  modal.addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    const allocationId = btn.getAttribute('data-allocation-id');
    const asset = btn.getAttribute('data-asset') || '-';
    const qty = parseInt(btn.getAttribute('data-qty') || '0', 10);

    // set action URL
    form.action = "{{ url_for('assets.return_asset', allocation_id=0) }}".replace("/0", "/" + allocationId);

    assetText.textContent = asset;
    qtyInput.value = isNaN(qty) ? '' : qty;

    // default date to today (user can clear it)
    returnedOn.value = todayISO();

    // Safety: disable submit if qty is invalid (should never happen now)
    if (!qty || qty <= 0) {
      submitBtn.disabled = true;
      submitBtn.classList.add("disabled");
    } else {
      submitBtn.disabled = false;
      submitBtn.classList.remove("disabled");
    }
  });

  // Allow clearing the date to use server default
  returnedOn.addEventListener('change', function () {
    // no-op; just keeps it in sync
  });
})();
</script>
{% endblock %}