PetConnectBackend/meeting-confirmation.html at main · Gulsher17/PetConnectBackend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Confirm Meeting - Pet Connect</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
  <div class="max-w-md w-full bg-white rounded-xl shadow-lg p-6">
    <div class="text-center mb-6">
      <h1 class="text-2xl font-bold text-indigo-700">Meeting Confirmation</h1>
      <p class="text-gray-600 mt-2">Please confirm your scheduled meeting</p>
    </div>

    <div id="meetingDetails" class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
      <!-- Meeting details will be loaded here -->
    </div>

    <form id="confirmMeetingForm" class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">
          Additional Notes (Optional)
        </label>
        <textarea
          id="meetingNotes"
          rows="3"
          placeholder="Any questions or special requests for the meeting..."
          class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
        ></textarea>
      </div>

      <div class="flex space-x-3">
        <button
          type="button"
          id="confirmBtn"
          class="flex-1 bg-green-600 text-white py-3 rounded-lg font-medium hover:bg-green-700 transition-colors"
        >
          ✅ Confirm Meeting
        </button>
        <button
          type="button"
          id="rescheduleBtn"
          class="flex-1 bg-yellow-500 text-white py-3 rounded-lg font-medium hover:bg-yellow-600 transition-colors"
        >
          📅 Request Reschedule
        </button>
      </div>
    </form>

    <div id="resultMessage" class="mt-4 hidden"></div>
  </div>

  <script>
    const token = localStorage.getItem('token');
    const urlParams = new URLSearchParams(window.location.search);
    const requestId = urlParams.get('requestId');

    if (!token || !requestId) {
      window.location.href = 'auth.html';
    }

    // Load meeting details
// Load meeting details - FIXED VERSION
async function loadMeetingDetails() {
  try {
    // ✅ FIX: Use the correct endpoint that exists
    const response = await fetch(`/api/adoptions/my-requests`, {
      headers: { 'x-auth-token': token }
    });

    if (!response.ok) throw new Error('Failed to load meeting details');

    const requests = await response.json();

    // Find the specific request by ID
    const request = requests.find(req => req._id === requestId);

    if (!request) {
      throw new Error('Meeting request not found');
    }

    const meeting = request.meeting;
    const pet = request.pet;

    document.getElementById('meetingDetails').innerHTML = `
      <div class="flex items-start space-x-3">
        <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
          <span class="text-indigo-600 text-xl">🐾</span>
        </div>
        <div class="flex-1">
          <h3 class="font-semibold text-gray-800">Meeting with ${pet.name}</h3>
          <p class="text-sm text-gray-600 mt-1">
            <strong>Date & Time:</strong><br>
            ${new Date(meeting.date).toLocaleString()}
          </p>
          <p class="text-sm text-gray-600 mt-1">
            <strong>Status:</strong>
            <span class="ml-1 ${meeting.confirmed ? 'text-green-600' : 'text-yellow-600'}">
              ${meeting.confirmed ? 'Confirmed' : 'Pending Your Confirmation'}
            </span>
          </p>
          ${meeting.confirmed && meeting.confirmedAt ? `
            <p class="text-sm text-gray-600 mt-1">
              <strong>Confirmed on:</strong> ${new Date(meeting.confirmedAt).toLocaleString()}
            </p>
          ` : ''}
        </div>
      </div>
    `;

    if (meeting.confirmed) {
      document.getElementById('confirmBtn').disabled = true;
      document.getElementById('confirmBtn').textContent = 'Already Confirmed';
      document.getElementById('confirmBtn').className = 'flex-1 bg-gray-400 text-white py-3 rounded-lg font-medium cursor-not-allowed';
    }

  } catch (error) {
    console.error('Error loading meeting:', error);
    document.getElementById('meetingDetails').innerHTML = `
      <div class="text-red-600 text-center">
        Failed to load meeting details: ${error.message}
      </div>
    `;
  }
}
    // Confirm meeting
    document.getElementById('confirmBtn').addEventListener('click', async () => {
      const notes = document.getElementById('meetingNotes').value;

      try {
        const response = await fetch(`/api/adoptions/${requestId}/confirm-meeting`, {
          method: 'PATCH',
          headers: {
            'Content-Type': 'application/json',
            'x-auth-token': token
          },
          body: JSON.stringify({ notes })
        });

        const result = await response.json();

        const messageDiv = document.getElementById('resultMessage');
        if (response.ok) {
          messageDiv.className = 'mt-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded-lg';
          messageDiv.innerHTML = '✅ Meeting confirmed successfully! The shelter has been notified.';
          messageDiv.classList.remove('hidden');

          // Update UI
          document.getElementById('confirmBtn').disabled = true;
          document.getElementById('confirmBtn').textContent = 'Confirmed';
          document.getElementById('confirmBtn').className = 'flex-1 bg-gray-400 text-white py-3 rounded-lg font-medium cursor-not-allowed';

          // Reload meeting details
          setTimeout(loadMeetingDetails, 1000);
        } else {
          messageDiv.className = 'mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg';
          messageDiv.innerHTML = `❌ ${result.msg || 'Failed to confirm meeting'}`;
          messageDiv.classList.remove('hidden');
        }
      } catch (error) {
        console.error('Error confirming meeting:', error);
        const messageDiv = document.getElementById('resultMessage');
        messageDiv.className = 'mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg';
        messageDiv.innerHTML = '❌ Network error. Please try again.';
        messageDiv.classList.remove('hidden');
      }
    });

    // Reschedule request
    document.getElementById('rescheduleBtn').addEventListener('click', () => {
      alert('Reschedule feature coming soon! Please contact the shelter directly to reschedule.');
    });

    // Load meeting details on page load
    document.addEventListener('DOMContentLoaded', loadMeetingDetails);
  </script>
</body>
</html>