{% extends 'base.html' %}
{% load static %}
{% block title %}Appointment Leads - Admin{% endblock %}

{% block content %}
<div class="container mx-auto mt-10 px-4 max-w-7xl">
    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">

        <!-- Header -->
        <div class="px-8 py-6 border-b border-gray-200 bg-gradient-to-r from-indigo-50 to-purple-50">
            <h2 class="text-3xl font-bold text-gray-800">Appointment Requests</h2>
            <p class="text-gray-600 mt-2">Manage appointments: update status, reschedule, and track progress</p>
        </div>

        {% if appointments %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">

                <!-- Table Head -->
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ticket ID</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expert</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled For</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>

                <tbody class="bg-white divide-y divide-gray-200">
                    {% for apt in appointments %}
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ forloop.counter }}</td>

                        <td class="px-6 py-4 whitespace-nowrap font-medium text-indigo-600">
                            APP-{{ apt.pk|stringformat:"06d" }}
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">
                            {{ apt.full_name }}
                        </td>

                        <td class="px-6 py-4 text-sm text-gray-600">
                            {{ apt.email }}<br>
                            <small class="text-gray-500">{{ apt.phone }}</small>
                        </td>

                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {{ apt.get_meeting_with_display }}
                        </td>

                        <td class="px-6 py-4 text-sm">
                            {{ apt.appointment_datetime|date:"d M Y" }} at {{ apt.appointment_datetime|time:"h:i A" }}
                        </td>

                        <!-- Status Badge -->
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-xs font-semibold rounded-full
                                {% if apt.status == 'pending' %}bg-yellow-100 text-yellow-800
                                {% elif apt.status == 'contacted' %}bg-blue-100 text-blue-800
                                {% elif apt.status == 'in_process' %}bg-purple-100 text-purple-800
                                {% elif apt.status == 'rescheduled' %}bg-indigo-100 text-indigo-800
                                {% elif apt.status == 'completed' %}bg-green-100 text-green-800
                                {% elif apt.status == 'cancelled' %}bg-red-100 text-red-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ apt.get_status_display }}
                            </span>
                        </td>

                        <!-- Actions -->
                        <td class="px-6 py-4 text-sm">
                            <button onclick="openModal('modal-{{ apt.id }}')"
                                    class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-4 py-2 rounded-lg text-xs font-medium hover:shadow-lg transition">
                                Manage
                            </button>

                            <!-- MODAL -->
                            <div id="modal-{{ apt.id }}" class="fixed inset-0 bg-black bg-opacity-60 hidden flex items-center justify-center z-50">
                                <div class="bg-white w-full max-w-lg rounded-2xl shadow-2xl p-8 relative animate-fadeIn">

                                    <button onclick="closeModal('modal-{{ apt.id }}')"
                                            class="absolute top-4 right-6 text-gray-400 hover:text-gray-600 text-3xl">&times;</button>

                                    <h3 class="text-2xl font-bold mb-6 text-gray-800">
                                        Manage Appointment – {{ apt.full_name }}
                                    </h3>
                                    <p class="text-sm text-gray-500 mb-6">Ticket: APP-{{ apt.pk|stringformat:"06d" }}</p>

                                    <!-- Update Status -->
                                    <form method="post" class="mb-8">
                                        {% csrf_token %}
                                        <input type="hidden" name="appointment_id" value="{{ apt.id }}">
                                        <input type="hidden" name="action" value="update_status">

                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Update Status</label>
                                        <select name="status" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                            {% for value, label in status_choices %}
                                            <option value="{{ value }}" {% if apt.status == value %}selected{% endif %}>
                                                {{ label }}
                                            </option>
                                            {% endfor %}
                                        </select>

                                        <button type="submit" class="mt-4 w-full bg-indigo-600 text-white py-3 rounded-lg font-medium hover:bg-indigo-700 transition">
                                            Update Status
                                        </button>
                                    </form>

                                    <!-- Reschedule -->
                                    <form method="post">
                                        {% csrf_token %}
                                        <input type="hidden" name="appointment_id" value="{{ apt.id }}">
                                        <input type="hidden" name="action" value="reschedule">

                                        <label class="block text-sm font-semibold text-gray-700 mb-2">Reschedule Appointment</label>
                                        <div class="grid grid-cols-2 gap-4 mb-4">
                                            <input type="date" name="new_date"
                                                   value="{{ apt.appointment_datetime|date:'Y-m-d' }}"
                                                   class="border border-gray-300 rounded-lg px-4 py-3" required>
                                            <input type="time" name="new_time"
                                                   value="{{ apt.appointment_datetime|time:'H:i' }}"
                                                   class="border border-gray-300 rounded-lg px-4 py-3" required>
                                        </div>

                                        <button type="submit" class="w-full bg-green-600 text-white py-3 rounded-lg font-medium hover:bg-green-700 transition">
                                            Reschedule Appointment
                                        </button>
                                    </form>

                                    <!-- Notes (Read-only) -->
                                    {% if apt.notes %}
                                    <div class="mt-8 p-4 bg-gray-50 rounded-lg">
                                        <p class="text-sm font-medium text-gray-700">User Notes:</p>
                                        <p class="text-sm text-gray-600 mt-1">{{ apt.notes }}</p>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% else %}
        <div class="p-16 text-center">
            <p class="text-xl text-gray-500">No appointment requests yet.</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Modal Scripts -->
<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.getElementById(id).classList.add('flex');
}
function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.getElementById(id).classList.remove('flex');
}

// Close modal when clicking outside
window.addEventListener('click', function(e) {
    document.querySelectorAll('[id^="modal-"]').forEach(modal => {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    });
});
</script>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
</style>

{% endblock %}