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

{% block title %}Checklist {{ cl.obra }} | App{% endblock %}

{% block content %}
<a href="{% url 'mobile:equipamentos_em_obra' %}" style="display:inline-flex; align-items:center; gap:6px; color:#0284C7; font-size:.75rem; font-weight:700; text-decoration:none; margin-bottom:12px;">← Voltar</a>

<div class="m-card" style="padding:16px; border-top:4px solid {% if is_ok_obra %}#059669{% else %}#0284C7{% endif %};">
    <div style="font-weight:800; font-size:1rem; color:#0B1120;">{{ cl.obra }}</div>
    <div style="color:#475569; font-size:.68rem; margin-top:2px;">{{ cl.code }} · {{ cl.address }}</div>
    <div style="margin-top:8px; display:inline-flex; padding:4px 8px; border-radius:20px; background:{% if is_ok_obra %}#D1FAE5; color:#059669;{% else %}#FEF3C7; color:#D97706;{% endif %} font-size:.70rem; font-weight:800;">{% if is_ok_obra %}✓ Checklist assinado{% else %}{{ cl.total }} ferramentas para conferir{% endif %}</div>
    {% if is_ok_obra and assinatura_atual %}
    <div style="margin-top:10px; padding:10px; border-radius:8px; background:#D1FAE5; border:1px solid #A7F3D0; font-size:.68rem;">
        <div style="font-weight:800; color:#059669;">✓ Assinado</div>
        <div style="color:#0B1120; margin-top:4px;"><strong>{{ assinatura_atual.nome }}</strong> · Matrícula {{ assinatura_atual.matricula }} · {{ assinatura_atual.data|slice:":10" }}</div>
    </div>
    {% elif is_ok_obra %}
    <div style="margin-top:10px; padding:10px; border-radius:8px; background:#D1FAE5; border:1px solid #A7F3D0; font-size:.68rem;">
        <div style="font-weight:800; color:#059669;">✓ Assinado</div>
        <div style="color:#0B1120; margin-top:4px;">Assinado</div>
    </div>
    {% endif %}
</div>

<form method="post" class="m-card" style="padding:16px;">
    {% csrf_token %}
    <div style="font-weight:800; font-size:.85rem; color:#0B1120; margin-bottom:10px;">Ferramentas alocadas nesta obra</div>
    <div style="display:grid; gap:10px;">
        {% for item in cl.itens %}
        <label class="m-card" style="display:flex; flex-direction:column; gap:8px; padding:14px; margin:0; cursor:pointer;">
            <div style="display:flex; align-items:center; gap:10px;">
                <input type="checkbox" required style="width:22px; height:22px; accent-color:#0284C7; flex-shrink:0;">
                <div style="flex:1; min-width:0;">
                    <div style="font-weight:800; color:#0B1120; font-size:.82rem; line-height:1.2;">{{ item.nome }}</div>
                    <div style="color:#475569; font-size:.75rem; margin-top:2px;">{{ item.categoria }}</div>
                </div>
                <span style="padding:4px 8px; border-radius:20px; font-size:.70rem; font-weight:800; {% if item.status == 'No canteiro' or item.status == 'Em locação' %}background:#0284C7; color:#fff;{% elif item.status == 'Agendado' %}background:#FEF3C7; color:#D97706;{% else %}background:#F3F5F6; color:#6B7C86;{% endif %}">{{ item.status }}</span>
            </div>
            <div style="display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:.75rem; color:var(--text-muted); padding-top:8px; border-top:1px solid #D1FAE5;">
                <span style="display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; background:#F8FAFC; border:1px solid #E6EEF1;">📅 {{ item.periodo }}</span>
                <span style="padding:2px 8px; border-radius:4px; background:#D1FAE5; border:1px solid #A7F3D0; color:#0284C7; font-weight:700;">{{ item.categoria }}</span>
            </div>
        </label>
        {% endfor %}
    </div>

    {% if not is_ok_obra %}
    <div style="margin-top:14px; padding:14px; border:1px solid #E2E8F0; border-radius:10px; background:#FEF3C7;">
        <div style="font-weight:800; color:#D97706; font-size:.78rem; margin-bottom:10px;">✍️ Assinatura digital da obra</div>
        <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Nome completo *<input name="assinatura_nome" required placeholder="Ex: João Silva" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"></label>
        <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700; margin-top:10px;">Matrícula *<input name="assinatura_matricula" required placeholder="Ex: 12345" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"></label>
        <div style="margin-top:10px;">
            <div style="font-size:.72rem; font-weight:700; margin-bottom:6px;">Assinatura * <span style="font-weight:400; color:#475569;">(desenhe abaixo)</span></div>
            <canvas id="sigCanvasObra" width="320" height="140" style="width:100%; height:140px; border:1px solid #E2E8F0; border-radius:8px; background:#fff; touch-action:none;"></canvas>
            <div style="display:flex; gap:8px; margin-top:8px;">
                <button type="button" onclick="clearSigObra()" style="flex:1; padding:8px; border-radius:8px; background:#fff; border:1px solid #E2E8F0; color:#475569; font-weight:700; font-size:.72rem;">Limpar</button>
                <span style="flex:1; padding:8px; border-radius:8px; background:#D1FAE5; border:1px solid #BAE6FD; color:#0284C7; font-size:.75rem; text-align:center; display:grid; place-items:center;">Desenhe com o dedo</span>
            </div>
            <input type="hidden" name="assinatura_data" id="assinatura_data_obra" required>
        </div>
    </div>
    {% if error %}<div style="margin-top:10px; padding:10px; border-radius:8px; background:#FFE4E6; border:1px solid #FECDD3; color:#E11D48; font-size:.72rem; text-align:center;">⚠️ {{ error }}</div>{% endif %}
    <button type="submit" style="width:100%; margin-top:14px; padding:14px; border-radius:10px; background:#0B1120; color:#fff; border:0; font-weight:800; font-size:.85rem;">✓ Assinar e concluir checklist da obra</button>
    {% else %}
    <div style="margin-top:14px; padding:12px; border-radius:8px; background:#D1FAE5; border:1px solid #A7F3D0; text-align:center; color:#059669; font-weight:700; font-size:.78rem;">✓ Checklist desta obra já assinado</div>
    {% endif %}
</form>

<script>
const canvasO = document.getElementById('sigCanvasObra');
if(canvasO){
  const ctxO = canvasO.getContext('2d');
  let drawingO=false, hasDrawnO=false;
  function getPosO(e){ const r=canvasO.getBoundingClientRect(); const t=e.touches?e.touches[0]:e; return {x:(t.clientX-r.left)*(canvasO.width/r.width), y:(t.clientY-r.top)*(canvasO.height/r.height)}; }
  function startO(e){ drawingO=true; hasDrawnO=true; const p=getPosO(e); ctxO.beginPath(); ctxO.moveTo(p.x,p.y); e.preventDefault(); }
  function moveO(e){ if(!drawingO) return; const p=getPosO(e); ctxO.lineTo(p.x,p.y); ctxO.strokeStyle='#0B1120'; ctxO.lineWidth=2; ctxO.lineCap='round'; ctxO.stroke(); e.preventDefault(); }
  function endO(){ drawingO=false; document.getElementById('assinatura_data_obra').value = hasDrawnO ? canvasO.toDataURL('image/png') : ''; }
  window.clearSigObra=function(){ ctxO.clearRect(0,0,canvasO.width,canvasO.height); hasDrawnO=false; document.getElementById('assinatura_data_obra').value=''; }
  canvasO.addEventListener('mousedown', startO); canvasO.addEventListener('mousemove', moveO); canvasO.addEventListener('mouseup', endO); canvasO.addEventListener('mouseleave', endO);
  canvasO.addEventListener('touchstart', startO, {passive:false}); canvasO.addEventListener('touchmove', moveO, {passive:false}); canvasO.addEventListener('touchend', endO);
  document.querySelector('form').addEventListener('submit', function(e){ if(!hasDrawnO){ alert('Faça a assinatura da obra.'); e.preventDefault(); }});
}
</script>
{% endblock %}