SALVEI 1

core/templates/core/hits_report.html

@@ -21,6 +21,29 @@
                 </div>
             </div>
 
+            <!-- Barra de Busca e Filtros de Elite -->
+            <div class="card bg-slate-900 border-slate-800 mb-4">
+                <div class="card-body p-3">
+                    <div class="row g-3 align-items-center">
+                        <div class="col-md-5">
+                            <div class="input-group">
+                                <span class="input-group-text bg-black border-slate-700 text-warning"><i class="bi bi-search"></i></span>
+                                <input type="text" id="search-input" class="form-control bg-black border-slate-700 text-white" placeholder="Pesquisar jogo (ex: Mega, Quina, 05, 10)..." onkeyup="filterResults()">
+                            </div>
+                        </div>
+                        <div class="col-md-7">
+                            <div class="d-flex gap-2 justify-content-md-end flex-wrap">
+                                <button onclick="applyFilter('all')" class="btn btn-sm btn-outline-light active filter-btn" data-filter="all">TODOS</button>
+                                <button onclick="applyFilter(6)" class="btn btn-sm btn-outline-danger filter-btn" data-filter="6">SENAS (6)</button>
+                                <button onclick="applyFilter(5)" class="btn btn-sm btn-outline-warning filter-btn" data-filter="5">QUINAS (5)</button>
+                                <button onclick="applyFilter(4)" class="btn btn-sm btn-outline-info filter-btn" data-filter="4">QUADRAS (4)</button>
+                                <button onclick="applyFilter('other')" class="btn btn-sm btn-outline-secondary filter-btn" data-filter="other">OUTROS</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- Dashboard de Resumo -->
             <div class="row g-2 mb-4">
                 <div class="col">
@@ -103,33 +126,48 @@
     .elite-ball {
         background: linear-gradient(135deg, #198754, #28a745);
     }
+    .filter-btn.active {
+        background-color: currentColor;
+        color: #000 !important;
+        box-shadow: 0 0 15px currentColor;
+    }
+    .border-slate-700 { border-color: #334155 !important; }
 </style>
 
 <script>
+    let allHits = [];
+
     function loadReport() {
         const data = localStorage.getItem('detectedHits');
         const container = document.getElementById('report-container');
         
         if (!data) return;
         
-        const hits = JSON.parse(data);
+        allHits = JSON.parse(data);
-        if (hits.length === 0) return;
+        if (allHits.length === 0) return;
         
+        renderHits(allHits.reverse());
+        updateStats(allHits);
+    }
+
+    function renderHits(hitsToRender) {
+        const container = document.getElementById('report-container');
         container.innerHTML = '';
         
-        let dq = 0, tr = 0, qd = 0, qn = 0, sn = 0;
+        if (hitsToRender.length === 0) {
-        
+            container.innerHTML = `
-        // Inverte para mostrar os mais recentes primeiro
+                <div class="col-12 text-center py-5 text-slate-700">
-        hits.reverse().forEach(hit => {
+                    <i class="bi bi-search display-4 d-block mb-3"></i>
-            // Garantir ordenação (Menor para o Maior) na exibição do relatório
+                    <p>Nenhum acerto encontrado para esta busca.</p>
-            hit.sequence.sort((a, b) => a - b);
+                </div>
+            `;
+            return;
+        }
+
+        hitsToRender.forEach(hit => {
+            // Garantir ordenação (Menor para o Maior)
+            if (hit.sequence) hit.sequence.sort((a, b) => a - b);
 
-            if (hit.hits === 2) dq++;
-            else if (hit.hits === 3) tr++;
-            else if (hit.hits === 4) qd++;
-            else if (hit.hits === 5) qn++;
-            else if (hit.hits >= 6) sn++;
-            
             let badgeClass = "bg-danger";
             if (hit.hits === 2) badgeClass = "bg-secondary";
             else if (hit.hits === 3) badgeClass = "bg-primary";
@@ -137,7 +175,10 @@
             else if (hit.hits === 5) badgeClass = "bg-warning text-dark";
             
             const col = document.createElement('div');
-            col.className = 'col-md-6 col-lg-4';
+            col.className = 'col-md-6 col-lg-4 hit-item';
+            col.dataset.hits = hit.hits;
+            col.dataset.type = hit.type.toLowerCase();
+            col.dataset.sequence = hit.sequence.join(',');
             
             let ballsHtml = hit.sequence.map(n => {
                 return `<div class="num-ball-mini">${n.toString().padStart(2, '0')}</div>`;
@@ -156,6 +197,17 @@
             `;
             container.appendChild(col);
         });
+    }
+
+    function updateStats(hits) {
+        let dq = 0, tr = 0, qd = 0, qn = 0, sn = 0;
+        hits.forEach(hit => {
+            if (hit.hits === 2) dq++;
+            else if (hit.hits === 3) tr++;
+            else if (hit.hits === 4) qd++;
+            else if (hit.hits === 5) qn++;
+            else if (hit.hits >= 6) sn++;
+        });
         
         if (document.getElementById('stat-duque')) document.getElementById('stat-duque').innerText = dq;
         if (document.getElementById('stat-terno')) document.getElementById('stat-terno').innerText = tr;
@@ -164,6 +216,39 @@
         document.getElementById('stat-sena').innerText = sn;
     }
 
+    let currentFilter = 'all';
+
+    function applyFilter(filter) {
+        currentFilter = filter;
+        
+        // Atualizar botões
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.classList.remove('active');
+            if (btn.dataset.filter == filter) btn.classList.add('active');
+        });
+
+        filterResults();
+    }
+
+    function filterResults() {
+        const searchText = document.getElementById('search-input').value.toLowerCase();
+        
+        const filtered = allHits.filter(hit => {
+            const matchesSearch = hit.type.toLowerCase().includes(searchText) || 
+                                hit.sequence.join(',').includes(searchText);
+            
+            let matchesFilter = true;
+            if (currentFilter === 6) matchesFilter = (hit.hits >= 6);
+            else if (currentFilter === 5) matchesFilter = (hit.hits === 5);
+            else if (currentFilter === 4) matchesFilter = (hit.hits === 4);
+            else if (currentFilter === 'other') matchesFilter = (hit.hits < 4);
+            
+            return matchesSearch && matchesFilter;
+        });
+        
+        renderHits(filtered);
+    }
+
     function clearReport() {
         if (confirm('Deseja limpar todos os acertos detectados?')) {
             localStorage.removeItem('detectedHits');