{% extends 'wagtailadmin/base.html' %}
{% load wagtailadmin_tags %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="nice-padding">
    <!-- Wagtail-style Header -->
    <div class="header">
        <div class="row">
            <div class="left">
                <div class="col">
                    <h1 class="icon icon-clipboard-list">{{ page_title }}</h1>
                </div>
            </div>
        </div>
    </div>

    <!-- Messages -->
    {% if messages %}
        {% for message in messages %}
            <div class="messages">
                <ul>
                    <li class="{% if message.tags == 'success' %}success{% elif message.tags == 'error' %}error{% else %}info{% endif %}">
                        {{ message }}
                    </li>
                </ul>
            </div>
        {% endfor %}
    {% endif %}

    <!-- Wagtail-style Form -->
    <form method="post" class="form">
        {% csrf_token %}
        
        <!-- Name and Description Section -->
        <div class="panel">
            <div class="panel-header">
                <h2>Name and Description</h2>
            </div>
            <div class="panel-content">
                <div class="row">
                    <div class="col6">
                        <div class="field">
                            <label for="{{ form.name.id_for_label }}">Name *</label>
                            {{ form.name }}
                            {% if form.name.errors %}
                                <div class="error-message">{{ form.name.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col6">
                        <div class="field">
                            <label for="{{ form.description.id_for_label }}">Description *</label>
                            {{ form.description }}
                            {% if form.description.errors %}
                                <div class="error-message">{{ form.description.errors.0 }}</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Weight Daily Section -->
        <div class="panel">
            <div class="panel-header">
                <h2>Weight Daily</h2>
            </div>
            <div class="panel-content">
                <div class="formset" data-formset-prefix="{{ formset.prefix }}">
                    {{ formset.management_form }}
                    <div class="formset-container">
                        {% for form in formset %}
                            <div class="formset-item">
                                <div class="row">
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.day.id_for_label }}">Day *</label>
                                            {{ form.day }}
                                            {% if form.day.errors %}
                                                <div class="error-message">{{ form.day.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.date_taken.id_for_label }}">Tanggal *</label>
                                            {{ form.date_taken }}
                                            {% if form.date_taken.errors %}
                                                <div class="error-message">{{ form.date_taken.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.weight_1.id_for_label }}">Weight #1 *</label>
                                            {{ form.weight_1 }}
                                            {% if form.weight_1.errors %}
                                                <div class="error-message">{{ form.weight_1.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.weight_2.id_for_label }}">Weight #2 *</label>
                                            {{ form.weight_2 }}
                                            {% if form.weight_2.errors %}
                                                <div class="error-message">{{ form.weight_2.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.weight_3.id_for_label }}">Weight #3 *</label>
                                            {{ form.weight_3 }}
                                            {% if form.weight_3.errors %}
                                                <div class="error-message">{{ form.weight_3.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col2">
                                        <div class="field">
                                            <label for="{{ form.weight_4.id_for_label }}">Weight #4 *</label>
                                            {{ form.weight_4 }}
                                            {% if form.weight_4.errors %}
                                                <div class="error-message">{{ form.weight_4.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col12">
                                        <div class="field">
                                            {% if form.DELETE %}
                                                <label class="checkbox">
                                                    {{ form.DELETE }}
                                                    Delete this entry
                                                </label>
                                            {% endif %}
                                            <button type="button" class="button button-secondary icon icon-cross" onclick="deleteFormsetRow(this)">
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" class="button button-secondary icon icon-plus" onclick="addFormsetRow()">
                        Add New Day
                    </button>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="actions">
            <div class="actions__container">
                <div class="actions__inner">
                    <a href="{% url 'user_dashboard:user-dashboard-data-support-manual-datasupportmanualweight' %}" class="button button-secondary icon icon-arrow-left">
                        Back to List
                    </a>
                    <button type="submit" class="button button-primary icon icon-tick">
                        Simpan
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
// Wagtail-style formset functionality
document.addEventListener('DOMContentLoaded', function() {
    const formsetContainer = document.querySelector('.formset');
    const managementForm = document.getElementById('id_form-TOTAL_FORMS');
    
    if (formsetContainer && managementForm) {
        // Initialize formset counter
        let formCount = parseInt(managementForm.value);
        
        // Add new form functionality
        window.addFormsetRow = function() {
            const newFormHtml = `
                <div class="formset-item">
                    <div class="row">
                        <div class="col2">
                            <div class="field">
                                <label>Day *</label>
                                <input type="number" name="form-${formCount}-day" class="form-control" placeholder="Enter day">
                            </div>
                        </div>
                        <div class="col2">
                            <div class="field">
                                <label>Tanggal *</label>
                                <input type="date" name="form-${formCount}-date_taken" class="form-control">
                            </div>
                        </div>
                        <div class="col2">
                            <div class="field">
                                <label>Weight #1 *</label>
                                <input type="number" name="form-${formCount}-weight_1" class="form-control" placeholder="Enter weight 1">
                            </div>
                        </div>
                        <div class="col2">
                            <div class="field">
                                <label>Weight #2 *</label>
                                <input type="number" name="form-${formCount}-weight_2" class="form-control" placeholder="Enter weight 2">
                            </div>
                        </div>
                        <div class="col2">
                            <div class="field">
                                <label>Weight #3 *</label>
                                <input type="number" name="form-${formCount}-weight_3" class="form-control" placeholder="Enter weight 3">
                            </div>
                        </div>
                        <div class="col2">
                            <div class="field">
                                <label>Weight #4 *</label>
                                <input type="number" name="form-${formCount}-weight_4" class="form-control" placeholder="Enter weight 4">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col12">
                            <div class="field">
                                <button type="button" class="button button-secondary icon icon-cross" onclick="deleteFormsetRow(this)">
                                    Delete
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="hidden">
                        <input type="hidden" name="form-${formCount}-id" value="">
                    </div>
                </div>
            `;
            
            const container = formsetContainer.querySelector('.formset-container');
            container.insertAdjacentHTML('beforeend', newFormHtml);
            formCount++;
            managementForm.value = formCount;
        };
    }
});

// Delete formset row functionality
function deleteFormsetRow(button) {
    const formsetItem = button.closest('.formset-item');
    if (formsetItem) {
        // Find the DELETE checkbox and check it
        const deleteCheckbox = formsetItem.querySelector('input[name$="-DELETE"]');
        if (deleteCheckbox) {
            deleteCheckbox.checked = true;
            formsetItem.style.display = 'none';
        } else {
            // If no DELETE checkbox, remove the row entirely
            formsetItem.remove();
        }
    }
}
</script>
{% endblock %}