{% 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 class="meta">
                        <span>Last updated {{ last_updated|timesince }} ago</span>
                        <span class="user-avatar">
                            <i class="icon icon-user"></i>
                        </span>
                        <a href="#" class="icon icon-history">Riwayat</a>
                    </div>
                </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 }}">Nama *</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>

        <!-- DO Daily Section -->
        <div class="panel">
            <div class="panel-header">
                <h2>DO 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="col4">
                                        <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="col4">
                                        <div class="field">
                                            <label for="{{ form.weight.id_for_label }}">Weight *</label>
                                            {{ form.weight }}
                                            {% if form.weight.errors %}
                                                <div class="error-message">{{ form.weight.errors.0 }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col4">
                                        <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-datasupportdo' %}" 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="col4">
                            <div class="field">
                                <label>Day *</label>
                                <input type="number" name="form-${formCount}-day" class="form-control" placeholder="Enter day">
                            </div>
                        </div>
                        <div class="col4">
                            <div class="field">
                                <label>Weight *</label>
                                <input type="number" name="form-${formCount}-weight" class="form-control" placeholder="Enter weight">
                            </div>
                        </div>
                        <div class="col4">
                            <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 %}