{% extends 'admin_base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 shadow-lg">
        <h1 class="text-3xl font-bold text-gray-800 mb-6 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            {% if task %}Edit Task{% else %}Create New Task{% endif %}
        </h1>
        
        <form method="post" class="space-y-6" x-data="{ isSubmitting: false }" @submit="isSubmitting = true">
            {% csrf_token %}
            
            <!-- Title Field -->
            <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-700" for="id_title">
                    Title <span class="text-red-500">*</span>
                </label>
                {{ form.title }}
                {% if form.title.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.title.errors.0 }}</p>
                {% endif %}
            </div>
            
            <!-- Description Field -->
            <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-700" for="id_description">
                    Description
                </label>
                {{ form.description }}
                {% if form.description.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.description.errors.0 }}</p>
                {% endif %}
            </div>
            
            <!-- Date and Status Row -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Due Date Field -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-700" for="id_due_date">
                        Due Date <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        {{ form.due_date }}
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                    </div>
                    {% if form.due_date.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.due_date.errors.0 }}</p>
                    {% endif %}
                </div>
                
              <!-- Assigned To Field - Modified -->
              <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-700" for="id_assigned_to">
                    Assigned To
                </label>
                <select name="assigned_to" id="id_assigned_to" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2 px-3">
                    <option value="">---------</option>
                    {% for user in form.assigned_to.field.queryset %}
                        <option value="{{ user.id }}" {% if form.assigned_to.value == user.id %}selected{% endif %}>
                            {{ user.get_full_name|default:user.username }} ({{ user.email }})
                        </option>
                    {% endfor %}
                </select>
                {% if form.assigned_to.errors %}
                    <p class="mt-1 text-sm text-red-600">{{ form.assigned_to.errors.0 }}</p>
                {% endif %}
            </div>
            </div>
            
            <!-- Priority and Status Row -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Priority Field -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-700" for="id_priority">
                        Priority <span class="text-red-500">*</span>
                    </label>
                    {{ form.priority }}
                    {% if form.priority.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.priority.errors.0 }}</p>
                    {% endif %}
                </div>
                
                <!-- Status Field -->
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-700" for="id_status">
                        Status <span class="text-red-500">*</span>
                    </label>
                    {{ form.status }}
                    {% if form.status.errors %}
                        <p class="mt-1 text-sm text-red-600">{{ form.status.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>
            
            <!-- Form Actions -->
            <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                <a href="{% url 'mimansha_main:task_list' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Back to tasks
                </a>
                
                <div class="flex space-x-3">
                    {% if task %}
                    <a href="{% url 'mimansha_main:delete_task' task.pk %}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        Delete Task
                    </a>
                    {% endif %}
                    
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" :disabled="isSubmitting">
                        <svg x-show="isSubmitting" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span x-show="!isSubmitting">
                            {% if task %}Update Task{% else %}Create Task{% endif %}
                        </span>
                        <span x-show="isSubmitting">Processing...</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // Add datepicker functionality
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize flatpickr if you're using it
        if (typeof flatpickr !== "undefined") {
            flatpickr("#id_due_date", {
                dateFormat: "Y-m-d",
                minDate: "today"
            });
        }
        
        // Add focus styles dynamically
        const inputs = document.querySelectorAll('input, select, textarea');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('ring-2', 'ring-blue-500', 'rounded-md');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('ring-2', 'ring-blue-500', 'rounded-md');
            });
        });
    });
</script>
{% endblock %}