{% extends 'base.html' %}

{% block title %}Pending Clients - HAVEN GRAZURI ADVANCE{% endblock %}

{% block content %}
<style>
/* Client table fixes - ensure images display properly */
table img, 
.h-10.w-10 img,
td img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #e5e7eb !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Fix any image loading issues */
img[src=""], img:not([src]) {
    display: none !important;
}
</style>

<div class="content-wrapper">
    <div class="container-fluid px-4">

        <!-- Page header -->
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-2xl font-semibold text-gray-900">Pending Client Approvals</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Review and approve clients pending registration approval.
                </p>
            </div>
            <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none flex gap-2">
                <a href="{% url 'users:client_list' %}" class="inline-flex items-center rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700">
                    <span>←</span>Back to Clients
                </a>
                {% if total_count > 0 %}
                <button type="button" onclick="bulkApproveSelected()" class="inline-flex items-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700">
                    <i class="fas fa-check-double mr-2"></i>Approve Selected
                </button>
                {% endif %}
            </div>
        </div>

        {% if messages %}
        <div class="mt-4">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Pending clients count -->
        {% if total_count > 0 %}
        <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-md p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <span>⚠️</span>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700">
                        <strong>{{ total_count }}</strong> client{{ total_count|pluralize }} waiting for approval.
                    </p>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Search and Filters -->
        <div class="mt-8">
            <form method="get" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 lg:grid-cols-4">
                    <!-- Search -->
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                        <div class="mt-1 relative">
                            <input type="text" name="search" id="search" value="{{ search }}" 
                                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring-secondary sm:text-sm pl-10"
                                   placeholder="Name, email, phone, business...">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span>🔍</span>
                            </div>
                        </div>
                    </div>

                    <!-- Search Button -->
                    <div class="flex items-end">
                        <button type="submit" class="w-full px-4 py-2 bg-primary text-white font-medium rounded-md hover:bg-primary-dark focus:ring-2 focus:ring-primary focus:ring-offset-2">
                            <span>🔍</span>Search
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Client List -->
        {% if clients %}
        <form id="bulkApproveForm" method="post" action="{% url 'users:bulk_approve_clients' %}">
            {% csrf_token %}
            <div class="mt-8 flow-root">
                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                            <table class="min-w-full divide-y divide-gray-300">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                            <input type="checkbox" id="selectAll" onclick="toggleAll()" class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Client</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Contact Info</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Business</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Registration Date</th>
                                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200 bg-white">
                                    {% for client in clients %}
                                    <tr>
                                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                            <input type="checkbox" name="client_ids" value="{{ client.id }}" class="client-checkbox rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
                                            <div class="flex items-center">
                                                {% if client.profile_image %}
                                                <img src="{{ client.profile_image.url }}" alt="{{ client.get_full_name }}" class="h-10 w-10 rounded-full object-cover">
                                                {% else %}
                                                <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                                    <span class="text-gray-600 font-semibold text-sm">{{ client.get_initials }}</span>
                                                </div>
                                                {% endif %}
                                                <div class="ml-4">
                                                    <div class="font-medium text-gray-900">{{ client.get_full_name }}</div>
                                                    <div class="text-gray-500">{{ client.id_number|default:"No ID" }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                            <div>{{ client.email|default:"No email" }}</div>
                                            <div class="text-gray-400">{{ client.phone_number }}</div>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                            <div class="font-medium text-gray-900">{{ client.business_name|default:"N/A" }}</div>
                                            <div class="text-gray-500">{{ client.business_type|capfirst|default:"N/A" }}</div>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                            {{ client.date_joined|date:"M d, Y" }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm font-medium">
                                            <div class="flex items-center space-x-2">
                                                <a href="{% url 'users:client_detail' client.id %}" class="text-blue-600 hover:text-blue-900">
                                                    <i class="fas fa-eye"></i> View
                                                </a>
                                                <button onclick="showApproveModal('{{ client.id }}', '{{ client.get_full_name }}')" class="text-green-600 hover:text-green-900">
                                                    <span>✓</span> Approve
                                                </button>
                                                <button onclick="showRejectModal('{{ client.id }}', '{{ client.get_full_name }}')" class="text-red-600 hover:text-red-900">
                                                    <span>✕</span> Reject
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Pagination -->
        {% if clients.has_other_pages %}
        <div class="mt-8 flex items-center justify-between">
            <div class="flex flex-1 justify-between sm:hidden">
                {% if clients.has_previous %}
                <a href="?page={{ clients.previous_page_number }}{% if search %}&search={{ search }}{% endif %}" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
                {% endif %}
                {% if clients.has_next %}
                <a href="?page={{ clients.next_page_number }}{% if search %}&search={{ search }}{% endif %}" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
                {% endif %}
            </div>
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        Showing
                        <span class="font-medium">{{ clients.start_index }}</span>
                        to
                        <span class="font-medium">{{ clients.end_index }}</span>
                        of
                        <span class="font-medium">{{ total_count }}</span>
                        results
                    </p>
                </div>
                <div>
                    <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                        {% if clients.has_previous %}
                        <a href="?page={{ clients.previous_page_number }}{% if search %}&search={{ search }}{% endif %}" class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                            <span class="sr-only">Previous</span>
                            <span>‹</span>
                        </a>
                        {% endif %}
                        
                        {% for num in clients.paginator.page_range %}
                            {% if clients.number == num %}
                                <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">{{ num }}</span>
                            {% elif num > clients.number|add:'-3' and num < clients.number|add:'3' %}
                                <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}" class="relative inline-flex items-center px-4 py-2 text-sm text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">{{ num }}</a>
                            {% endif %}
                        {% endfor %}
                        
                        {% if clients.has_next %}
                        <a href="?page={{ clients.next_page_number }}{% if search %}&search={{ search }}{% endif %}" class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">
                            <span class="sr-only">Next</span>
                            <span>›</span>
                        </a>
                        {% endif %}
                    </nav>
                </div>
            </div>
        </div>
        {% endif %}

        {% else %}
        <div class="mt-8 bg-white shadow overflow-hidden sm:rounded-md">
            <div class="px-4 py-5 sm:p-6 text-center">
                <span>✓</span>
                <h3 class="text-lg font-medium text-gray-900">No Pending Clients</h3>
                <p class="mt-2 text-sm text-gray-500">
                    There are currently no clients waiting for approval.
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Approve Modal -->
<div id="approveModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="post" action="" id="approveForm">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="approveModalLabel">Approve Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to approve <strong id="approveClientName"></strong>?</p>
                    <div class="mt-3">
                        <label for="approval_notes" class="block text-sm font-medium text-gray-700">Approval Notes (Optional)</label>
                        <textarea name="approval_notes" id="approval_notes" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-secondary focus:ring-secondary sm:text-sm" placeholder="Add any notes about this approval..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary bg-green-600 hover:bg-green-700">Approve Client</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form method="post" action="" id="rejectForm">
            {% csrf_token %}
            <div class="modal-content">
                <div class="modal-header bg-red-50">
                    <h5 class="modal-title text-red-700" id="rejectModalLabel">Reject Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to reject <strong id="rejectClientName"></strong>?</p>
                    <div class="mt-3">
                        <label for="rejection_reason" class="block text-sm font-medium text-gray-700">Rejection Reason <span class="text-red-600">*</span></label>
                        <textarea name="rejection_reason" id="rejection_reason" rows="3" class="mt-1 block w-full rounded-md border-red-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm" placeholder="Please provide a reason for rejection..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger bg-red-600 hover:bg-red-700">Reject Client</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function toggleAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.client-checkbox');
    checkboxes.forEach(cb => cb.checked = selectAll.checked);
}

function showApproveModal(clientId, clientName) {
    document.getElementById('approveClientName').textContent = clientName;
    const form = document.getElementById('approveForm');
    form.action = "{% url 'users:approve_client' '00000000-0000-0000-0000-000000000000' %}".replace('00000000-0000-0000-0000-000000000000', clientId);
    
    // Use Bootstrap 5 native API instead of jQuery
    const modalElement = document.getElementById('approveModal');
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
}

function showRejectModal(clientId, clientName) {
    document.getElementById('rejectClientName').textContent = clientName;
    const form = document.getElementById('rejectForm');
    form.action = "{% url 'users:reject_client' '00000000-0000-0000-0000-000000000000' %}".replace('00000000-0000-0000-0000-000000000000', clientId);
    
    // Use Bootstrap 5 native API instead of jQuery
    const modalElement = document.getElementById('rejectModal');
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
}

function bulkApproveSelected() {
    const selected = document.querySelectorAll('.client-checkbox:checked');
    if (selected.length === 0) {
        alert('Please select at least one client to approve.');
        return;
    }
    
    if (confirm(`Are you sure you want to approve ${selected.length} client(s)?`)) {
        document.getElementById('bulkApproveForm').submit();
    }
}
</script>

{% endblock %}