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

{% block title %}Evolução OS #{{ loc.id|stringformat:"04d" }} | App{% endblock %}

{% block content %}
<a href="{% url 'mobile:os_detail' loc.id %}" 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 #0284C7;">
    <div style="font-weight:800; font-size:.90rem; color:#0B1120;">↻ Registrar evolução</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px;">OS #{{ loc.id|stringformat:"04d" }} · {{ loc.equipamento }} — {{ loc.obra }}</div>
    <div style="margin-top:10px; padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC; font-size:.72rem;">
        <div style="display:flex; justify-content:space-between;"><span style="color:#475569;">Status atual</span><strong>{{ loc.get_status_display }}</strong></div>
        <div style="display:flex; justify-content:space-between; margin-top:6px;"><span style="color:#475569;">Período</span><strong>{{ loc.data_retirada|date:"d/m/Y" }} → {{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }}</strong></div>
    </div>
</div>

<form method="post" class="m-card" style="padding:16px; display:grid; gap:12px;">
    {% csrf_token %}
    <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Novo status<select name="status" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"><option value="AGENDADA" {% if loc.status == 'AGENDADA' %}selected{% endif %}>Agendada</option><option value="ATIVA" {% if loc.status == 'ATIVA' %}selected{% endif %}>Ativa</option><option value="FINALIZADA" {% if loc.status == 'FINALIZADA' %}selected{% endif %}>Finalizada (devolvida)</option><option value="ATRASADA" {% if loc.status == 'ATRASADA' %}selected{% endif %}>Atrasada</option></select></label>
    <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Data devolução real (se finalizada)<input name="data_devolucao_real" type="date" value="{{ loc.data_devolucao_real|date:'Y-m-d' }}" 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;">Evolução / Observação *<textarea name="evolucao" rows="4" required placeholder="Ex: Equipamento devolvido em bom estado, sem avarias. Conferido por João." style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"></textarea></label>
    <div style="padding:10px; border-radius:8px; background:#D1FAE5; border:1px solid #BAE6FD; font-size:.68rem; color:#0284C7; line-height:1.5;">
        Esta evolução será adicionada ao histórico da OS com data/hora e ficará visível no detalhe. Se marcar <strong>Finalizada</strong>, a data real será preenchida automaticamente se vazia.
    </div>
    <button class="m-btn m-btn-primary" type="submit">Registrar evolução</button>
    <a href="{% url 'mobile:os_detail' loc.id %}" style="text-align:center; color:#475569; font-size:.72rem; font-weight:600; text-decoration:none;">Cancelar</a>
</form>

{% if loc.observacoes %}
<div class="m-card" style="padding:14px;">
    <div style="font-weight:800; font-size:.78rem; color:#0B1120; margin-bottom:8px;">Histórico atual</div>
    <div style="color:#0B1120; font-size:.72rem; line-height:1.6; white-space:pre-wrap; background:#F8FAFC; border:1px solid #E6EEF1; border-radius:8px; padding:10px;">{{ loc.observacoes }}</div>
</div>
{% endif %}
{% endblock %}