{% extends 'base.html' %}

{% block title %}Locação #{{ loc.id|stringformat:"04d" }} | Locadora{% endblock %}

{% block content %}
<section class="page-header project-detail-header">
    <div>
        <a class="back-link" href="{% url 'dashboard:locacoes' %}">← Voltar para locações</a>
        <p class="eyebrow">LOCAÇÃO #{{ loc.id|stringformat:"04d" }} · {{ loc.get_status_display|upper }}</p>
        <h2>{{ loc.equipamento }}</h2>
        <p class="page-description">{{ loc.obra }} {% if loc.cliente %}· {{ loc.cliente }}{% endif %}</p>
        <p class="project-address detail-address"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> {{ loc.data_retirada|date:"d/m/Y" }} <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> {{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }} · R$ {{ loc.valor }}</p>
    </div>
    <div class="detail-actions" style="flex-direction:column; align-items:flex-end; gap:10px;">
        <span class="project-status {% if loc.status == 'ATIVA' %}progress{% elif loc.status == 'FINALIZADA' %}complete{% else %}planned{% endif %}"><i></i>{{ loc.get_status_display }}</span>
        <button class="primary-button" type="button" onclick="document.getElementById('editarLocacaoForm').style.display=document.getElementById('editarLocacaoForm').style.display==='none'?'block':'none'; document.getElementById('editarLocacaoForm').scrollIntoView({behavior:'smooth', block:'center'})">✎ Editar locação</button>
    </div>
</section>

<section class="detail-summary-grid">
    <div class="detail-summary-main data-panel">
        <div class="summary-label">Período</div>
        <div class="summary-value" style="font-size:1.4rem;">{{ loc.data_retirada|date:"d/m/Y" }} <small style="font-size:.8rem; color:var(--text-muted);"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></small> {{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }}</div>
        <div class="summary-foot"><span>Status</span><strong>{{ loc.get_status_display }}</strong></div>
    </div>
    <div class="detail-summary data-panel">
        <span>Valor</span><strong style="color:var(--primary);">R$ {{ loc.valor }}</strong><small>Locação</small>
    </div>
    <div class="detail-summary data-panel">
        <span>Obra</span><strong>{{ loc.obra }}</strong><small>{{ loc.cliente|default:"Sem cliente" }}</small>
    </div>
</section>

<!-- FORM EDIÇÃO INLINE — oculto até clicar em Editar -->
<div id="editarLocacaoForm" class="data-panel" style="display:none; margin-bottom:14px; border-top:3px solid var(--primary); overflow:hidden;">
    <div style="padding:16px 20px; border-bottom:1px solid var(--border-subtle); background:linear-gradient(180deg, var(--surface) 0%, var(--page-bg) 100%); display:flex; justify-content:space-between; align-items:center;">
        <div><div style="color:var(--primary); font-size:.70rem; font-weight:800; letter-spacing:.08em;">EDIÇÃO</div><div style="font-weight:800; color:var(--text-main); margin-top:4px;">Editar locação #{{ loc.id|stringformat:"04d" }}</div></div>
        <button type="button" onclick="document.getElementById('editarLocacaoForm').style.display='none'" style="padding:6px 10px; border-radius:8px; border:1px solid var(--border-subtle); background:var(--surface); color:var(--text-muted); font-size:.70rem; font-weight:700; cursor:pointer;">✕ Fechar</button>
    </div>
    <form method="post" style="display:grid; gap:12px; padding:18px 20px 20px;">
        {% csrf_token %}
        <input type="hidden" name="action" value="editar">
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Equipamento *<input name="equipamento" required value="{{ loc.equipamento }}" placeholder="Ex: Gerador Toyama 8 kVA" style="padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface);"></label>
            <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Obra / Local *<input name="obra" required value="{{ loc.obra }}" placeholder="Ex: Residencial Aurora" style="padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface);"></label>
        </div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Cliente<input name="cliente" value="{{ loc.cliente }}" placeholder="Ex: Construtora Vale" style="padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface);"></label>
            <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 var(--border-strong); border-radius:8px; background:var(--surface);"></label>
        </div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            <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 var(--border-strong); border-radius:8px; background:var(--surface);"></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 var(--border-strong); border-radius:8px; background:var(--surface);"><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>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
            <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 var(--border-strong); border-radius:8px; background:var(--surface);"></label>
            <label style="display:flex; flex-direction:column; gap:6px; font-size:.72rem; font-weight:700;">Observações<input name="observacoes" value="{{ loc.observacoes }}" placeholder="Observações..." style="padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface);"></label>
        </div>
        <div style="display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--border-subtle); padding-top:12px;">
            <button type="button" class="secondary-button" onclick="document.getElementById('editarLocacaoForm').style.display='none'">Cancelar</button>
            <button type="submit" class="primary-button" style="padding:10px 18px; font-weight:800;">💾 Salvar alterações</button>
        </div>
    </form>
</div>

<div class="detail-grid">
    <div class="detail-main-column">
        <section class="data-panel detail-section">
            <div class="detail-section-heading"><div><p class="eyebrow">Detalhes</p><h3>Informações da locação</h3></div><span class="section-count">#{{ loc.id|stringformat:"04d" }}</span></div>
            <div style="padding:18px 20px; display:grid; gap:16px; font-size:.78rem;">
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Equipamento</span><strong>{{ loc.equipamento }}</strong></div>
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Obra</span><strong>{{ loc.obra }}</strong></div>
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Cliente</span><strong>{{ loc.cliente|default:"—" }}</strong></div>
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Data retirada</span><strong>{{ loc.data_retirada|date:"d/m/Y" }}</strong></div>
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Previsão devolução</span><strong>{{ loc.data_devolucao_prevista|date:"d/m/Y"|default:"—" }}</strong></div>
                {% if loc.data_devolucao_real %}<div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Devolução real</span><strong style="color:#059669;">{{ loc.data_devolucao_real|date:"d/m/Y" }}</strong></div>{% endif %}
                <div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-subtle);"><span style="color:var(--text-muted);">Valor</span><strong style="color:var(--primary);">R$ {{ loc.valor }}</strong></div>
                <div style="display:flex; justify-content:space-between; padding:10px 0;"><span style="color:var(--text-muted);">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 var(--border-subtle); border-radius:8px; background:#F8FAFC;"><div style="color:var(--content-faint); font-size:.75rem; font-weight:700; letter-spacing:.06em;">OBSERVAÇÕES</div><div style="margin-top:6px; color:var(--content-text); line-height:1.6;">{{ loc.observacoes }}</div></div>{% endif %}
            </div>
        </section>

        <section id="historico" class="data-panel detail-section">
            <div class="detail-section-heading"><div><p class="eyebrow">Linha do tempo</p><h3>Histórico</h3></div></div>
            <div class="timeline">
                <div class="timeline-item"><span class="timeline-date">{{ loc.data_retirada|date:"d/m" }}<small>{{ loc.data_retirada|date:"Y" }}</small></span><span class="timeline-line"></span><div><strong>Retirada agendada</strong><p>{{ loc.equipamento }} para {{ loc.obra }}</p></div></div>
                {% if loc.data_devolucao_prevista %}<div class="timeline-item"><span class="timeline-date" style="color:var(--primary);">{{ loc.data_devolucao_prevista|date:"d/m" }}<small>Previsão</small></span><span class="timeline-line"></span><div><strong>Previsão de devolução</strong><p>{{ loc.data_devolucao_prevista|date:"d/m/Y" }}</p></div></div>{% endif %}
                {% if loc.status == 'FINALIZADA' %}<div class="timeline-item"><span class="timeline-date" style="color:#059669;"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle;"><polyline points="20 6 9 17 4 12"></polyline></svg><small>OK</small></span><span class="timeline-line" style="background:#059669;"></span><div><strong>Locação finalizada</strong><p>Equipamento devolvido</p></div></div>{% endif %}
            </div>
        </section>
    </div>
    <aside class="detail-side-column">
        <section class="data-panel detail-section">
            <div class="detail-section-heading"><div><p class="eyebrow">Ações</p><h3>Gerenciar</h3></div></div>
            <div style="padding:16px 20px; display:grid; gap:8px;">
                <button class="primary-button" type="button" style="width:100%; border-radius:10px; font-weight:800;" onclick="document.getElementById('editarLocacaoForm').style.display=document.getElementById('editarLocacaoForm').style.display==='none'?'block':'none'; if(document.getElementById('editarLocacaoForm').style.display==='block') document.getElementById('editarLocacaoForm').scrollIntoView({behavior:'smooth', block:'center'})">✎ Editar locação</button>
                {% if loc.status != 'FINALIZADA' %}
                <form method="post" style="margin:0;" onsubmit="return confirm('Confirmar devolução desta locação? Status será FINALIZADA.')">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="devolucao">
                    <button class="secondary-button" type="submit" style="width:100%; border-radius:10px; font-weight:700; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46;">✓ Registrar devolução</button>
                </form>
                {% else %}
                <button class="secondary-button" type="button" style="width:100%; border-radius:10px; opacity:.6; cursor:not-allowed;" disabled title="Já finalizada"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" style="display:inline-block; vertical-align:middle;"><polyline points="20 6 9 17 4 12"></polyline></svg> Devolução registrada</button>
                {% endif %}
                <button class="secondary-button" type="button" style="width:100%; border-radius:10px; font-weight:700;" onclick="document.getElementById('historico').scrollIntoView({behavior:'smooth', block:'start'})">🕘 Ver histórico</button>
            </div>
        </section>
        <section class="data-panel" style="padding:16px; background:var(--primary-soft); border-color:var(--border-subtle);">
            <h3 style="margin:0 0 6px; font-size:.85rem; color:var(--primary);">Obra vinculada</h3>
            <p style="margin:0; color:var(--content-text); font-weight:700;">{{ loc.obra }}</p>
            <p style="margin:4px 0 0; color:var(--text-muted); font-size:.72rem;">{{ loc.cliente|default:"Sem cliente" }}</p>
        </section>
    </aside>
</div>
{% endblock %}