{% block title %}Income and Expense Calendar{% endblock %}

{% block content %}
<style>
  /* --- Layout & Container --- */
  .ps-container { max-width: 1200px; margin: 8px auto; font-family: Arial, sans-serif; }

  /* ADDED: justify-content: center to center the panels */
  .ps-main {
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
    justify-content: center;
  }

  /* Calendar Container: Wide enough for 2 months side-by-side */
  .ps-calendar {
    flex: 0 0 auto;        /* Allow it to take natural width */
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 10px;
    /* Min-width to prevent squishing on small screens before wrap */
    min-width: 320px;
  }

  .ps-panel {
    flex: 1;
    min-width: 300px;
    background:#fff;
    border:1px solid #eef2f7;
    padding:10px;
    border-radius:8px;
  }

  /* --- Text & Legend --- */
  .ps-instructions { background:#f8fafc; padding:10px 12px; border:1px solid #e6eef6; border-radius:6px; margin-bottom:12px; color:#111827; }
  .ps-inline-legend { margin:8px 0; font-size:0.95rem; }
  .ps-inline-legend .key { display:inline-flex; gap:6px; align-items:center; margin-right:12px; }
  .ps-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

  /* --- Inputs & Lists --- */
  .ps-controls { display:flex; gap:8px; margin-top:8px; align-items:center; flex-wrap: wrap; }
  .ps-controls select, .ps-controls input[type="number"] { padding:8px; border:1px solid #d1d5db; border-radius:6px; }
  .ps-controls button { padding:8px 16px; border-radius:6px; border:0; background:#198754; color:#fff; cursor:pointer; font-weight:600;}
  .ps-error { color:#b91c1c; font-size:0.9rem; margin-top:6px; }
  .ps-global-list { margin-top:10px; }
  .ps-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; border-bottom:1px dashed #eee; }
  .ps-item .amount { font-weight:700; min-width:90px; text-align:right; }
  .ps-item button { background: #872919; color:#fff; border:0; padding:4px 8px; border-radius:4px; cursor:pointer; font-size: 0.8rem; }
  .ps-empty { color:#6b7280; padding:8px 4px; }

  /* --- Net Amount Styling --- */
  .day-net {
    display:block; width:100%; text-align:center;
    font-size:0.7rem; margin-top:-8px; font-weight:700; line-height:1; pointer-events:none;
    color: #000;
    background: #ffffff;
  }

  .day-has-income { background-color: #25eb5d !important; border-color:#25eb5d !important; color:#000 !important; }
  .day-has-expense { background-color: #ef4444 !important; border-color:#ef4444 !important; color:#000 !important; }
  .day-has-both { background-color: #ffe135 !important; border-color:#ffe135 !important; color:#000 !important; }

  /* Ensure text in colored cells is readable */
  .day-has-expense, .day-has-both { color: #000 !important; }
  .day-has-income { color: #000 !important; }

  .cal-header { font-weight:600; font-size:1.1rem; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:5px;}

  /* Slightly increase day cell size for readability */
  .flatpickr-day {
      height: 42px !important;
      line-height: 42px !important;
      margin-top: 4px !important;
  }
  .flatpickr-days { height: 250px !important; }

  /* Responsive: Stack if screen is too narrow for side-by-side months */
  @media (max-width: 800px) {
    .ps-calendar { width: 100%; }
    .ps-main { flex-direction: column; }
    /* Flatpickr will automatically wrap months if container is small, but we can force it */
    .flatpickr-calendar { width: auto !important; }
  }

</style>

<div class="ps-container">
  <div class="ps-instructions">
   {% if player.Partner_income_importance == 'Very' or player.Partner_income_importance == 'Somewhat' %}
  <p style="margin:0 0 8px 0;">
  On this page, please report all major <strong>income and expenses</strong> for
  <strong>you and your partner</strong> between <strong id="allowedRangeText"></strong>. Check your banking app if needed!
  </p>
  <ul>
  <li>Only include entries <strong>over £150</strong> and add at least one entry each for income and expenses.</li>
  <li><strong>Income</strong>: e.g. wages/salary, government benefits, stipends.</li>
  <li><strong>Expenses</strong>: e.g. rent, mortgage, Direct Debits.</li>
  </ul>

  <p style="margin:0 0 8px 0;">
  To add an entry, first click a date on the calendar. Use the dropdown menu under the calendar to select
  whether it is an income or an expense and who it belongs to, enter the amount, and click “Add.”
  You can remove an entry with the “Remove” button.
  </p>
{% else %}
  <p style="margin:0 0 8px 0;">
  On this page, please report all major <strong>income and expenses</strong> for
  <strong>you</strong> between <strong id="allowedRangeText"></strong>. Check your banking app if needed!
  </p>
  <ul>
  <li>Only include entries <strong>over £150</strong> and add at least one entry each for income and expenses.</li>
  <li><strong>Income</strong>: e.g. wages/salary, government benefits, stipends.</li>
  <li><strong>Expenses</strong>: e.g. rent, mortgage, Direct Debits.</li>
  </ul>

  <p style="margin:0 0 8px 0;">
  To add an entry, first click a date on the calendar. Use the dropdown menu under the calendar to choose
  whether it is an income or an expense, enter the amount, and click “Add.”
  You can remove an entry with the “Remove” button.
  </p>

{% endif %}

    <p>When you are finished, click Next.</p>

     <p><strong style="color:#b91c1c;"> Note:</strong> Your data will be stored in an anonymized format within a secure environment. We ensure that no
    information can be traced back to you, maintaining your privacy and confidentiality at all times.</p>
  </div>
</div>

<form id="psForm" method="post">
  <div class="ps-main">

    <div class="ps-calendar">
      <div class="cal-header">Calendar</div>
      <div id="calendar"></div>

      <div class="ps-inline-legend" style="margin-top:15px; padding-top:10px; border-top:1px solid #eee;">
        <span class="key"><span class="ps-dot" style="background:#25eb5d;"></span> Income</span>
        <span class="key"><span class="ps-dot" style="background:#ef4444;"></span> Expense</span>
        <span class="key"><span class="ps-dot" style="background:#ffe135;"></span> Both</span>
      </div>
    </div>

    <div class="ps-panel" style="max-width:640px;">
      <div style="font-weight:600; margin-bottom:8px;">Selected date: <span id="selectedDate" style="color:#2563eb;">None</span></div>

      <div class="ps-controls">
        <select id="category">
          {% for c in categories %}
            {% if c == "Common expense" or c == "Partner’s income" %}
              {% if player.Partner_income_importance == 'Very' or player.Partner_income_importance == 'Somewhat' %}
                <option value="{{ c }}">{{ c }}</option>
              {% endif %}
            {% else %}
              <option value="{{ c }}">{{ c }}</option>
            {% endif %}
          {% endfor %}
        </select>
        <input id="amount" type="number" step="1" min="1" placeholder="Amount (£)" style="width:100px;" />
        <button id="addBtn" type="button">Add</button>
      </div>
      <div id="error" class="ps-error" style="display:none;"></div>

      <div class="ps-global-list">
        <div style="font-weight:600; margin-top:12px; border-bottom:1px solid #eee; padding-bottom:4px;">Entries</div>
        <div id="globalList"></div>
      </div>

      <input type="hidden" id="id_pay_items" name="pay_items" value='{{ pay_items_json|safe }}'>
    </div>
  </div>

  <div style="margin-top:20px; text-align:right;">
    {{ next_button }}
  </div>
</form>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
(function(){
  // --- 1. Data Setup ---
  var initial = {{ pay_items_json|safe }};
  var dataMap = {};
  var incomeCats = { "My income": true, "Partner’s income": true };
  var expenseCats = { "My expense": true, "Common expense": true };

  function toInt(v){ var n = parseInt(v, 10); return isNaN(n) ? 0 : n; }

  initial.forEach(function(it){
    if(!it.date) return;
    if(!dataMap[it.date]) dataMap[it.date] = [];
    dataMap[it.date].push({ category: it.category, amount: toInt(it.amount) });
  });

  // --- 2. Date Ranges ---
  var _today = new Date();
  var minDate = new Date(_today); minDate.setDate(minDate.getDate() - 14); // Tomorrow
  var maxDate = new Date(_today); maxDate.setDate(maxDate.getDate() + 14); // +21 Days

  function stripTime(d){ return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
  minDate = stripTime(minDate);
  maxDate = stripTime(maxDate);

  // Calculate months needed
  var startM = minDate.getFullYear() * 12 + minDate.getMonth();
  var endM = maxDate.getFullYear() * 12 + maxDate.getMonth();
  var monthsToShow = (endM - startM);
  if(monthsToShow < 2) monthsToShow = 2; // Default to at least 2 side-by-side if range is small

  // Display helpers
  function displayMonthDay(d){
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return months[d.getMonth()] + ' ' + d.getDate();
  }
  document.getElementById('allowedRangeText').textContent = displayMonthDay(minDate) + ' to ' + displayMonthDay(maxDate);

  // --- 3. Flatpickr Logic ---
  var selectedDate = null;

  function updateDayElement(fpDayElem){
    if(!fpDayElem || !fpDayElem.dateObj) return;
    var date = fpDayElem.dateObj;

    // Disable interaction outside range
    if(date < minDate || date > maxDate){
      fpDayElem.style.opacity = "0.3";
      return;
    }
    fpDayElem.style.opacity = "1";

    var ds = date.getFullYear() + '-' + String(date.getMonth()+1).padStart(2,'0') + '-' + String(date.getDate()).padStart(2,'0');
    fpDayElem.classList.remove('day-has-income','day-has-expense','day-has-both');
    var existing = fpDayElem.querySelector('.day-net');
    if(existing) existing.remove();

    if(dataMap[ds] && dataMap[ds].length > 0){
      var net = 0, hasInc = false, hasExp = false;
      dataMap[ds].forEach(function(i){
        if(incomeCats[i.category]){ net += i.amount; hasInc=true; }
        if(expenseCats[i.category]){ net -= i.amount; hasExp=true; }
      });

      if(hasInc && !hasExp) fpDayElem.classList.add('day-has-income');
      else if(!hasInc && hasExp) fpDayElem.classList.add('day-has-expense');
      else if(hasInc && hasExp) fpDayElem.classList.add('day-has-both');

      var netSpan = document.createElement('span');
      netSpan.className = 'day-net';
      netSpan.textContent = (net > 0 ? '+' : '') + net;
      fpDayElem.appendChild(netSpan);
    }
  }

  var fp = flatpickr("#calendar", {
    inline: true,
    minDate: minDate,
    maxDate: maxDate,
    showMonths: monthsToShow, // Shows 2 or more months
    defaultDate: minDate,
    animate: false,

    onDayCreate: function(d, s, elem){
      updateDayElement(elem);
    },
    onChange: function(dates, str){
      if(dates.length){
        var d = dates[0];
        if(d >= minDate && d <= maxDate){
          selectedDate = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0');
          document.getElementById('selectedDate').textContent = displayMonthDay(d) + ', ' + d.getFullYear();
          repaintCalendar();
        }
      }
    }
  });

  function repaintCalendar(){
    setTimeout(function(){
      // Re-run logic for all visible days to ensure colors stick
      var days = document.querySelectorAll('.flatpickr-day');
      days.forEach(updateDayElement);
    }, 50);
  }

  // --- 4. Form Logic ---
  var addBtn = document.getElementById('addBtn');
  var errorEl = document.getElementById('error');
  var hidden = document.getElementById('id_pay_items');
  var listEl = document.getElementById('globalList');
  var amtInput = document.getElementById('amount');

  function updateHidden(){
    var arr = [];
    Object.keys(dataMap).forEach(function(k){
      dataMap[k].forEach(function(x){
        arr.push({ date: k, category: x.category, amount: x.amount });
      });
    });
    hidden.value = JSON.stringify(arr);
  }

  function renderList(){
    listEl.innerHTML = '';
    var keys = Object.keys(dataMap).sort();
    if(keys.length === 0){ listEl.innerHTML = '<div class="ps-empty">No entries yet.</div>'; return; }

    keys.forEach(function(dateKey){
      var parts = dateKey.split('-');
      var dObj = new Date(parts[0], parts[1]-1, parts[2]);

      dataMap[dateKey].forEach(function(item, idx){
        var row = document.createElement('div');
        row.className = 'ps-item';

        var txt = document.createElement('div');
        txt.innerHTML = '<strong>' + displayMonthDay(dObj) + '</strong>: ' + item.category;

        var right = document.createElement('div');
        right.style.display = 'flex'; right.style.gap='10px'; right.style.alignItems='center';

        var amt = document.createElement('div');
        amt.className = 'amount';
        amt.style.color = incomeCats[item.category] ? 'green' : '#b91c1c';
        amt.textContent = (incomeCats[item.category]?'+':'-') + item.amount;

        var btn = document.createElement('button');
        btn.textContent = 'Remove';
        btn.onclick = function(){
          dataMap[dateKey].splice(idx, 1);
          if(dataMap[dateKey].length === 0) delete dataMap[dateKey];
          updateHidden(); renderList(); repaintCalendar();
        };

        right.appendChild(amt);
        right.appendChild(btn);
        row.appendChild(txt);
        row.appendChild(right);
        listEl.appendChild(row);
      });
    });
  }

  addBtn.onclick = function(){
    errorEl.style.display = 'none';
    if(!selectedDate) { errorEl.textContent="Select a date first"; errorEl.style.display='block'; return; }
    var cat = document.getElementById('category').value;
    var val = toInt(amtInput.value);
    if(val <= 150) { errorEl.textContent="Amount must be > 150"; errorEl.style.display='block'; return; }

    if(!dataMap[selectedDate]) dataMap[selectedDate] = [];
    dataMap[selectedDate].push({ category: cat, amount: val });

    amtInput.value = '';
    updateHidden();
    renderList();
    repaintCalendar();
  };

  // Keyboard shortcut for Add button
  amtInput.addEventListener('keydown', function(e){
    if(e.key === 'Enter'){
      e.preventDefault();
      addBtn.click();
    }
  });

  // Init
  renderList();
  setTimeout(function(){ fp.setDate(minDate, true); }, 100);

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