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

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

{% block content %}
<a href="{% url 'mobile:os' %}" 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 loc.status == 'ATIVA' %}#0284C7{% elif loc.status == 'AGENDADA' %}#D97706{% else %}#059669{% endif %};">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
        <span style="font-size:.70rem; font-weight:800; letter-spacing:.08em; color:#64748B;">#{{ loc.id|stringformat:"04d" }} · {{ loc.get_status_display|upper }}</span>
        <span style="padding:4px 8px; border-radius:20px; font-size:.70rem; font-weight:800; {% if loc.status == 'ATIVA' %}background:#E0F2FE; color:#0284C7;{% elif loc.status == 'AGENDADA' %}background:#FEF3C7; color:#D97706;{% else %}background:#D1FAE5; color:#059669;{% endif %}">{{ loc.status }}</span>
    </div>
    <div style="font-weight:800; font-size:1.1rem; color:#0B1120; line-height:1.25;">{{ loc.equipamento }}</div>
    <div style="color:#0284C7; font-size:.75rem; font-weight:700; margin-top:4px;">{{ loc.obra }}</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px;">{{ loc.cliente|default:"Sem cliente" }}</div>
    <div style="margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px;">
        <div style="padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC; text-align:center;">
            <div style="color:#64748B; font-size:.70rem; font-weight:800;">RETIRADA</div><div style="font-weight:800; color:#0B1120; margin-top:4px;">{{ loc.data_retirada|date:"d/m/Y" }}</div>
        </div>
        <div style="padding:10px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC; text-align:center;">
            <div style="color:#64748B; font-size:.70rem; font-weight:800;">PREVISÃO</div><div style="font-weight:800; color:#0284C7; margin-top:4px;">{{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }}</div>
        </div>
    </div>
    {% if loc.data_devolucao_real %}
    <div style="margin-top:8px; padding:10px; border-radius:8px; background:#D1FAE5; border:1px solid #A7F3D0; text-align:center;">
        <div style="color:#059669; font-size:.70rem; font-weight:800;">DEVOLUÇÃO REAL</div><div style="font-weight:800; color:#059669; margin-top:4px;">{{ loc.data_devolucao_real|date:"d/m/Y" }}</div>
    </div>
    {% endif %}
</div>

<div class="m-card" style="padding:16px;">
    <div style="font-weight:800; font-size:.85rem; color:#0B1120; margin-bottom:10px;">Detalhes da locação</div>
    <div style="display:grid; gap:10px; font-size:.78rem;">
        <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #E6EEF1;"><span style="color:#475569;">Equipamento</span><strong style="color:#0B1120;">{{ loc.equipamento }}</strong></div>
        <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #E6EEF1;"><span style="color:#475569;">Obra</span><strong style="color:#0B1120;">{{ loc.obra }}</strong></div>
        <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #E6EEF1;"><span style="color:#475569;">Cliente</span><strong style="color:#0B1120;">{{ loc.cliente|default:"—" }}</strong></div>
        <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #E6EEF1;"><span style="color:#475569;">Valor</span><strong style="color:#0284C7;">R$ {{ loc.valor }}</strong></div>
        <div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #E6EEF1;"><span style="color:#475569;">Status</span><strong>{{ loc.get_status_display }}</strong></div>
        <div style="display:flex; justify-content:space-between; padding:8px 0;"><span style="color:#475569;">Criada em</span><strong>{{ loc.created_at|date:"d/m/Y H:i" }}</strong></div>
        {% if loc.observacoes %}
        <div style="margin-top:8px; padding:12px; border:1px solid #E6EEF1; border-radius:8px; background:#F8FAFC;">
            <div style="color:#64748B; font-size:.70rem; font-weight:800; letter-spacing:.08em;">OBSERVAÇÕES</div>
            <div style="margin-top:6px; color:#0B1120; line-height:1.6; font-size:.78rem;">{{ loc.observacoes }}</div>
        </div>
        {% endif %}
    </div>
</div>

<div class="m-card" style="padding:16px; background:#FEF3C7; border-color:#FDE68A;">
    <div style="font-weight:800; color:#D97706; font-size:.78rem;">Ações</div>
    <div style="display:grid; gap:8px; margin-top:10px;">
        <a href="{% url 'mobile:os_edit' loc.id %}" style="display:block; text-align:center; padding:12px; border-radius:8px; background:#0B1120; color:#fff; text-decoration:none; font-weight:700; font-size:.78rem;">✎ Editar OS</a>
        <a href="{% url 'mobile:os_evolucao' loc.id %}" style="display:block; text-align:center; padding:12px; border-radius:8px; background:#fff; border:1px solid #E2E8F0; color:#0B1120; text-decoration:none; font-weight:700; font-size:.78rem;">↻ Registrar evolução</a>
    </div>
    <div style="margin-top:10px; padding:8px; border-radius:6px; background:#fff; border:1px dashed #FDE68A; font-size:.75rem; color:#475569; text-align:center;">Editar altera dados da OS · Evolução registra andamento/devolução com histórico</div>
</div>

<a href="{% url 'mobile:os' %}" style="display:block; text-align:center; margin-top:12px; padding:12px; border-radius:10px; background:#fff; border:1px solid #E2E8F0; color:#0B1120; text-decoration:none; font-weight:700; font-size:.78rem;">Voltar para OS</a>
{% endblock %}