{% extends "base.html" %}
{% load static %}

{% block title %}Commission Dashboard - Frontier Waste Solutions{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Frontier Waste Solutions</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Accounts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Logout</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="dashboard-hero text-center text-white">
  <h1>Welcome, Sales Rep!</h1>
  <p class="lead">Your real-time commission tracking dashboard.</p>
</div>

<div class="container mt-4">
  <div class="row">
    <!-- Commission Summary -->
    <div class="col-lg-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Commission Summary</h5>
          <div class="d-flex justify-content-end">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="mtdYtdSwitch" checked>
              <label class="form-check-label" for="mtdYtdSwitch">MTD / YTD</label>
            </div>
          </div>
          <h2 class="display-4 text-accent">$12,345.67</h2>
          <p class="card-text">Base: $10,000.00 | Ancillary: $2,345.67</p>
          <p class="card-text text-muted">Goal Multiplier: <span class="text-accent-2">1.15x</span></p>
        </div>
      </div>
    </div>

    <!-- Goal Attainment -->
    <div class="col-lg-6 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Goal Attainment (MTD)</h5>
          <p>Actual: $8,500 / Goal: $10,000</p>
          <div class="progress" style="height: 20px;">
            <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
          </div>
          <p class="mt-2">Your current multiplier is <span class="text-accent-2 fw-bold">1.05x</span>. Reach 90% for <span class="text-accent-2 fw-bold">1.15x</span>!</p>
          <p class="text-muted small">15 days remaining in period.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Account Commission Table -->
    <div class="col-12 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Account Commission Details</h5>
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>Account Name</th>
                  <th>Account Type</th>
                  <th>MRR</th>
                  <th>Commission</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>ABC Corp</td>
                  <td>Commercial</td>
                  <td>$5,000</td>
                  <td>$600</td>
                </tr>
                <tr>
                  <td>XYZ Inc</td>
                  <td>Permanent Roll Off</td>
                  <td>$2,500</td>
                  <td>$250</td>
                </tr>
                <tr>
                  <td>Temp Site 123</td>
                  <td>Temporary Roll Off</td>
                  <td>$1,000</td>
                  <td>$50</td>
                </tr>
              </tbody>
            </table>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Pending True-ups -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Pending True-Ups (Permanent Roll Off)</h5>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Account Name</th>
                            <th>Service Start Date</th>
                            <th>True-Up Date</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Springfield Mall</td>
                            <td>2025-10-15</td>
                            <td>2026-01-13</td>
                            <td><span class="badge bg-warning text-dark">Pending</span></td>
                        </tr>
                        <tr>
                            <td>Downtown Construction</td>
                            <td>2025-11-01</td>
                            <td>2026-01-30</td>
                            <td><span class="badge bg-warning text-dark">Pending</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
  </div>

</div>

<footer class="text-center py-4 bg-primary text-white mt-4">
    <p>&copy; 2025 Frontier Waste Solutions. All Rights Reserved.</p>
</footer>

{% endblock %}
