{% extends "base.html" %}
{% block title %}Record Payment — {{ room.room_number }}{% endblock %}
{% block page_title %}Record Rent Payment{% endblock %}

{% block extra_css %}
<style>
  .month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .month-item label {
    display: block; text-align: center; padding: .5rem .25rem;
    border: 2px solid #e2e8f0; border-radius: 8px;
    cursor: pointer; font-size: .82rem; font-weight: 500;
    transition: all .15s; user-select: none;
  }
  .month-item input { display: none; }
  .month-item input:checked + label {
    background: #3b82f6; color: #fff; border-color: #3b82f6;
  }
  .month-item.y2 input:checked + label {
    background: #8b5cf6; color: #fff; border-color: #8b5cf6;
  }
  .month-item label:hover { border-color: #3b82f6; color: #3b82f6; }
  .month-item.y2 label:hover { border-color: #8b5cf6; color: #8b5cf6; }
  .month-item.disabled label { opacity: .4; cursor: not-allowed; pointer-events: none; }
  #total-preview { font-size: 1.6rem; font-weight: 700; color: #22c55e; }
  .year-section { border-radius: 10px; padding: 1rem; }
  .year-section.y1 { background: #eff6ff; border: 1px solid #bfdbfe; }
  .year-section.y2 { background: #f5f3ff; border: 1px solid #ddd6fe; }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">

    <!-- Room Summary -->
    <div class="card mb-3 border-0" style="background: #eff6ff;">
      <div class="card-body py-2 d-flex align-items-center gap-3">
        <i class="bi bi-door-open text-primary fs-3"></i>
        <div>
          <div class="fw-bold">{{ room.room_number }}</div>
          <div class="small text-muted">
            Rent: <strong class="text-success">TSh {{ room.rent_per_month|floatformat:0 }}</strong>/month
            {% if room.current_user_name %}
            &nbsp;|&nbsp; Tenant: <strong>{{ room.current_user_name }}</strong>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><i class="bi bi-cash-coin me-1"></i>Payment Details</div>
      <div class="card-body">
        <form method="post" novalidate id="paymentForm">
          {% csrf_token %}

          {% if form.non_field_errors %}
          <div class="alert alert-danger">{{ form.non_field_errors }}</div>
          {% endif %}

          <!-- Period -->
          <div class="mb-4">
            <label class="form-label fw-semibold">Payment Period <span class="text-danger">*</span></label>
            {{ form.payment_period }}
            <div class="form-text">Select the period first, then pick months from one or both years below.</div>
            {% if form.payment_period.errors %}<div class="text-danger small">{{ form.payment_period.errors }}</div>{% endif %}
          </div>

          <!-- Counter -->
          <div class="d-flex justify-content-between align-items-center mb-2">
            <label class="form-label fw-semibold mb-0">Months Paid <span class="text-danger">*</span></label>
            <span id="month-counter" class="text-muted small fw-normal">Select a period first</span>
          </div>
          {% if form.months_paid.errors or form.months_paid_y2.errors %}
          <div class="text-danger small mb-2">{{ form.months_paid.errors }}{{ form.months_paid_y2.errors }}</div>
          {% endif %}

          <!-- Year 1 -->
          <div class="year-section y1 mb-3">
            <div class="d-flex align-items-center gap-2 mb-3">
              <span class="badge bg-primary">Year 1</span>
              <div style="width:140px;">{{ form.year }}</div>
            </div>
            <div class="month-grid" id="month-grid-y1">
              {% for value, label in form.months_paid.field.choices %}
              <div class="month-item disabled" id="mitem1-{{ value }}">
                <input type="checkbox" name="months_paid" value="{{ value }}" id="m1_{{ value }}" class="month-cb-y1" disabled>
                <label for="m1_{{ value }}">{{ label }}</label>
              </div>
              {% endfor %}
            </div>
          </div>

          <!-- Year 2 -->
          <div class="year-section y2 mb-4">
            <div class="d-flex align-items-center gap-2 mb-3">
              <span class="badge" style="background:#8b5cf6;">Year 2</span>
              <div style="width:140px;">{{ form.year_end }}</div>
              <span class="text-muted small">optional — use when payment spans into a new year</span>
            </div>
            <div class="month-grid" id="month-grid-y2">
              {% for value, label in form.months_paid_y2.field.choices %}
              <div class="month-item y2 disabled" id="mitem2-{{ value }}">
                <input type="checkbox" name="months_paid_y2" value="{{ value }}" id="m2_{{ value }}" class="month-cb-y2" disabled>
                <label for="m2_{{ value }}">{{ label }}</label>
              </div>
              {% endfor %}
            </div>
          </div>

          <!-- Total Preview -->
          <div class="mb-4 text-center p-3 rounded-3" style="background:#f0fdf4;">
            <div class="text-muted small mb-1">Total Amount to Record</div>
            <div id="total-preview">TSh 0</div>
            <div class="text-muted small" id="calc-note"></div>
          </div>

          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Tenant Name</label>
              {{ form.tenant_name }}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Notes</label>
              {{ form.notes }}
            </div>
          </div>

          <div class="d-flex gap-2 justify-content-end mt-4">
            <a href="{% url 'room_detail' room.pk %}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-success" id="submit-btn" disabled>
              <i class="bi bi-check-lg me-1"></i>Record Payment
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const rentPerMonth = {{ room.rent_per_month|default:0 }};
const periodSelect = document.getElementById('id_payment_period');
const totalPreview = document.getElementById('total-preview');
const calcNote    = document.getElementById('calc-note');
const counter     = document.getElementById('month-counter');
const submitBtn   = document.getElementById('submit-btn');

function getChecked() {
  const y1 = document.querySelectorAll('.month-cb-y1:checked').length;
  const y2 = document.querySelectorAll('.month-cb-y2:checked').length;
  return { y1, y2, total: y1 + y2 };
}

function updateTotal() {
  const period = parseInt(periodSelect.value) || 0;
  const { y1, y2, total } = getChecked();
  const amount = total * rentPerMonth;

  totalPreview.textContent = 'TSh ' + amount.toLocaleString();
  calcNote.textContent = period
    ? `${total} × TSh ${rentPerMonth.toLocaleString()} = TSh ${amount.toLocaleString()}`
    : '';

  if (!period) {
    counter.textContent = 'Select a period first';
    counter.className = 'text-muted small fw-normal';
  } else if (total > period) {
    counter.textContent = `${total} / ${period} — too many selected`;
    counter.className = 'text-danger small fw-semibold';
  } else if (total === period) {
    const note = y2 > 0 ? ` (${y1} from Yr1 + ${y2} from Yr2)` : '';
    counter.textContent = `${total} / ${period} months selected${note}`;
    counter.className = 'text-success small fw-semibold';
  } else {
    const note = y2 > 0 ? ` (${y1} + ${y2})` : '';
    counter.textContent = `${total} / ${period} months selected${note}`;
    counter.className = 'text-muted small fw-normal';
  }

  submitBtn.disabled = (period === 0 || total !== period);
}

function setAllEnabled(enabled) {
  document.querySelectorAll('.month-cb-y1, .month-cb-y2').forEach(cb => {
    cb.disabled = !enabled;
    cb.checked = false;
    cb.closest('.month-item').classList.toggle('disabled', !enabled);
  });
}

periodSelect.addEventListener('change', function () {
  setAllEnabled(!!this.value);
  updateTotal();
});

document.querySelectorAll('.month-cb-y1, .month-cb-y2').forEach(cb => {
  cb.addEventListener('change', function () {
    const period = parseInt(periodSelect.value) || 0;
    const { total } = getChecked();
    if (total > period) { this.checked = false; }
    updateTotal();
  });
});

updateTotal();
</script>
{% endblock %}