{% 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-exclamation-triangle me-2"></i> Asset Loss / Damage
    </h4>

    <div class="d-flex gap-2">
      <a href="{{ url_for('assets.approvals') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-check2-square me-1"></i> Approvals
      </a>
      <button class="btn btn-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#ld_form">
        <i class="bi bi-plus-circle me-1"></i> New Report
      </button>
    </div>
  </div>

  <!-- Create new report -->
  <div id="ld_form" class="collapse mb-3">
    <div class="card shadow-sm border-0">
      <div class="card-body">
        <form method="post" action="{{ url_for('assets.loss_damage') }}">
          {{ csrf_token() if csrf_token is defined }}

          <div class="row g-3">
            <div class="col-md-5">
              <label class="form-label">Asset *</label>
              <select name="asset_id" class="form-select" required>
                <option value="">-- Select Asset --</option>
                {% for a in assets %}
                  {% set total = a.quantity_total or 1 %}
                  {% set avail = a.quantity_available if a.quantity_available is not none else total %}
                  <option value="{{ a.id }}">
                    {{ a.asset_tag }} - {{ a.name }} ({{ total }}/{{ avail }})
                  </option>
                {% endfor %}
              </select>
              <div class="form-text">
                Note: If an asset has a <b>pending</b> loss/damage report, it is blocked for new allocations.
              </div>
            </div>

            <div class="col-md-3">
              <label class="form-label">Incident Date</label>
              <input type="date" name="reported_on" class="form-control">
            </div>

            <div class="col-md-2">
              <label class="form-label">Type</label>
              <select name="type" class="form-select">
                <option value="loss">Loss</option>
                <option value="damage">Damage</option>
              </select>
            </div>

            <div class="col-md-2">
              <label class="form-label">Est. Amount</label>
              <input type="number" step="0.01" min="0" name="estimated_cost" class="form-control" placeholder="e.g. 15000">
            </div>

            <div class="col-md-12">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="2"
                        placeholder="Briefly describe what happened"></textarea>
            </div>
          </div>

          <div class="mt-3 text-end">
            <button class="btn btn-primary">
              <i class="bi bi-save me-1"></i> Submit Report
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Filter + list -->
  <form class="card shadow-sm border-0 mb-3">
    <div class="card-body py-2">
      <div class="row g-2 align-items-end">
        <div class="col-md-6">
          <label class="form-label mb-0">Search</label>
          <input type="text" name="q" value="{{ q }}" class="form-control form-control-sm"
                 placeholder="Asset tag / name / 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="pending"  {% if status == 'pending' %}selected{% endif %}>Pending</option>
            <option value="approved" {% if status == 'approved' %}selected{% endif %}>Approved</option>
            <option value="rejected" {% if status == 'rejected' %}selected{% endif %}>Rejected</option>
          </select>
        </div>

        <div class="col-md-3 text-end">
          <button class="btn btn-sm btn-outline-primary mt-3">
            <i class="bi bi-search"></i> Filter
          </button>
        </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>Type</th>
              <th>Incident Date</th>
              <th>Reported By</th>
              <th>Est. Amount</th>
              <th>Status</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {% if records %}
              {% for r in records %}
                {% set total = r.asset.quantity_total or 1 if r.asset else 1 %}
                {% set avail = (r.asset.quantity_available if (r.asset and r.asset.quantity_available is not none) else total) %}
                <tr>
                  <td>
                    {% if r.asset %}
                      <div class="fw-semibold">{{ r.asset.asset_tag }} - {{ r.asset.name }}</div>
                      <div class="text-muted small">
                        Stock: <span class="badge bg-light text-dark border">{{ total }}/{{ avail }}</span>
                      </div>
                    {% else %}
                      -
                    {% endif %}
                  </td>

                  <td class="text-capitalize">{{ (r.incident_type or '-') }}</td>

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

                  <td>
                    {% if r.employee %}
                      {{ r.employee.employee_code }} - {{ r.employee.full_name }}
                    {% else %}
                      -
                    {% endif %}
                  </td>

                  <td>
                    {% if r.estimated_amount is not none %}
                      {{ '%.2f'|format(r.estimated_amount) }}
                    {% else %}
                      -
                    {% endif %}
                  </td>

                  <td>
                    <span class="badge
                      {% if r.status == 'pending' %}bg-warning text-dark
                      {% elif r.status == 'approved' %}bg-success
                      {% elif r.status == 'rejected' %}bg-danger
                      {% else %}bg-secondary{% endif %}">
                      {{ (r.status or 'pending')|replace('_',' ')|title }}
                    </span>
                  </td>

                  <td class="small">{{ r.description or '-' }}</td>
                </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="7" class="text-center text-muted py-3">
                  No loss/damage records.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}