{% extends 'user_dashboard/dashboard_base.html' %}

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

{% block content %}
<div class="dashboard-section">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 mb-2">{{ page_title }}</h1>
        <p class="text-gray-600">Confirm deletion of Data Support DO record</p>
    </div>

    <!-- Messages -->
    {% if messages %}
        {% for message in messages %}
            <div class="mb-4 p-4 rounded-lg {% if message.tags == 'success' %}bg-green-100 text-green-700{% elif message.tags == 'error' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <!-- Delete Confirmation -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-red-50">
            <h3 class="text-lg font-semibold text-red-900">⚠️ Delete Confirmation</h3>
        </div>
        
        <div class="p-6">
            <div class="mb-6">
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-exclamation-triangle text-yellow-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-yellow-800">
                                Are you sure you want to delete this record?
                            </h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                <p>This action cannot be undone. All associated daily data will also be deleted.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Record Details -->
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">Record Details</h4>
                <div class="bg-gray-50 rounded-lg p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Name:</label>
                            <p class="text-sm text-gray-900 font-semibold">{{ data_do.name }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Created:</label>
                            <p class="text-sm text-gray-900">{{ data_do.created_at|date:"M d, Y H:i"|default:"N/A" }}</p>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700">Description:</label>
                            <p class="text-sm text-gray-900">{{ data_do.description|default:"No description" }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Associated Data -->
            {% if data_do.do_daily.all %}
            <div class="mb-6">
                <h4 class="text-lg font-semibold text-gray-900 mb-4">Associated Daily Data ({{ data_do.do_daily.count }} records)</h4>
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fa-solid fa-database text-red-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">
                                This will also delete all daily data records
                            </h3>
                            <div class="mt-2 text-sm text-red-700">
                                <p>The following daily data will be permanently deleted:</p>
                                <ul class="mt-2 list-disc list-inside">
                                    {% for daily in data_do.do_daily.all|slice:":5" %}
                                        <li>Day {{ daily.day }} - Weight: {{ daily.weight }}</li>
                                    {% endfor %}
                                    {% if data_do.do_daily.count > 5 %}
                                        <li>... and {{ data_do.do_daily.count|add:"-5" }} more records</li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Delete Form -->
            <form method="post" class="space-y-4">
                {% csrf_token %}
                
                <div class="flex items-center">
                    <input type="checkbox" id="confirm_delete" name="confirm_delete" required 
                           class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                    <label for="confirm_delete" class="ml-2 block text-sm text-gray-900">
                        I understand that this action cannot be undone
                    </label>
                </div>

                <!-- Form Actions -->
                <div class="flex justify-between items-center pt-6 border-t border-gray-200">
                    <a href="{% url 'user_dashboard:user-dashboard-data-support-datasupportdo' %}" 
                       class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg flex items-center">
                        <i class="fa-solid fa-arrow-left mr-2"></i>
                        Cancel
                    </a>
                    <button type="submit" 
                            class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg flex items-center"
                            onclick="return confirm('Are you absolutely sure you want to delete this record? This action cannot be undone.')">
                        <i class="fa-solid fa-trash mr-2"></i>
                        Delete Permanently
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Enhanced confirmation
document.addEventListener('DOMContentLoaded', function() {
    const deleteButton = document.querySelector('button[type="submit"]');
    const confirmCheckbox = document.getElementById('confirm_delete');
    
    if (deleteButton && confirmCheckbox) {
        deleteButton.addEventListener('click', function(e) {
            if (!confirmCheckbox.checked) {
                e.preventDefault();
                alert('Please check the confirmation checkbox to proceed with deletion.');
                return false;
            }
        });
    }
});
</script>
{% endblock %}