{% extends 'base.html' %}

{% block title %}Rejected 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">Rejected Clients</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Review clients that were rejected during the approval process.
                </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>
            </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 %}

        <!-- Rejected clients count -->
        {% if total_count > 0 %}
        <div class="mt-4 bg-red-50 border border-red-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-red-700">
                        <strong>{{ total_count }}</strong> client{{ total_count|pluralize }} rejected.
                    </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 %}
        <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="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">Rejection Info</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 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="px-3 py-4 text-sm text-gray-500">
                                        {% if client.rejection_reason %}
                                        <div class="text-red-600 font-medium">Reason:</div>
                                        <div class="text-gray-600 text-xs mt-1">{{ client.rejection_reason|truncatewords:15 }}</div>
                                        {% endif %}
                                        {% if client.rejected_at %}
                                        <div class="text-gray-400 text-xs mt-1">Rejected: {{ client.rejected_at|date:"M d, Y" }}</div>
                                        {% endif %}
                                    </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>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 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 Rejected Clients</h3>
                <p class="mt-2 text-sm text-gray-500">
                    No clients have been rejected yet.
                </p>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}