{% extends 'cards/base.html' %}

{% block content %}
  <div class="container">
    <div style="display:flex; align-items:center; gap:12px; margin-bottom:12px;">
      <a class="button is-light" href="{% url 'cards:list' %}">← Back to list</a>
      <h2 class="title" style="margin:0">Print cards</h2>
    </div>
    <p class="subtitle">Select which cards to include and choose a design. Click <strong>Open printable view</strong> to open the print preview in a new tab (you can then print to PDF or to an A4 printer).</p>

    <form id="print-form" method="post" action="{% url 'cards:print_preview' %}" target="_blank">
      {% csrf_token %}
      <div style="display:flex; gap:12px; align-items:flex-start; margin-bottom:10px;">
        <div>
          <label class="label">Design</label>
          <div class="select">
            <select name="design">
              <option value="1">Design 1</option>
              <option value="2">Design 2</option>
              <option value="3">Design 3</option>
              <option value="4">Design 4</option>
              <option value="5">Design 5</option>
            </select>
          </div>
        </div>
        <div>
          <label class="label">Scale</label>
          <div class="control"><input class="input" type="number" name="scale" value="1" step="0.05" min="0.5" max="2"></div>
        </div>
        <div>
          <label class="label">Cards per page</label>
          <div class="select">
            <select name="per_page">
              <option value="1">1</option>
              <option value="2" selected>2</option>
              <option value="4">4</option>
            </select>
          </div>
        </div>
        <div style="display:flex; align-items:center; gap:8px;">
          <label style="display:flex; align-items:center; gap:6px; margin-top:18px;">
            <input id="select-all-cards" type="checkbox">
            <span class="is-size-7">Select all / none</span>
          </label>
        </div>
        <div style="margin-left:auto">
          <button class="button is-primary" type="submit">Open printable view</button>
        </div>
        <!-- Sample preview placeholder (moved out of the form to avoid layout issues) -->
      </div>

      <div style="display:flex; flex-direction:column; gap:8px;">
        {% for card in cards %}
          <label style="display:flex; align-items:center; gap:10px; padding:6px; border:1px solid rgba(0,0,0,0.04); border-radius:6px;">
            <input type="checkbox" name="cards" value="{{ card.pk }}" checked>
            <div style="display:flex; align-items:center; gap:10px;">
              {% if card.image %}
                <img src="{{ card.image.url }}" style="width:72px; height:56px; object-fit:cover; border-radius:6px;">
              {% else %}
                <div style="width:72px; height:56px; background:#f2f2f2; border-radius:6px"></div>
              {% endif %}
              <div>
                <div style="font-weight:700">{{ card.name }}</div>
                <div class="is-size-7">{{ card.get_era_display }} &mdash; {{ card.get_diet_display }}</div>
              </div>
            </div>
          </label>
        {% endfor %}
      </div>
    </form>
    {% if cards %}
      {% with sample_card=cards.0 %}
        <div id="sample-panel" style="position:fixed; right:16px; bottom:16px; width:720px; height:640px; z-index:1400; display:block;">
          <div id="sample-panel-inner" style="border:1px solid rgba(0,0,0,0.06); padding:10px; border-radius:10px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.12); width:100%; height:100%; box-sizing:border-box;">
            <div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;">
              <div style="font-weight:700">Sample</div>
              <button id="sample-hide-btn" type="button" style="border:0; background:transparent; cursor:pointer; font-weight:700">✕</button>
            </div>
            <div id="sample-preview" class="card-canonical" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
              {% comment %} Render all design fragments hidden and toggle via JS. Each fragment should contain a `.toptrump-card`. {% endcomment %}
              <div class="design-preview design-1" style="display:none">
                {% include 'cards/_card_inner_design1.html' with card=sample_card background=background %}
              </div>
              <div class="design-preview design-2" style="display:none">
                {% include 'cards/_card_inner_design2.html' with card=sample_card background=background %}
              </div>
              <div class="design-preview design-3" style="display:none">
                {% include 'cards/_card_inner_design3.html' with card=sample_card background=background %}
              </div>
              <div class="design-preview design-4" style="display:none">
                {% include 'cards/_card_inner_design4.html' with card=sample_card background=background %}
              </div>
              <div class="design-preview design-5" style="display:none">
                {% include 'cards/_card_inner_design5.html' with card=sample_card background=background %}
              </div>
            </div>
            <div style="margin-top:8px; font-size:12px; color:#666">Design preview — not printed</div>
          </div>
          <button id="sample-show-tab" type="button" style="display:none; position:fixed; right:16px; bottom:16px; transform:none; background:#111; color:#fff; border-radius:4px 4px 0 0; padding:6px 8px; border:0; cursor:pointer; z-index:1500">Show sample</button>
        </div>
      {% endwith %}
    {% endif %}
  </div>
  <script>
    (function(){
      function qs(sel, ctx){ return (ctx||document).querySelector(sel); }
      function qsa(sel, ctx){ return Array.from((ctx||document).querySelectorAll(sel)); }
      function updatePreview(){
        var sel = qs('select[name="design"]');
        var scaleInput = qs('input[name="scale"]');
        if(!sel) return;
        var design = String(sel.value || '1');
        var scale = parseFloat(scaleInput && scaleInput.value) || 1;

        // Hide all fragments and reset transforms
        qsa('#sample-preview .design-preview').forEach(function(el){
          el.style.display = 'none';
          var c = el.querySelector('.toptrump-card');
          if(c){ c.style.transform = ''; c.style.position = ''; c.style.margin = ''; }
        });

        // Find the fragment whose classList contains the design class (robust against nested classes)
        var active = null;
        qsa('#sample-preview .design-preview').forEach(function(el){
          if(el.classList && el.classList.contains('design-' + design)){
            active = el;
          }
        });
        if(!active){
          // fallback: try selecting by class selector
          active = qs('#sample-preview .design-' + design);
        }
        if(active){
          // Use empty string to let element use its natural display (block/div)
          active.style.display = '';
          var card = active.querySelector('.toptrump-card');
          if(card){
            card.style.margin = '0 auto';
            card.style.display = 'block';
            card.style.transformOrigin = 'top center';
            card.style.transform = 'scale(' + scale + ')';
            card.style.position = 'relative';
          }
        }
      }
      document.addEventListener('DOMContentLoaded', function(){
        updatePreview();
        var sel = qs('select[name="design"]');
        var scaleInput = qs('input[name="scale"]');
        if(sel) sel.addEventListener('change', updatePreview);
        if(scaleInput) scaleInput.addEventListener('input', updatePreview);

        // Select all / none handling for card checkboxes
        var selectAll = qs('#select-all-cards');
        function updateSelectAllState(){
          var boxes = qsa('input[type="checkbox"][name="cards"]');
          if(!selectAll || !boxes.length) return;
          var checkedCount = boxes.filter(function(b){ return b.checked; }).length;
          selectAll.checked = (checkedCount === boxes.length);
          selectAll.indeterminate = (checkedCount > 0 && checkedCount < boxes.length);
        }
        // initialize state
        updateSelectAllState();
        if(selectAll){
          selectAll.addEventListener('change', function(){
            var boxes = qsa('input[type="checkbox"][name="cards"]');
            boxes.forEach(function(b){ b.checked = selectAll.checked; });
            selectAll.indeterminate = false;
          });
        }
        // Keep select-all updated when individual checkboxes change
        qsa('input[type="checkbox"][name="cards"]').forEach(function(b){
          b.addEventListener('change', updateSelectAllState);
        });
        // Hide/show controls for the floating panel
        var hideBtn = qs('#sample-hide-btn');
        var panel = qs('#sample-panel');
        var showTab = qs('#sample-show-tab');
        if(hideBtn && panel && showTab){
          hideBtn.addEventListener('click', function(){
            panel.style.display = 'none';
            showTab.style.display = 'block';
            try{ localStorage.setItem('samplePanelHidden','1'); }catch(e){}
            console.log('Sample panel hidden');
          });
          showTab.addEventListener('click', function(){
            panel.style.display = 'block';
            showTab.style.display = 'none';
            try{ localStorage.removeItem('samplePanelHidden'); }catch(e){}
            // ensure preview updated when re-shown
            updatePreview();
            console.log('Sample panel shown');
          });
          // Restore state (default: visible)
          try{
            if(localStorage.getItem('samplePanelHidden')){
              panel.style.display = 'none';
              showTab.style.display = 'block';
            } else {
              panel.style.display = 'block';
              showTab.style.display = 'none';
            }
          }catch(e){}
        }
      });
    })();
  </script>
{% endblock %}