{% extends 'base.html' %}
{% load static %}

{% block title %}Licenças - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.licencas-page .page-heading { display: flex; align-items: center; gap: .7rem; }
.licencas-page .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #ece7fa; color: #5e3a8c; font-size: 1.35rem; }
.licencas-page .page-heading small { color: #59697a; }

.licencas-page .lic-stat {
    background: #fff; border-radius: 14px; padding: .85rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    display: flex; align-items: center; gap: .8rem; height: 100%;
}
.licencas-page .lic-stat .icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; font-size: 1.2rem; }
.licencas-page .lic-stat .label { font-size: .78rem; font-weight: 600; color: #66788c; }
.licencas-page .lic-stat .value { font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.licencas-page .tint-roxo    { border-top: 4px solid #5e3a8c; } .licencas-page .tint-roxo .icon    { background: #f3e5f5; color: #5e3a8c; }
.licencas-page .tint-verde   { border-top: 4px solid #1e7e34; } .licencas-page .tint-verde .icon   { background: #e8f5e9; color: #1e7e34; }
.licencas-page .tint-ciano   { border-top: 4px solid #0d6e63; } .licencas-page .tint-ciano .icon   { background: #e0f7fa; color: #00695c; }
.licencas-page .tint-verme   { border-top: 4px solid #b02a37; } .licencas-page .tint-verme .icon   { background: #fdecee; color: #b02a37; }

.licencas-page .card-licencas { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; }
.licencas-page .card-licencas .card-header {
    background: linear-gradient(135deg, #5e3a8c, #4a2f75); color: #fff;
    display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem;
}
.licencas-page .form-nova .form-label { font-size: .82rem; font-weight: 600; color: #44586c; }
.licencas-page .form-nova .form-control, .licencas-page .form-nova .form-select { border-radius: 9px; min-height: 44px; }
.licencas-page .lic-linha-machine { font-family: Consolas, monospace; font-size: .9rem; background: #f5f7fa; border-radius: 8px; padding: .05rem .4rem; }
.licencas-page .badge-status { border-radius: 999px; padding: .25rem .65rem; font-size: .72rem; font-weight: 700; }
.licencas-page .st-ativa { background: #e6f9f0; color: #1e7e34; }
.licencas-page .st-cancelada { background: #eef1f5; color: #6b7787; }
.licencas-page .st-perm { background: #ece7fa; color: #5e3a8c; }
.licencas-page .st-vencida { background: #fdecee; color: #b02a37; }
.licencas-page .st-vencendo { background: #fff8e6; color: #b26a00; }
.paginacao-modern .page-link {
    border: none; border-radius: 10px !important;
    color: #164a7b; font-weight: 600; font-size: .9rem;
    min-width: 2.4rem; text-align: center; padding: .5rem .65rem;
    margin-inline: .15rem; background: transparent;
}
.paginacao-modern .page-item.active .page-link { background: linear-gradient(135deg, #1e4976, #2f639d); color: #fff; box-shadow: 0 3px 10px rgba(30,73,118,.3); }
.paginacao-modern .page-link:hover { background: #e4effc; }
.paginacao-modern .page-item.active .page-link:hover { background: linear-gradient(135deg, #1e4976, #2f639d); }
.paginacao-modern .page-item.disabled .page-link { color: #b9c4d0; background: transparent; }

/* Botões de filtro coloridos */
.filtro-botao { border-radius: 999px; font-weight: 600; font-size: .84rem; padding: .45rem 1rem; transition: all .15s; }
.f-amarelo   { background: #fff8e6; color: #b26a00; border: 1.5px solid #f0dda4; }
.f-amarelo:hover   { background: #fff2cf; color: #8a5300; }
.f-amarelo.ativo   { background: #e0a800; color: #fff; border-color: #e0a800; box-shadow: 0 3px 10px rgba(224, 168, 0, .35); }
.f-vermelho  { background: #fdecee; color: #b02a37; border: 1.5px solid #f5c3c8; }
.f-vermelho:hover  { background: #fbdce0; color: #8e1f29; }
.f-vermelho.ativo  { background: #b02a37; color: #fff; border-color: #b02a37; box-shadow: 0 3px 10px rgba(176, 42, 55, .35); }
.f-cinza     { background: #eef1f5; color: #4b5968; border: 1.5px solid #d6dde5; }
.f-cinza:hover     { background: #e2e8ef; color: #33404e; }

/* Card Gerar Nova Licença */
.form-nova .form-control { min-height: 46px; }
.form-nova .perm-caixa {
    background: #f4f0fb; border-radius: 10px; padding: .45rem .6rem !important;
    margin-top: 0 !important;
}
.btn-gerar { height: 46px; border-radius: 9px; font-weight: 700; }
.busca-btn { height: 40px; min-width: 44px; border-radius: 8px !important; }

/* Botão Voltar do topo */
.licencas-page .page-heading ~ .btn, .licencas-page .btn-voltar-lila {
    background: #ece7fa; color: #5e3a8c; border: 1.5px solid #d8ccf0;
    font-weight: 600; border-radius: 9px;
}
.licencas-page .page-heading ~ .btn:hover, .licencas-page .btn-voltar-lila:hover {
    background: #ddd2f5; color: #45286e;
}
</style>
{% endblock %}

{% block content %}
<div class="licencas-page">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-4">
        <div class="page-heading">
            <i class="bi bi-key-fill"></i>
            <div>
                <h2 class="mb-0">Licenças</h2>
                <small>Área exclusiva do superadministrador — gere, renove e acompanhe as licenças dos clientes.</small>
            </div>
        </div>
        <a href="{% url 'lista_produtos' %}" class="btn btn-voltar-lila"><i class="bi bi-arrow-left"></i> Voltar</a>
    </div>

    <!-- Estatísticas -->
    <div class="row g-2 mb-4">
        <div class="col-6 col-lg-3">
            <div class="lic-stat tint-roxo">
                <span class="icon"><i class="bi bi-collection"></i></span>
                <div><div class="label">Licenças</div><div class="value">{{ stats.total }}</div><div class="small text-muted">todas</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="lic-stat tint-verde">
                <span class="icon"><i class="bi bi-check-circle"></i></span>
                <div><div class="label">Ativas</div><div class="value">{{ stats.ativas }}</div><div class="small text-muted">em uso</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="lic-stat tint-ciano">
                <span class="icon"><i class="bi bi-infinity"></i></span>
                <div><div class="label">Permanentes</div><div class="value">{{ stats.permanentes }}</div><div class="small text-muted">sem expiração</div></div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="lic-stat tint-verme">
                <span class="icon"><i class="bi bi-hourglass-split"></i></span>
                <div><div class="label">Vencidas</div><div class="value">{{ stats.vencidas }}</div><div class="small text-muted">necessitam renovação</div></div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card lic-card filtros mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-5">
                    <form method="get" class="row g-2 align-items-end">
                        <div class="col-md-7">
                            <label class="form-label d-block mb-1">Buscar cliente / machine_id</label>
                            <input type="text" name="busca" value="{{ busca }}" class="form-control" placeholder="Nome do cliente ou hash da máquina">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label d-block mb-1">Status</label>
                            <select name="status" class="form-select">
                                <option value="">Todos</option>
                                <option value="ativa" {% if status_filtro == 'ativa' %}selected{% endif %}>Ativas</option>
                                <option value="cancelada" {% if status_filtro == 'cancelada' %}selected{% endif %}>Canceladas</option>
                            </select>
                        </div>
                        <div class="col-md-1 d-grid"><button type="submit" class="btn btn-primary btn-sm busca-btn" title="Buscar"><i class="bi bi-search"></i></button></div>
                    </form>
                </div>
                <div class="col-md-7 d-flex flex-wrap gap-2 justify-content-end align-items-end">
                    <a href="?filtro=vencendo" class="btn filtro-botao f-amarelo {% if filtro == 'vencendo' %}ativo{% endif %}">
                        <i class="bi bi-hourglass"></i> Vence em 30 dias
                    </a>
                    <a href="?filtro=vencidas" class="btn filtro-botao f-vermelho {% if filtro == 'vencidas' %}ativo{% endif %}">
                        <i class="bi bi-x-circle"></i> Vencidas
                    </a>
                    <a href="{% url 'licencas_home' %}" class="btn filtro-botao f-cinza">
                        <i class="bi bi-eraser"></i> Limpar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Gerar nova licença -->
    <div class="card card-licencas mb-4">
        <div class="card-header"><i class="bi bi-plus-circle"></i> Gerar Nova Licença</div>
        <div class="card-body">
            <form method="post" action="{% url 'licenca_criar' %}" class="row g-3 form-nova align-items-end">
                {% csrf_token %}
                <div class="col-md-3">
                    <label class="form-label">Cliente <span class="text-danger">*</span></label>
                    <input type="text" name="cliente" class="form-control" placeholder="Nome do cliente" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Machine ID <span class="text-danger">*</span></label>
                    <input type="text" name="machine_id" class="form-control" placeholder="Cole o machine_id.txt" required>
                </div>
                <div class="col-md-2">
                    <div class="perm-caixa form-check form-switch ps-4 mt-2 mt-md-4">
                        <input type="checkbox" class="form-check-input" name="permanente" id="check-permanente" onchange="toggleValidade()">
                        <label class="form-check-label small fw-semibold" for="check-permanente">Permanente<br><span class="text-muted small fw-normal">sem expiração</span></label>
                    </div>
                </div>
                <div class="col-md-2" id="campo-validade">
                    <label class="form-label">Validade</label>
                    <input type="date" name="validade" class="form-control">
                </div>
                <div class="col-md-2 d-grid">
                    <button class="btn btn-success btn-gerar"><i class="bi bi-key-fill"></i> Gerar</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Lista -->
    <div class="card lic-card card-licencas">
        <div class="card-header"><i class="bi bi-list-ul"></i> Licenças Cadastradas<span class="ms-auto badge bg-light text-dark" style="color:#222{{ ' ' }}!important;">{{ licencas.paginator.count }} registro{{ licencas.paginator.count|pluralize }}</span></div>
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Cliente</th>
                        <th>Machine ID</th>
                        <th>Ativada em</th>
                        <th>Status atual</th>
                        <th>Renovações</th>
                        <th class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lic in licencas %}
                    <tr {% if lic.status != 'ativa' %}class="text-muted"{% endif %}>
                        <td>
                            <i class="bi {% if lic.status == 'cancelada' %}bi-key-x{% else %}bi-key-fill text-success{% endif %}"></i>
                            <strong>{{ lic.cliente }}</strong>
                        </td>
                        <td><span class="lic-linha-machine">{{ lic.machine_id|slice:':12' }}…</span></td>
                        <td>{{ lic.data_ativacao|date:"d/m/Y H:i" }}</td>
                        <td>
                            {% if lic.status != 'ativa' %}
                                <span class="badge-status st-cancelada">Cancelada</span>
                            {% elif lic.permanente %}
                                <span class="badge-status st-perm"><i class="bi bi-infinity"></i> Permanente</span>
                            {% elif lic.vencida %}
                                <span class="badge-status st-vencida">Vencida em {{ lic.validade|date:"d/m/Y" }}</span>
                            {% else %}
                                <span class="badge-status st-ativa">Ativa até {{ lic.validade|date:"d/m/Y" }}</span>
                            {% endif %}
                        </td>
                        <td>{{ lic.renovacoes_registro.count }} renovação{{ lic.renovacoes_registro.count|pluralize }}</td>
                        <td class="text-end">
                            <a href="{% url 'licenca_detalhe' lic.pk %}" class="btn btn-sm btn-outline-primary" title="Detalhes e histórico"><i class="bi bi-eye"></i></a>
                            <a href="{% url 'licenca_baixar' lic.pk %}" class="btn btn-sm btn-outline-success" title="Baixar licenca.key atual"><i class="bi bi-download"></i></a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            <i class="bi bi-key d-block fs-2 mb-2"></i>Nenhuma licença encontrada. Gere a primeira acima.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% if licencas.has_other_pages %}
        <div class="card-body pt-0">
            <nav aria-label="Paginação de licenças">
                <ul class="pagination paginacao-modern justify-content-center flex-wrap mb-0">
                    {% if licencas.has_previous %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ licencas.previous_page_number }}{% if busca %}&busca={{ busca }}{% endif %}" title="Página anterior"><i class="bi bi-chevron-left"></i></a>
                    </li>
                    {% else %}
                    <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-left"></i></span></li>
                    {% endif %}
                    {% for num in licencas.paginator.page_range %}
                        {% if num == 1 or num == licencas.paginator.num_pages or num >= licencas.number|add:'-2' and num <= licencas.number|add:'+2' %}
                            {% if licencas.number == num %}
                            <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                            {% elif num == licencas.paginator.num_pages and licencas.number|add:'+2' < num %}
                            <li class="page-item"><span class="page-link"><i class="bi bi-chevron-double-right"></i> {{ num }}</span></li>
                            {% elif num == 1 and licencas.number|add:'-2' > num %}
                            <li class="page-item"><span class="page-link">{{ num }} <i class="bi bi-chevron-double-left"></i></span></li>
                            {% else %}
                            <li class="page-item mx-1">
                                <a class="page-link" href="?page={{ num }}{% if busca %}&busca={{ busca }}{% endif %}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% elif num == licencas.number|add:'-3' or num == licencas.number|add:'+3' %}
                            <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                        {% endif %}
                    {% endfor %}
                    {% if licencas.has_next %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ licencas.next_page_number }}{% if busca %}&busca={{ busca }}{% endif %}" title="Próxima página"><i class="bi bi-chevron-right"></i></a>
                    </li>
                    {% else %}
                    <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-right"></i></span></li>
                    {% endif %}
                </ul>
                <div class="text-center text-muted small">Página <strong>{{ licencas.number }}</strong> de <strong>{{ licencas.paginator.num_pages }}</strong></div>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<script>
function toggleValidade() {
    document.getElementById('campo-validade').style.display =
        document.getElementById('check-permanente').checked ? 'none' : '';
}
toggleValidade();
</script>
{% endblock %}