開始日・終了日連動（Date Range Picker）— minDate/maxDateを動的に制御するDatePicker

:root {
  --dpr-accent: #2B7FE8;
  --dpr-danger: #E53E3E;
  --dpr-text:   #1A2332;
  --dpr-muted:  #9AA5B4;
  --dpr-border: #D0D7E0;
  --dpr-bg:     #F4F6F9;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 24px;
  background: #fff;
  color: var(--dpr-text);
}

/* ===== パターンカード ===== */
.dpr-pattern {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--dpr-bg);
  border-radius: 8px;
  max-width: 520px;
}
.dpr-pattern:last-child { margin-bottom: 0; }

.dpr-pattern-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dpr-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== 日付行（ラベル＋入力欄グループ） ===== */
.dpr-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.dpr-time-row:last-of-type { margin-bottom: 0; }

.dpr-row-label {
  font-size: 13px;
  color: #666;
  width: 56px;
  flex-shrink: 0;
}

/* ===== 入力欄グループ（入力+アイコン+クリア） ===== */
.dpr-input-row {
  display: flex;
  align-items: center;
}

/* ===== 入力欄 ===== */
.dpr-input {
  width: 140px;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--dpr-border);
  border-radius: 4px 0 0 4px;
  outline: none;
  font-family: sans-serif;
  color: var(--dpr-text);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dpr-input:focus { border-color: var(--dpr-accent); }

/* カレンダーアイコンボタン */
.dpr-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--dpr-border);
  border-left: none;
  border-radius: 0;
  background: #fff;
  color: #5A6A7A;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dpr-icon-btn:hover { background: var(--dpr-bg); }

/* ×クリアボタン */
.dpr-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--dpr-border);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: #fff;
  color: var(--dpr-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.dpr-clear-btn:hover { color: #5A6A7A; }

/* ===== 決定ボタン ===== */
.dpr-confirm-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 24px;
  background: var(--dpr-accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: sans-serif;
  transition: opacity 0.15s;
}
.dpr-confirm-btn:hover { opacity: 0.85; }

/* ===== 結果表示 ===== */
.dpr-result {
  margin: 8px 0 0;
  font-size: 14px;
  min-height: 20px;
}
.dpr-result.has-value {
  padding: 10px 14px;
  background: #F0F7FF;
  border: 1px solid var(--dpr-accent);
  border-radius: 6px;
  color: #1A5EA8;
  font-weight: 600;
}
.dpr-result.is-error { color: var(--dpr-danger); }

// ===== Flatpickr 共通設定 =====
var baseConfig = {
  locale: 'ja',        // 日本語ロケール（l10n/ja.min.js 読み込み後に有効）
  dateFormat: 'Y/m/d', // 表示フォーマット: YYYY/MM/DD
  allowInput: false    // テキスト直接入力を無効化（カレンダー選択のみ）
};


// ===== Pattern 1: 開始日→終了日（単方向連動） =====
var fp1Start = flatpickr('#dpr1-start-input', Object.assign({}, baseConfig, {
  onChange: function(selectedDates) {
    if (selectedDates.length > 0) {
      // 終了日カレンダーの最小選択可能日を開始日に設定
      fp1End.set('minDate', selectedDates[0]);
      // 終了日が新しいminDateより前ならば自動クリア（矛盾した状態を防ぐ）
      if (fp1End.selectedDates.length > 0 && fp1End.selectedDates[0] < selectedDates[0]) {
        fp1End.clear();
      }
    } else {
      fp1End.set('minDate', null); // 開始日が未選択なら制限を解除
    }
  }
}));

var fp1End = flatpickr('#dpr1-end-input', baseConfig);

document.getElementById('dpr1-start-toggle').addEventListener('click', function() { fp1Start.open(); });
document.getElementById('dpr1-end-toggle').addEventListener('click', function()   { fp1End.open(); });

// 開始日クリア（clear() は set() の制限を解除しないため手動でリセット）
document.getElementById('dpr1-start-clear').addEventListener('click', function() {
  fp1Start.clear();
  fp1End.set('minDate', null);
  clearResult('dpr1-result');
});

document.getElementById('dpr1-end-clear').addEventListener('click', function() {
  fp1End.clear();
  clearResult('dpr1-result');
});

// 決定ボタンで結果を表示
document.getElementById('dpr1-confirm').addEventListener('click', function() {
  var result = document.getElementById('dpr1-result');
  if (fp1Start.selectedDates.length === 0 || fp1End.selectedDates.length === 0) {
    showError(result, '※ 開始日と終了日の両方を選択してください');
    return;
  }
  showValue(result, '期間: ' + formatJa(fp1Start.selectedDates[0]) + ' 〜 ' + formatJa(fp1End.selectedDates[0]));
});


// ===== Pattern 2: 双方向連動 =====
var fp2Start = flatpickr('#dpr2-start-input', Object.assign({}, baseConfig, {
  onChange: function(selectedDates) {
    if (selectedDates.length > 0) {
      fp2End.set('minDate', selectedDates[0]);
      if (fp2End.selectedDates.length > 0 && fp2End.selectedDates[0] < selectedDates[0]) {
        fp2End.clear();
      }
    } else {
      fp2End.set('minDate', null);
    }
  }
}));

var fp2End = flatpickr('#dpr2-end-input', Object.assign({}, baseConfig, {
  onChange: function(selectedDates) {
    if (selectedDates.length > 0) {
      // 開始日カレンダーの最大選択可能日を終了日に設定
      fp2Start.set('maxDate', selectedDates[0]);
      // 開始日が新しいmaxDateより後ならば自動クリア
      if (fp2Start.selectedDates.length > 0 && fp2Start.selectedDates[0] > selectedDates[0]) {
        fp2Start.clear();
      }
    } else {
      fp2Start.set('maxDate', null); // 終了日が未選択なら制限を解除
    }
  }
}));

document.getElementById('dpr2-start-toggle').addEventListener('click', function() { fp2Start.open(); });
document.getElementById('dpr2-end-toggle').addEventListener('click', function()   { fp2End.open(); });

// 開始日クリア → 終了日側のminDate制限も解除
document.getElementById('dpr2-start-clear').addEventListener('click', function() {
  fp2Start.clear();
  fp2End.set('minDate', null);
  clearResult('dpr2-result');
});

// 終了日クリア → 開始日側のmaxDate制限も解除
document.getElementById('dpr2-end-clear').addEventListener('click', function() {
  fp2End.clear();
  fp2Start.set('maxDate', null);
  clearResult('dpr2-result');
});

document.getElementById('dpr2-confirm').addEventListener('click', function() {
  var result = document.getElementById('dpr2-result');
  if (fp2Start.selectedDates.length === 0 || fp2End.selectedDates.length === 0) {
    showError(result, '※ 開始日と終了日の両方を選択してください');
    return;
  }
  showValue(result, '期間: ' + formatJa(fp2Start.selectedDates[0]) + ' 〜 ' + formatJa(fp2End.selectedDates[0]));
});


// ===== ユーティリティ =====
// Date を「YYYY年M月D日」形式の文字列に変換
function formatJa(date) {
  return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
}
function showValue(el, text) {
  el.textContent = text;
  el.className = 'dpr-result has-value';
}
function showError(el, text) {
  el.textContent = text;
  el.className = 'dpr-result is-error';
}
function clearResult(id) {
  var el = document.getElementById(id);
  el.textContent = '';
  el.className = 'dpr-result';
}

// デモリセットボタン用
function resetDemo() {
  fp1Start.clear();
  fp1End.clear();
  fp1End.set('minDate', null);
  fp2Start.clear();
  fp2End.clear();
  fp2Start.set('maxDate', null);
  fp2End.set('minDate', null);
  clearResult('dpr1-result');
  clearResult('dpr2-result');
}