{% load crispy_forms_tags %}
<div class="modal is-active" id="worker-modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Add Worker</p>
      <button class="delete" aria-label="close" onclick="document.getElementById('modal').innerHTML='' "></button>
    </header>
    <section class="modal-card-body">
      <form method="post" hx-post="{{ form_action }}" hx-target="#modal" hx-swap="innerHTML">
        {% csrf_token %}
        {# Preserve rota_id if provided so POST handlers can attach the worker to the rota #}
        {% if rota_id %}
          <input type="hidden" name="rota_id" value="{{ rota_id }}" />
        {% endif %}
        {{ form|crispy }}

        {# Token area: shows a copyable self-service link and a regenerate button when editing a worker #}
        {% if worker %}
          {% include 'rota/partials/worker_token_area.html' with worker=worker token_link=token_link %}
        {% endif %}

        <!-- Structured Non-working days editor (keeps #id_nwds in sync) -->
        <div class="box" id="nwds-editor">
          <h4 class="title is-6">Non-working days</h4>
          <p class="help">Add non-working day rules. These will be serialized to the JSON field.</p>
          <div id="nwds-list"></div>
          <div style="margin-top:0.5em;">
            <button type="button" class="button is-small" id="add-nwd">Add non-working day</button>
          </div>
        </div>

        <script>
        (function(){
          const textarea = document.getElementById('id_nwds');
          // hide the raw JSON textarea to avoid confusing users; editor will keep it in sync
          if(textarea){ textarea.style.display = 'none'; }
          const listEl = document.getElementById('nwds-list');
          const addBtn = document.getElementById('add-nwd');

          const DAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

          function parseInitial(){
            let val = textarea ? textarea.value : '';
            if(!val) return [];
            try{ const p = JSON.parse(val); return Array.isArray(p)?p:[]; }catch(e){ return []; }
          }

          function render(){
            listEl.innerHTML = '';
            const data = parseInitial();
            data.forEach((item, idx)=>{
              listEl.appendChild(renderRow(item, idx));
            });
            syncTextarea();
          }

          function renderRow(item, idx){
            const wrap = document.createElement('div'); wrap.className='box';
            const row = document.createElement('div'); row.style.display='flex'; row.style.gap='0.5em'; row.style.alignItems='flex-end';

            // day select
            const dayDiv = document.createElement('div'); dayDiv.className='field';
            const dayLabel = document.createElement('label'); dayLabel.className='label'; dayLabel.textContent='Day'; dayDiv.appendChild(dayLabel);
            const control = document.createElement('div'); control.className='control';
            // Bulma expects a wrapper div.select containing the <select>
            const selWrap = document.createElement('div'); selWrap.className='select'; selWrap.style.minWidth='120px';
            const inner = document.createElement('select');
            const empty = document.createElement('option'); empty.value=''; empty.text='(any)'; inner.appendChild(empty);
            DAYS.forEach(d=>{ const o=document.createElement('option'); o.value=d; o.text=d; inner.appendChild(o); });
            inner.value = item.day || '';
            inner.onchange = syncAll;
            selWrap.appendChild(inner);
            control.appendChild(selWrap);
            dayDiv.appendChild(control);
            row.appendChild(dayDiv);

            // start date
            const sdWrap = document.createElement('div'); sdWrap.className='field';
            const sdLabel = document.createElement('label'); sdLabel.className='label'; sdLabel.textContent='Start date'; sdWrap.appendChild(sdLabel);
            const sdControl = document.createElement('div'); sdControl.className='control';
            const sdInput = document.createElement('input'); sdInput.type='date'; sdInput.className='datepicker input'; sdInput.setAttribute('autocomplete','off'); sdInput.value = item.start_date || '';
            sdInput.onchange = syncAll;
            sdControl.appendChild(sdInput); sdWrap.appendChild(sdControl); row.appendChild(sdWrap);

            // end date
            const edWrap = document.createElement('div'); edWrap.className='field';
            const edLabel = document.createElement('label'); edLabel.className='label'; edLabel.textContent='End date'; edWrap.appendChild(edLabel);
            const edControl = document.createElement('div'); edControl.className='control';
            const edInput = document.createElement('input'); edInput.type='date'; edInput.className='datepicker input'; edInput.setAttribute('autocomplete','off'); edInput.value = item.end_date || '';
            edInput.onchange = syncAll;
            edControl.appendChild(edInput); edWrap.appendChild(edControl); row.appendChild(edWrap);

            // remove button
            const rmDiv = document.createElement('div'); rmDiv.className='field';
            const rmLabel = document.createElement('label'); rmLabel.className='label'; rmLabel.textContent=''; rmDiv.appendChild(rmLabel);
            const rmControl = document.createElement('div'); rmControl.className='control';
            const rmBtn = document.createElement('button'); rmBtn.type='button'; rmBtn.className='button is-danger is-light is-small'; rmBtn.textContent='Remove';
            rmBtn.onclick = ()=>{ removeAt(idx); };
            rmControl.appendChild(rmBtn); rmDiv.appendChild(rmControl); row.appendChild(rmDiv);

            wrap.appendChild(row);

            // initialize flatpickr for these newly added inputs if available
            try{ if(window.initFlatpickr) initFlatpickr(wrap); }catch(e){}

            function syncAll(){
              const data = parseInitial();
              const dayVal = inner.value || null;
              const sd = sdInput.value || null;
              const ed = edInput.value || null;
              const obj = {};
              if(dayVal) obj.day = dayVal;
              if(sd) obj.start_date = sd;
              if(ed) obj.end_date = ed;
              data[idx] = obj;
              textarea.value = JSON.stringify(data);
            }

            // expose helper
            wrap._sync = syncAll;
            return wrap;
          }

          function removeAt(i){ const data = parseInitial(); data.splice(i,1); textarea.value = JSON.stringify(data); render(); }

          addBtn.addEventListener('click', ()=>{ const data = parseInitial(); data.push({}); textarea.value = JSON.stringify(data); render(); });

          // initial render
          try{ render(); }catch(e){ console && console.error && console.error(e); }

        })();
        </script>
        <!-- Additional structured editors for other worker fields -->
        <div class="box" id="other-editors">
          <h4 class="title is-6">Other structured fields</h4>
          <p class="help">Quick editors for common lists so you don't need to edit JSON manually.</p>

          <div class="columns is-multiline">
            <div class="column is-half">
              <h5 class="subtitle is-6">Out of programme</h5>
              <div id="oop-list"></div>
              <button type="button" class="button is-small" id="add-oop">Add OOP</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Not available to work</h5>
              <div id="nav-list"></div>
              <button type="button" class="button is-small" id="add-nav">Add unavailability</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Preferences not to work</h5>
              <div id="pref-list"></div>
              <button type="button" class="button is-small" id="add-pref">Add preference</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Work requests</h5>
              <div id="wr-list"></div>
              <button type="button" class="button is-small" id="add-wr">Add request</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Locum availability</h5>
              <div id="loc-list"></div>
              <button type="button" class="button is-small" id="add-loc">Add locum availability</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Forced assignments (week,day,shift)</h5>
              <div id="fa-list"></div>
              <button type="button" class="button is-small" id="add-fa">Add forced assignment</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Forced assignments by date</h5>
              <div id="fabd-list"></div>
              <button type="button" class="button is-small" id="add-fabd">Add forced assignment by date</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Hard day dependencies</h5>
              <div id="hdd-list"></div>
              <button type="button" class="button is-small" id="add-hdd">Add dependency</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Hard day exclusions</h5>
              <div id="hde-list"></div>
              <button type="button" class="button is-small" id="add-hde">Add exclusion</button>
            </div>

            <div class="column is-half">
              <h5 class="subtitle is-6">Allowed multi-shift sets</h5>
              <div id="ams-list"></div>
              <button type="button" class="button is-small" id="add-ams">Add set</button>
            </div>
          </div>
        </div>

        <script>
        (function(){
          // Helper to create a simple list editor bound to a textarea id
          function makeSimpleListEditor(cfg){
            const textarea = document.getElementById(cfg.textarea);
            if(textarea) textarea.style.display='none';
            const listEl = document.getElementById(cfg.container);
            const addBtn = document.getElementById(cfg.addButton);

            function parse(){
              let v = textarea ? textarea.value : ''; if(!v) return [];
              try{ const p = JSON.parse(v); return Array.isArray(p)?p:[];}catch(e){return [];}
            }

            function render(){ listEl.innerHTML=''; const data = parse(); data.forEach((it,i)=> listEl.appendChild(rowFor(it,i))); }

            function rowFor(item, idx){
              const wrap = document.createElement('div'); wrap.className='box';
              const row = document.createElement('div'); row.className='columns';
              cfg.fields.forEach(f=>{
                const col = document.createElement('div'); col.className='column';
                const field = document.createElement('div'); field.className='field';
                const label = document.createElement('label'); label.className='label'; label.textContent=f.label; field.appendChild(label);
                const control = document.createElement('div'); control.className='control';
                let input;
                if(f.type==='date'){
                  input = document.createElement('input'); input.type='date'; input.className='datepicker input'; input.setAttribute('autocomplete','off'); input.value = item[f.name] || '';
                } else if(f.type==='int'){
                  input = document.createElement('input'); input.type='number'; input.className='input'; input.value = item[f.name] || '';
                } else {
                  input = document.createElement('input'); input.type='text'; input.className='input'; input.value = item[f.name] || '';
                }
                input.onchange = ()=>{ sync(idx); };
                control.appendChild(input); field.appendChild(control); col.appendChild(field); row.appendChild(col);
              });
              // remove
              const colRm = document.createElement('div'); colRm.className='column is-narrow'; const fr = document.createElement('div'); fr.className='field'; const ctr = document.createElement('div'); ctr.className='control'; const rm = document.createElement('button'); rm.type='button'; rm.className='button is-danger is-light is-small'; rm.textContent='Remove'; rm.onclick = ()=>{ removeAt(idx); }; ctr.appendChild(rm); fr.appendChild(ctr); colRm.appendChild(fr); row.appendChild(colRm);
              wrap.appendChild(row);
              try{ if(window.initFlatpickr) initFlatpickr(wrap); }catch(e){}
              return wrap;
            }

            function sync(i){ const data = parse(); const el = listEl.children[i]; if(!el) return; const inputs = el.querySelectorAll('input'); const obj = {}; cfg.fields.forEach((f,j)=>{ const val = inputs[j].value; if(val!=='') obj[f.name]= f.type==='int'?parseInt(val,10):val; }); data[i]=obj; if(textarea) textarea.value = JSON.stringify(data); }

            function removeAt(i){ const data = parse(); data.splice(i,1); if(textarea) textarea.value = JSON.stringify(data); render(); }

            addBtn.addEventListener('click', ()=>{ const data = parse(); data.push({}); if(textarea) textarea.value=JSON.stringify(data); render(); });
            try{ render(); }catch(e){ console && console.error && console.error(e); }
          }

          // Instantiate editors for many worker fields
          makeSimpleListEditor({textarea:'id_oop', container:'oop-list', addButton:'add-oop', fields:[{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          makeSimpleListEditor({textarea:'id_not_available_to_work', container:'nav-list', addButton:'add-nav', fields:[{name:'date',label:'Date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          makeSimpleListEditor({textarea:'id_pref_not_to_work', container:'pref-list', addButton:'add-pref', fields:[{name:'date',label:'Date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          makeSimpleListEditor({textarea:'id_work_requests', container:'wr-list', addButton:'add-wr', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'text'}]});
          makeSimpleListEditor({textarea:'id_locum_availability', container:'loc-list', addButton:'add-loc', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'text'}]});
          makeSimpleListEditor({textarea:'id_forced_assignments', container:'fa-list', addButton:'add-fa', fields:[{name:'week',label:'Week',type:'int'},{name:'day',label:'Day',type:'text'},{name:'shift',label:'Shift',type:'text'}]});
          makeSimpleListEditor({textarea:'id_forced_assignments_by_date', container:'fabd-list', addButton:'add-fabd', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'text'}]});
          makeSimpleListEditor({textarea:'id_allowed_multi_shift_sets', container:'ams-list', addButton:'add-ams', fields:[{name:'shifts',label:'Shifts (comma-separated)',type:'text'}]});

          // Hard day deps/exclusions need days/weeks/start/end
          makeSimpleListEditor({textarea:'id_hard_day_dependencies', container:'hdd-list', addButton:'add-hdd', fields:[{name:'days',label:'Days (comma-separated)',type:'text'},{name:'weeks',label:'Weeks (comma-separated ints)',type:'text'},{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'}]});
          makeSimpleListEditor({textarea:'id_hard_day_exclusions', container:'hde-list', addButton:'add-hde', fields:[{name:'days',label:'Days (comma-separated)',type:'text'},{name:'weeks',label:'Weeks (comma-separated ints)',type:'text'},{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'}]});

        })();
        </script>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Save</button>
            <button type="button" class="button" onclick="document.getElementById('modal').innerHTML=''">Cancel</button>
          </div>
        </div>
      </form>
    </section>
  </div>
</div>