{% extends "base.html" %} {% block header %} {{ super() }}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
/>
<style>
  .card-custom {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s;
  }

  /* Styled Labels for inputs */
  .input-label {
    font-size: 1rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-top: 6px;
  }

  /* Table Styling */
  .table-custom thead th {
    background-color: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
  }

  .table-custom tbody tr:hover {
    background-color: #fdfdfe;
  }

  /* Input inside table */
  .table-input {
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    width: 100%;
    font-weight: 600;
    color: #212529;
    transition: all 0.2s;
  }
  .table-input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  .column-filter {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #495057;
  }
  .column-filter:focus {
    outline: none;
    border-color: #86b7fe;
  }
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 12px;
  }
  h4,
  .h4 {
    font-size: 20px;
  }
  .form-select-lg {
    padding: 0.6rem 0.75rem;
    font-weight: 500;
  }

  .form-select:disabled {
    background-color: #f1f3f5;
    color: #6c757d;
    cursor: not-allowed;
  }

  .bg-light {
    background-color: #f8f9fa !important;
  }
</style>
{% endblock header %} {% block content %} {% include "partials/navbar.html" %}

<div class="container py-5" style="max-width: 1200px">
  <div class="row align-items-end mb-4">
    <div class="col-md-8">
      <h2 class="fw-bold text-dark mb-1">Monthly Projections</h2>
      <p class="text-secondary mb-0">
        Manage geography-based targets and performance goals.
      </p>
    </div>

    <div class="col-md-4">
      <label class="form-label fw-bold text-uppercase mb-1">
        <i class="bi bi-funnel-fill me-1"></i> Projection Type
      </label>
      <select
        id="projection_type"
        class="form-select border-0 shadow-sm fw-semibold"
      >
        {% for p in projection_types %}
        <option value="{{ p }}">{{ p }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="card card-custom mb-6" style="margin-bottom: 4.5rem">
    <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
      <h4 class="fw-bold m-0">
        <i class="bi bi-plus-circle-fill text-primary me-2"></i> Add New
        Projection
      </h4>
    </div>
    <hr class="my-5" style="border-top: 1px solid #e9ecef" />
    <div class="card-body p-4">
      <div class="row g-3 d-flex" style="margin: 10px">
        <div class="col-md-4">
          <label class="input-label mb-1">
            <i class="bi bi-geo-alt-fill me-1"></i> State
          </label>
          <select id="state" class="form-select form-select-lg">
            <option value="">Select State</option>
          </select>
        </div>

        <!-- District -->
        <div class="col-md-4">
          <label class="input-label mb-1">
            <i class="bi bi-geo-alt-fill me-1"></i> District
          </label>
          <select id="district" class="form-select form-select-lg" disabled>
            <option value="">Select District</option>
          </select>
        </div>

        <!-- Block -->
        <div class="col-md-4">
          <label class="input-label mb-1">
            <i class="bi bi-geo-alt-fill me-1"></i> Block
          </label>
          <select id="block" class="form-select form-select-lg" disabled>
            <option value="">Select Block</option>
          </select>
        </div>

        <div class="col-md-4">
          <label for="month_year" class="input-label"
            ><i class="bi bi-calendar-event me-1"></i> Month</label
          >
          <input type="month" id="month_year" class="form-control" />
        </div>

        <div class="col-md-4">
          <label for="target" class="input-label"
            ><i class="bi bi-graph-up-arrow me-1"></i> Target</label
          >
          <input
            type="number"
            id="target"
            min="0"
            step="1"
            class="form-control"
            placeholder="e.g. 1200"
          />
        </div>

        <div class="col-md-4 d-flex" style="margin-top: 30px">
          <button
            type="button"
            class="btn btn-success w-100 fw-bold"
            onclick="addProjection()"
          >
            <i class="bi bi-save2 me-2"></i> Save Projection
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="card card-custom">
    <div
      class="card-header bg-white border-bottom pt-4 pb-3 d-flex justify-content-between align-items-center"
    >
      <div>
        <h4 class="fw-bold m-0">
          <i class="bi bi-table me-2 text-secondary"></i> Existing Projections
        </h4>
      </div>
      <hr class="my-5" style="border-top: 1px solid #e9ecef" />
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-custom align-middle mb-0 table-hover">
          <thead>
            <tr>
              <th class="ps-4">
                State
                <select class="column-filter ms-2" data-column="state"></select>
              </th>
              <th>
                District
                <select
                  class="column-filter ms-2"
                  data-column="district"
                ></select>
              </th>
              <th>
                Block
                <select class="column-filter ms-2" data-column="block"></select>
              </th>
              <th>
                Month
                <select
                  class="column-filter ms-2"
                  data-column="month_year"
                ></select>
              </th>
              <th style="width: 200px" class="pe-4">Target</th>
            </tr>
          </thead>
          <tbody id="projection-table"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/static/js/projections.js"></script>

{% endblock content %}