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

{% block title %}Reportar | App{% endblock %}

{% block content %}
<div style="margin-bottom:14px;">
    <div style="color:#475569; font-size:.75rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase;">Reportar obra</div>
    <div style="font-weight:800; font-size:1.15rem; color:#0B1120; margin-top:2px;">Enviar para o sistema</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px; line-height:1.5;">Encarregado registra no celular → aparece online no web em <strong>Observações</strong>.</div>
</div>

<form method="post" enctype="multipart/form-data" 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;">Título *<input name="title" required placeholder="Ex: Falta de material — Residencial Aurora" style="padding:12px; border:1px solid #E2E8F0; border-radius:8px;"></label>
    <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Descrição<textarea name="description" rows="4" placeholder="Descreva o que está acontecendo na obra, com detalhes..." style="padding:12px; border:1px solid #E2E8F0; border-radius:8px;"></textarea></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;">Prioridade<select name="priority" style="padding:12px; border:1px solid #E2E8F0; border-radius:8px;"><option value="LOW">Baixa</option><option value="MEDIUM" selected>Média</option><option value="HIGH">Alta</option><option value="URGENT">Urgente</option></select></label>
        <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Foto<input type="file" accept="image/*" capture="environment" style="padding:10px; border:1px dashed #E2E8F0; border-radius:8px; background:#F8FAFC; font-size:.72rem;"></label>
    </div>
    <div style="padding:10px; border-radius:8px; background:#F8FAFC; border:1px solid #E6EEF1; font-size:.68rem; color:#475569;">
        📍 Localização e horário serão enviados automaticamente. Está <strong>online</strong> — envia na hora para o sistema web.
    </div>
    <button class="m-btn m-btn-primary" type="submit">Enviar para o sistema</button>
    <a href="{% url 'mobile:obras' %}" style="text-align:center; color:#475569; font-size:.72rem; font-weight:600; text-decoration:none;">Cancelar</a>
</form>

<div class="m-card" style="padding:14px; background:#FEF3C7; border-color:#FDE68A;">
    <div style="font-weight:800; color:#D97706; font-size:.75rem;">💡 Dica</div>
    <div style="color:#475569; font-size:.68rem; margin-top:4px; line-height:1.5;">Use fotos nítidas e descreva com detalhes — o admin vê em <em>Observações</em> e pode responder via <em>Chat</em>.</div>
</div>
{% endblock %}