{% extends 'base.html' %}

{% block title %}Bulk Delete Clients - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50 py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-4xl">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <div class="text-center mb-8">
                <span>⚠️</span>
                <h2 class="text-2xl font-bold text-gray-900 mb-4">
                    Bulk Client {{ action|title }} Confirmation
                </h2>
                <p class="text-sm text-gray-600">
                    You are about to {{ action }} <strong>{{ total_clients }} client(s)</strong> and 
                    <strong>{{ total_dependencies }} related record(s)</strong>.
                </p>
            </div>

            <!-- Summary Statistics -->
            <div class="bg-blue-50 p-4 rounded-md mb-6">
                <h3 class="text-lg font-medium text-blue-900 mb-3">
                    <span>📊</span>
                    Operation Summary
                </h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
                    <div class="bg-white p-3 rounded">
                        <div class="text-2xl font-bold text-blue-600">{{ total_clients }}</div>
                        <div class="text-sm text-gray-600">Clients</div>
                    </div>
                    <div class="bg-white p-3 rounded">
                        <div class="text-2xl font-bold text-green-600">{{ total_dependencies }}</div>
                        <div class="text-sm text-gray-600">Related Records</div>
                    </div>
                    <div class="bg-white p-3 rounded">
                        <div class="text-2xl font-bold text-orange-600">
                            {% if action == 'blacklist' %}SOFT{% else %}HARD{% endif %}
                        </div>
                        <div class="text-sm text-gray-600">Delete Type</div>
                    </div>
                    <div class="bg-white p-3 rounded">
                        <div class="text-2xl font-bold text-red-600">
                            {% if action == 'blacklist' %}NO{% else %}YES{% endif %}
                        </div>
                        <div class="text-sm text-gray-600">Permanent</div>
                    </div>
                </div>
            </div>

            <!-- Client List -->
            <div class="bg-gray-50 p-4 rounded-md mb-6 max-h-96 overflow-y-auto">
                <h3 class="text-lg font-medium text-gray-900 mb-3">
                    <span>👥</span>
                    Clients to be {{ action }}ed
                </h3>
                <div class="space-y-2">
                    {% for data in client_data %}
                    <div class="bg-white p-3 rounded border flex justify-between items-center">
                        <div>
                            <div class="font-medium text-gray-900">{{ data.client.get_full_name }}</div>
                            <div class="text-sm text-gray-500">
                                {{ data.client.email }} • {{ data.client.phone_number }}
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-blue-600">
                                {{ data.dependencies.total }} records
                            </div>
                            <div class="text-xs text-gray-500">
                                {% if data.dependencies.loans %}{{ data.dependencies.loans }} loans{% endif %}
                                {% if data.dependencies.applications %}{{ data.dependencies.applications }} apps{% endif %}
                                {% if data.dependencies.documents %}{{ data.dependencies.documents }} docs{% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Warning Messages -->
            {% if action == 'delete' %}
            <div class="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
                <h3 class="text-lg font-medium text-red-800 mb-2">
                    <span>⚠️</span>
                    ⚠️ PERMANENT DELETION WARNING
                </h3>
                <ul class="text-sm text-red-700 list-disc list-inside space-y-1">
                    <li>This action will <strong>permanently delete</strong> all selected clients and their data</li>
                    <li>All related loans, applications, repayments, and documents will be removed</li>
                    <li>This operation <strong>cannot be undone</strong></li>
                    <li>The operation may take several minutes to complete</li>
                    <li>Consider using "Blacklist" instead for data preservation</li>
                </ul>
            </div>
            {% else %}
            <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4 mb-6">
                <h3 class="text-lg font-medium text-yellow-800 mb-2">
                    <i class="fas fa-ban text-yellow-600 mr-2"></i>
                    Blacklist Operation
                </h3>
                <ul class="text-sm text-yellow-700 list-disc list-inside space-y-1">
                    <li>Clients will be marked as <strong>blacklisted</strong> and deactivated</li>
                    <li>All client data will be <strong>preserved</strong> for audit purposes</li>
                    <li>Clients will not be able to access the system</li>
                    <li>This operation can be reversed if needed</li>
                </ul>
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="flex justify-center space-x-4">
                <a href="{% url 'users:client_list' %}" 
                   class="inline-flex justify-center py-3 px-6 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-gray-500">
                    <span>✕</span>
                    Cancel
                </a>
                
                <form method="post" class="inline">
                    {% csrf_token %}
                    {% for client_id in client_ids %}
                    <input type="hidden" name="client_ids" value="{{ client_id }}">
                    {% endfor %}
                    <input type="hidden" name="action" value="{{ action }}">
                    <input type="hidden" name="confirm" value="yes">
                    
                    <button type="submit" 
                            class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white 
                                   {% if action == 'delete' %}bg-red-600 hover:bg-red-700 focus:ring-red-500{% else %}bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500{% endif %} 
                                   focus:outline-none focus:ring-2 focus:ring-offset-2"
                            onclick="return confirm('Are you absolutely sure? This action {% if action == 'delete' %}cannot be undone{% else %}will blacklist all selected clients{% endif %}.')">
                        <i class="fas fa-{% if action == 'delete' %}trash-alt{% else %}ban{% endif %} mr-2"></i>
                        Confirm {{ action|title }}
                    </button>
                </form>
            </div>

            <!-- Progress Indicator (Hidden by default) -->
            <div id="progress-indicator" class="hidden mt-6 text-center">
                <div class="inline-flex items-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" 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>
                    Processing {{ action }}... Please wait.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.querySelector('form').addEventListener('submit', function() {
    document.getElementById('progress-indicator').classList.remove('hidden');
    document.querySelector('button[type="submit"]').disabled = true;
});
</script>
{% endblock %}