{% extends 'base.html' %}

{% block title %}{{ title }} | Locadora{% endblock %}

{% block content %}
<section class="page-header" style="background:var(--surface); border:1px solid var(--border-subtle); border-radius:12px; padding:20px 24px; box-shadow:var(--shadow-sm); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;">
    <div style="flex:1; min-width:280px;">
            <p class="eyebrow" style="color:var(--primary);">WORKSPACE / OPERAÇÃO</p>
        <h2 style="margin:6px 0; font-size:1.6rem; font-weight:700; color:var(--text-main);">{{ title }}</h2>
        <p class="page-description" style="max-width:620px;">{{ description }}</p>
    </div>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
        {% if title == 'Notificações' %}
        <button class="secondary-button" type="button" style="border-radius:10px; padding:10px 14px; font-weight:700;" onclick="marcarTodasLidas()"><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> Marcar todas como lidas</button>
        <button class="primary-button" type="button" style="border-radius:10px; padding:10px 16px; font-weight:700;" onclick="document.getElementById('secForm').style.display=document.getElementById('secForm').style.display==='none'?'block':'none'"><span>+</span> Nova notificação</button>
        {% else %}
        <button class="primary-button" type="button" style="border-radius:10px; padding:10px 16px; font-weight:700;" onclick="document.getElementById('secForm').style.display=document.getElementById('secForm').style.display==='none'?'block':'none'"><span>+</span> {{ action_label }}</button>
        {% endif %}
    </div>
</section>
<script>
function marcarTodasLidas(){
  document.querySelectorAll('tbody td:last-child').forEach(td=>{
    if(td.textContent.includes('Não lida')) td.innerHTML='<span style=padding:4px 8px;border-radius:6px;background:#D1FAE5;border:1px solid #A7F3D0;color:#065F46;font-size:.65rem;font-weight:700;>Lida</span>';
  });
  const t=document.createElement('div'); t.textContent='<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> Todas notificações marcadas como lidas'; t.style.cssText='position:fixed; bottom:20px; right:20px; background:#0B1120; color:#fff; padding:10px 14px; border-radius:10px; font-size:.75rem; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:9999;';
  document.body.appendChild(t); setTimeout(()=>t.remove(),2500);
}
</script>

<div id="secForm" class="data-panel" style="display:none; padding:0; margin-bottom:14px; overflow:hidden; border-top:3.5px solid var(--primary); border-radius:8px;">
    <div style="padding:20px; border-bottom:1px solid var(--border-subtle); background:var(--surface);">
        <div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.10em;">NOVO REGISTRO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px;">{{ action_label }}</div>
        <div style="color:var(--text-muted); font-size:.75rem; margin-top:2px;">Preencha e salve — aparecerá na tabela abaixo</div>
    </div>
    <form method="post" style="display:grid; gap:16px; padding:16px 18px 18px;">
        {% csrf_token %}
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Descrição *<input name="descricao" required placeholder="Ex: {{ title }} - descrição" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg);"></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Tipo<select name="tipo" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg);"><option>Receita</option><option>Custo</option><option>Outro</option></select></label>
        </div>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Vencimento<input name="vencimento" type="text" placeholder="Ex: 30/12/2026" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg);"></label>
            <label style="display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:700;">Valor<input name="valor" placeholder="Ex: R$ 1.200,00" style="padding:11px 12px; border:1px solid var(--border-subtle); border-radius:10px; background:var(--field-bg);"></label>
        </div>
        <div style="display:flex; gap:16px; justify-content:flex-end; border-top:1px solid var(--border-subtle); padding-top:12px;">
            <button type="button" class="secondary-button" style="border-radius:10px;" onclick="document.getElementById('secForm').style.display='none'">Cancelar</button>
            <button type="submit" class="primary-button" style="border-radius:10px; padding:10px 18px; font-weight:700;"><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> Salvar</button>
        </div>
    </form>
</div>

<div class="cards" style="gap:16px; margin-bottom:14px;">
    <div class="card" style="min-height:110px; padding:14px;"><div class="card-top"><span>Total registros</span><span class="card-icon blue"><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;"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg></span></div><strong>{{ items|length }}</strong><small>{{ title }}</small></div>
    <div class="card" style="min-height:110px; padding:14px;"><div class="card-top"><span>Atualizados</span><span class="card-icon green"><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></span></div><strong style="color:#059669;">{{ items|length }}</strong><small>Hoje</small></div>
    <div class="card" style="min-height:110px; padding:14px;"><div class="card-top"><span>Pendentes</span><span class="card-icon amber"><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;"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span></div><strong style="color:#D97706;">0</strong><small>Aguardando</small></div>
    <div class="card" style="min-height:110px; padding:14px;"><div class="card-top"><span>Categorias</span><span class="card-icon violet"><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;"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg></span></div><strong style="color:#475569;">{{ columns|length }}</strong><small>Colunas</small></div>
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:14px;">
    <div class="data-panel" style="padding:16px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.10em;">VOLUME</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.85rem;">Registros por período</div></div></div>
        <div style="display:flex; align-items:end; gap:8px; height:90px; padding:8px 0 0; border-bottom:1px solid var(--border-subtle);">
            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;"><div style="width:100%; background:var(--surface); border-radius:4px 4px 0 0; height:42%;"></div><span style="font-size:.75rem; color:var(--text-muted); font-weight:700;">Mar</span></div>
            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;"><div style="width:100%; background:var(--surface); border-radius:4px 4px 0 0; height:58%;"></div><span style="font-size:.75rem; color:var(--text-muted); font-weight:700;">Abr</span></div>
            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;"><div style="width:100%; background:var(--surface); border-radius:4px 4px 0 0; height:48%;"></div><span style="font-size:.75rem; color:var(--text-muted); font-weight:700;">Mai</span></div>
            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;"><div style="width:100%; background:#0284C7; border-radius:4px 4px 0 0; height:86%;"></div><span style="font-size:.75rem; color:var(--primary); font-weight:700;">Set</span></div>
        </div>
    </div>
    <div class="data-panel" style="padding:16px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;"><div><div style="color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.10em;">DISTRIBUIÇÃO</div><div style="font-weight:700; color:var(--text-main); margin-top:4px; font-size:.85rem;">Por status</div></div></div>
        <div style="display:flex; align-items:center; gap:16px;">
            <div style="position:relative; width:96px; height:96px; border-radius:50%; background:var(--slate-100); flex-shrink:0; border:2px solid #fff; box-shadow:0 4px 12px rgba(2,132,199,.10);"><div style="position:absolute; inset:14px; background:var(--surface); border-radius:50%; display:grid; place-items:center; font-weight:700; color:var(--text-main); font-size:.75rem; border:1px solid var(--border-subtle);">{{ items|length }}</div></div>
            <div style="flex:1; display:grid; gap:8px; font-size:.75rem;">
                <div style="display:flex; justify-content:space-between; padding:6px 8px; border-radius:6px; background:#E0F2FE; border:1px solid var(--primary-border);"><span><span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span> Ativos</span><strong>70%</strong></div>
                <div style="display:flex; justify-content:space-between; padding:6px 8px; border-radius:6px; background:#D1FAE5; border:1px solid #A7F3D0;"><span><span style="width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block;"></span> Concluídos</span><strong>30%</strong></div>
            </div>
        </div>
    </div>
</div>

<section class="data-panel">
    <div class="panel-toolbar">
        <div><strong>Registros</strong><span class="panel-subtitle">Dados atualizados hoje</span></div>
        <span class="count-pill">{{ items|length }} itens</span>
    </div>
    {% if items %}
    <div class="table-wrap">
        <table>
            <thead>
                <tr>{% for column in columns %}<th>{{ column }}</th>{% endfor %}</tr>
            </thead>
            <tbody>
                {% for item in items %}<tr>{% for value in item %}<td>{{ value }}</td>{% endfor %}</tr>{% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">+</div>
        <h3>Nenhum registro ainda</h3>
        <p>Use o botão acima para começar a cadastrar informações nesta área.</p>
    </div>
    {% endif %}
</section>
{% endblock %}