{% 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>

    <!-- Timelogs -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 py-3">
            <h5 class="mb-0">Timelogs</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="timelogsTable">
                    <thead class="table-light">
                        <tr>
                            <th>Dato</th>
                            <th>Sag / Ticket</th>
                            <th>Beskrivelse</th>
                            <th class="text-end">Faktisk tid</th>
                            <th class="text-end">Afrundet</th>
                        </tr>
                    </thead>
                    <tbody id="timelogsBody">
                        <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>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="3" class="text-end fw-bold">I alt:</td>
                            <td class="text-end fw-bold" id="totalActualHours">-</td>
                            <td class="text-end fw-bold" id="totalRoundedHours">-</td>
                        </tr>
                    </tfoot>
                </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">Afrunding</label>
                <div class="input-group input-group-sm">
                    <select class="form-select" id="roundingMinutes">
                        <option value="0">Ingen afrunding</option>
                        <option value="15">15 min</option>
                        <option value="30">30 min</option>
                        <option value="60">60 min</option>
                    </select>
                    <button class="btn btn-outline-primary" type="button" onclick="saveRounding()">Gem</button>
                </div>
            </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>';
        
        const roundingSelect = document.getElementById('roundingMinutes');
        if (roundingSelect) {
            roundingSelect.value = String(card.rounding_minutes || 0);
        }

        // Render timelogs
        renderTimelogs(card.timelogs || []);
        
    } 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 renderTimelogs(timelogs) {
    const tbody = document.getElementById('timelogsBody');
    
    if (!timelogs || timelogs.length === 0) {
        tbody.innerHTML = `
            <tr><td colspan="5" class="text-center text-muted py-5">
                Ingen timelogs endnu
            </td></tr>
        `;
        document.getElementById('totalActualHours').textContent = '0.00 t';
        document.getElementById('totalRoundedHours').textContent = '0.00 t';
        return;
    }
    
    let totalActual = 0;
    let totalRounded = 0;
    
    tbody.innerHTML = timelogs.map(t => {
        const dateValue = t.worked_date || t.created_at;
        const dateText = dateValue ? new Date(dateValue).toLocaleDateString('da-DK') : '-';
        let sourceHtml = '-';
        if (t.source === 'sag' && t.source_id) {
            sourceHtml = `<a href="/sag/${t.source_id}" class="text-decoration-none">Sag #${t.source_id}${t.source_title ? ' - ' + t.source_title : ''}</a>`;
        } else if (t.source === 'ticket' && t.source_id) {
            const ticketLabel = t.ticket_number ? `#${t.ticket_number}` : `#${t.source_id}`;
            sourceHtml = `<a href="/ticket/tickets/${t.source_id}" class="text-decoration-none">${ticketLabel} - ${t.source_title || 'Ticket'}</a>`;
        }
        
        const actual = parseFloat(t.actual_hours) || 0;
        const rounded = parseFloat(t.rounded_hours) || 0;
        totalActual += actual;
        totalRounded += rounded;
        
        return `
            <tr>
                <td>${dateText}</td>
                <td>${sourceHtml}</td>
                <td>${t.description || '-'}</td>
                <td class="text-end">${actual.toFixed(2)} t</td>
                <td class="text-end">${rounded.toFixed(2)} t</td>
            </tr>
        `;
    }).join('');
    
    // Update totals in footer
    document.getElementById('totalActualHours').textContent = totalActual.toFixed(2) + ' t';
    document.getElementById('totalRoundedHours').textContent = totalRounded.toFixed(2) + ' t';
}

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);
    }
}

async function saveRounding() {
    const select = document.getElementById('roundingMinutes');
    if (!select) return;
    const roundingMinutes = parseInt(select.value, 10) || 0;
    
    try {
        const response = await fetch(`/api/v1/prepaid-cards/${cardId}/rounding`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ rounding_minutes: roundingMinutes })
        });
        
        if (!response.ok) throw new Error('Fejl ved opdatering');
        
        alert('✅ Afrunding opdateret');
        loadCardDetails();
    } catch (error) {
        console.error('Error updating rounding:', 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 %}