{% 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">
                    <!-- Usage Meter -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between mb-1">
                            <small class="text-muted fw-bold">Forbrug</small>
                            <small class="fw-bold" id="statPercent">0%</small>
                        </div>
                        <div class="progress" style="height: 10px; background-color: #e9ecef; border-radius: 6px;">
                            <div class="progress-bar transition-all" id="statProgressBar" role="progressbar" style="width: 0%; transition: width 0.6s ease;"></div>
                        </div>
                    </div>

                    <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 Progress Bar
        const purchased = parseFloat(card.purchased_hours) || 0;
        const used = parseFloat(card.used_hours) || 0;
        const percent = purchased > 0 ? (used / purchased) * 100 : 0;
        
        const progressBar = document.getElementById('statProgressBar');
        progressBar.style.width = Math.min(percent, 100) + '%';
        document.getElementById('statPercent').textContent = Math.round(percent) + '%';
        
        // Color logic for progress bar
        progressBar.className = 'progress-bar transition-all'; // Reset class but keep transition
        if (percent >= 100) {
            progressBar.classList.add('bg-secondary'); // Depleted
        } else if (percent > 90) {
            progressBar.classList.add('bg-danger'); // Critical
        } else if (percent > 75) {
            progressBar.classList.add('bg-warning'); // Warning
        } else {
            progressBar.classList.add('bg-success'); // Good
        }
        
        // 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 %}