{% extends "admin/base.html" %}

{% block header %}{% if is_add %}Add{% else %}Edit{% endif %} {{ model_name|title }}{% endblock %}

{% block content %}
<div x-data="changeForm()" class="max-w-3xl">
    <form @submit.prevent="submit()" class="bg-white rounded-lg shadow-md">
        {% for title, options in fieldsets %}
        <div class="border-b border-gray-200 last:border-b-0">
            {% if title %}
            <div class="bg-gray-50 px-6 py-3">
                <h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
            </div>
            {% endif %}

            <div class="p-6 space-y-4">
                {% for field_name in options.fields %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        {{ field_name|replace('_', ' ')|title }}
                    </label>

                    <!-- Text input (default) -->
                    <input
                        type="text"
                        x-model="formData.{{ field_name }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    >

                    <p x-show="errors.{{ field_name }}" class="mt-1 text-sm text-red-600" x-text="errors.{{ field_name }}"></p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        <!-- Actions -->
        <div class="bg-gray-50 px-6 py-4 flex items-center justify-between rounded-b-lg">
            <div>
                {% if not is_add %}
                <button type="button" @click="deleteObject()"
                        class="text-red-600 hover:text-red-800">
                    Delete
                </button>
                {% endif %}
            </div>
            <div class="space-x-2">
                <a href="/admin/{{ app_label }}/{{ model_name }}/"
                   class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit"
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                        :disabled="submitting">
                    <span x-show="!submitting">Save</span>
                    <span x-show="submitting">Saving...</span>
                </button>
            </div>
        </div>
    </form>
</div>

<script>
function changeForm() {
    return {
        formData: {{ object|tojson if object else '{}' }},
        errors: {},
        submitting: false,

        async submit() {
            this.submitting = true;
            this.errors = {};

            const url = {% if is_add %}
                '/admin/api/{{ app_label }}/{{ model_name }}'
            {% else %}
                '/admin/api/{{ app_label }}/{{ model_name }}/{{ object.pk }}'
            {% endif %};

            const method = {% if is_add %}'POST'{% else %}'PUT'{% endif %};

            try {
                const response = await fetch(url, {
                    method: method,
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(this.formData),
                });

                if (response.ok) {
                    window.location.href = '/admin/{{ app_label }}/{{ model_name }}/';
                } else {
                    const data = await response.json();
                    this.errors = data.detail || {};
                }
            } catch (error) {
                console.error('Error:', error);
            }

            this.submitting = false;
        },

        async deleteObject() {
            if (!confirm('Are you sure you want to delete this item?')) return;

            await fetch('/admin/api/{{ app_label }}/{{ model_name }}/{{ object.pk }}', {
                method: 'DELETE',
            });
            window.location.href = '/admin/{{ app_label }}/{{ model_name }}/';
        }
    };
}
</script>
{% endblock %}