{% extends 'base.html' %}
{% load crispy_forms_tags static %}
{% block content %}
  <div class="container">
    <h2 class="title">All leave requests</h2>

    <div class="box">
      <h3 class="subtitle">Global leave calendar</h3>
      {% include 'rota/partials/flatpickr_includes.html' %}
      <link rel="stylesheet" href="{% static 'css/calendar.css' %}">

      {# Rota selection is handled by route scoping; no dropdown needed here #}

      <div id="calendar" class="calendar" data-mode="inline"></div>
      <p class="help">View all leave requests across workers. Choose a rota to scope the calendar, or select "All rotas" to see everything. Click and drag to select dates to open the leave form (you'll need to choose workers in the modal).</p>
    </div>

    <div style="margin-top:0.5rem;">
      <strong>Legend:</strong>
      <span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave
      <span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range
    </div>
  </div>

  <script id="worker_leaves_json" type="application/json">{{ leaves_json|safe }}</script>
  <script id="selected_rota_json" type="application/json">{{ selected_rota_id|default:"null" }}</script>
  <script src="{% static 'js/calendar.js' %}"></script>
  <script>
    (function(){
      const container = document.getElementById('calendar');
      if(!container) return;
      let leaves = [];
      try {
        const raw = document.getElementById('worker_leaves_json');
        if (raw) {
          leaves = JSON.parse(raw.textContent || raw.innerText || '[]');
        }
      } catch (e) {
        console.debug('Unable to parse embedded leaves JSON', e);
      }
      // Base URL for leaves JSON
      let leavesUrlBase = '{% url "rota:leaves_global_json" %}';
      // Read initial rota selection provided by the view (if any)
      let initialRota = null;
      try{
        const sel = document.getElementById('selected_rota_json');
        if(sel) initialRota = JSON.parse(sel.textContent || sel.innerText || 'null');
      }catch(e){ initialRota = null; }
  window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
      function refreshLegendFor(id){
        const legend = document.getElementById('rota-worker-legend');
        if(!legend) return;
        if(!id){ legend.innerText = 'Showing leave for all rotas.'; return; }
        legend.innerText = 'Loading legend…';
        fetch(leavesUrlBase + '?rota_id=' + encodeURIComponent(id), {credentials:'same-origin'}).then(r=>r.json()).then(data=>{
          const byWorker = {};
          (data.leaves||[]).forEach(l=>{ if(l.worker_id){ byWorker[l.worker_id] = {name:l.reason, color:l.color}; } });
          if(Object.keys(byWorker).length===0){ legend.innerText = 'No workers with leaves in this rota.'; return; }
          legend.innerHTML = Object.entries(byWorker).map(([id,info])=> `<div style="display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.5rem"><span style="width:14px;height:14px;background:${info.color};border:1px solid rgba(0,0,0,0.1);display:inline-block"></span><span>${info.name}</span></div>`).join('');
        }).catch(e=>{ legend.innerText = 'Unable to load legend'; console.debug(e); });
      }
      // Refresh legend for the initially selected rota (or show all rotas)
      refreshLegendFor(initialRota);
    })();
  </script>

  <div class="box" style="margin-top:0.75rem;">
    <h4 class="subtitle is-6">Workers on this rota</h4>
    <div style="display:flex;flex-wrap:wrap;gap:0.5rem;">
      <div id="rota-worker-legend">Select a rota to show its workers.</div>
    </div>
  </div>
{% endblock %}