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

{% block title %}Editar 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 #0B1120;">
    <div style="font-weight:800; font-size:.90rem; color:#0B1120;">✎ Editar OS #{{ loc.id|stringformat:"04d" }}</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px;">Altere os dados da locação — função para corrigir informações.</div>
</div>

{% if error %}
<div style="padding:10px 12px; border-radius:8px; background:#FFE4E6; border:1px solid #FECDD3; color:#E11D48; font-size:.72rem; font-weight:700; text-align:center; margin-bottom:12px;">⚠️ {{ error }}</div>
{% endif %}

<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;">Equipamento *<input name="equipamento" required value="{{ loc.equipamento }}" 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;">Obra *<input name="obra" required value="{{ loc.obra }}" 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;">Cliente<input name="cliente" value="{{ loc.cliente }}" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"></label>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
        <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Data retirada<input name="data_retirada" type="date" value="{{ loc.data_retirada|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;">Previsão devolução<input name="data_devolucao_prevista" type="date" value="{{ loc.data_devolucao_prevista|date:'Y-m-d' }}" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;"></label>
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
        <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Valor (R$)<input name="valor" type="number" step="0.01" value="{{ loc.valor }}" 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;">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</option><option value="ATRASADA" {% if loc.status == 'ATRASADA' %}selected{% endif %}>Atrasada</option></select></label>
    </div>
    <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Observações<textarea name="observacoes" rows="3" style="padding:10px 12px; border:1px solid #E2E8F0; border-radius:8px;">{{ loc.observacoes }}</textarea></label>
    <button class="m-btn m-btn-primary" type="submit">Salvar alterações</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>
{% endblock %}