{% extends "base.html" %}
{% block content %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css">
<style>
:root{--green:#1a7a4a;--gl:#e8f5ee;--gm:#2ab870;--gd:#0f5235;--amber:#d97706;--al:#fef3c7;--purple:#7c3aed;--cyan:#0891b2;}
.planner-wrap{max-width:1100px;margin:0 auto;padding:1.25rem 1.5rem;}

/* CONTROLS */
.pm-controls{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;}
.pm-nav{display:flex;align-items:center;gap:.35rem;}
.pm-nbtn{width:28px;height:28px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#4b5563;}
.pm-nbtn:hover{border-color:#1a7a4a;color:#1a7a4a;}
.pm-tbtn{font-size:.7rem;font-weight:600;padding:0 .55rem;height:28px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;color:#4b5563;font-family:inherit;border-radius:6px;transition:all .15s;}
.pm-tbtn:hover,.pm-tbtn.hidden-btn{border-color:#1a7a4a;color:#1a7a4a;}
.pm-tbtn.hidden-btn{opacity:0;pointer-events:none;}
.pm-drange{font-size:.8rem;font-weight:500;color:#374151;min-width:145px;text-align:center;}
.pm-view-toggle{display:flex;background:#fff;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;}
.pm-vbtn{padding:.32rem .7rem;font-size:.76rem;font-weight:500;border:none;background:transparent;cursor:pointer;color:#6b7280;font-family:inherit;}
.pm-vbtn.act{background:#1a7a4a;color:#fff;}
.pm-add-btn{margin-left:auto;background:#1a7a4a;color:#fff;border:none;border-radius:6px;padding:.35rem .85rem;font-size:.78rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.35rem;font-family:inherit;}
.pm-add-btn:hover{background:#0f5235;}

/* TODAY CARD */
.today-card{background:#fff;border:2px solid #1a7a4a;border-radius:10px;margin-bottom:.75rem;display:none;}
.today-card.visible{display:block;}
.today-head{background:#1a7a4a;color:#fff;padding:.55rem 1rem;display:flex;align-items:center;justify-content:space-between;}
.today-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;}
.today-date-txt{font-weight:500;font-size:.92rem;}
.snack-tog-btn{font-size:.68rem;color:rgba(255,255,255,.65);cursor:pointer;padding:.1rem .4rem;border:1px solid rgba(255,255,255,.3);border-radius:6px;background:transparent;font-family:inherit;}
.snack-tog-btn:hover{color:#fff;border-color:rgba(255,255,255,.6);}
.today-segs{display:grid;border-top:1px solid #f3f4f6;}
.today-seg{padding:.65rem .85rem;border-right:2px solid #e8f5ee;transition:opacity .2s;min-width:0;}
.today-seg:last-child{border-right:none;}
.today-seg.cooked{opacity:.5;background:#f9fafb;}
.seg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem;gap:.3rem;}
.seg-type{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;}
.seg-btns{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;justify-content:flex-end;}
.seg-cookmode{font-size:.62rem;background:transparent;color:#1a7a4a;border:1px solid #1a7a4a;border-radius:3px;padding:1px 5px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.seg-cookmode:hover{background:#e8f5ee;}
.seg-done{font-size:.62rem;background:#1a7a4a;color:#fff;border:none;border-radius:3px;padding:2px 6px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.seg-done:hover{background:#0f5235;}
.seg-cooked{font-size:.62rem;color:#1a7a4a;font-weight:600;white-space:nowrap;}
.seg-edit{font-size:.62rem;color:#9ca3af;cursor:pointer;white-space:nowrap;}
.seg-edit:hover{color:#1a7a4a;}
.seg-recipe{font-size:.78rem;font-weight:500;color:#374151;line-height:1.35;margin-bottom:2px;}
.seg-side{font-size:.68rem;color:#9ca3af;line-height:1.4;}
.seg-empty{font-size:.72rem;color:#d1d5db;font-style:italic;}
.seg-add{font-size:.68rem;color:#2ab870;cursor:pointer;margin-top:.2rem;display:inline-block;}
.seg-add:hover{text-decoration:underline;}

/* DAY GRID */
.days-grid{display:grid;gap:.6rem;}
.days-grid.g3{grid-template-columns:repeat(3,1fr);}
.days-grid.g4{grid-template-columns:repeat(4,1fr);}
.day-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;}
.day-card.has-event{border-color:#d97706;}
.day-card.past{opacity:.6;}
.day-head{display:flex;align-items:center;justify-content:space-between;padding:.42rem .65rem;border-bottom:1px solid #f3f4f6;}
.day-head-l{display:flex;align-items:baseline;gap:.3rem;}
.day-name{font-size:.68rem;font-weight:600;color:#6b7280;}
.day-dt{font-size:.78rem;color:#374151;}
.evt-badge{font-size:.57rem;font-weight:700;text-transform:uppercase;background:#d97706;color:#fff;padding:1px 5px;border-radius:3px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meal-rows{padding:.3rem .4rem;display:flex;flex-direction:column;gap:.18rem;}
.mrow-head{display:flex;align-items:center;justify-content:space-between;padding:.2rem .4rem;cursor:pointer;border-radius:5px;transition:background .1s;}
.mrow-head:hover{background:#f9fafb;}
.mrow-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.mrow-plus{font-size:.8rem;color:#d1d5db;transition:color .15s;}
.mrow-head:hover .mrow-plus{color:#1a7a4a;}
.mrow-body{padding:0 .4rem .28rem;}
.mrow-empty{font-size:.63rem;color:#d1d5db;font-style:italic;padding:1px 0;}
.rchip{display:flex;align-items:center;justify-content:space-between;padding:2px 5px;border-radius:4px;font-size:.66rem;font-weight:500;margin-bottom:1px;}
.rchip.ckd{opacity:.4;text-decoration:line-through;}
.rchip-x{opacity:.6;cursor:pointer;font-size:.75rem;flex-shrink:0;transition:opacity .15s;padding:0 3px;color:#6b7280!important;line-height:1;}
.rchip:hover .rchip-x{opacity:1;}
.rchip.side-chip{background:#f3f4f6!important;color:#4b5563!important;font-weight:400;}
.rchip.mt-breakfast{background:#f5f3ff;color:#5b21b6;}
.rchip.mt-lunch{background:#ecfeff;color:#155e75;}
.rchip.mt-dinner{background:#e8f5ee;color:#0f5235;}
.rchip.mt-snack{background:#fef3c7;color:#92400e;}
.cooked-tag{font-size:.6rem;color:#1a7a4a;font-weight:600;padding:1px 4px;}
.snack-row{padding:.12rem .4rem .25rem;display:flex;align-items:center;gap:.3rem;cursor:pointer;}
.snack-row-lbl{font-size:.58rem;color:#d1d5db;transition:color .15s;}
.snack-row:hover .snack-row-lbl{color:#d97706;}
.snack-row-line{flex:1;height:1px;background:#f3f4f6;}

/* MONTH */
.month-head-row{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px;}
.mhlbl{text-align:center;font-size:.67rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;padding:.3rem 0;}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.mcell{background:#fff;border:1px solid #e5e7eb;border-radius:6px;padding:.4rem .5rem;min-height:90px;cursor:pointer;transition:border-color .15s;}
.mcell:hover{border-color:#2ab870;}
.mcell.mtoday{border-color:#1a7a4a;border-width:2px;}
.mcell.mother{background:#f9fafb;opacity:.4;}
.mcell.mevent{border-color:#d97706;}
.mcell-num{font-size:.82rem;font-weight:500;color:#6b7280;margin-bottom:3px;}
.mcell.mtoday .mcell-num{color:#1a7a4a;font-weight:700;}
.mdots{display:flex;gap:2px;margin-bottom:2px;flex-wrap:wrap;}
.mdot{width:5px;height:5px;border-radius:50%;}
.mlbls{display:flex;flex-direction:column;gap:1px;}
.mlbl{font-size:.65rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
.mlbl.evl{color:#d97706;font-weight:500;}

/* MODALS */
.pm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1050;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto;}
.pm-overlay.open{display:flex;}
.pm-modal{background:#fff;border-radius:14px;padding:1.35rem;max-width:480px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.15);}
.pm-modal-inner{padding-right:4px;}
.pm-modal-sm{background:#fff;border-radius:14px;padding:1.5rem;max-width:360px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.15);text-align:center;}
.pm-modal-cook{background:#fff;border-radius:14px;max-width:520px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,.15);max-height:90vh;display:flex;flex-direction:column;}
.pm-title{font-size:1.05rem;font-weight:600;margin-bottom:.15rem;}
.pm-sub{font-size:.78rem;color:#6b7280;margin-bottom:1rem;}
.pm-fg{margin-bottom:.8rem;}
.pm-lbl{font-size:.7rem;font-weight:600;color:#4b5563;display:block;margin-bottom:.28rem;text-transform:uppercase;letter-spacing:.04em;}
.pm-input,.pm-select{width:100%;padding:.42rem .65rem;border:1px solid #d1d5db;border-radius:6px;font-size:.82rem;color:#1f2937;outline:none;font-family:inherit;}
.pm-input:focus,.pm-select:focus{border-color:#1a7a4a;}
.pm-input[disabled],.pm-select[disabled]{background:#f3f4f6;color:#9ca3af;cursor:default;}
.pm-date-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.pm-actions{display:flex;gap:.45rem;justify-content:flex-end;padding-top:.7rem;border-top:1px solid #f3f4f6;margin-top:.85rem;}
.pm-bcn{padding:.38rem .8rem;border:1px solid #e5e7eb;background:#fff;border-radius:6px;font-size:.78rem;cursor:pointer;color:#4b5563;font-family:inherit;}
.pm-bsv{padding:.38rem .8rem;background:#1a7a4a;color:#fff;border:none;border-radius:6px;font-size:.78rem;font-weight:500;cursor:pointer;font-family:inherit;}
.pm-bsv:hover{background:#0f5235;}
.sides-toggle{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:#6b7280;cursor:pointer;padding:.1rem 0;margin-bottom:.35rem;}
.sides-toggle:hover{color:#1a7a4a;}
.sides-sec{display:none;}
.sides-sec.open{display:block;}
.evt-link{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:#9ca3af;cursor:pointer;margin-top:.3rem;padding:.15rem 0;}
.evt-link:hover{color:#d97706;}
.evt-fields{display:none;background:#fef3c7;border:1px solid #fcd34d;border-radius:6px;padding:.6rem .7rem;margin-top:.3rem;}
.evt-fields.open{display:block;}

/* Confirm */
.confirm-icon{font-size:2rem;margin-bottom:.5rem;}
.confirm-title{font-size:1.1rem;font-weight:600;margin-bottom:.4rem;}
.confirm-body{font-size:.82rem;color:#4b5563;line-height:1.55;margin-bottom:.75rem;}
.confirm-note{font-size:.74rem;color:#d97706;background:#fef3c7;border-radius:6px;padding:.4rem .6rem;margin-bottom:1rem;text-align:left;}
.confirm-actions{display:flex;gap:.5rem;justify-content:center;}
.btn-confirm-ok{padding:.45rem 1rem;background:#1a7a4a;color:#fff;border:none;border-radius:6px;font-size:.82rem;font-weight:500;cursor:pointer;font-family:inherit;}
.btn-confirm-ok:hover{background:#0f5235;}

/* Cook modal */
.cook-head{background:#1a7a4a;color:#fff;padding:1rem 1.5rem;border-radius:14px 14px 0 0;flex-shrink:0;}
.cook-recipe-name{font-size:1.1rem;font-weight:600;}
.cook-meal-lbl{font-size:.68rem;opacity:.7;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.cook-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1;}
.cook-progress{height:4px;background:#f3f4f6;border-radius:2px;margin-bottom:1rem;overflow:hidden;}
.cook-bar{height:100%;background:#1a7a4a;border-radius:2px;transition:width .3s;}
.cook-step{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem;border:1px solid #e5e7eb;border-radius:6px;margin-bottom:.5rem;}
.cook-step.done{opacity:.45;background:#f9fafb;}
.step-num{width:26px;height:26px;border-radius:50%;background:#1a7a4a;color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cook-step.done .step-num{background:#d1d5db;}
.step-txt{font-size:.82rem;line-height:1.5;color:#374151;flex:1;}
.step-done-btn{font-size:.7rem;color:#1a7a4a;cursor:pointer;border:1px solid #1a7a4a;border-radius:6px;padding:1px 7px;background:transparent;flex-shrink:0;margin-top:2px;font-family:inherit;}
.step-done-btn:hover{background:#e8f5ee;}
.cook-actions{display:flex;gap:.5rem;justify-content:flex-end;padding:1rem 1.5rem;border-top:1px solid #f3f4f6;flex-shrink:0;}
.btn-finish{background:#1a7a4a;color:#fff;border:none;border-radius:6px;padding:.45rem 1rem;font-size:.82rem;font-weight:500;cursor:pointer;font-family:inherit;}
.btn-finish:hover{background:#0f5235;}

/* TomSelect */
.ts-wrapper.single .ts-control,.ts-wrapper.multi .ts-control{border-radius:6px;font-size:.82rem;}
.ts-wrapper.focus .ts-control{border-color:#1a7a4a!important;box-shadow:none!important;}
.ts-dropdown{font-size:.82rem;z-index:2000!important;}
.ts-dropdown .option.selected,.ts-dropdown .option:hover,.ts-dropdown .option.active{background:#e8f5ee;color:#0f5235;}
.ts-wrapper.multi .ts-control .item{background:#e8f5ee;color:#0f5235;border:none;font-size:.75rem;}

/* TOAST */


/* RESPONSIVE */
@media(max-width:900px){.days-grid.g3,.days-grid.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){
  .month-head-row,.month-grid{grid-template-columns:repeat(7,1fr);gap:2px;}
  .mcell{min-height:52px;padding:.25rem .2rem;}
  .mcell-num{font-size:.7rem;}
  .mlbl{display:none;}
  .mdots{margin-bottom:0;}
}
@media(max-width:768px){
  .today-segs{grid-template-columns:1fr!important;display:flex!important;flex-direction:column;}
  .today-seg{border-right:none!important;border-bottom:1px solid #e5e7eb;}
  .today-seg:last-child{border-bottom:none;}
  .pm-controls{gap:.35rem;}
  .pm-drange{min-width:110px;font-size:.75rem;}
}
@media(max-width:500px){
  .days-grid.g3,.days-grid.g4{grid-template-columns:1fr;}
  .planner-wrap{padding:.75rem 1rem;}
  .pm-modal{padding:1rem;}
}
</style>

<div class="planner-wrap">
  <!-- Controls -->
  <div class="pm-controls">
    <div class="pm-nav">
      <button class="pm-nbtn" id="pmPrev">&#8249;</button>
      <div style="position:relative">
        <div class="pm-drange" id="pmRange" onclick="document.getElementById('pmJumpDate').showPicker?document.getElementById('pmJumpDate').showPicker():document.getElementById('pmJumpDate').focus()" style="cursor:pointer;text-decoration:underline dotted #9ca3af" title="Click to jump to date"></div>
        <input type="date" id="pmJumpDate" style="position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;top:0;left:0">
      </div>
      <button class="pm-nbtn" id="pmNext">&#8250;</button>
      <button class="pm-tbtn" id="pmToday">Today</button>
    </div>
    <div class="pm-view-toggle">
      <button class="pm-vbtn act" id="pmWkBtn">Week</button>
      <button class="pm-vbtn" id="pmMoBtn">Month</button>
    </div>
    <button class="pm-add-btn" id="pmAddBtn">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      Add Meal
    </button>
    <button class="pm-tbtn" id="pmClearAll" title="Clear all planned meals" style="color:#dc2626;border-color:#fecaca;">
      &#128465; Clear
    </button>
  </div>

  <!-- Week view -->
  <div id="pmWeekView">
    <div class="today-card" id="pmTodayCard"></div>
    <div id="pmDaysGrid"></div>
  </div>

  <!-- Month view -->
  <div id="pmMonthView" style="display:none">
    <div class="month-head-row">
      <div class="mhlbl">Sun</div><div class="mhlbl">Mon</div><div class="mhlbl">Tue</div>
      <div class="mhlbl">Wed</div><div class="mhlbl">Thu</div><div class="mhlbl">Fri</div><div class="mhlbl">Sat</div>
    </div>
    <div class="month-grid" id="pmMonthGrid"></div>
  </div>
</div>

<!-- Meal Modal -->
<div class="pm-overlay" id="pmMealModal">
<div class="pm-modal">
  <div class="pm-title" id="pmModalTitle">Add Meal</div>
  <div class="pm-sub" id="pmModalSub"></div>
  <div class="pm-modal-inner">
    <div class="pm-date-row pm-fg">
      <div><label class="pm-lbl">Date</label><input type="date" class="pm-input" id="pmDate"></div>
      <div><label class="pm-lbl">Meal</label>
        <select class="pm-select" id="pmMt">
          <option value="breakfast">Breakfast</option>
          <option value="lunch">Lunch</option>
          <option value="dinner" selected>Dinner</option>
          <option value="snack">Snack</option>
        </select>
      </div>
    </div>
    <div class="pm-fg">
      <label class="pm-lbl">Main Recipe</label>
      <select id="pmMainSel" placeholder="Search recipes..."></select>
    </div>
    <div class="sides-toggle" id="pmSidesToggle">
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      <span id="pmSidesLbl">Add sides / additional recipes</span>
    </div>
    <div class="sides-sec" id="pmSidesSec">
      <div class="pm-fg" style="margin-bottom:.4rem">
        <select id="pmSidesSel" multiple placeholder="Search sides..."></select>
      </div>
    </div>
    <div class="evt-link" id="pmEvtLink">
      <span>&#127881;</span><span id="pmEvtLbl">Make this a holiday or event</span>
    </div>
    <div class="evt-fields" id="pmEvtFields">
      <div style="margin-bottom:.5rem"><label class="pm-lbl">Event Name</label>
        <input type="text" class="pm-input" id="pmEvtName" placeholder="e.g. Thanksgiving Dinner"></div>
      <div><label class="pm-lbl" style="margin-bottom:.3rem">Courses</label>
        <div style="display:flex;flex-wrap:wrap;gap:.4rem">
          <label style="font-size:.74rem;display:flex;align-items:center;gap:.3rem"><input type="checkbox" checked> Appetizer</label>
          <label style="font-size:.74rem;display:flex;align-items:center;gap:.3rem"><input type="checkbox" checked> Main</label>
          <label style="font-size:.74rem;display:flex;align-items:center;gap:.3rem"><input type="checkbox" checked> Sides</label>
          <label style="font-size:.74rem;display:flex;align-items:center;gap:.3rem"><input type="checkbox" checked> Dessert</label>
          <label style="font-size:.74rem;display:flex;align-items:center;gap:.3rem"><input type="checkbox"> Beverages</label>
        </div>
      </div>
    </div>
  </div>
  <div class="pm-actions">
    <button class="pm-bcn" id="pmMealCancel">Cancel</button>
    <button class="pm-bsv" id="pmMealSave">Save Meal</button>
  </div>
</div>
</div>

<!-- Cook Confirm Modal -->
<div class="pm-overlay" id="pmConfirmModal">
<div class="pm-modal-sm">
  <div class="confirm-icon">&#127859;</div>
  <div class="confirm-title">Mark as Cooked?</div>
  <div class="confirm-body" id="pmConfirmBody"></div>
  <div class="confirm-note" style="text-align:left">
    <label style="display:flex;align-items:flex-start;gap:.5rem;cursor:pointer">
      <input type="checkbox" id="pmDeductPantry" checked style="margin-top:2px;flex-shrink:0">
      <span>Deduct used ingredients from pantry</span>
    </label>
  </div>
  <div class="confirm-actions">
    <button class="pm-bcn" id="pmConfirmCancel">Cancel</button>
    <button class="btn-confirm-ok" id="pmConfirmOk">Yes, Mark Cooked</button>
  </div>
</div>
</div>

<!-- Scoped Clear Modal -->
<div class="pm-overlay" id="pmClearModal">
<div class="pm-modal-sm">
  <div class="confirm-icon">&#128465;</div>
  <div class="confirm-title">Clear Meals</div>
  <div style="font-size:.82rem;color:#6b7280;margin-bottom:1rem">What would you like to clear?</div>
  <div style="display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem">
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.4rem .6rem;border-radius:6px;border:1px solid #e5e7eb;font-size:.82rem">
      <input type="radio" name="clearScope" value="today" id="csTodayOnly" checked> Today only
    </label>
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.4rem .6rem;border-radius:6px;border:1px solid #e5e7eb;font-size:.82rem">
      <input type="radio" name="clearScope" value="week"> This week (Mon–Sun)
    </label>
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.4rem .6rem;border-radius:6px;border:1px solid #e5e7eb;font-size:.82rem">
      <input type="radio" name="clearScope" value="future"> Future only (from tomorrow)
    </label>
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.4rem .6rem;border-radius:6px;border:1px solid #e5e7eb;font-size:.82rem">
      <input type="radio" name="clearScope" value="range"> Custom range
    </label>
    <label style="display:flex;align-items:center;gap:.6rem;cursor:pointer;padding:.4rem .6rem;border-radius:6px;border:1px solid #e5e7eb;font-size:.82rem;color:#dc2626">
      <input type="radio" name="clearScope" value="all"> All future meals
    </label>
  </div>
  <div id="pmClearRangeOpts" style="display:none;margin-bottom:1rem">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem">
      <div>
        <div style="font-size:.72rem;color:#6b7280;margin-bottom:.25rem">From</div>
        <input type="date" id="pmClearFrom" class="form-control form-control-sm">
      </div>
      <div>
        <div style="font-size:.72rem;color:#6b7280;margin-bottom:.25rem">To</div>
        <input type="date" id="pmClearTo" class="form-control form-control-sm">
      </div>
    </div>
    <div style="font-size:.68rem;color:#dc2626;margin-top:.3rem"><i class="fas fa-lock me-1"></i>Past dates are protected and cannot be cleared</div>
  </div>
  <div class="confirm-actions">
    <button class="pm-bcn" onclick="document.getElementById('pmClearModal').classList.remove('open')">Cancel</button>
    <button class="btn-confirm-ok" style="background:#dc2626" onclick="executeScopedClear()">Clear Meals</button>
  </div>
</div>
</div>

<!-- Cook Mode Modal -->
{% if feature('feature_cook_mode') %}
<div class="pm-overlay" id="pmCookModal">
<div class="pm-modal-cook">
  <div style="background:#d97706;color:#fff;font-size:.7rem;font-weight:600;text-align:center;padding:.25rem;border-radius:14px 14px 0 0;letter-spacing:.05em">
    ⚠️ ALPHA — Cook Mode is under development. Full rebuild coming in Phase 2.
  </div>
  <div class="cook-head">
    <div class="cook-recipe-name" id="pmCookName"></div>
    <div class="cook-meal-lbl" id="pmCookLbl"></div>
  </div>
  <div class="cook-body">
    <div class="cook-progress"><div class="cook-bar" id="pmCookBar" style="width:0%"></div></div>
    <div id="pmCookSteps"></div>
  </div>
  <div class="cook-actions">
    <button class="pm-bcn" id="pmCookClose">Close</button>
    <button class="btn-finish" id="pmCookFinish">Done Cooking &#10003;</button>
  </div>
</div>
</div>
{% endif %}

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
const RECIPES_DATA = {{ recipes_json|tojson }};
const PLANNED_DATA = {{ planned_json|tojson }};
const COOKED_INIT = {{ cooked_json|tojson }};
const CSRF_TOKEN = "{{ csrf_token() if csrf_token is defined else '' }}";

const SIDE_TYPES = ['Salad','Sauce','Condiment','Sauce / Condiment','Appetizer','Side Dish','Deli / Specialty','Bread & Pastry','Beverage','Smoothie / Shake','Cocktail / Mocktail','Health Shot'];
const MCOLS = {breakfast:'#7c3aed',lunch:'#0891b2',dinner:'#1a7a4a',snack:'#d97706'};
const MTS = ['breakfast','lunch','dinner'];

let planned = {}, cooked = new Set(COOKED_INIT), snackDays = new Set();
let weekOff = 0;
let view = sessionStorage.getItem('kcPlannerView') || 'week';
let mSelMain = null, mSelSides = [], isEvt = false, sideOpen = false;
let tsMain = null, tsSides = null;
let pendingDs = null, pendingMt = null;
let cookDs = null, cookMt = null, cookStepsDone = new Set();
let modalLocked = false;

const today = new Date(); today.setHours(0,0,0,0);
const todayStr = dk(today);

PLANNED_DATA.forEach(m => {
  if(!planned[m.date]) planned[m.date] = {};
  planned[m.date][m.meal_type] = {id:m.id, recipes:m.main_id?[m.main_id]:[], sides:m.side_ids||[], event:m.event_name||null};
});

function dk(d){return d.toISOString().split('T')[0];}
function addDays(d,n){const r=new Date(d);r.setDate(r.getDate()+n);return r;}
function fmtShort(d){return d.toLocaleDateString('en-US',{month:'short',day:'numeric'});}
function fmtFull(d){return d.toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric'});}
function ckKey(ds,mt){return ds+'::'+mt;}
function getMeal(ds,mt){return planned[ds]&&planned[ds][mt]||null;}
function getEvent(ds){if(!planned[ds])return null;const m=Object.values(planned[ds]).find(m=>m.event);return m?m.event:null;}
function getR(id){return RECIPES_DATA.find(r=>r.id===id);}

function getWeekDays(){
  const days=[];
  const start=addDays(today,weekOff*7);
  for(let i=0;i<7;i++) days.push(addDays(start,i));
  return days;
}

// ── TODAY CARD ──
function renderTodayCard(){
  const card = document.getElementById('pmTodayCard');
  if(weekOff !== 0){ card.className='today-card'; return; }
  const d = new Date(todayStr+'T00:00:00');
  const snackOn = snackDays.has(todayStr);
  const allMts = snackOn ? [...MTS,'snack'] : MTS;

  const segs = allMts.map(mt => {
    const meal = getMeal(todayStr,mt);
    const isCk = cooked.has(ckKey(todayStr,mt));
    const color = MCOLS[mt];
    let body='', btns='';
    if(meal && meal.recipes.length){
      const r = getR(meal.recipes[0]);
      body = `<div class="seg-recipe">${r?r.title:'Recipe'}</div>`;
      if(meal.sides&&meal.sides.length) meal.sides.forEach(sid=>{
        const sr=getR(sid); if(sr) body+=`<div class="seg-side">+ ${sr.title.slice(0,22)}</div>`;
      });
      if(isCk){
        btns = `<span class="seg-cooked">&#10003; Cooked</span>`;
      } else {
        btns = `{% if feature('feature_cook_mode') %}<button class="seg-cookmode" onclick="openCookMode('${todayStr}','${mt}')">Cook Mode</button>{% endif %}
          <button class="seg-done" onclick="askCook('${todayStr}','${mt}')">Done</button>
          <span class="seg-edit" onclick="openModal('${todayStr}','${mt}',true)">Edit</span>
          <span class="seg-remove" onclick="kcConfirm('Remove this meal?',function(){removeMeal('${todayStr}','${mt}');},'Remove Meal')" title="Remove meal" style="cursor:pointer;color:#dc2626;font-size:.75rem;padding:0 3px;opacity:.6">&#10005;</span>`;
      }
    } else {
      body = `<div class="seg-empty">Not planned</div>`;
      btns = `<span class="seg-add" onclick="openModal('${todayStr}','${mt}',true)">+ Add</span>`;
    }
    return `<div class="today-seg${isCk?' cooked':''}">
      <div class="seg-head">
        <span class="seg-type" style="color:${color}">${mt}</span>
        <div class="seg-btns">${btns}</div>
      </div>${body}</div>`;
  }).join('');

  card.innerHTML = `<div class="today-head">
    <div><div class="today-lbl">Today</div><div class="today-date-txt">${fmtFull(d)}</div></div>
    <button class="snack-tog-btn" onclick="toggleSnack('${todayStr}')">${snackOn?'&#8722; snack':'+ snack'}</button>
  </div>
  <div class="today-segs" style="grid-template-columns:repeat(${allMts.length},1fr)">${segs}</div>`;
  card.className = 'today-card visible';
}

// ── DAYS GRID ──
function renderDaysGrid(){
  const days = getWeekDays();
  document.getElementById('pmRange').textContent = fmtShort(days[0])+' \u2013 '+fmtShort(days[6]);

  // Show/hide Today button
  const todayBtn = document.getElementById('pmToday');
  todayBtn.className = 'pm-tbtn' + (weekOff===0 ? ' hidden-btn' : '');

  const grid = document.getElementById('pmDaysGrid');
  grid.innerHTML = '';
  const daysToShow = weekOff===0 ? days.slice(1) : days;
  const wrapper = document.createElement('div');
  wrapper.className = 'days-grid '+(weekOff===0?'g3':'g4');

  daysToShow.forEach(day => {
    const key = dk(day);
    const isPast = day.getTime() < today.getTime();
    const evt = getEvent(key);
    const snackOn = snackDays.has(key);
    let cls = 'day-card';
    if(isPast) cls += ' past';
    if(evt) cls += ' has-event';
    const card = document.createElement('div');
    card.className = cls;
    const evtBadge = evt ? `<span class="evt-badge" title="${evt}">${evt}</span>` : '';
    const mts = snackOn ? [...MTS,'snack'] : MTS;
    let rows = mts.map(mt=>buildMealRow(key,mt)).join('');
    rows += `<div class="snack-row" onclick="toggleSnack('${key}')">
      <div class="snack-row-line"></div>
      <span class="snack-row-lbl">${snackOn?'&#8722; snack':'+ snack'}</span>
      <div class="snack-row-line"></div>
    </div>`;
    card.innerHTML = `<div class="day-head">
      <div class="day-head-l">
        <span class="day-name">${day.toLocaleDateString('en-US',{weekday:'short'})}</span>
        <span class="day-dt">${day.toLocaleDateString('en-US',{month:'short',day:'numeric'})}</span>
      </div>${evtBadge}</div>
      <div class="meal-rows">${rows}</div>`;
    wrapper.appendChild(card);
  });
  grid.appendChild(wrapper);
}

function buildMealRow(ds,mt){
  const meal = getMeal(ds,mt);
  const isCk = cooked.has(ckKey(ds,mt));
  const color = MCOLS[mt];
  let body = '';
  if(!meal||!meal.recipes.length){
    body = `<div class="mrow-body"><div class="mrow-empty">Not planned</div></div>`;
  } else {
    const r = getR(meal.recipes[0]);
    let chips = '';
    if(r) chips += `<div class="rchip mt-${mt}${isCk?' ckd':''}">
      <span>${r.title.length>22?r.title.slice(0,22)+'\u2026':r.title}</span>
      <span class="rchip-x" onclick="event.stopPropagation();removeMeal('${ds}','${mt}')">&#10005;</span></div>`;
    if(meal.sides) meal.sides.forEach(sid=>{
      const sr=getR(sid);
      if(sr) chips+=`<div class="rchip side-chip${isCk?' ckd':''}"><span>${sr.title.length>20?sr.title.slice(0,20)+'\u2026':sr.title}</span></div>`;
    });
    if(isCk) chips += `<div class="cooked-tag">&#10003; cooked</div>`;
    body = `<div class="mrow-body">${chips}</div>`;
  }
  return `<div class="meal-row">
    <div class="mrow-head" onclick="openModal('${ds}','${mt}',true)">
      <span class="mrow-lbl" style="color:${color}">${mt}</span>
      <span class="mrow-plus">+</span>
    </div>${body}</div>`;
}

function toggleSnack(ds){ if(snackDays.has(ds)) snackDays.delete(ds); else snackDays.add(ds); render(); }

// ── MONTH ──
function renderMonth(){
  const ref = addDays(today,weekOff*7);
  const yr=ref.getFullYear(), mo=ref.getMonth();
  document.getElementById('pmRange').textContent = ref.toLocaleDateString('en-US',{month:'long',year:'numeric'});
  document.getElementById('pmToday').className = 'pm-tbtn' + (weekOff===0?' hidden-btn':'');
  const grid = document.getElementById('pmMonthGrid'); grid.innerHTML='';
  const first=new Date(yr,mo,1), last=new Date(yr,mo+1,0);
  const pad=first.getDay();
  for(let i=0;i<pad;i++){
    const d=addDays(first,-(pad-i));
    const c=document.createElement('div'); c.className='mcell mother';
    c.innerHTML=`<div class="mcell-num">${d.getDate()}</div>`; grid.appendChild(c);
  }
  for(let d=1;d<=last.getDate();d++){
    const date=new Date(yr,mo,d); const key=dk(date);
    const isT=key===todayStr; const evt=getEvent(key);
    let cls='mcell'; if(isT) cls+=' mtoday'; if(evt) cls+=' mevent';
    const cell=document.createElement('div'); cell.className=cls;
    cell.onclick=()=>openModal(key,'dinner',false);
    let dots='',lbls='';
    if(evt){dots+=`<span class="mdot" style="background:#d97706"></span>`;lbls+=`<div class="mlbl evl">${evt}</div>`;}
    MTS.forEach(mt=>{
      const m=getMeal(key,mt);
      if(m&&m.recipes.length){dots+=`<span class="mdot" style="background:${MCOLS[mt]}"></span>`;
        const r=getR(m.recipes[0]); if(r) lbls+=`<div class="mlbl">${r.title.slice(0,16)}</div>`;}
    });
    cell.innerHTML=`<div class="mcell-num">${d}</div><div class="mdots">${dots}</div><div class="mlbls">${lbls}</div>`;
    grid.appendChild(cell);
  }
}

// ── MODAL ──
function openModal(ds, mt, locked){
  mSelMain=null; mSelSides=[]; isEvt=false; sideOpen=false; modalLocked=!!locked;
  document.getElementById('pmSidesSec').classList.remove('open');
  document.getElementById('pmEvtFields').classList.remove('open');
  document.getElementById('pmEvtLbl').textContent='Make this a holiday or event';
  document.getElementById('pmSidesLbl').textContent='Add sides / additional recipes';
  document.getElementById('pmEvtName').value='';

  const dateVal = ds||todayStr;
  const mtVal = mt||'dinner';

  // Date/meal type locking
  const dateField=document.getElementById('pmDate');
  const mtField=document.getElementById('pmMt');
  dateField.value = dateVal;
  mtField.value = mtVal;
  if(locked && ds){
    dateField.disabled=true;
    mtField.disabled=true;
  } else {
    dateField.disabled=false;
    mtField.disabled=false;
  }

  const existing = getMeal(dateVal,mtVal);
  if(existing&&existing.recipes.length){
    mSelMain=existing.recipes[0];
    mSelSides=[...(existing.sides||[])];
    document.getElementById('pmModalTitle').textContent='Edit Meal';
    if(existing.event){
      isEvt=true;
      document.getElementById('pmEvtName').value=existing.event;
      document.getElementById('pmEvtFields').classList.add('open');
      document.getElementById('pmEvtLbl').textContent='Cancel event';
    }
  } else {
    document.getElementById('pmModalTitle').textContent='Add Meal';
  }
  updateSub(dateVal,mtVal);
  initTS(mtVal,mSelMain,mSelSides);
  document.getElementById('pmMealModal').classList.add('open');

}

function updateSub(ds,mt){
  const d=new Date(ds+'T00:00:00');
  document.getElementById('pmModalSub').textContent=fmtFull(d)+' \u2014 '+mt.charAt(0).toUpperCase()+mt.slice(1);
}

function getRecipesForMt(mt,sidesOnly){
  return RECIPES_DATA.filter(r=>{
    const isS=SIDE_TYPES.includes(r.culinary_type||'');
    if(sidesOnly) return isS;
    if(!r.meal_types||!r.meal_types.length) return !isS;
    return r.meal_types.includes(mt)&&!isS;
  });
}

function initTS(mt,preMain,preSides){
  if(tsMain){tsMain.destroy();tsMain=null;}
  if(tsSides){tsSides.destroy();tsSides=null;}
  tsMain=new TomSelect('#pmMainSel',{
    options:RECIPES_DATA.map(r=>({value:String(r.id),text:r.title,type:r.culinary_type||''})),
    searchField:['text','type'],
    placeholder:'Search all recipes...', maxItems:1,
    items:preMain?[String(preMain)]:[],
    dropdownParent:'body',
    render:{option:(d,e)=>`<div>${e(d.text)}<span style="font-size:.67rem;color:#9ca3af;float:right;padding-left:.5rem">${e(d.type)}</span></div>`},
    onChange:v=>{mSelMain=v?parseInt(v):null;}
  });
  tsSides=new TomSelect('#pmSidesSel',{
    options:RECIPES_DATA.map(r=>({value:String(r.id),text:r.title,type:r.culinary_type||''})),
    searchField:['text','type'],
    placeholder:'Search sides...', maxItems:8,
    items:preSides?preSides.map(String):[],
    dropdownParent:'body',
    render:{option:(d,e)=>`<div>${e(d.text)}<span style="font-size:.67rem;color:#9ca3af;float:right;padding-left:.5rem">${e(d.type)}</span></div>`},
    onChange:v=>{mSelSides=v?v.map(x=>parseInt(x)):[];}
  });
  if(preSides&&preSides.length){
    sideOpen=true;
    document.getElementById('pmSidesSec').classList.add('open');
    document.getElementById('pmSidesLbl').textContent='Hide sides';
  }
}

function saveMeal(){
  if(!mSelMain){showToast('Please select a main recipe');return;}
  const mt=document.getElementById('pmMt').value;
  const ds=document.getElementById('pmDate').value;
  if(!ds){showToast('Please select a date');return;}
  const evtName=isEvt?document.getElementById('pmEvtName').value.trim():null;
  const existingMeal=getMeal(ds,mt);
  const existingId=existingMeal?existingMeal.id:null;

  fetch('/meal-planner/save',{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCsrf()},
    body:JSON.stringify({id:existingId,date:ds,meal_type:mt,main_id:mSelMain,side_ids:mSelSides,event_name:evtName})
  }).then(r=>r.json()).then(d=>{
    if(d.success){
      if(!planned[ds]) planned[ds]={};
      planned[ds][mt]={id:d.id,recipes:[mSelMain],sides:mSelSides,event:evtName||null};
      closeMealModal(); render(); showToast('Meal saved!');
    } else showToast(d.error||'Save failed');
  }).catch(()=>showToast('Network error'));
}

function removeMeal(ds,mt){
  const meal=getMeal(ds,mt); if(!meal) return;
  fetch('/meal-planner/delete',{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCsrf()},
    body:JSON.stringify({id:meal.id})
  }).then(r=>r.json()).then(d=>{
    if(d.success){
      delete planned[ds][mt];
      if(!Object.keys(planned[ds]).length) delete planned[ds];
      cooked.delete(ckKey(ds,mt)); render();
    }
  });
}

function closeMealModal(){
  document.getElementById('pmMealModal').classList.remove('open');
  if(tsMain){tsMain.destroy();tsMain=null;}
  if(tsSides){tsSides.destroy();tsSides=null;}
}

// ── COOK CONFIRM ──
function askCook(ds,mt){
  pendingDs=ds; pendingMt=mt;
  const meal=getMeal(ds,mt);
  const r=meal&&meal.recipes.length?getR(meal.recipes[0]):null;
  document.getElementById('pmConfirmBody').innerHTML=
    `<strong>${r?r.title:'This meal'}</strong> (${mt}) will be marked as cooked.`;
  document.getElementById('pmConfirmModal').classList.add('open');
}

function doConfirmCook(){
  const deduct=document.getElementById('pmDeductPantry').checked;
  const ds2=pendingDs, mt2=pendingMt;
  fetch('/meal-planner/mark-cooked',{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCsrf()},
    body:JSON.stringify({date:ds2,meal_type:mt2,deduct_pantry:deduct})
  }).then(r=>r.json()).then(d=>{
    if(d.success){
      cooked.add(ckKey(ds2,mt2));
      render();
      showToast(deduct?'Marked cooked — pantry updated!':'Marked cooked — pantry unchanged');
    } else showToast('Error marking cooked');
  }).catch(()=>showToast('Network error'));
  document.getElementById('pmConfirmModal').classList.remove('open');
}

// ── COOK MODE ──
let cookRecipe=null;

function openCookMode(ds,mt){
  // Per spec: Cook Mode lives on the recipe view page.
  const meal=getMeal(ds,mt);
  const recipe=meal&&meal.recipes.length?getR(meal.recipes[0]):null;
  if(!recipe){showToast('No recipe found');return;}
  const servings=meal&&meal.recipes[0]?meal.recipes[0].servings:null;
  let url='/recipe/'+recipe.id;
  if(servings) url+='?servings='+servings;
  window.location.href=url;
}

function renderCookSteps(){
  if(!cookRecipe) return;
  const steps=cookRecipe.steps&&cookRecipe.steps.length?cookRecipe.steps:['No step-by-step instructions available.'];
  document.getElementById('pmCookBar').style.width=(cookStepsDone.size/Math.max(steps.length,1)*100)+'%';
  document.getElementById('pmCookSteps').innerHTML=steps.map((s,i)=>{
    const isDone=cookStepsDone.has(i);
    return '<div class="cook-step'+(isDone?' done':'')+'">'+
      '<div class="step-num">'+(isDone?'&#10003;':i+1)+'</div>'+
      '<div class="step-txt">'+s+'</div>'+
      (!isDone?'<button class="step-done-btn" onclick="stepDone('+i+')">Done</button>':'')+
      '</div>';
  }).join('');
}

function stepDone(i){
  cookStepsDone.add(i);
  renderCookSteps();
}

function finishCooking(){
  if(cookDs&&cookMt){
    const ds=cookDs, mt=cookMt;
    fetch('/meal-planner/mark-cooked',{
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':getCsrf()},
      body:JSON.stringify({date:ds,meal_type:mt})
    }).then(r=>r.json()).then(d=>{
      if(d.success){
        cooked.add(ckKey(ds,mt));
        render();
        showToast('Cooking complete! Pantry updated.');
      } else {
        showToast('Error marking cooked');
      }
    }).catch(()=>showToast('Network error'));
  }
  document.getElementById('pmCookModal').classList.remove('open');
  cookDs=null; cookMt=null; cookStepsDone=new Set(); cookRecipe=null;
}

function getCsrf(){
  const m=document.cookie.match(/csrf_token=([^;]+)/);
  if(m) return m[1];
  const el=document.querySelector('meta[name="csrf-token"]');
  return el?el.getAttribute('content'):'';
}

// showToast -> kcToast (global alias in base.html)

function shift(n){weekOff+=n;render();}
function goToday(){weekOff=0;render();}
function setView(v){
  view=v;
  sessionStorage.setItem('kcPlannerView', v);
  sessionStorage.setItem('kcPlannerView', v);
  document.getElementById('pmWeekView').style.display=v==='week'?'block':'none';
  document.getElementById('pmMonthView').style.display=v==='month'?'block':'none';
  document.getElementById('pmWkBtn').className='pm-vbtn'+(v==='week'?' act':'');
  document.getElementById('pmMoBtn').className='pm-vbtn'+(v==='month'?' act':'');
  render();
}
function render(){ if(view==='week'){renderTodayCard();renderDaysGrid();}else renderMonth(); }

// Wire controls
let shiftTimer=null;
function debouncedShift(n){
  if(shiftTimer) clearTimeout(shiftTimer);
  weekOff+=n;
  shiftTimer=setTimeout(()=>{ render(); shiftTimer=null; }, 80);
}
// Date jump
document.getElementById('pmJumpDate').addEventListener('change', function(){
  const picked = new Date(this.value+'T00:00:00');
  const diff = Math.round((picked - today) / (7*24*60*60*1000));
  weekOff = diff;
  render();
  this.value='';
});

document.getElementById('pmClearAll').onclick=function(){
  // Set default date for range pickers
  var today = new Date();
  var todayStr = today.toISOString().split('T')[0];
  var nextWeek = new Date(today); nextWeek.setDate(nextWeek.getDate()+7);
  document.getElementById('pmClearFrom').value = todayStr;
  document.getElementById('pmClearTo').value = nextWeek.toISOString().split('T')[0];
  document.getElementById('pmClearRangeOpts').style.display = 'none';
  document.getElementById('csTodayOnly').checked = true;
  document.getElementById('pmClearModal').classList.add('open');
};

// Show/hide range options
document.querySelectorAll('input[name="clearScope"]').forEach(function(r){
  r.addEventListener('change', function(){
    document.getElementById('pmClearRangeOpts').style.display = this.value==='range' ? 'block' : 'none';
  });
});

function executeScopedClear(){
  var scope = document.querySelector('input[name="clearScope"]:checked').value;
  var today = new Date().toISOString().split('T')[0];
  var payload = {scope: scope};

  if(scope === 'range'){
    var from = document.getElementById('pmClearFrom').value;
    var to = document.getElementById('pmClearTo').value;
    if(!from || !to){ showToast('Please select both dates'); return; }
    if(from < today){ showToast('Cannot clear past dates'); return; }
    if(from > to){ showToast('From date must be before To date'); return; }
    payload.date_from = from;
    payload.date_to = to;
  }

  document.getElementById('pmClearModal').classList.remove('open');

  fetch('/meal-planner/clear-scoped',{
    method:'POST',
    headers:{'Content-Type':'application/json','X-CSRFToken':getCsrf()},
    body: JSON.stringify(payload)
  }).then(r=>r.json()).then(d=>{
    if(d.success){
      // Remove cleared meals from local state
      if(d.cleared_dates){
        d.cleared_dates.forEach(function(ds){ delete planned[ds]; delete cooked[ds]; });
        cooked = new Set(Array.from(cooked).filter(k=>!d.cleared_dates.includes(k.split('_')[0])));
      } else {
        planned={}; cooked=new Set();
      }
      render();
      showToast(d.message || 'Meals cleared.');
    } else {
      showToast(d.error||'Error clearing meals');
    }
  }).catch(()=>showToast('Network error'));
}
document.getElementById('pmPrev').onclick=()=>debouncedShift(-1);
document.getElementById('pmNext').onclick=()=>debouncedShift(1);
document.getElementById('pmToday').onclick=goToday;
document.getElementById('pmWkBtn').onclick=()=>setView('week');
document.getElementById('pmMoBtn').onclick=()=>setView('month');
document.getElementById('pmAddBtn').onclick=()=>openModal(null,null,false);
document.getElementById('pmMealCancel').onclick=closeMealModal;
document.getElementById('pmMealSave').onclick=saveMeal;
document.getElementById('pmSidesToggle').onclick=()=>{
  sideOpen=!sideOpen;
  document.getElementById('pmSidesSec').classList.toggle('open',sideOpen);
  document.getElementById('pmSidesLbl').textContent=sideOpen?'Hide sides':'Add sides / additional recipes';
};
document.getElementById('pmEvtLink').onclick=()=>{
  isEvt=!isEvt;
  document.getElementById('pmEvtFields').classList.toggle('open',isEvt);
  document.getElementById('pmEvtLbl').textContent=isEvt?'Cancel event':'Make this a holiday or event';
};
document.getElementById('pmDate').addEventListener('change',()=>{
  if(!document.getElementById('pmDate').disabled)
    updateSub(document.getElementById('pmDate').value,document.getElementById('pmMt').value);
});
document.getElementById('pmMt').addEventListener('change',()=>{
  if(!document.getElementById('pmMt').disabled){
    const mt=document.getElementById('pmMt').value;
    updateSub(document.getElementById('pmDate').value,mt);
    initTS(mt,null,[]);
  }
});
document.getElementById('pmConfirmCancel').onclick=()=>document.getElementById('pmConfirmModal').classList.remove('open');
document.getElementById('pmConfirmOk').onclick=doConfirmCook;
// Cook mode elements only exist when feature is enabled
var pmCookCloseEl = document.getElementById('pmCookClose');
var pmCookFinishEl = document.getElementById('pmCookFinish');
var pmCookModalEl = document.getElementById('pmCookModal');
if(pmCookCloseEl) pmCookCloseEl.onclick=()=>pmCookModalEl.classList.remove('open');
if(pmCookFinishEl) pmCookFinishEl.onclick=finishCooking;

var _overlays = ['pmMealModal','pmConfirmModal','pmClearModal'];
if(pmCookModalEl) _overlays.push('pmCookModal');
_overlays.map(id=>document.getElementById(id)).filter(Boolean).forEach(el=>{
  el.addEventListener('click',e=>{
    if(e.target===el){
      if(el.id==='pmMealModal') closeMealModal();
      else el.classList.remove('open');
    }
  });
});

// Ensure DOM is fully ready before initial render
// Apply saved view before rendering to avoid flash of wrong view
function initPlanner() {
    // Set correct display state before first render
    var weekEl = document.getElementById('pmWeekView');
    var monthEl = document.getElementById('pmMonthView');
    var wkBtn = document.getElementById('pmWkBtn');
    var moBtn = document.getElementById('pmMoBtn');
    if (weekEl) weekEl.style.display = view === 'week' ? 'block' : 'none';
    if (monthEl) monthEl.style.display = view === 'month' ? 'block' : 'none';
    if (wkBtn) wkBtn.className = 'pm-vbtn' + (view === 'week' ? ' act' : '');
    if (moBtn) moBtn.className = 'pm-vbtn' + (view === 'month' ? ' act' : '');
    render();
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initPlanner);
} else {
    initPlanner();
}
</script>
{% endblock %}