<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Urenregistratie — Mek-Tech</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/dynamic.css"><link rel="icon" href="/img/favicon.svg"><script src="https://unpkg.com/lucide@latest"></script>
<style>
.time-tools{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.time-tools .tt-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:var(--radius);font-size:.75rem;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);text-decoration:none;transition:all .12s;font-family:inherit}
.time-tools .tt-btn:hover{border-color:var(--accent);color:var(--accent)}
.time-tools .tt-btn svg{width:14px;height:14px}
.alert-sent{background:var(--green-bg);border:1px solid var(--green);color:var(--green);padding:.5rem .75rem;border-radius:var(--radius);font-size:.8rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.alert-err{background:var(--red-bg);border:1px solid var(--red);color:var(--red);padding:.5rem .75rem;border-radius:var(--radius);font-size:.8rem;margin-bottom:.75rem}
.inline-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center}
.inline-modal.open{display:flex}
.inline-modal .im-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;width:90%;max-width:480px}
.inline-modal .im-box h3{font-size:.9rem;color:var(--text);margin-bottom:.75rem;display:flex;justify-content:space-between}
.inline-modal .im-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1.1rem}
</style></head><body>
<nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>
<div class="container">
<% if (sent) { %><div class="alert-sent"><i data-lucide="check-circle" style="width:16px;height:16px"></i> Urenoverzicht per email verzonden!</div><% } %>
<% if (error) { %><div class="alert-err"><%= error %></div><% } %>
<a href="javascript:history.back()" class="back-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg> Terug</a>
<div class="page-header"><h1>Urenregistratie</h1>
<div class="time-tools">
<button class="tt-btn" onclick="showTimeModal('invoiceModal')"><i data-lucide="receipt"></i> Factuur maken</button>
<button class="tt-btn" onclick="showTimeModal('emailModal')"><i data-lucide="send"></i> Email overzicht</button>
</div></div>
<div class="stats-grid">
<div class="stat-card"><div class="stat-number"><%= totalHours.toFixed(1) %></div><div class="stat-label">Totaal uren</div></div>
<div class="stat-card green"><div class="stat-number"><%= billableHours.toFixed(1) %></div><div class="stat-label">Facturabel</div></div>
</div>
<div class="form-card" style="margin-bottom:1rem">
<form method="POST" action="/time/new">
<div class="task-form-grid">
<select name="client_id"><option value="">Cliënt...</option><% clients.forEach(function(c){ %><option value="<%= c.id %>"><%= c.name %></option><% }) %></select>
<select name="engagement_id"><option value="">Engagement...</option><% engagements.forEach(function(e){ %><option value="<%= e.id %>"><%= e.title %> (<%= e.client_name %>)</option><% }) %></select>
<input type="date" name="date" required value="<%= new Date().toISOString().split('T')[0] %>">
<input type="number" name="hours" placeholder="Uren" step="0.25" required min="0" max="24">
<input type="text" name="description" placeholder="Omschrijving" style="min-width:200px">
<input type="number" name="hourly_rate" placeholder="Uurtarief" value="150" step="5" style="width:100px">
<label style="display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--text-muted);white-space:nowrap"><input type="checkbox" name="billable" value="1" checked> Facturabel</label>
<button class="btn btn-primary" type="submit">Toevoegen</button>
</div></form></div>
<table class="data-table"><thead><tr><th>Datum</th><th>Gebruiker</th><th>Cliënt</th><th>Engagement</th><th>Hours</th><th>Omschrijving</th><th>Tarief</th><th>Fact.</th><th></th></tr></thead><tbody>
<% entries.forEach(function(e){ %>
<tr><td><%= e.date %></td><td><%= e.username || '-' %></td><td><%= e.client_name || '-' %></td><td><%= e.engagement_title || '-' %></td><td><strong><%= e.hours %></strong></td><td><%= e.description || '' %></td><td>€<%= (e.hourly_rate || 150).toFixed(2) %></td><td><%= e.billable ? '✓' : '-' %></td><td><form method="POST" action="/time/<%= e.id %>/delete" style="display:inline"><button class="btn-small danger">✕</button></form></td></tr>
<% }) %>
</tbody></table></div>

<!-- Invoice Modal -->
<div class="inline-modal" id="invoiceModal"><div class="im-box">
<h3>Factuur maken uit uren <button class="im-close" onclick="hideTimeModal('invoiceModal')">✕</button></h3>
<form method="POST" action="/time/create-invoice">
<select name="client_id" required style="width:100%;margin-bottom:.5rem"><option value="">Kies cliënt...</option><% clients.forEach(function(c){ %><option value="<%= c.id %>"><%= c.name %></option><% }) %></select>
<div style="display:flex;gap:.35rem;margin-bottom:.5rem"><input type="date" name="date_from" placeholder="Van"><input type="date" name="date_to" placeholder="Tot"></div>
<button class="btn btn-primary" type="submit" style="width:100%">Factuur aanmaken</button>
</form></div></div>

<!-- Email Modal -->
<div class="inline-modal" id="emailModal"><div class="im-box">
<h3>Urenoverzicht emailen <button class="im-close" onclick="hideTimeModal('emailModal')">✕</button></h3>
<form method="POST" action="/time/send-email">
<select name="client_id" required style="width:100%;margin-bottom:.5rem"><option value="">Kies cliënt...</option><% clients.forEach(function(c){ %><option value="<%= c.id %>"><%= c.name %></option><% }) %></select>
<div style="display:flex;gap:.35rem;margin-bottom:.5rem"><input type="date" name="date_from" placeholder="Van"><input type="date" name="date_to" placeholder="Tot"></div>
<input type="email" name="to_email" placeholder="Naar emailadres (optioneel)" style="margin-bottom:.5rem">
<button class="btn btn-primary" type="submit" style="width:100%">Versturen</button>
</form></div></div>

<script>
lucide.createIcons();
function showTimeModal(id){document.getElementById(id).classList.add('open')}
function hideTimeModal(id){document.getElementById(id).classList.remove('open')}
document.querySelectorAll('.inline-modal').forEach(function(m){m.addEventListener('click',function(e){if(e.target===this)this.classList.remove('open')})});
</script><script src="/js/theme.js"></script></body></html>
