{% 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-person-bounding-box me-2"></i> My Assets
    </h4>
    <a href="{{ url_for('assets.asset_dashboard') }}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-speedometer2 me-1"></i> Asset Dashboard
    </a>
  </div>

  <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>Allocated On</th>
              <th>Due Back</th>
              <th>Status</th>
              <th>Return Date</th>
              <th style="width:170px;" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% if allocations %}
              {% for a in allocations %}
              <tr>
                <td>
                  {{ a.asset.asset_tag }} - {{ a.asset.name }}
                </td>
                <td>
                  {{ a.allocated_on.strftime('%d-%m-%Y') if a.allocated_on else '-' }}
                </td>
                <td>
                  {{ a.expected_return_date.strftime('%d-%m-%Y') if a.expected_return_date else '-' }}
                </td>
                <td>
                  <span class="badge
                    {% if a.status == 'allocated' %} bg-success
                    {% elif a.status == 'return_pending' %} bg-warning text-dark
                    {% elif a.status == 'returned' %} bg-secondary
                    {% else %} bg-light text-dark border {% endif %}">
                    {{ a.status.replace('_',' ')|title }}
                  </span>
                </td>
                <td>
                  {{ a.actual_return_date.strftime('%d-%m-%Y') if a.actual_return_date else '-' }}
                </td>
                <td class="text-end">
                  {# Return allowed only when allocated #}
                  {% if a.status == 'allocated' %}
                    <button type="button"
                            class="btn btn-sm btn-outline-primary me-1"
                            data-bs-toggle="modal"
                            data-bs-target="#returnModal"
                            onclick="prepareReturn(
                              {{ a.id }},
                              {{ (a.asset.asset_tag ~ ' - ' ~ a.asset.name)|tojson }}
                            )">
                      <i class="bi bi-box-arrow-in-left"></i> Return
                    </button>
                  {% else %}
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary me-1"
                            disabled>
                      <i class="bi bi-box-arrow-in-left"></i> Return
                    </button>
                  {% endif %}

                  {# Loss / damage can be reported as long as asset exists #}
                  <button type="button"
                          class="btn btn-sm btn-outline-danger"
                          data-bs-toggle="modal"
                          data-bs-target="#incidentModal"
                          onclick="prepareIncident(
                            {{ a.asset.id }},
                            {{ (a.asset.asset_tag ~ ' - ' ~ a.asset.name)|tojson }}
                          )">
                    <i class="bi bi-flag"></i> Loss/Damage
                  </button>
                </td>
              </tr>
              {% endfor %}
            {% else %}
              <tr>
                <td colspan="6" class="text-center text-muted py-3">
                  No assets allocated to you.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Return modal -->
<div class="modal fade" id="returnModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" id="returnForm">
        <div class="modal-header">
          <h5 class="modal-title">Return Asset</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <label class="form-label">Asset</label>
            <input type="text" class="form-control" id="return_asset_label" disabled>
          </div>
          <div class="mb-2">
            <label class="form-label">Return Date</label>
            <input type="date" name="returned_on" class="form-control"
                   value="{{ today.strftime('%Y-%m-%d') if today else '' }}">
          </div>
          <div class="mb-2">
            <label class="form-label">Remarks</label>
            <textarea name="return_remarks" class="form-control" rows="2"
                      placeholder="Condition, accessories, etc."></textarea>
          </div>
          <p class="small text-muted mb-0">
            This will create a return request. Asset will be moved back to stock
            only after approval.
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary">
            <i class="bi bi-check2-circle me-1"></i> Submit Return Request
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Loss / Damage modal -->
<div class="modal fade" id="incidentModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{{ url_for('assets.loss_damage') }}">
        <div class="modal-header">
          <h5 class="modal-title">Report Loss / Damage</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="asset_id" id="incident_asset_id">

          <div class="mb-2">
            <label class="form-label">Asset</label>
            <input type="text" class="form-control" id="incident_asset_label" disabled>
          </div>

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

          <div class="mb-2">
            <label class="form-label">Incident Date</label>
            <input type="date" name="reported_on" class="form-control"
                   value="{{ today.strftime('%Y-%m-%d') if today else '' }}">
          </div>

          <div class="mb-2">
            <label class="form-label">Estimated Amount (optional)</label>
            <input type="number" step="0.01" min="0" name="estimated_cost"
                   class="form-control" placeholder="e.g. 15000">
          </div>

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

          <p class="small text-muted mb-0">
            This will create a loss/damage report for approval by Admin/HR.
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-danger">
            <i class="bi bi-flag me-1"></i> Submit Report
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  function prepareReturn(allocationId, label) {
    document.getElementById("return_asset_label").value = label || "";
    const form = document.getElementById("returnForm");
    form.action = "{{ url_for('assets.return_asset', allocation_id=0) }}".replace("0", allocationId);
  }

  function prepareIncident(assetId, label) {
    document.getElementById("incident_asset_id").value = assetId;
    document.getElementById("incident_asset_label").value = label || "";
  }
</script>
{% endblock %}