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

{% block title %}Auto-Generate Year-End Snapshots - {{ organization.name }}{% endblock %}

{% block page_title %}Auto-Generate Year-End Snapshots{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb" aria-label="breadcrumbs">
    <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{% url 'tenants:settings' %}">Settings</a></li>
    <li class="breadcrumb-item active" aria-current="page">Auto-Generate Snapshots</li>
</ol>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="ti ti-wand me-2"></i>Auto-Generate Year-End Snapshots
                </h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info mb-4">
                    <div class="d-flex">
                        <div>
                            <i class="ti ti-info-circle icon me-2"></i>
                        </div>
                        <div>
                            <h4 class="alert-title">Bagaimana Ia Berfungsi</h4>
                            <div class="text-secondary">
                                System akan automatically calculate year-end balances dari transaction data anda untuk setiap tahun.
                                <br>Data yang dikira: Inventory, Bank Balance, Receivables, Payables, Loans
                                <br><strong>Preview data di bawah, pilih tahun yang anda nak generate, dan klik "Generate Snapshots"</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <h3 class="card-title text-white">{{ total_years }}</h3>
                                <p class="card-text">Total Years dengan Data</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white">
                            <div class="card-body">
                                <h3 class="card-title text-white">{{ new_snapshots }}</h3>
                                <p class="card-text">Snapshots Baru (Will Create)</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-secondary text-white">
                            <div class="card-body">
                                <h3 class="card-title text-white">{{ existing_snapshots }}</h3>
                                <p class="card-text">Already Exists (Skip)</p>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="post">
                    {% csrf_token %}
                    
                    <div class="table-responsive mb-4">
                        <table class="table table-vcenter card-table table-striped">
                            <thead>
                                <tr>
                                    <th class="w-1">
                                        <input type="checkbox" id="select-all" class="form-check-input">
                                    </th>
                                    <th>Year</th>
                                    <th>Status</th>
                                    <th class="text-end">Opening Inventory</th>
                                    <th class="text-end">Closing Inventory</th>
                                    <th class="text-end">Bank Balance</th>
                                    <th class="text-end">Receivables</th>
                                    <th class="text-end">Payables</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for data in preview_data %}
                                <tr>
                                    <td>
                                        {% if data.status == 'new' %}
                                        <input type="checkbox" name="selected_years" value="{{ data.year }}" 
                                               class="form-check-input year-checkbox" checked>
                                        {% else %}
                                        <input type="checkbox" disabled class="form-check-input">
                                        {% endif %}
                                    </td>
                                    <td><strong class="text-primary">{{ data.year }}</strong></td>
                                    <td>
                                        {% if data.status == 'new' %}
                                        <span class="badge bg-success">
                                            <i class="ti ti-plus me-1"></i>{{ data.status_label }}
                                        </span>
                                        {% else %}
                                        <span class="badge bg-secondary">
                                            <i class="ti ti-check me-1"></i>{{ data.status_label }}
                                        </span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">RM {{ data.opening_inventory_value|floatformat:2 }}</td>
                                    <td class="text-end">RM {{ data.closing_inventory_value|floatformat:2 }}</td>
                                    <td class="text-end">RM {{ data.closing_bank_balance|floatformat:2 }}</td>
                                    <td class="text-end">RM {{ data.closing_trade_receivables|floatformat:2 }}</td>
                                    <td class="text-end">RM {{ data.closing_trade_payables|floatformat:2 }}</td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="8" class="text-center text-muted">
                                        Tiada data transactions dijumpai. Sila masukkan transactions dahulu.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                    <div class="alert alert-warning">
                        <div class="d-flex">
                            <div>
                                <i class="ti ti-alert-triangle icon me-2"></i>
                            </div>
                            <div>
                                <h4 class="alert-title">Penting!</h4>
                                <div class="text-secondary">
                                    <ul class="mb-0">
                                        <li><strong>Review data dengan teliti</strong> - Pastikan values adalah reasonable</li>
                                        <li><strong>Snapshots yang existing akan di-skip</strong> - Delete dulu jika nak regenerate</li>
                                        <li><strong>Snapshots dicipta sebagai DRAFT</strong> - Anda boleh edit selepas ini</li>
                                        <li><strong>Finalize manually</strong> selepas verify semua data betul</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{% url 'tenants:settings' %}" class="btn">
                            <i class="ti ti-arrow-left me-2"></i>Cancel
                        </a>
                        
                        {% if new_snapshots > 0 %}
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ti ti-wand me-2"></i>Generate {{ new_snapshots }} Snapshot(s)
                        </button>
                        {% else %}
                        <button type="button" class="btn btn-secondary" disabled>
                            <i class="ti ti-check me-2"></i>All Snapshots Already Exist
                        </button>
                        {% endif %}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Select/Deselect all checkboxes
document.getElementById('select-all').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.year-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// Confirm before submitting
document.querySelector('form').addEventListener('submit', function(e) {
    const selectedCount = document.querySelectorAll('.year-checkbox:checked').length;
    
    if (selectedCount === 0) {
        e.preventDefault();
        alert('Sila pilih sekurang-kurangnya satu tahun untuk generate.');
        return false;
    }
    
    const confirmed = confirm(
        `Adakah anda pasti mahu generate ${selectedCount} Year-End Snapshot(s)?\n\n` +
        `Data akan dikira dari transactions yang sedia ada.\n` +
        `Anda boleh review dan edit selepas ini.`
    );
    
    if (!confirmed) {
        e.preventDefault();
        return false;
    }
});
</script>
{% endblock %}