{% extends "base.html" %}

{% block title %}Dashboard | Qosh Tepa Management{% endblock %}

{% block content %}
<div class="row g-4 mb-4">
  <div class="col-md-4">
    <div class="glass-card p-4">
      <div class="stat-icon"><i class="fas fa-wallet"></i></div>
      <h3 class="mb-1">{{ total_budget }} AFN</h3>
      <p class="text-muted mb-0">Total Estimated Budget</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="glass-card p-4">
      <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
      <h3 class="mb-1">{{ active_proposals }}</h3>
      <p class="text-muted mb-0">Active Proposals</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="glass-card p-4">
      <div class="stat-icon"><i class="fas fa-clock"></i></div>
      <h3 class="mb-1">{{ pending_documents }}</h3>
      <p class="text-muted mb-0">Pending Documents</p>
    </div>
  </div>
</div>

<div class="row mb-4">
  <div class="col-12">
    <div class="glass-card p-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Project Branches</h4>
        <a href="{% url 'proposal_create' %}" class="btn btn-primary-gradient btn-sm"><i class="fas fa-plus me-1"></i> New M-7 Proposal</a>
      </div>
      <div class="row g-3">
        {% for dept in departments %}
        <div class="col-6 col-md-4 col-lg-3">
          <div class="glass-card p-3 text-center border-0 bg-opacity-25" style="background: rgba(255,255,255,0.05);">
            <div class="h3 mb-2"><i class="fas fa-folder-open text-info"></i></div>
            <h6 class="mb-0">{{ dept.name }}</h6>
            <span class="badge bg-dark mt-2">{{ dept.code }}</span>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-8">
    <div class="glass-card p-4 h-100">
      <h4 class="mb-4">Recent Procurement Proposals</h4>
      <div class="table-responsive">
        <table class="table table-dark table-hover mb-0">
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Budget</th>
              <th>Status</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for proposal in proposals %}
            <tr>
              <td>{{ proposal.proposal_number }}</td>
              <td>{{ proposal.title }}</td>
              <td>{{ proposal.estimated_cost }} AFN</td>
              <td>
                <span class="badge rounded-pill {% if proposal.status == 'approved' %}bg-success{% elif proposal.status == 'rejected' %}bg-danger{% else %}bg-warning{% endif %}">
                  {{ proposal.get_status_display }}
                </span>
              </td>
              <td><a href="#" class="btn btn-sm btn-outline-light">View</a></td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="5" class="text-center py-4 text-muted">No proposals found. Start by creating one!</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="glass-card p-4 h-100">
      <h4 class="mb-4">Quick Actions</h4>
      <div class="d-grid gap-3">
        <a href="{% url 'proposal_create' %}" class="btn btn-outline-light text-start py-3"><i class="fas fa-file-invoice me-2"></i> Create M-7 Proposal</a>
        <button class="btn btn-outline-light text-start py-3"><i class="fas fa-money-check-alt me-2"></i> Create M-16 Payment</button>
        <button class="btn btn-outline-light text-start py-3"><i class="fas fa-history me-2"></i> Routing History</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}