templates/seller.html

{% extends "base.html" %}

{% block content %}
<div class="bg-white rounded-lg shadow-lg p-8">
    <h2 class="text-3xl font-bold text-center mb-8">Appointments for {{ car.name }}</h2>
    
    {% if appointments %}
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white">
            <thead>
                <tr class="bg-gray-200">
                    <th class="py-2 px-4 border">Buyer Name</th>
                    <th class="py-2 px-4 border">Email</th>
                    <th class="py-2 px-4 border">Phone</th>
                    <th class="py-2 px-4 border">Preferred Date</th>
                    <th class="py-2 px-4 border">Status</th>
                    <th class="py-2 px-4 border">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for appointment in appointments %}
                <tr>
                    <td class="py-2 px-4 border">{{ appointment.buyer_name }}</td>
                    <td class="py-2 px-4 border">{{ appointment.buyer_email }}</td>
                    <td class="py-2 px-4 border">{{ appointment.buyer_phone }}</td>
                    <td class="py-2 px-4 border">{{ appointment.preferred_date }}</td>
                    <td class="py-2 px-4 border">
                        <span class="px-2 py-1 rounded text-sm 
                                    {% if appointment.status == 'approved' %}bg-green-100 text-green-800
                                    {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                            {{ appointment.status|title }}
                        </span>
                    </td>
                    <td class="py-2 px-4 border">
                        {% if appointment.status == 'pending' %}
                        <button onclick="openModal('{{ appointment._id }}')" 
                                class="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700">
                            Approve
                        </button>
                        {% else %}
                        <span class="text-green-600">Approved</span>
                        {% endif %}
                    </td>
                </tr>
                
                <!-- Modal for each appointment -->
                <div id="modal-{{ appointment._id }}" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
                    <div class="bg-white p-6 rounded-lg w-96">
                        <h3 class="text-xl font-bold mb-4">Schedule Meeting</h3>
                        <form method="POST" action="{{ url_for('approve_appointment', appointment_id=appointment._id) }}">
                            <div class="mb-4">
                                <label class="block text-gray-700 mb-2">Meeting Date</label>
                                <input type="date" name="meeting_date" required class="w-full px-3 py-2 border rounded">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 mb-2">Meeting Time</label>
                                <input type="time" name="meeting_time" required class="w-full px-3 py-2 border rounded">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 mb-2">Meeting Place</label>
                                <input type="text" name="meeting_place" required class="w-full px-3 py-2 border rounded" 
                                       placeholder="Enter meeting location">
                            </div>
                            <div class="flex justify-end space-x-2">
                                <button type="button" onclick="closeModal('{{ appointment._id }}')" 
                                        class="px-4 py-2 border rounded">Cancel</button>
                                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Confirm</button>
                            </div>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-gray-600 text-center">No appointments for this car yet.</p>
    {% endif %}
</div>

<script>
function openModal(appointmentId) {
    document.getElementById('modal-' + appointmentId).classList.remove('hidden');
    document.getElementById('modal-' + appointmentId).classList.add('flex');
}

function closeModal(appointmentId) {
    document.getElementById('modal-' + appointmentId).classList.add('hidden');
    document.getElementById('modal-' + appointmentId).classList.remove('flex');
}
</script>
{% endblock %}