<div class="container py-5 d-flex justify-content-center">
  <div class="card bsdr-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-3">Select a date range</h5>

      <div class="row g-2 mb-3">
        <div class="col-6">
          <label class="form-label small text-muted mb-1">Start date</label>
          <div class="input-group">
            <span class="input-group-text"><i class="bi"></i>From</span>
            <input type="date" class="form-control" id="bsdrStart">
          </div>
        </div>
        <div class="col-6">
          <label class="form-label small text-muted mb-1">End date</label>
          <div class="input-group">
            <span class="input-group-text">To</span>
            <input type="date" class="form-control" id="bsdrEnd">
          </div>
        </div>
      </div>

      <div class="d-flex gap-2 flex-wrap mb-3">
        <button type="button" class="btn btn-outline-secondary btn-sm" id="bsdrToday">Today</button>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="bsdrLast7">Last 7 Days</button>
        <button type="button" class="btn btn-outline-secondary btn-sm" id="bsdrThisMonth">This Month</button>
      </div>

      <div id="bsdrError" class="alert alert-danger py-2 small d-none" role="alert">End date cannot be before the start date.</div>
      <p class="small text-muted mb-0" id="bsdrSummary">Pick a start and end date, or use a quick-select button above.</p>
    </div>
  </div>
</div>

.bsdr-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsdr-card .input-group-text { min-width: 64px; }

const startInput = document.getElementById('bsdrStart');
const endInput = document.getElementById('bsdrEnd');
const errorBox = document.getElementById('bsdrError');
const summary = document.getElementById('bsdrSummary');

function toISO(date) {
  return date.toISOString().slice(0, 10);
}

function msPerDay() {
  return 24 * 60 * 60 * 1000;
}

// Parsing "YYYY-MM-DD" as UTC avoids the off-by-one-day bug that shows up
// when new Date('2026-09-10') is compared against local-timezone dates.
function parseISO(value) {
  const [y, m, d] = value.split('-').map(Number);
  return new Date(Date.UTC(y, m - 1, d));
}

function evaluate() {
  const startVal = startInput.value;
  const endVal = endInput.value;

  if (!startVal || !endVal) {
    errorBox.classList.add('d-none');
    summary.textContent = 'Pick a start and end date, or use a quick-select button above.';
    return;
  }

  const start = parseISO(startVal);
  const end = parseISO(endVal);

  if (end < start) {
    errorBox.classList.remove('d-none');
    summary.textContent = '';
    return;
  }

  errorBox.classList.add('d-none');
  const days = Math.round((end - start) / msPerDay()) + 1;
  summary.textContent = days + (days === 1 ? ' day selected' : ' days selected');
}

startInput.addEventListener('input', evaluate);
endInput.addEventListener('input', evaluate);

document.getElementById('bsdrToday').addEventListener('click', () => {
  const now = new Date();
  const iso = toISO(new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())));
  startInput.value = iso;
  endInput.value = iso;
  evaluate();
});

document.getElementById('bsdrLast7').addEventListener('click', () => {
  const now = new Date();
  const end = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
  const start = new Date(end.getTime() - 6 * msPerDay());
  startInput.value = toISO(start);
  endInput.value = toISO(end);
  evaluate();
});

document.getElementById('bsdrThisMonth').addEventListener('click', () => {
  const now = new Date();
  const start = new Date(Date.UTC(now.getFullYear(), now.getMonth(), 1));
  const end = new Date(Date.UTC(now.getFullYear(), now.getMonth() + 1, 0));
  startInput.value = toISO(start);
  endInput.value = toISO(end);
  evaluate();
});