314 lines
11 KiB
HTML
314 lines
11 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Card Details - BMC Hub{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="container-fluid py-4">
|
||
|
|
<!-- Header -->
|
||
|
|
<div class="row mb-4">
|
||
|
|
<div class="col">
|
||
|
|
<nav aria-label="breadcrumb">
|
||
|
|
<ol class="breadcrumb">
|
||
|
|
<li class="breadcrumb-item"><a href="/prepaid-cards">Prepaid Cards</a></li>
|
||
|
|
<li class="breadcrumb-item active" aria-current="page" id="cardNumber">Loading...</li>
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
<h1 class="h3 mb-0" id="pageTitle">💳 Loading...</h1>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<button class="btn btn-outline-secondary" onclick="window.location.href='/prepaid-cards'">
|
||
|
|
<i class="bi bi-arrow-left"></i> Tilbage
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card Info -->
|
||
|
|
<div class="row g-4 mb-4">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="card border-0 shadow-sm">
|
||
|
|
<div class="card-header bg-white border-0 py-3">
|
||
|
|
<h5 class="mb-0">Kort Information</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row g-3" id="cardInfo">
|
||
|
|
<div class="col-12 text-center py-5">
|
||
|
|
<div class="spinner-border text-primary" role="status">
|
||
|
|
<span class="visually-hidden">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
<!-- Stats Card -->
|
||
|
|
<div class="card border-0 shadow-sm mb-3">
|
||
|
|
<div class="card-header bg-white border-0 py-3">
|
||
|
|
<h5 class="mb-0">Oversigt</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="mb-3 pb-3 border-bottom">
|
||
|
|
<small class="text-muted d-block mb-1">Købte Timer</small>
|
||
|
|
<h4 class="mb-0" id="statPurchased">-</h4>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3 pb-3 border-bottom">
|
||
|
|
<small class="text-muted d-block mb-1">Brugte Timer</small>
|
||
|
|
<h4 class="mb-0 text-info" id="statUsed">-</h4>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3 pb-3 border-bottom">
|
||
|
|
<small class="text-muted d-block mb-1">Tilbage</small>
|
||
|
|
<h4 class="mb-0 text-success" id="statRemaining">-</h4>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<small class="text-muted d-block mb-1">Total Beløb</small>
|
||
|
|
<h4 class="mb-0 text-primary" id="statTotal">-</h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Actions Card -->
|
||
|
|
<div class="card border-0 shadow-sm">
|
||
|
|
<div class="card-header bg-white border-0 py-3">
|
||
|
|
<h5 class="mb-0">Handlinger</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div id="actionButtons">
|
||
|
|
<!-- Will be populated -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Transactions -->
|
||
|
|
<div class="card border-0 shadow-sm">
|
||
|
|
<div class="card-header bg-white border-0 py-3">
|
||
|
|
<h5 class="mb-0">Transaktioner</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-hover align-middle" id="transactionsTable">
|
||
|
|
<thead class="table-light">
|
||
|
|
<tr>
|
||
|
|
<th>Dato</th>
|
||
|
|
<th>Ticket</th>
|
||
|
|
<th>Beskrivelse</th>
|
||
|
|
<th class="text-end">Timer</th>
|
||
|
|
<th class="text-end">Beløb</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="transactionsBody">
|
||
|
|
<tr>
|
||
|
|
<td colspan="5" class="text-center py-5">
|
||
|
|
<div class="spinner-border text-primary" role="status">
|
||
|
|
<span class="visually-hidden">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const cardId = {{ card_id }};
|
||
|
|
|
||
|
|
// Load card details
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
loadCardDetails();
|
||
|
|
});
|
||
|
|
|
||
|
|
async function loadCardDetails() {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/v1/prepaid-cards/${cardId}`);
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error('Card not found');
|
||
|
|
}
|
||
|
|
|
||
|
|
const card = await response.json();
|
||
|
|
|
||
|
|
// Update header
|
||
|
|
document.getElementById('cardNumber').textContent = card.card_number;
|
||
|
|
document.getElementById('pageTitle').textContent = `💳 ${card.card_number}`;
|
||
|
|
|
||
|
|
// Update stats
|
||
|
|
document.getElementById('statPurchased').textContent =
|
||
|
|
parseFloat(card.purchased_hours).toFixed(1) + ' t';
|
||
|
|
document.getElementById('statUsed').textContent =
|
||
|
|
parseFloat(card.used_hours).toFixed(1) + ' t';
|
||
|
|
document.getElementById('statRemaining').textContent =
|
||
|
|
parseFloat(card.remaining_hours).toFixed(1) + ' t';
|
||
|
|
document.getElementById('statTotal').textContent =
|
||
|
|
new Intl.NumberFormat('da-DK', {
|
||
|
|
style: 'currency',
|
||
|
|
currency: 'DKK'
|
||
|
|
}).format(parseFloat(card.total_amount));
|
||
|
|
|
||
|
|
// Update card info
|
||
|
|
const statusBadge = getStatusBadge(card.status);
|
||
|
|
const expiresAt = card.expires_at ?
|
||
|
|
new Date(card.expires_at).toLocaleDateString('da-DK', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric'
|
||
|
|
}) : 'Ingen udløbsdato';
|
||
|
|
|
||
|
|
document.getElementById('cardInfo').innerHTML = `
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Kortnummer</label>
|
||
|
|
<p class="mb-0"><strong>${card.card_number}</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Status</label>
|
||
|
|
<p class="mb-0">${statusBadge}</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Kunde</label>
|
||
|
|
<p class="mb-0">
|
||
|
|
<a href="/customers/${card.customer_id}" class="text-decoration-none">
|
||
|
|
${card.customer_name || '-'}
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
<small class="text-muted">${card.customer_email || ''}</small>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Pris pr. Time</label>
|
||
|
|
<p class="mb-0"><strong>${parseFloat(card.price_per_hour).toFixed(2)} kr</strong></p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Købt Dato</label>
|
||
|
|
<p class="mb-0">${new Date(card.purchased_at).toLocaleDateString('da-DK')}</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">Udløber</label>
|
||
|
|
<p class="mb-0">${expiresAt}</p>
|
||
|
|
</div>
|
||
|
|
${card.economic_invoice_number ? `
|
||
|
|
<div class="col-md-6">
|
||
|
|
<label class="small text-muted">e-conomic Fakturanr.</label>
|
||
|
|
<p class="mb-0">${card.economic_invoice_number}</p>
|
||
|
|
</div>
|
||
|
|
` : ''}
|
||
|
|
${card.notes ? `
|
||
|
|
<div class="col-12">
|
||
|
|
<label class="small text-muted">Bemærkninger</label>
|
||
|
|
<p class="mb-0">${card.notes}</p>
|
||
|
|
</div>
|
||
|
|
` : ''}
|
||
|
|
`;
|
||
|
|
|
||
|
|
// Update action buttons
|
||
|
|
const actions = [];
|
||
|
|
if (card.status === 'active') {
|
||
|
|
actions.push(`
|
||
|
|
<button class="btn btn-warning w-100 mb-2" onclick="cancelCard()">
|
||
|
|
<i class="bi bi-x-circle"></i> Annuller Kort
|
||
|
|
</button>
|
||
|
|
`);
|
||
|
|
}
|
||
|
|
document.getElementById('actionButtons').innerHTML = actions.join('') ||
|
||
|
|
'<p class="text-muted text-center mb-0">Ingen handlinger tilgængelige</p>';
|
||
|
|
|
||
|
|
// Render transactions
|
||
|
|
renderTransactions(card.transactions || []);
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error loading card:', error);
|
||
|
|
document.getElementById('cardInfo').innerHTML = `
|
||
|
|
<div class="col-12 text-center text-danger py-5">
|
||
|
|
<i class="bi bi-exclamation-circle fs-1 mb-3"></i>
|
||
|
|
<p>❌ Fejl ved indlæsning: ${error.message}</p>
|
||
|
|
<button class="btn btn-primary" onclick="window.location.href='/prepaid-cards'">
|
||
|
|
Tilbage til oversigt
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTransactions(transactions) {
|
||
|
|
const tbody = document.getElementById('transactionsBody');
|
||
|
|
|
||
|
|
if (!transactions || transactions.length === 0) {
|
||
|
|
tbody.innerHTML = `
|
||
|
|
<tr><td colspan="5" class="text-center text-muted py-5">
|
||
|
|
Ingen transaktioner endnu
|
||
|
|
</td></tr>
|
||
|
|
`;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody.innerHTML = transactions.map(t => `
|
||
|
|
<tr>
|
||
|
|
<td>${new Date(t.created_at).toLocaleDateString('da-DK')}</td>
|
||
|
|
<td>
|
||
|
|
${t.ticket_id ?
|
||
|
|
`<a href="/ticket/tickets/${t.ticket_id}" class="text-decoration-none">
|
||
|
|
#${t.ticket_id} - ${t.ticket_title || 'Ticket'}
|
||
|
|
</a>` : '-'}
|
||
|
|
</td>
|
||
|
|
<td>${t.description || '-'}</td>
|
||
|
|
<td class="text-end">${parseFloat(t.hours_used).toFixed(2)} t</td>
|
||
|
|
<td class="text-end">${parseFloat(t.amount).toFixed(2)} kr</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function getStatusBadge(status) {
|
||
|
|
const badges = {
|
||
|
|
'active': '<span class="badge bg-success">Aktiv</span>',
|
||
|
|
'depleted': '<span class="badge bg-secondary">Opbrugt</span>',
|
||
|
|
'expired': '<span class="badge bg-danger">Udløbet</span>',
|
||
|
|
'cancelled': '<span class="badge bg-warning">Annulleret</span>'
|
||
|
|
};
|
||
|
|
return badges[status] || status;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function cancelCard() {
|
||
|
|
if (!confirm('Er du sikker på at du vil annullere dette kort?')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(`/api/v1/prepaid-cards/${cardId}/status`, {
|
||
|
|
method: 'PUT',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ status: 'cancelled' })
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) throw new Error('Fejl ved annullering');
|
||
|
|
|
||
|
|
alert('✅ Kort annulleret');
|
||
|
|
loadCardDetails(); // Reload
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error cancelling card:', error);
|
||
|
|
alert('❌ Fejl: ' + error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.breadcrumb {
|
||
|
|
background: transparent;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table th {
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
color: var(--bs-secondary);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|