{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-3" style="max-width: 1200px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-inbox me-2"></i> Demo Requests
      </h4>
      <small class="text-muted">Approve a request to auto-create a demo company & admin login.</small>
    </div>
    <a href="{{ url_for('admin.demo_setup') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-building me-1"></i> Go to Demo Setup
    </a>
  </div>

  <ul class="nav nav-tabs" id="demoRequestTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="pending-tab" data-bs-toggle="tab"
              data-bs-target="#pending" type="button" role="tab">
        Pending {% if pending|length %}<span class="badge bg-secondary ms-1">{{ pending|length }}</span>{% endif %}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="approved-tab" data-bs-toggle="tab"
              data-bs-target="#approved" type="button" role="tab">
        Approved
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="rejected-tab" data-bs-toggle="tab"
              data-bs-target="#rejected" type="button" role="tab">
        Rejected
      </button>
    </li>
  </ul>

  <div class="tab-content border border-top-0 rounded-bottom bg-white p-3">
    <!-- Pending -->
    <div class="tab-pane fade show active" id="pending" role="tabpanel">
      {% if pending %}
        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead class="table-light">
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Email</th>
                <th>Employees</th>
                <th>Requested</th>
                <th>Notes</th>
                <th style="width: 220px;">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for r in pending %}
                <tr>
                  <td><strong>{{ r.company_name }}</strong></td>
                  <td>{{ r.contact_name }}{% if r.phone %}<br><small class="text-muted">{{ r.phone }}</small>{% endif %}</td>
                  <td>{{ r.work_email }}</td>
                  <td>{{ r.employee_count or '-' }}</td>
                  <td>{{ r.created_at.strftime('%d-%m-%Y') }}</td>
                  <td class="small text-muted" style="max-width: 260px;">
                    {{ r.message or '-' }}
                  </td>
                  <td>
                    <form method="POST" class="d-flex flex-column gap-1">
                      <input type="hidden" name="signup_id" value="{{ r.id }}">
                      <div class="input-group input-group-sm mb-1">
                        <span class="input-group-text">Expiry</span>
                        <input type="date" name="expiry_date" class="form-control">
                      </div>
                      <div class="d-flex gap-1">
                        <button type="submit" name="action" value="approve"
                                class="btn btn-success btn-sm flex-grow-1">
                          <i class="bi bi-check-circle me-1"></i> Approve & Create Demo
                        </button>
                      </div>
                      <div class="input-group input-group-sm mt-1">
                        <input type="text" name="reject_reason" class="form-control" placeholder="Reject reason">
                        <button type="submit" name="action" value="reject"
                                class="btn btn-outline-danger btn-sm">
                          Reject
                        </button>
                      </div>
                    </form>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="text-muted mb-0">No pending requests.</p>
      {% endif %}
    </div>

    <!-- Approved -->
    <div class="tab-pane fade" id="approved" role="tabpanel">
      {% if approved %}
        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead class="table-light">
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Email</th>
                <th>Employees</th>
                <th>Approved On</th>
                <th>Demo Company</th>
              </tr>
            </thead>
            <tbody>
              {% for r in approved %}
                <tr>
                  <td><strong>{{ r.company_name }}</strong></td>
                  <td>{{ r.contact_name }}</td>
                  <td>{{ r.work_email }}</td>
                  <td>{{ r.employee_count or '-' }}</td>
                  <td>{{ r.approved_at.strftime('%d-%m-%Y') if r.approved_at else '-' }}</td>
                  <td>
                    {% if r.demo_company %}
                      <a href="{{ url_for('admin.demo_setup') }}">{{ r.demo_company.name }}</a>
                    {% else %}
                      -
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="text-muted mb-0">No approved requests yet.</p>
      {% endif %}
    </div>

    <!-- Rejected -->
    <div class="tab-pane fade" id="rejected" role="tabpanel">
      {% if rejected %}
        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead class="table-light">
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Email</th>
                <th>Employees</th>
                <th>Rejected On</th>
                <th>Notes / Reason</th>
              </tr>
            </thead>
            <tbody>
              {% for r in rejected %}
                <tr>
                  <td><strong>{{ r.company_name }}</strong></td>
                  <td>{{ r.contact_name }}</td>
                  <td>{{ r.work_email }}</td>
                  <td>{{ r.employee_count or '-' }}</td>
                  <td>{{ r.approved_at.strftime('%d-%m-%Y') if r.approved_at else '-' }}</td>
                  <td class="small text-muted">{{ r.message or '-' }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="text-muted mb-0">No rejected requests.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}