{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
  <div class="container">
    <h2 class="title">Request leave{% if worker %} for {{ worker.name }}{% endif %}</h2>

    <div class="box">
      <h3 class="subtitle">Request leave on calendar</h3>
      {% include 'rota/partials/flatpickr_includes.html' %}
      <div id="calendar" class="calendar" data-worker-id="{% if worker %}{{ worker.id }}{% endif %}" data-mode="inline"></div>
      <p class="help">Click a start date then a second date to select a range and prefill the leave form.</p>
    </div>

    <form method="post">
      {% csrf_token %}
      {{ form|crispy }}
      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Request</button>
        </div>
      </div>
    </form>
  </div>

  <style>
    .calendar { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem }
    .calendar .week { display:flex; gap:0.5rem; }
    .calendar .day { flex:1; padding:0.5rem; border:1px solid #eee; min-height:3rem; cursor:pointer; }
    .calendar .day.other-month { background:#f9f9f9; color:#999; }
    .calendar .day.leave { background:#ffecec; }
  </style>

  <script>
    (function(){
      const container = document.getElementById('calendar');
      if(!container) return;
      const workerId = container.dataset.workerId;
      const leaves = [
        {% if worker %}
          {% for l in worker.leaves.all %}
            {start:'{{ l.start_date }}', end:'{{ l.end_date }}'},
          {% endfor %}
        {% endif %}
      ];

      let viewYear = new Date().getFullYear();
      let viewMonth = new Date().getMonth();
      let selStart = null; let selEnd = null; let previewEnd = null;

      function iso(y,m,d){ return `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}` }
      function inLeaves(isoStr){ for(const L of leaves){ if(!L.start) continue; if(L.start<=isoStr && isoStr<=L.end) return true } return false }

      function buildControls(){
        let controls = document.getElementById('calendar-controls');
        if(!controls){
          controls = document.createElement('div'); controls.id='calendar-controls'; controls.style.marginTop='0.5rem';
          controls.innerHTML = `<span id="sel-label">No dates selected</span> <button id="sel-confirm" class="button is-primary" style="margin-left:0.5rem;">Apply</button> <button id="sel-clear" class="button" style="margin-left:0.5rem;">Clear</button>`;
          container.parentNode.insertBefore(controls, container.nextSibling);
          document.getElementById('sel-clear').onclick = function(){ selStart = null; selEnd = null; previewEnd = null; render(); };
          document.getElementById('sel-confirm').onclick = function(){
            if(!selStart) return;
            if(!selEnd) selEnd = selStart;
            const startInput = document.querySelector('input[name="start_date"]');
            const endInput = document.querySelector('input[name="end_date"]');
            if(startInput) startInput.value = selStart;
            if(endInput) endInput.value = selEnd;
            if(typeof initFlatpickr === 'function') initFlatpickr();
            // scroll to form
            const form = document.querySelector('form'); if(form) form.scrollIntoView({behavior:'smooth'});
          };
        }
        const label = document.getElementById('sel-label');
        if(selStart && selEnd) label.textContent = `Selected: ${selStart} → ${selEnd}`;
        else if(selStart) label.textContent = `Start: ${selStart}`;
        else label.textContent = 'No dates selected';
        document.getElementById('sel-confirm').disabled = !selStart;
      }

      function render(){
        container.innerHTML='';
        const first = new Date(viewYear, viewMonth, 1);
        const startDay = first.getDay();
        const days = new Date(viewYear, viewMonth+1, 0).getDate();
        let cur = 1 - startDay;
        const header = document.createElement('div'); header.style.display='flex'; header.style.justifyContent='space-between'; header.style.alignItems='center'; header.style.marginBottom='0.5rem';
        const title = document.createElement('div'); title.textContent = first.toLocaleString(undefined,{month:'long', year:'numeric'});
        const prev = document.createElement('button'); prev.textContent='◀'; prev.className='button'; prev.onclick=()=>{ viewMonth--; if(viewMonth<0){ viewMonth=11; viewYear--; } render(); };
        const next = document.createElement('button'); next.textContent='▶'; next.className='button'; next.onclick=()=>{ viewMonth++; if(viewMonth>11){ viewMonth=0; viewYear++; } render(); };
        header.appendChild(prev); header.appendChild(title); header.appendChild(next);
        container.appendChild(header);

        while(cur<=days){
          const week = document.createElement('div'); week.className='week';
          for(let i=0;i<7;i++){
            const dayDiv = document.createElement('div'); dayDiv.className='day';
            if(cur<1 || cur>days){ dayDiv.classList.add('other-month'); dayDiv.textContent=''; }
            else{
              const isoStr = iso(viewYear, viewMonth, cur);
              dayDiv.textContent = cur;
              if(inLeaves(isoStr)) dayDiv.classList.add('leave');
              const rangeEnd = selEnd || previewEnd;
              if(selStart && rangeEnd){ if(selStart<=isoStr && isoStr<=rangeEnd) dayDiv.classList.add('in-range'); }
              else if(selStart && selStart===isoStr) dayDiv.classList.add('selected');
              dayDiv.dataset.iso = isoStr;
              dayDiv.onclick = function(){
                const clicked = this.dataset.iso;
                if(!selStart){ selStart = clicked; selEnd = null; }
                else if(selStart && !selEnd){ if(clicked < selStart){ selEnd = selStart; selStart = clicked } else selEnd = clicked }
                else { selStart = clicked; selEnd = null }
                previewEnd = null;
                render();
              };
              dayDiv.onmouseover = function(){ if(selStart && !selEnd){ previewEnd = this.dataset.iso; render(); } };
              dayDiv.onmouseout = function(){ if(selStart && !selEnd){ previewEnd = null; render(); } };
            }
            week.appendChild(dayDiv);
            cur++;
          }
          container.appendChild(week);
        }
        buildControls();
      }

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