{% extends 'base.html' %}

{% block page_title %}Ataskaitų skydas{% endblock %}

{% block content %}
<!-- Фильтры аналитики -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Analitikos filtrai</h5>
        <button class="btn btn-outline-secondary" id="toggleFilterBtn">
            <i class="bi bi-funnel"></i> Rodyti/slėpti filtrus
        </button>
    </div>
    <div class="card-body bg-light" id="filterSection">
        <form id="filterForm" method="GET" action="{% url 'dashboard' %}">
            <div class="row g-3">
                <!-- Период -->
                <div class="col-md-6">
                    <label class="form-label">Laikotarpis</label>
                    <div class="d-flex flex-wrap gap-2">
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="today">Šiandien</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="week">Ši savaitė</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="month">Šis mėnuo</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="quarter">Šis ketvirtis</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="year">Šie metai</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="last7">Paskutinės 7 dienos</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="last30">Paskutinės 30 dienų</button>
                        <button type="button" class="btn btn-sm btn-outline-primary period-btn" data-period="last90">Paskutinės 90 dienų</button>
                    </div>
                </div>
                
                <!-- Пользовательский диапазон -->
                <div class="col-md-6">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label for="filterDateStart" class="form-label">Nuo</label>
                            <input type="date" class="form-control" id="filterDateStart" name="date_start" value="{{ date_start }}">
                        </div>
                        <div class="col-md-6">
                            <label for="filterDateEnd" class="form-label">Iki</label>
                            <input type="date" class="form-control" id="filterDateEnd" name="date_end" value="{{ date_end }}">
                        </div>
                    </div>
                </div>
                
                <!-- Статусы -->
                <div class="col-md-12">
                    <label class="form-label">Būsena</label>
                    <div class="d-flex flex-wrap gap-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="statusPaid" name="status" value="paid" {% if 'paid' in selected_statuses %}checked{% endif %}>
                            <label class="form-check-label" for="statusPaid">
                                Apmokėtos
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="statusPending" name="status" value="pending" {% if 'pending' in selected_statuses %}checked{% endif %}>
                            <label class="form-check-label" for="statusPending">
                                Laukiančios
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="statusOverdue" name="status" value="overdue" {% if 'overdue' in selected_statuses %}checked{% endif %}>
                            <label class="form-check-label" for="statusOverdue">
                                Vėluojančios
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="statusPartial" name="status" value="partial" {% if 'partial' in selected_statuses %}checked{% endif %}>
                            <label class="form-check-label" for="statusPartial">
                                Dalinai apmokėtos
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Кнопки -->
                <div class="col-12 d-flex justify-content-end">
                    <button type="button" class="btn btn-outline-danger me-2" id="resetFilterBtn">
                        <i class="bi bi-x-circle"></i> Išvalyti filtrus
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-funnel"></i> Filtruoti
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <!-- Statistinės kortelės -->
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <span class="text-muted">Bendrosios pajamos</span>
                        <h3 class="mt-2">€{{ total_revenue|floatformat:2 }}</h3>
                    </div>
                    <div class="icon-circle bg-primary">
                        <i class="bi bi-currency-euro text-white"></i>
                    </div>
                </div>
                <div class="mt-3">
                    <span class="text-{% if revenue_change_percent >= 0 %}success{% else %}danger{% endif %} fw-bold">
                        <i class="bi bi-arrow-{% if revenue_change_percent >= 0 %}up{% else %}down{% endif %}"></i> 
                        {{ revenue_change_percent|floatformat:1 }}%
                    </span>
                    <span class="text-muted">lyginant su praeitu periodu</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <span class="text-muted">Sėkmingos operacijos</span>
                        <h3 class="mt-2">{{ successful_transactions }}</h3>
                    </div>
                    <div class="icon-circle bg-success">
                        <i class="bi bi-check-circle text-white"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="progress" style="height: 5px;">
                        <div class="progress-bar bg-success" role="progressbar" 
                             style="width: {% widthratio successful_transactions successful_transactions|add:5 100 %}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card stat-card h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <span class="text-muted">Laukiančios sąskaitos</span>
                        <h3 class="mt-2">{{ pending_invoices }}</h3>
                    </div>
                    <div class="icon-circle bg-warning">
                        <i class="bi bi-receipt text-white"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="badge bg-warning text-dark">€{{ outstanding|floatformat:2 }} laukia</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Grafikas ir naujausios operacijos -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Pajamų apžvalga ({{ date_start }} - {{ date_end }})</span>
                <span class="badge bg-primary">
                    {% if days_diff <= 30 %}Dienos
                    {% elif days_diff <= 90 %}Savaitės
                    {% else %}Mėnesiai
                    {% endif %}
                </span>
            </div>
            <div class="card-body position-relative" style="height: 300px;">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>Naujausios operacijos</span>
                <a href="{% url 'payments' %}" class="btn btn-sm btn-outline-primary">Rodyti visas</a>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    {% for transaction in recent_transactions %}
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ transaction.client.name }}</h6>
                                <small class="text-muted">{{ transaction.date_issued|date:"M d" }} • {{ transaction.invoice_number }}</small>
                            </div>
                            <div class="text-end">
                                <strong>€{{ transaction.amount|floatformat:2 }}</strong>
                                <div>
                                    {% if transaction.status == 'paid' %}
                                        <span class="badge bg-success">Apmokėta</span>
                                    {% elif transaction.status == 'pending' %}
                                        <span class="badge bg-warning">Laukiama</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ transaction.status }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="list-group-item">
                        <div class="text-center text-muted py-3">
                            Nėra naujausių operacijų
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bendroji įmonės būklė -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                Įmonės finansinė būklė
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4 mb-3">
                        <div class="display-5 fw-bold text-primary">€{{ total_revenue|floatformat:2 }}</div>
                        <span class="text-muted">Bendrosios pajamos</span>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="display-5 fw-bold text-success">{{ successful_transactions }}</div>
                        <span class="text-muted">Sėkmingos operacijos</span>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="display-5 fw-bold text-warning">{{ pending_invoices }}</div>
                        <span class="text-muted">Laukiančios sąskaitos</span>
                    </div>
                </div>
                
                <div class="mt-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Finansinio stabilumo balas</span>
                        <strong>{{ financial_score }}/100</strong>
                    </div>
                    <div class="progress" style="height: 10px;">
                        <div class="progress-bar" role="progressbar" style="width: {{ financial_score }}%; background-color: 
                        {% if financial_score >= 80 %}var(--success)
                        {% elif financial_score >= 60 %}var(--primary)
                        {% else %}var(--warning)
                        {% endif %};">
                        </div>
                    </div>
                    
                    <div class="d-flex mt-4 flex-wrap">
                        {% if financial_score >= 80 %}
                        <div class="alert alert-success border-0 py-2 px-3 me-3 mb-2">
                            <i class="bi bi-check-circle me-2"></i>
                            <span>Puiki finansinė būklė</span>
                        </div>
                        {% elif financial_score >= 60 %}
                        <div class="alert alert-primary border-0 py-2 px-3 me-3 mb-2">
                            <i class="bi bi-info-circle me-2"></i>
                            <span>Gera finansinė būklė</span>
                        </div>
                        {% else %}
                        <div class="alert alert-warning border-0 py-2 px-3 me-3 mb-2">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <span>Reikia pagerinti</span>
                        </div>
                        {% endif %}

                        {% if pending_invoices > 5 %}
                        <div class="alert alert-info border-0 py-2 px-3 me-3 mb-2">
                            <i class="bi bi-info-circle me-2"></i>
                            <span>Laukiančios sąskaitos: {{ pending_invoices }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('revenueChart').getContext('2d');
        
        // Gauti duomenis iš Django konteksto
        const labels = JSON.parse('{{ chart_labels|escapejs }}');
        const data = JSON.parse('{{ chart_data|escapejs }}');
        
        // Rasti maksimalią reikšmę grafikui
        let maxValue = Math.max(...data);
        if (maxValue === 0) maxValue = 100;  // Kad grafiko aukštis nebutų 0
        
        // Sukurti gradientą stulpeliams
        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(44, 107, 237, 0.8)');
        gradient.addColorStop(1, 'rgba(44, 107, 237, 0.3)');
        
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pajamos (EUR)',
                    data: data,
                    backgroundColor: gradient,
                    borderColor: 'rgba(44, 107, 237, 1)',
                    borderWidth: 1,
                    borderRadius: 5,
                    barPercentage: 0.6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `EUR ${context.parsed.y.toFixed(2)}`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: maxValue * 1.2,  // Pridėti 20% viršuje vaizdumui
                        grid: {
                            drawBorder: false,
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            callback: function(value) {
                                return '€' + value;
                            },
                            padding: 10
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            padding: 10,
                            maxRotation: 45,
                            minRotation: 45
                        }
                    }
                }
            }
        });

        // Filtrų valdymas
        const filterSection = document.getElementById('filterSection');
        const toggleBtn = document.getElementById('toggleFilterBtn');
        
        // Переключение видимости фильтров
        toggleBtn.addEventListener('click', function() {
            if (filterSection.style.display === 'none') {
                filterSection.style.display = 'block';
                this.innerHTML = '<i class="bi bi-funnel-fill"></i> Slėpti filtrus';
            } else {
                filterSection.style.display = 'none';
                this.innerHTML = '<i class="bi bi-funnel"></i> Rodyti filtrus';
            }
        });
        
        // Обработчики кнопок периода
        document.querySelectorAll('.period-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const period = this.dataset.period;
                const today = new Date();
                const startDate = document.getElementById('filterDateStart');
                const endDate = document.getElementById('filterDateEnd');
                
                switch(period) {
                    case 'today':
                        startDate.value = formatDate(today);
                        endDate.value = formatDate(today);
                        break;
                    case 'week':
                        const weekStart = new Date(today);
                        weekStart.setDate(today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1));
                        startDate.value = formatDate(weekStart);
                        endDate.value = formatDate(today);
                        break;
                    case 'month':
                        startDate.value = formatDate(new Date(today.getFullYear(), today.getMonth(), 1));
                        endDate.value = formatDate(today);
                        break;
                    case 'quarter':
                        const quarter = Math.floor(today.getMonth() / 3);
                        startDate.value = formatDate(new Date(today.getFullYear(), quarter * 3, 1));
                        endDate.value = formatDate(today);
                        break;
                    case 'year':
                        startDate.value = formatDate(new Date(today.getFullYear(), 0, 1));
                        endDate.value = formatDate(today);
                        break;
                    case 'last7':
                        const last7 = new Date(today);
                        last7.setDate(today.getDate() - 6);
                        startDate.value = formatDate(last7);
                        endDate.value = formatDate(today);
                        break;
                    case 'last30':
                        const last30 = new Date(today);
                        last30.setDate(today.getDate() - 29);
                        startDate.value = formatDate(last30);
                        endDate.value = formatDate(today);
                        break;
                    case 'last90':
                        const last90 = new Date(today);
                        last90.setDate(today.getDate() - 89);
                        startDate.value = formatDate(last90);
                        endDate.value = formatDate(today);
                        break;
                }
                
                // Авто-отправка формы
                document.getElementById('filterForm').submit();
            });
        });
        
        // Сброс фильтров
        document.getElementById('resetFilterBtn').addEventListener('click', function() {
            document.getElementById('filterForm').reset();
            document.getElementById('filterForm').submit();
        });
        
        // Форматирование даты в YYYY-MM-DD
        function formatDate(date) {
            const d = new Date(date);
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        
        // Инициализация состояния фильтров
        {% if not selected_statuses and not date_start and not date_end %} 
            filterSection.style.display = 'none';
            toggleBtn.innerHTML = '<i class="bi bi-funnel"></i> Rodyti filtrus';
        {% endif %}
    });
</script>

<style>
    .icon-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    .list-group-item {
        border: none;
        border-bottom: 1px solid var(--border);
        padding: 1.25rem;
    }
    .list-group-item:last-child {
        border-bottom: none;
    }
    .progress-bar {
        border-radius: 4px;
    }
    #revenueChart {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Стили для фильтров */
    #filterSection {
        transition: all 0.3s ease;
    }
    
    #filterForm .form-label {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
    
    #toggleFilterBtn:hover {
        background-color: #e9ecef;
    }
    
    .period-btn {
        flex: 1 0 auto;
        max-width: 150px;
    }
    
    @media (max-width: 992px) {
        .period-btn {
            max-width: 120px;
        }
        
        .card-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .card-header h5 {
            margin-bottom: 1rem;
        }
    }
    
    @media (max-width: 768px) {
        .period-btn {
            max-width: 100px;
        }
        
        #filterForm .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
</style>
{% endblock %}