<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>מחשבון משכורות</title>
<style>
body { font-family: sans-serif; background: #f0f2f5; margin: 0; padding: 15px; }
.card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 15px; }
input { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 16px; }
button { width: 100%; padding: 12px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.btn-add { background: #007AFF; color: white; }
.btn-clear { background: #ff3b30; color: white; margin-top: 20px; font-size: 13px; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { text-align: right; padding: 10px; border-bottom: 1px solid #eee; }
.total { font-weight: bold; color: #007AFF; }
</style>
</head>
<body>
<div class="card">
<h3>רישום משמרת</h3>
<input type="date" id="d">
<input type="text" id="n" placeholder="שם המלצר/ית">
<input type="number" id="a" placeholder="סכום (₪)">
<button class="btn-add" onclick="add()">שמור משמרת</button>
</div>
<div class="card">
<h3>סיכום לפי שמות</h3>
<div id="summary"></div>
</div>
<div class="card">
<h3>היסטוריה</h3>
<div id="history"></div>
<button class="btn-clear" onclick="clearAll()">מחק הכל</button>
</div>
<script>
let data = JSON.parse(localStorage.getItem('tips_v1')) || [];
document.getElementById('d').valueAsDate = new Date();
function add() {
const d = document.getElementById('d').value;
const n = document.getElementById('n').value.trim();
const a = parseFloat(document.getElementById('a').value);
if(!n || !a) return alert("נא למלא שם וסכום");
data.push({d, n, a});
localStorage.setItem('tips_v1', JSON.stringify(data));
render();
document.getElementById('n').value = '';
document.getElementById('a').value = '';
}
function render() {
let totals = {};
let hHtml = '<table>';
data.slice().reverse().forEach(i => {
totals[i.n] = (totals[i.n] || 0) + i.a;
hHtml += `<tr><td>${i.d.split('-').reverse().join('/')} - ${i.n}</td><td class="total">₪${i.a}</td></tr>`;
});
hHtml += '</table>';
let sHtml = '<table><tr><th>שם</th><th>סה"כ</th></tr>';
for(let n in totals) { sHtml += `<tr><td>${n}</td><td class="total">₪${totals[n]}</td></tr>`; }
sHtml += '</table>';
document.getElementById('summary').innerHTML = sHtml;
document.getElementById('history').innerHTML = hHtml;
}
function clearAll() { if(confirm("למחוק הכל?")) { data = []; localStorage.removeItem('tips_v1'); render(); } }
render();
</script>
</body>
</html>