{% extends 'base.html' %}
{% load static %}

{% block title %}Client Journey - {{ client.get_full_name }}{% endblock %}

{% block extra_css %}
<style>
    .journey-container {
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 20px;
    }
    
    .client-header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #e9ecef;
    }
    
    .client-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
        font-weight: bold;
        margin-right: 20px;
    }
    
    .client-info h2 {
        margin: 0;
        color: #333;
    }
    
    .client-info .text-muted {
        font-size: 1.1rem;
        margin-top: 5px;
    }
    
    .client-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }
    
    .metric-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        border-left: 4px solid #007bff;
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
        margin-bottom: 5px;
    }
    
    .metric-label {
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 500;
    }
    
    .timeline {
        position: relative;
        padding: 20px 0;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 30px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 30px;
        padding-left: 80px;
    }
    
    .timeline-marker {
        position: absolute;
        left: 15px;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.9rem;
        z-index: 1;
    }
    
    .timeline-marker.registration {
        background: #28a745;
    }
    
    .timeline-marker.verification {
        background: #17a2b8;
    }
    
    .timeline-marker.assignment {
        background: #6f42c1;
    }
    
    .timeline-marker.application {
        background: #ffc107;
        color: #333;
    }
    
    .timeline-marker.disbursement {
        background: #007bff;
    }
    
    .timeline-marker.completion {
        background: #28a745;
    }
    
    .timeline-content {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .timeline-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .timeline-title {
        font-weight: bold;
        color: #333;
        margin: 0;
    }
    
    .timeline-date {
        font-size: 0.9rem;
        color: #6c757d;
        margin-left: auto;
    }
    
    .timeline-description {
        color: #666;
        margin: 10px 0 0 0;
    }
    
    .timeline-amount {
        font-weight: bold;
        color: #007bff;
        margin-top: 5px;
    }
    
    .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
        margin-top: 5px;
    }
    
    .status-approved {
        background: #d4edda;
        color: #155724;
    }
    
    .status-pending {
        background: #fff3cd;
        color: #856404;
    }
    
    .status-rejected {
        background: #f8d7da;
        color: #721c24;
    }
    
    .status-active {
        background: #d1ecf1;
        color: #0c5460;
    }
    
    .status-paid {
        background: #d4edda;
        color: #155724;
    }
    
    .journey-stats {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
    }
    
    .stat-item {
        text-align: center;
    }
    
    .stat-value {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .back-button {
        margin-bottom: 20px;
    }
    
    .export-section {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e9ecef;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="back-button">
                <a href="{% url 'users:client_list' %}" class="btn btn-outline-secondary">
                    <span>←</span> Back to Clients
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="journey-container">
                <!-- Client Header -->
                <div class="client-header">
                    <div class="client-avatar">
                        {{ client.get_initials }}
                    </div>
                    <div class="client-info">
                        <h2>{{ client.get_full_name }}</h2>
                        <div class="text-muted">
                            {{ client.get_role_display }} • 
                            {% if client.portfolio_manager %}
                                Managed by {{ client.portfolio_manager.get_full_name }}
                            {% else %}
                                No Portfolio Manager Assigned
                            {% endif %}
                        </div>
                        <div class="text-muted">
                            Client since {{ client.created_at|date:"F d, Y" }} 
                            ({{ client_metrics.days_as_client }} days)
                        </div>
                    </div>
                </div>

                <!-- Journey Statistics -->
                <div class="journey-stats">
                    <h5><span>📈</span> Client Journey Overview</h5>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-value">{{ client_metrics.total_applications }}</div>
                            <div class="stat-label">Total Applications</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ client_metrics.approved_applications }}</div>
                            <div class="stat-label">Approved Applications</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ client_metrics.total_loans }}</div>
                            <div class="stat-label">Total Loans</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ client_metrics.active_loans }}</div>
                            <div class="stat-label">Active Loans</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">KES {{ client_metrics.total_borrowed|floatformat:0 }}</div>
                            <div class="stat-label">Total Borrowed</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">KES {{ client_metrics.total_paid|floatformat:0 }}</div>
                            <div class="stat-label">Total Paid</div>
                        </div>
                    </div>
                </div>

                <!-- Client Metrics Cards -->
                <div class="client-metrics">
                    <div class="metric-card">
                        <div class="metric-value">{{ client_metrics.total_applications }}</div>
                        <div class="metric-label">Loan Applications</div>
                    </div>
                    <div class="metric-card" style="border-left-color: #28a745;">
                        <div class="metric-value" style="color: #28a745;">{{ client_metrics.approved_applications }}</div>
                        <div class="metric-label">Approved Applications</div>
                    </div>
                    <div class="metric-card" style="border-left-color: #ffc107;">
                        <div class="metric-value" style="color: #ffc107;">{{ client_metrics.active_loans }}</div>
                        <div class="metric-label">Active Loans</div>
                    </div>
                    <div class="metric-card" style="border-left-color: #17a2b8;">
                        <div class="metric-value" style="color: #17a2b8;">{{ client_metrics.completed_loans }}</div>
                        <div class="metric-label">Completed Loans</div>
                    </div>
                </div>

                <!-- Timeline -->
                <div class="timeline-section">
                    <h5><i class="fas fa-route"></i> Client Journey Timeline</h5>
                    <div class="timeline">
                        {% for event in timeline_events %}
                        <div class="timeline-item">
                            <div class="timeline-marker {{ event.type }}">
                                <i class="{{ event.icon }}"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <h6 class="timeline-title">{{ event.event }}</h6>
                                    <span class="timeline-date">{{ event.date|date:"M d, Y H:i" }}</span>
                                </div>
                                <p class="timeline-description">{{ event.description }}</p>
                                
                                {% if event.amount %}
                                <div class="timeline-amount">
                                    Amount: KES {{ event.amount|floatformat:2 }}
                                </div>
                                {% endif %}
                                
                                {% if event.status %}
                                <span class="status-badge status-{{ event.status }}">
                                    {{ event.status|title }}
                                </span>
                                {% endif %}
                                
                                {% if event.loan_id %}
                                <div class="mt-2">
                                    <a href="{% url 'loans:loan_detail' event.loan_id %}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> View Loan Details
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted">
                            <span>⏰</span>
                            <h5>No Timeline Events</h5>
                            <p>This client's journey timeline will appear here as events occur.</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Export Section -->
                <div class="export-section">
                    <h6><span>⬇️</span> Export Client Journey</h6>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="exportJourney('pdf')">
                            <span>📄</span> Export as PDF
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="exportJourney('excel')">
                            <span>📊</span> Export as Excel
                        </button>
                        <button type="button" class="btn btn-outline-info" onclick="printJourney()">
                            <span>🖨️</span> Print Journey
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function exportJourney(format) {
    const clientId = '{{ client.id }}';
    const url = `{% url 'users:export_client_journey' client.id %}?format=${format}`;
    window.open(url, '_blank');
}

function printJourney() {
    window.print();
}

// Add smooth scrolling to timeline
document.addEventListener('DOMContentLoaded', function() {
    const timelineItems = document.querySelectorAll('.timeline-item');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateX(0)';
            }
        });
    }, {
        threshold: 0.1
    });
    
    timelineItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateX(-20px)';
        item.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(item);
    });
});

// Print styles
const printStyles = `
    @media print {
        .back-button, .export-section, .btn {
            display: none !important;
        }
        
        .journey-container {
            box-shadow: none !important;
            border: 1px solid #ddd !important;
        }
        
        .timeline-item {
            page-break-inside: avoid;
        }
        
        .client-header {
            page-break-after: avoid;
        }
    }
`;

const styleSheet = document.createElement('style');
styleSheet.textContent = printStyles;
document.head.appendChild(styleSheet);
</script>
{% endblock %}