{% extends "../base.html" %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block page_title %}Bulk Create Class Bills{% endblock %}
{% block content %}
    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
            <div class="x_title">
                <h2><i class="fa fa-plus-circle"></i> Bulk Create Class Bills</h2>
                <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="comm-header">
                    <div class="comm-intro">
                        <div class="comm-title">Create bills for multiple classes in one step.</div>
                        <div class="text-muted">Select a bill item, set the amount, and choose the target classes.</div>
                    </div>
                </div>

                <!-- Current Term Info -->
                {% if current_year and current_term %}
                <div class="alert alert-info">
                    <h4><i class="fa fa-info-circle"></i> Current Term: {{ current_term }} - {{ current_year }}</h4>
                    <p>You are creating bills for the current academic term. Bills will be applied to all selected classes.</p>
                </div>
                {% else %}
                <div class="alert alert-warning">
                    <h4><i class="fa fa-exclamation-triangle"></i> No Current Term</h4>
                    <p>Please set a current academic year and term before creating bills.</p>
                </div>
                {% endif %}

                {% if available_classes %}
                <form method="POST">
                    {% csrf_token %}

                    <!-- Bill Item Selection -->
                    <div class="form-group">
                        <label for="bill_item"><strong>Select Bill Item:</strong></label>
                        <select name="bill_item" id="bill_item" class="form-control" required>
                            <option value="">Choose a bill item...</option>
                            {% for item in bill_items %}
                            <option value="{{ item.id }}">{{ item.item_name }} - {{ item.description }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Amount Input -->
                    <div class="form-group">
                        <label for="amount"><strong>Amount per Student (UGX):</strong></label>
                        <input type="number" name="amount" id="amount" class="form-control"
                               placeholder="Enter amount" min="0" step="0.01" required>
                    </div>

                    <!-- Class Selection -->
                    <div class="form-group">
                        <label><strong>Select Classes:</strong></label>
                        <div class="row">
                            {% for class_info in available_classes %}
                            <div class="col-md-4">
                                <div class="checkbox class-check">
                                    <label>
                                        <input type="checkbox" name="selected_classes" value="{{ class_info.id }}"
                                               data-student-count="{{ class_info.student_count }}">
                                        <strong>{{ class_info.name }}</strong>
                                        {% if class_info.existing_bills > 0 %}
                                        <span class="badge badge-warning">{{ class_info.existing_bills }} existing bills</span>
                                        {% else %}
                                        <span class="badge badge-success">No existing bills</span>
                                        {% endif %}
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- Select All / Deselect All -->
                    <div class="form-group">
                        <button type="button" class="btn btn-sm btn-info" onclick="selectAllClasses()">Select All Classes</button>
                        <button type="button" class="btn btn-sm btn-default" onclick="deselectAllClasses()">Deselect All</button>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="fa fa-plus-circle"></i> Create Bills for Selected Classes
                        </button>
                        <a href="{% url 'class_bill_list' %}" class="btn btn-default btn-lg">
                            <i class="fa fa-arrow-left"></i> Back to Bill List
                        </a>
                    </div>
                </form>

                <!-- Preview Section -->
                    <div class="row" style="margin-top: 30px;">
                        <div class="col-md-12">
                        <div class="card preview-card">
                            <div class="card-header preview-header">
                                <h4><i class="fa fa-eye"></i> Preview & Summary</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h5>Selected Classes: <span id="selected-count">0</span></h5>
                                        <div id="selected-classes-list" style="max-height: 200px; overflow-y: auto;">
                                            <small class="text-muted">Select classes above to see preview</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <h5>Estimated Impact:</h5>
                                        <ul class="list-unstyled">
                                            <li><strong>Total Classes:</strong> <span id="total-classes">0</span></li>
                                            <li><strong>Estimated Students:</strong> <span id="estimated-students">0</span></li>
                                            <li><strong>Per Student Amount:</strong> UGX <span id="per-student">0</span></li>
                                            <li><strong>Total Billing Amount:</strong> UGX <span id="total-amount">0</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% else %}
                <div class="alert alert-warning">
                    <h4><i class="fa fa-exclamation-triangle"></i> No Classes Available</h4>
                    <p>No academic classes found for the current term. Please ensure you have set up academic classes first.</p>
                    <a href="#" class="btn btn-primary">Set Up Academic Classes</a>
                </div>
                {% endif %}

            </div>
            </div>
        </div>
    </div>

    <script>
        function selectAllClasses() {
            const checkboxes = document.querySelectorAll('input[name="selected_classes"]');
            checkboxes.forEach(cb => cb.checked = true);
            updatePreview();
        }

        function deselectAllClasses() {
            const checkboxes = document.querySelectorAll('input[name="selected_classes"]');
            checkboxes.forEach(cb => cb.checked = false);
            updatePreview();
        }

        function updatePreview() {
            const checkboxes = document.querySelectorAll('input[name="selected_classes"]:checked');
            const selectedCount = checkboxes.length;
            const amount = parseFloat(document.getElementById('amount').value) || 0;

            document.getElementById('selected-count').textContent = selectedCount;

            // Update selected classes list
            const listDiv = document.getElementById('selected-classes-list');
            if (selectedCount > 0) {
                let listHtml = '<ul class="list-unstyled">';
                checkboxes.forEach(cb => {
                    const label = cb.closest('label');
                    const className = label.textContent.trim().split(' ')[0]; // Get class name
                    listHtml += `<li><small>${className}</small></li>`;
                });
                listHtml += '</ul>';
                listDiv.innerHTML = listHtml;
            } else {
                listDiv.innerHTML = '<small class="text-muted">No classes selected</small>';
            }

            // Calculate actual student count from selected classes
            let totalStudents = 0;
            checkboxes.forEach(cb => {
                const studentCount = parseInt(cb.getAttribute('data-student-count')) || 0;
                totalStudents += studentCount;
            });

            const totalAmount = totalStudents * amount;

            document.getElementById('total-classes').textContent = selectedCount;
            document.getElementById('estimated-students').textContent = totalStudents.toLocaleString();
            document.getElementById('per-student').textContent = amount.toLocaleString();
            document.getElementById('total-amount').textContent = totalAmount.toLocaleString();
        }

        // Add event listeners
        document.addEventListener('DOMContentLoaded', function() {
            // Update preview when checkboxes change
            document.querySelectorAll('input[name="selected_classes"]').forEach(cb => {
                cb.addEventListener('change', updatePreview);
            });

            // Update preview when amount changes
            document.getElementById('amount').addEventListener('input', updatePreview);
        });
    </script>

<style>
  .comm-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    background:#f8fafc;
    border:1px solid #e6edf5;
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  .comm-title{font-weight:600;color:#334155;margin-bottom:4px;}

  .class-check{background:#fff;border:1px solid #e6edf5;border-radius:10px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,0.04);margin-bottom:10px;}
  .class-check label{display:flex;align-items:center;gap:8px;}

  .preview-card{border-radius:12px;border:1px solid #e6edf5;box-shadow:0 6px 16px rgba(0,0,0,0.04);}    
  .preview-header{background:#f8fafc;border-bottom:1px solid #e6edf5;border-radius:12px 12px 0 0;}
</style>

{% endblock %}