Create templates/seller.html

templates/seller.html

@@ -0,0 +1,92 @@
+{% 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 %}