Fork of Single response needed

Missing Files for Carpooling Application

I'll now generate all the missing files for your carpooling application. I'll focus on creating the view pages that are still needed.

View Pages

views/pages/edit-ride.ejs

<%- include('../partials/header') %>

<div class="edit-ride-container">
  <div class="edit-ride-header">
    <h1 class="edit-ride-title">Edit Your Ride</h1>
    <p class="edit-ride-subtitle">Update your ride details and preferences</p>
  </div>

  <div class="edit-ride-card">
    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <% if (locals.success) { %>
      <div class="alert alert-success">
        <%= success %>
      </div>
    <% } %>

    <form action="/rides/<%= ride._id %>/edit" method="POST" class="edit-ride-form">
      <div class="form-section">
        <h3 class="section-title">Route Information</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="departureCity" class="form-label">Departure City</label>
            <input type="text" id="departureCity" name="departureCity" class="form-control" value="<%= ride.departureCity %>" required>
          </div>

          <div class="form-group">
            <label for="departureAddress" class="form-label">Departure Address</label>
            <input type="text" id="departureAddress" name="departureAddress" class="form-control" value="<%= ride.departureAddress %>" required>
          </div>

          <div class="form-group">
            <label for="destinationCity" class="form-label">Destination City</label>
            <input type="text" id="destinationCity" name="destinationCity" class="form-control" value="<%= ride.destinationCity %>" required>
          </div>

          <div class="form-group">
            <label for="destinationAddress" class="form-label">Destination Address</label>
            <input type="text" id="destinationAddress" name="destinationAddress" class="form-control" value="<%= ride.destinationAddress %>" required>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Stops Along the Way (Optional)</label>
          <div id="stops-container">
            <% if (ride.stops && ride.stops.length > 0) { %>
              <% ride.stops.forEach((stop, index) => { %>
                <div class="stop-item">
                  <input type="text" name="stops[]" class="form-control" value="<%= stop %>" placeholder="Enter city name">
                  <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
                </div>
              <% }) %>
            <% } else { %>
              <div class="stop-item">
                <input type="text" name="stops[]" class="form-control" placeholder="Enter city name">
                <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
              </div>
            <% } %>
          </div>
          <button type="button" id="add-stop-btn" class="btn btn-outline">+ Add Another Stop</button>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Schedule</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="departureDate" class="form-label">Departure Date</label>
            <input type="date" id="departureDate" name="departureDate" class="form-control" value="<%= new Date(ride.departureDate).toISOString().split('T')[0] %>" required>
          </div>

          <div class="form-group">
            <label for="departureTime" class="form-label">Departure Time</label>
            <input type="time" id="departureTime" name="departureTime" class="form-control" value="<%= new Date(ride.departureDate).toTimeString().slice(0, 5) %>" required>
          </div>

          <div class="form-group">
            <label for="estimatedArrival" class="form-label">Estimated Arrival</label>
            <input type="time" id="estimatedArrival" name="estimatedArrival" class="form-control" value="<%= new Date(ride.estimatedArrival).toTimeString().slice(0, 5) %>" required>
          </div>

          <div class="form-group">
            <label for="isRecurring" class="form-label">Is this a recurring ride?</label>
            <select id="isRecurring" name="isRecurring" class="form-control">
              <option value="false" <%= !ride.isRecurring ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.isRecurring ? 'selected' : '' %>>Yes</option>
            </select>
          </div>
        </div>

        <div id="recurring-options" class="<%= !ride.isRecurring ? 'hidden' : '' %>">
          <div class="form-group">
            <label class="form-label">Recurring Days</label>
            <div class="checkbox-group">
              <% const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; %>
              <% days.forEach(day => { %>
                <label class="checkbox-label">
                  <input type="checkbox" name="recurringDays[]" value="<%= day.toLowerCase() %>" 
                    <%= ride.recurringDays && ride.recurringDays.includes(day.toLowerCase()) ? 'checked' : '' %>>
                  <%= day %>
                </label>
              <% }) %>
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Ride Details</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="availableSeats" class="form-label">Available Seats</label>
            <input type="number" id="availableSeats" name="availableSeats" class="form-control" min="1" max="8" value="<%= ride.availableSeats %>" required>
          </div>

          <div class="form-group">
            <label for="pricePerSeat" class="form-label">Price Per Seat ($)</label>
            <input type="number" id="pricePerSeat" name="pricePerSeat" class="form-control" min="0" step="0.01" value="<%= ride.pricePerSeat %>" required>
          </div>

          <div class="form-group">
            <label for="carModel" class="form-label">Car Model</label>
            <input type="text" id="carModel" name="carModel" class="form-control" value="<%= ride.carModel %>" required>
          </div>

          <div class="form-group">
            <label for="carColor" class="form-label">Car Color</label>
            <input type="text" id="carColor" name="carColor" class="form-control" value="<%= ride.carColor %>" required>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Preferences</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="allowSmoking" class="form-label">Allow Smoking?</label>
            <select id="allowSmoking" name="allowSmoking" class="form-control">
              <option value="false" <%= !ride.preferences.allowSmoking ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.preferences.allowSmoking ? 'selected' : '' %>>Yes</option>
            </select>
          </div>

          <div class="form-group">
            <label for="allowPets" class="form-label">Allow Pets?</label>
            <select id="allowPets" name="allowPets" class="form-control">
              <option value="false" <%= !ride.preferences.allowPets ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.preferences.allowPets ? 'selected' : '' %>>Yes</option>
            </select>
          </div>

          <div class="form-group">
            <label for="allowMusic" class="form-label">Music Preference</label>
            <select id="allowMusic" name="allowMusic" class="form-control">
              <option value="none" <%= ride.preferences.music === 'none' ? 'selected' : '' %>>No music</option>
              <option value="soft" <%= ride.preferences.music === 'soft' ? 'selected' : '' %>>Soft music</option>
              <option value="any" <%= ride.preferences.music === 'any' ? 'selected' : '' %>>Any music</option>
            </select>
          </div>

          <div class="form-group">
            <label for="luggageSize" class="form-label">Maximum Luggage Size</label>
            <select id="luggageSize" name="luggageSize" class="form-control">
              <option value="small" <%= ride.preferences.luggageSize === 'small' ? 'selected' : '' %>>Small (backpack)</option>
              <option value="medium" <%= ride.preferences.luggageSize === 'medium' ? 'selected' : '' %>>Medium (carry-on)</option>
              <option value="large" <%= ride.preferences.luggageSize === 'large' ? 'selected' : '' %>>Large (suitcase)</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Additional Information</h3>
        
        <div class="form-group">
          <label for="description" class="form-label">Description</label>
          <textarea id="description" name="description" class="form-control" rows="4"><%= ride.description %></textarea>
        </div>
      </div>

      <div class="form-actions">
        <a href="/rides/<%= ride._id %>" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Update Ride</button>
      </div>
    </form>
  </div>
</div>

<script>
  // Toggle recurring options
  document.getElementById('isRecurring').addEventListener('change', function() {
    const recurringOptions = document.getElementById('recurring-options');
    if (this.value === 'true') {
      recurringOptions.classList.remove('hidden');
    } else {
      recurringOptions.classList.add('hidden');
    }
  });

  // Add stop functionality
  document.getElementById('add-stop-btn').addEventListener('click', function() {
    const stopsContainer = document.getElementById('stops-container');
    const stopItem = document.createElement('div');
    stopItem.className = 'stop-item';
    stopItem.innerHTML = `
      <input type="text" name="stops[]" class="form-control" placeholder="Enter city name">
      <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
    `;
    stopsContainer.appendChild(stopItem);
  });

  // Remove stop functionality
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-stop-btn') || e.target.parentElement.classList.contains('remove-stop-btn')) {
      const button = e.target.classList.contains('remove-stop-btn') ? e.target : e.target.parentElement;
      const stopItem = button.parentElement;
      if (document.querySelectorAll('.stop-item').length > 1) {
        stopItem.remove();
      } else {
        stopItem.querySelector('input').value = '';
      }
    }
  });
</script>

<%- include('../partials/footer') %>

views/pages/edit-profile.ejs

<%- include('../partials/header') %>

<div class="edit-profile-container">
  <div class="edit-profile-header">
    <h1 class="edit-profile-title">Edit Your Profile</h1>
    <p class="edit-profile-subtitle">Update your personal information and preferences</p>
  </div>

  <div class="edit-profile-content">
    <div class="profile-sidebar">
      <div class="profile-avatar-section">
        <div class="profile-avatar">
          <% if (user.profileImage) { %>
            <img src="<%= user.profileImage %>" alt="<%= user.firstName %> <%= user.lastName %>" class="avatar-img">
          <% } else { %>
            <div class="avatar-placeholder">
              <%= user.firstName.charAt(0) %><%= user.lastName.charAt(0) %>
            </div>
          <% } %>
        </div>
        <form id="avatar-form" action="/users/profile/avatar" method="POST" enctype="multipart/form-data">
          <label for="avatar-upload" class="avatar-upload-btn">
            <i class="fas fa-camera"></i> Change Photo
          </label>
          <input type="file" id="avatar-upload" name="profileImage" accept="image/*" style="display: none;">
        </form>
      </div>

      <div class="profile-nav">
        <a href="#personal-info" class="profile-nav-item active">
          <i class="fas fa-user"></i> Personal Information
        </a>
        <a href="#contact-info" class="profile-nav-item">
          <i class="fas fa-envelope"></i> Contact Information
        </a>
        <a href="#preferences" class="profile-nav-item">
          <i class="fas fa-sliders-h"></i> Preferences
        </a>
        <a href="#verification" class="profile-nav-item">
          <i class="fas fa-check-circle"></i> Verification
        </a>
        <a href="#security" class="profile-nav-item">
          <i class="fas fa-lock"></i> Security
        </a>
        <a href="#emergency-contacts" class="profile-nav-item">
          <i class="fas fa-phone-alt"></i> Emergency Contacts
        </a>
      </div>
    </div>

    <div class="profile-main">
      <% if (locals.error) { %>
        <div class="alert alert-danger">
          <%= error %>
        </div>
      <% } %>

      <% if (locals.success) { %>
        <div class="alert alert-success">
          <%= success %>
        </div>
      <% } %>

      <form action="/users/profile/edit" method="POST" class="edit-profile-form">
        <div id="personal-info" class="form-section active">
          <h2 class="section-title">Personal Information</h2>
          
          <div class="form-grid">
            <div class="form-group">
              <label for="firstName" class="form-label">First Name</label>
              <input type="text" id="firstName" name="firstName" class="form-control" value="<%= user.firstName %>" required>
            </div>

            <div class="form-group">
              <label for="lastName" class="form-label">Last Name</label>
              <input type="text" id="lastName" name="lastName" class="form-control" value="<%= user.lastName %>" required>
            </div>

            <div class="form-group">
              <label for="dateOfBirth" class="form-label">Date of Birth</label>
              <input type="date" id="dateOfBirth" name="dateOfBirth" class="form-control" value="<%= user.dateOfBirth ? new Date(user.dateOfBirth).toISOString().split('T')[0] : '' %>" required>
            </div>

            <div class="form-group">
              <label for="gender" class="form-label">Gender</label>
              <select id="gender" name="gender" class="form-control">
                <option value="male" <%= user.gender === 'male' ? 'selected' : '' %>>Male</option>
                <option value="female" <%= user.gender === 'female' ? 'selected' : '' %>>Female</option>
                <option value="other" <%= user.gender === 'other' ? 'selected' : '' %>>Other</option>
                <option value="prefer-not-to-say" <%= user.gender === 'prefer-not-to-say' ? 'selected' : '' %>>Prefer not to say</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="bio" class="form-label">Bio</label>
            <textarea id="bio" name="bio" class="form-control" rows="4"><%= user.bio || '' %></textarea>
            <div class="form-hint">Tell other users about yourself (max 500 characters)</div>
          </div>
        </div>

        <div id="contact-info" class="form-section">
          <h2 class="section-title">Contact Information</h2>
          
          <div class="form-grid">
            <div class="form-group">
              <label for="email" class="form-label">Email Address</label>
              <input type="email" id="email" name="email" class="form-control" value="<%= user.email %>" disabled>
              <div class="form-hint">Email cannot be changed. Contact support if needed.</div>
            </div>

            <div class="form-group">
              <label for="phone" class="form-label">Phone Number</label>
              <input type="tel" id="phone" name="phone" class="form-control" value="<%= user.phone || '' %>">
            </div>

            <div class="form-group">
              <label for="city" class="form-label">City</label>
              <input type="text" id="city" name="city" class="form-control" value="<%= user.city || '' %>">
            </div>

            <div class="form-group">
              <label for="country" class="form-label">Country</label>
              <input type="text" id="country" name="country" class="form-control" value="<%= user.country || '' %>">
            </div>
          </div>
        </div>

        <div id="preferences" class="form-section">
          <h2 class="section-title">Preferences</h2>
          
          <div class="form-group">
            <label class="form-label">Communication Preferences</label>
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input type="checkbox" name="emailNotifications" <%= user.preferences && user.preferences.emailNotifications ? 'checked' : '' %>>
                Email Notifications
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="smsNotifications" <%= user.preferences && user.preferences.smsNotifications ? 'checked' : '' %>>
                SMS Notifications
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="pushNotifications" <%= user.preferences && user.preferences.pushNotifications ? 'checked' : '' %>>
                Push Notifications
              </label>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Ride Preferences</label>
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input type="checkbox" name="smokingAllowed" <%= user.preferences && user.preferences.smokingAllowed ? 'checked' : '' %>>
                I'm okay with smoking
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="petsAllowed" <%= user.preferences && user.preferences.petsAllowed ? 'checked' : '' %>>
                I'm okay with pets
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="musicAllowed" <%= user.preferences && user.preferences.musicAllowed ? 'checked' : '' %>>
                I enjoy music during rides
              </label>
            </div>
          </div>

          <div class="form-group">
            <label for="language" class="form-label">Preferred Language</label>
            <select id="language" name="language" class="form-control">
              <option value="english" <%= user.preferences && user.preferences.language === 'english' ? 'selected' : '' %>>English</option>
              <option value="spanish" <%= user.preferences && user.preferences.language === 'spanish' ? 'selected' : '' %>>Spanish</option>
              <option value="french" <%= user.preferences && user.preferences.language === 'french' ? 'selected' : '' %>>French</option>
              <option value="german" <%= user.preferences && user.preferences.language === 'german' ? 'selected' : '' %>>German</option>
              <option value="chinese" <%= user.preferences && user.preferences.language === 'chinese' ? 'selected' : '' %>>Chinese</option>
            </select>
          </div>
        </div>

        <div id="verification" class="form-section">
          <h2 class="section-title">Verification</h2>
          
          <div class="verification-status">
            <div class="status-item <%= user.verifications && user.verifications.email ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.email ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Email Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.email) { %>
                    Your email has been verified.
                  <% } else { %>
                    Your email is not verified.
                    <a href="/users/verify/email" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.phone ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.phone ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Phone Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.phone) { %>
                    Your phone number has been verified.
                  <% } else { %>
                    Your phone number is not verified.
                    <a href="/users/verify/phone" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.id ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.id ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">ID Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.id) { %>
                    Your ID has been verified.
                  <% } else if (user.verifications && user.verifications.idPending) { %>
                    Your ID verification is pending review.
                  <% } else { %>
                    Your ID is not verified.
                    <a href="/users/verify/id" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.drivingLicense ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.drivingLicense ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Driving License Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.drivingLicense) { %>
                    Your driving license has been verified.
                  <% } else if (user.verifications && user.verifications.drivingLicensePending) { %>
                    Your driving license verification is pending review.
                  <% } else { %>
                    Your driving license is not verified.
                    <a href="/users/verify/driving-license" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div id="security" class="form-section">
          <h2 class="section-title">Security</h2>
          
          <div class="form-group">
            <label for="currentPassword" class="form-label">Current Password</label>
            <input type="password" id="currentPassword" name="currentPassword" class="form-control">
            <div class="form-hint">Enter your current password to change it</div>
          </div>

          <div class="form-group">
            <label for="newPassword" class="form-label">New Password</label>
            <input type="password" id="newPassword" name="newPassword" class="form-control">
            <div class="form-hint">Leave blank if you don't want to change your password</div>
          </div>

          <div class="form-group">
            <label for="confirmPassword" class="form-label">Confirm New Password</label>
            <input type="password" id="confirmPassword" name="confirmPassword" class="form-control">
          </div>

          <div class="form-group">
            <label class="form-label">Two-Factor Authentication</label>
            <div class="toggle-switch">
              <input type="checkbox" id="twoFactorAuth" name="twoFactorAuth" class="toggle-input" <%= user.security && user.security.twoFactorEnabled ? 'checked' : '' %>>
              <label for="twoFactorAuth" class="toggle-label"></label>
              <span class="toggle-text"><%= user.security && user.security.twoFactorEnabled ? 'Enabled' : 'Disabled' %></span>
            </div>
            <div class="form-hint">Enable two-factor authentication for added security</div>
          </div>
        </div>

        <div id="emergency-contacts" class="form-section">
          <h2 class="section-title">Emergency Contacts</h2>
          
          <div id="emergency-contacts-container">
            <% if (user.emergencyContacts && user.emergencyContacts.length > 0) { %>
              <% user.emergencyContacts.forEach((contact, index) => { %>
                <div class="emergency-contact-item">
                  <div class="form-grid">
                    <div class="form-group">
                      <label class="form-label">Name</label>
                      <input type="text" name="emergencyContactName[]" class="form-control" value="<%= contact.name %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">Relationship</label>
                      <input type="text" name="emergencyContactRelationship[]" class="form-control" value="<%= contact.relationship %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">Phone</label>
                      <input type="tel" name="emergencyContactPhone[]" class="form-control" value="<%= contact.phone %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">&nbsp;</label>
                      <button type="button" class="remove-contact-btn">Remove</button>
                    </div>
                  </div>
                </div>
              <% }) %>
            <% } else { %>
              <div class="emergency-contact-item">
                <div class="form-grid">
                  <div class="form-group">
                    <label class="form-label">Name</label>
                    <input type="text" name="emergencyContactName[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">Relationship</label>
                    <input type="text" name="emergencyContactRelationship[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">Phone</label>
                    <input type="tel" name="emergencyContactPhone[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="remove-contact-btn">Remove</button>
                  </div>
                </div>
              </div>
            <% } %>
          </div>

          <button type="button" id="add-contact-btn" class="btn btn-outline">+ Add Emergency Contact</button>
        </div>

        <div class="form-actions">
          <a href="/users/profile" class="btn btn-secondary">Cancel</a>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // Navigation
  document.querySelectorAll('.profile-nav-item').forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Update active nav item
      document.querySelectorAll('.profile-nav-item').forEach(navItem => {
        navItem.classList.remove('active');
      });
      this.classList.add('active');
      
      // Show corresponding section
      const targetId = this.getAttribute('href').substring(1);
      document.querySelectorAll('.form-section').forEach(section => {
        section.classList.remove('active');
      });
      document.getElementById(targetId).classList.add('active');
    });
  });

  // Profile image upload
  document.getElementById('avatar-upload').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      document.getElementById('avatar-form').submit();
    }
  });

  // Add emergency contact
  document.getElementById('add-contact-btn').addEventListener('click', function() {
    const container = document.getElementById('emergency-contacts-container');
    const newContact = document.createElement('div');
    newContact.className = 'emergency-contact-item';
    newContact.innerHTML = `
      <div class="form-grid">
        <div class="form-group">
          <label class="form-label">Name</label>
          <input type="text" name="emergencyContactName[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">Relationship</label>
          <input type="text" name="emergencyContactRelationship[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">Phone</label>
          <input type="tel" name="emergencyContactPhone[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">&nbsp;</label>
          <button type="button" class="remove-contact-btn">Remove</button>
        </div>
      </div>
    `;
    container.appendChild(newContact);
  });

  // Remove emergency contact
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-contact-btn')) {
      const contactItem = e.target.closest('.emergency-contact-item');
      if (document.querySelectorAll('.emergency-contact-item').length > 1) {
        contactItem.remove();
      }
    }
  });

  // Toggle two-factor authentication text
  document.getElementById('twoFactorAuth').addEventListener('change', function() {
    const toggleText = this.nextElementSibling.nextElementSibling;
    toggleText.textContent = this.checked ? 'Enabled' : 'Disabled';
  });
</script>

<%- include('../partials/footer') %>

views/pages/pending-verification.ejs

<%- include('../partials/header') %>

<div class="verification-container">
  <div class="verification-header">
    <h1 class="verification-title">Account Verification</h1>
    <p class="verification-subtitle">Complete the verification process to unlock all features of our platform</p>
  </div>

  <div class="verification-status">
    <% if (user.verifications && user.verifications.idPending) { %>
      <div class="status-icon pending">
        <i class="fas fa-clock"></i>
      </div>
      <h2 class="status-title">Verification In Progress</h2>
      <p class="status-message">
        We're currently reviewing your submitted documents. This process typically takes 24-48 hours. 
        We'll notify you by email once the verification is complete.
      </p>
      <a href="/users/dashboard" class="status-action">Go to Dashboard</a>
    <% } else if (user.verifications && user.verifications.idRejected) { %>
      <div class="status-icon rejected">
        <i class="fas fa-times-circle"></i>
      </div>
      <h2 class="status-title">Verification Rejected</h2>
      <p class="status-message">
        Unfortunately, we couldn't verify your identity with the documents provided.
      </p>
      
      <div class="rejection-reason">
        <h3 class="reason-title">Reason for rejection:</h3>
        <p class="reason-text"><%= user.verifications.rejectionReason || 'The provided documents did not meet our verification requirements.' %></p>
      </div>
      
      <p class="status-message">
        Please review the rejection reason and submit new documents.
      </p>
      <a href="#verification-form" class="status-action">Try Again</a>
    <% } else if (user.verifications && user.verifications.id) { %>
      <div class="status-icon approved">
        <i class="fas fa-check-circle"></i>
      </div>
      <h2 class="status-title">Verification Complete</h2>
      <p class="status-message">
        Your identity has been successfully verified. You now have full access to all platform features.
      </p>
      <a href="/users/dashboard" class="status-action">Go to Dashboard</a>
      <a href="/rides/search" class="status-action secondary">Find a Ride</a>
    <% } else { %>
      <div class="status-icon pending">
        <i class="fas fa-user-clock"></i>
      </div>
      <h2 class="status-title">Verification Required</h2>
      <p class="status-message">
        To ensure the safety and trust of our community, we require all users to verify their identity.
        Please complete the verification steps below.
      </p>
    <% } %>
  </div>

  <% if (!(user.verifications && user.verifications.id) && !(user.verifications && user.verifications.idPending)) { %>
    <div class="verification-steps">
      <h2 class="steps-title">Verification Process</h2>
      
      <ul class="steps-list">
        <li class="step-item <%= user.verifications && user.verifications.email ? 'completed' : '' %>">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3 class="step-title">Verify Email Address</h3>
            <p class="step-description">Confirm your email address by clicking the link we sent to your inbox.</p>
            <% if (!(user.verifications && user.verifications.email)) { %>
              <a href="/users/verify/email/resend" class="step-action">Resend Verification Email</a>
            <% } %>
          </div>
        </li>
        
        <li class="step-item <%= user.verifications && user.verifications.phone ? 'completed' : '' %>">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3 class="step-title">Verify Phone Number</h3>
            <p class="step-description">Confirm your phone number by entering the code we sent via SMS.</p>
            <% if (!(user.verifications && user.verifications.phone)) { %>
              <a href="/users/verify/phone" class="step-action">Verify Phone Number</a>
            <% } %>
          </div>
        </li>
        
        <li class="step-item">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3 class="step-title">Identity Verification</h3>
            <p class="step-description">Upload a government-issued ID to verify your identity.</p>
          </div>
        </li>
        
        <li class="step-item <%= user.role === 'driver' && (user.verifications && user.verifications.drivingLicense) ? 'completed' : '' %>">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3 class="step-title">Driver's License Verification</h3>
            <p class="step-description">If you want to offer rides, you'll need to verify your driving license.</p>
            <% if (user.role === 'driver' && !(user.verifications && user.verifications.drivingLicense)) { %>
              <a href="/users/verify/driving-license" class="step-action">Verify Driving License</a>
            <% } %>
          </div>
        </li>
      </ul>
    </div>

    <div id="verification-form" class="verification-form">
      <h2 class="form-title">Identity Verification</h2>
      
      <% if (locals.error) { %>
        <div class="alert alert-danger">
          <%= error %>
        </div>
      <% } %>

      <form action="/users/verify/id" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          <label for="idType" class="form-label">ID Type</label>
          <select id="idType" name="idType" class="form-input" required>
            <option value="">Select ID Type</option>
            <option value="passport">Passport</option>
            <option value="national_id">National ID Card</option>
            <option value="driving_license">Driving License</option>
          </select>
          <div class="form-hint">Choose the type of government-issued ID you'll be uploading</div>
        </div>
        
        <div class="form-group">
          <label for="idNumber" class="form-label">ID Number</label>
          <input type="text" id="idNumber" name="idNumber" class="form-input" required>
          <div class="form-hint">Enter the number shown on your ID document</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">ID Front Side</label>
          <div class="file-upload" id="frontUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Drag and drop your file here or click to browse</div>
            <div class="upload-hint">Supported formats: JPG, PNG, PDF (max 5MB)</div>
            <input type="file" name="idFront" id="idFrontInput" class="file-input" accept=".jpg,.jpeg,.png,.pdf" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">ID Back Side</label>
          <div class="file-upload" id="backUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Drag and drop your file here or click to browse</div>
            <div class="upload-hint">Supported formats: JPG, PNG, PDF (max 5MB)</div>
            <input type="file" name="idBack" id="idBackInput" class="file-input" accept=".jpg,.jpeg,.png,.pdf" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Selfie with ID</label>
          <div class="file-upload" id="selfieUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Take a photo of yourself holding your ID</div>
            <div class="upload-hint">Make sure both your face and ID are clearly visible</div>
            <input type="file" name="selfie" id="selfieInput" class="file-input" accept=".jpg,.jpeg,.png" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-checkbox">
            <input type="checkbox" name="consent" required>
            I confirm that the information provided is accurate and I consent to the processing of my personal data for verification purposes.
          </label>
        </div>
        
        <button type="submit" class="form-submit">Submit for Verification</button>
      </form>
    </div>
  <% } %>
</div>

<script>
  // File upload preview
  function setupFileUpload(inputId, uploadAreaId) {
    const input = document.getElementById(inputId);
    const uploadArea = document.getElementById(uploadAreaId);
    
    uploadArea.addEventListener('click', () => {
      input.click();
    });
    
    uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', () => {
      uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', (e) => {
      e.preventDefault();
      uploadArea.classList.remove('dragover');
      
      if (e.dataTransfer.files.length) {
        input.files = e.dataTransfer.files;
        updateFilePreview(input, uploadArea);
      }
    });
    
    input.addEventListener('change', () => {
      updateFilePreview(input, uploadArea);
    });
  }
  
  function updateFilePreview(input, uploadArea) {
    if (input.files && input.files[0]) {
      const fileName = input.files[0].name;
      const fileSize = (input.files[0].size / 1024 / 1024).toFixed(2); // Convert to MB
      
      // Update upload area to show file info
      uploadArea.innerHTML = `
        <div class="upload-icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <div class="upload-text">${fileName}</div>
        <div class="upload-hint">${fileSize} MB</div>
        <div class="upload-success">
          <i class="fas fa-check-circle"></i> File selected
        </div>
      `;
      
      uploadArea.classList.add('has-file');
    }
  }
  
  // Initialize file uploads
  document.addEventListener('DOMContentLoaded', () => {
    setupFileUpload('idFrontInput', 'frontUpload');
    setupFileUpload('idBackInput', 'backUpload');
    setupFileUpload('selfieInput', 'selfieUpload');
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment.ejs

<%- include('../partials/header') %>

<div class="payment-container">
  <div class="payment-header">
    <h1 class="payment-title">Complete Your Payment</h1>
    <p class="payment-subtitle">Secure payment for your ride booking</p>
  </div>

  <div class="payment-summary">
    <h2 class="summary-title">Booking Summary</h2>
    
    <div class="ride-details">
      <div class="ride-info">
        <div class="ride-route">
          <div class="route-point">
            <div class="route-city"><%= booking.ride.departureCity %></div>
            <div class="route-address"><%= booking.ride.departureAddress %></div>
          </div>
          <div class="route-arrow">
            <i class="fas fa-long-arrow-alt-right"></i>
          </div>
          <div class="route-point">
            <div class="route-city"><%= booking.ride.destinationCity %></div>
            <div class="route-address"><%= booking.ride.destinationAddress %></div>
          </div>
        </div>
        
        <div class="ride-meta">
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-calendar"></i></div>
            <%= new Date(booking.ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
          </div>
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-clock"></i></div>
            <%= new Date(booking.ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
          </div>
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-user"></i></div>
            <%= booking.seats %> <%= booking.seats > 1 ? 'seats' : 'seat' %>
          </div>
        </div>
      </div>
      
      <div class="booking-info">
        <h3 class="booking-title">Price Details</h3>
        
        <div class="booking-details">
          <div class="booking-row">
            <div class="booking-label">Price per seat</div>
            <div class="booking-value">$<%= booking.ride.pricePerSeat.toFixed(2) %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Number of seats</div>
            <div class="booking-value"><%= booking.seats %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Subtotal</div>
            <div class="booking-value">$<%= (booking.ride.pricePerSeat * booking.seats).toFixed(2) %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Service fee</div>
            <div class="booking-value">$<%= booking.serviceFee.toFixed(2) %></div>
          </div>
          <% if (booking.discount) { %>
            <div class="booking-row">
              <div class="booking-label">Discount</div>
              <div class="booking-value">-$<%= booking.discount.toFixed(2) %></div>
            </div>
          <% } %>
        </div>
        
        <div class="booking-total">
          <div class="total-label">Total</div>
          <div class="total-value">$<%= booking.totalAmount.toFixed(2) %></div>
        </div>
      </div>
    </div>
  </div>

  <div class="payment-methods">
    <h2 class="methods-title">Select Payment Method</h2>
    
    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>
    
    <form action="/payments/process" method="POST" id="payment-form">
      <input type="hidden" name="bookingId" value="<%= booking._id %>">
      
      <div class="methods-list">
        <div class="payment-method" data-method="credit_card">
          <div class="method-icon"><i class="fas fa-credit-card"></i></div>
          <div class="method-name">Credit Card</div>
        </div>
        
        <div class="payment-method" data-method="debit_card">
          <div class="method-icon"><i class="fas fa-credit-card"></i></div>
          <div class="method-name">Debit Card</div>
        </div>
        
        <div class="payment-method" data-method="paypal">
          <div class="method-icon"><i class="fab fa-paypal"></i></div>
          <div class="method-name">PayPal</div>
        </div>
        
        <div class="payment-method" data-method="wallet">
          <div class="method-icon"><i class="fas fa-wallet"></i></div>
          <div class="method-name">Wallet</div>
          <% if (user.wallet && user.wallet.balance) { %>
            <div class="method-balance">Balance: $<%= user.wallet.balance.toFixed(2) %></div>
          <% } %>
        </div>
      </div>
      
      <input type="hidden" name="paymentMethod" id="selected-method" value="">
      
      <div id="credit-card-form" class="payment-form" style="display: none;">
        <div class="form-group">
          <label for="cardName" class="form-label">Name on Card</label>
          <input type="text" id="cardName" name="cardName" class="form-input" placeholder="John Doe">
        </div>
        
        <div class="card-details">
          <div class="form-group">
            <label for="cardNumber" class="form-label">Card Number</label>
            <input type="text" id="cardNumber" name="cardNumber" class="form-input" placeholder="1234 5678 9012 3456">
          </div>
          
          <div class="form-group">
            <label for="cardExpiry" class="form-label">Expiry Date</label>
            <input type="text" id="cardExpiry" name="cardExpiry" class="form-input" placeholder="MM/YY">
          </div>
          
          <div class="form-group">
            <label for="cardCvc" class="form-label">CVC</label>
            <input type="text" id="cardCvc" name="cardCvc" class="form-input" placeholder="123">
          </div>
        </div>
      </div>
      
      <div id="paypal-form" class="payment-form" style="display: none;">
        <p>You will be redirected to PayPal to complete your payment.</p>
      </div>
      
      <div id="wallet-form" class="payment-form" style="display: none;">
        <% if (user.wallet && user.wallet.balance >= booking.totalAmount) { %>
          <p>Your wallet balance is sufficient for this payment.</p>
        <% } else { %>
          <p>Your wallet balance is insufficient. Please add funds or choose another payment method.</p>
          <div class="form-group">
            <a href="/users/wallet/add-funds" class="btn btn-outline">Add Funds to Wallet</a>
          </div>
        <% } %>
      </div>
      
      <div class="payment-actions">
        <a href="/bookings/<%= booking._id %>" class="back-link">
          <span class="back-icon"><i class="fas fa-arrow-left"></i></span>
          Back to Booking
        </a>
        
        <button type="submit" class="pay-button">
          Pay $<%= booking.totalAmount.toFixed(2) %>
        </button>
      </div>
    </form>
  </div>
  
  <div class="payment-security">
    <div class="security-icon"><i class="fas fa-lock"></i></div>
    <div class="security-text">All payments are secure and encrypted. Your payment information is never stored on our servers.</div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const paymentMethods = document.querySelectorAll('.payment-method');
    const selectedMethodInput = document.getElementById('selected-method');
    const creditCardForm = document.getElementById('credit-card-form');
    const paypalForm = document.getElementById('paypal-form');
    const walletForm = document.getElementById('wallet-form');
    const paymentForm = document.getElementById('payment-form');
    
    // Select payment method
    paymentMethods.forEach(method => {
      method.addEventListener('click', function() {
        // Remove active class from all methods
        paymentMethods.forEach(m => m.classList.remove('active'));
        
        // Add active class to selected method
        this.classList.add('active');
        
        // Set selected method value
        const methodValue = this.getAttribute('data-method');
        selectedMethodInput.value = methodValue;
        
        // Show/hide appropriate form
        creditCardForm.style.display = (methodValue === 'credit_card' || methodValue === 'debit_card') ? 'block' : 'none';
        paypalForm.style.display = methodValue === 'paypal' ? 'block' : 'none';
        walletForm.style.display = methodValue === 'wallet' ? 'block' : 'none';
      });
    });
    
    // Form validation
    paymentForm.addEventListener('submit', function(e) {
      const selectedMethod = selectedMethodInput.value;
      
      if (!selectedMethod) {
        e.preventDefault();
        alert('Please select a payment method');
        return;
      }
      
      if (selectedMethod === 'credit_card' || selectedMethod === 'debit_card') {
        const cardName = document.getElementById('cardName').value;
        const cardNumber = document.getElementById('cardNumber').value;
        const cardExpiry = document.getElementById('cardExpiry').value;
        const cardCvc = document.getElementById('cardCvc').value;
        
        if (!cardName || !cardNumber || !cardExpiry || !cardCvc) {
          e.preventDefault();
          alert('Please fill in all card details');
          return;
        }
        
        // Basic card number validation
        if (!/^\d{16}$/.test(cardNumber.replace(/\s/g, ''))) {
          e.preventDefault();
          alert('Please enter a valid card number');
          return;
        }
        
        // Basic expiry date validation
        if (!/^\d{2}\/\d{2}$/.test(cardExpiry)) {
          e.preventDefault();
          alert('Please enter a valid expiry date (MM/YY)');
          return;
        }
        
        // Basic CVC validation
        if (!/^\d{3,4}$/.test(cardCvc)) {
          e.preventDefault();
          alert('Please enter a valid CVC');
          return;
        }
      }
      
      <% if (user.wallet && user.wallet.balance < booking.totalAmount) { %>
        if (selectedMethod === 'wallet') {
          e.preventDefault();
          alert('Your wallet balance is insufficient for this payment');
          return;
        }
      <% } %>
    });
    
    // Format card number with spaces
    const cardNumberInput = document.getElementById('cardNumber');
    cardNumberInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
      let formattedValue = '';
      
      for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) {
          formattedValue += ' ';
        }
        formattedValue += value[i];
      }
      
      e.target.value = formattedValue;
    });
    
    // Format expiry date
    const expiryInput = document.getElementById('cardExpiry');
    expiryInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
      
      if (value.length > 2) {
        value = value.substring(0, 2) + '/' + value.substring(2, 4);
      }
      
      e.target.value = value;
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment-history.ejs

<%- include('../partials/header') %>

<div class="history-container">
  <div class="history-header">
    <h1 class="history-title">Payment History</h1>
    
    <div class="history-actions">
      <button id="filter-toggle" class="filter-button">
        <span class="filter-icon"><i class="fas fa-filter"></i></span>
        Filter
      </button>
      
      <button id="export-button" class="export-button">
        <span class="export-icon"><i class="fas fa-download"></i></span>
        Export
      </button>
    </div>
  </div>

  <div id="filter-panel" class="filter-panel" style="display: none;">
    <form id="filter-form" action="/payments/history" method="GET">
      <div class="filter-form">
        <div class="form-  action="/payments/history" method="GET">
      <div class="filter-form">
        <div class="form-group">
          <label class="form-label">Date Range</label>
          <input type="date" name="startDate" class="form-input" value="<%= filters?.startDate || '' %>">
          <span>to</span>
          <input type="date" name="endDate" class="form-input" value="<%= filters?.endDate || '' %>">
        </div>
        
        <div class="form-group">
          <label class="form-label">Payment Type</label>
          <select name="type" class="form-select">
            <option value="">All Types</option>
            <option value="booking_payment" <%= filters?.type === 'booking_payment' ? 'selected' : '' %>>Booking Payment</option>
            <option value="refund" <%= filters?.type === 'refund' ? 'selected' : '' %>>Refund</option>
            <option value="payout" <%= filters?.type === 'payout' ? 'selected' : '' %>>Payout</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            <option value="">All Statuses</option>
            <option value="completed" <%= filters?.status === 'completed' ? 'selected' : '' %>>Completed</option>
            <option value="pending" <%= filters?.status === 'pending' ? 'selected' : '' %>>Pending</option>
            <option value="failed" <%= filters?.status === 'failed' ? 'selected' : '' %>>Failed</option>
            <option value="refunded" <%= filters?.status === 'refunded' ? 'selected' : '' %>>Refunded</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">Payment Method</label>
          <select name="method" class="form-select">
            <option value="">All Methods</option>
            <option value="credit_card" <%= filters?.method === 'credit_card' ? 'selected' : '' %>>Credit Card</option>
            <option value="debit_card" <%= filters?.method === 'debit_card' ? 'selected' : '' %>>Debit Card</option>
            <option value="paypal" <%= filters?.method === 'paypal' ? 'selected' : '' %>>PayPal</option>
            <option value="wallet" <%= filters?.method === 'wallet' ? 'selected' : '' %>>Wallet</option>
            <option value="bank_transfer" <%= filters?.method === 'bank_transfer' ? 'selected' : '' %>>Bank Transfer</option>
          </select>
        </div>
      </div>
      
      <div class="filter-actions">
        <button type="reset" class="reset-button">Reset</button>
        <button type="submit" class="apply-button">Apply Filters</button>
      </div>
    </form>
  </div>

  <div class="payments-list">
    <% if (payments && payments.length > 0) { %>
      <table class="payment-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Type</th>
            <th>Method</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% payments.forEach(payment => { %>
            <tr>
              <td class="payment-date">
                <%= new Date(payment.paymentDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </td>
              <td>
                <%= payment.description || `Payment for booking #${payment.booking.toString().substring(0, 8)}` %>
                <div class="payment-id">#<%= payment._id.toString().substring(0, 8) %></div>
              </td>
              <td>
                <span class="payment-type type-<%= payment.type === 'refund' ? 'refund' : 'payment' %>">
                  <%= payment.type.replace('_', ' ').charAt(0).toUpperCase() + payment.type.replace('_', ' ').slice(1) %>
                </span>
              </td>
              <td>
                <%= payment.method.replace('_', ' ').charAt(0).toUpperCase() + payment.method.replace('_', ' ').slice(1) %>
              </td>
              <td class="payment-amount <%= payment.type === 'refund' ? 'amount-negative' : 'amount-positive' %>">
                <%= payment.type === 'refund' ? '-' : '' %>$<%= payment.amount.toFixed(2) %>
              </td>
              <td>
                <span class="payment-status status-<%= payment.status %>">
                  <%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %>
                </span>
              </td>
              <td>
                <div class="payment-actions">
                  <a href="/payments/<%= payment._id %>" class="action-button action-view" title="View Details">
                    <i class="fas fa-eye"></i>
                  </a>
                  <a href="/payments/<%= payment._id %>/receipt" class="action-button action-download" title="Download Receipt">
                    <i class="fas fa-file-download"></i>
                  </a>
                </div>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
      
      <div class="pagination">
        <div class="pagination-info">
          Showing <%= (page - 1) * limit + 1 %> to <%= Math.min(page * limit, totalPayments) %> of <%= totalPayments %> payments
        </div>
        
        <div class="pagination-controls">
          <% if (page > 1) { %>
            <a href="?page=<%= page - 1 %><%= queryString %>" class="pagination-button">
              <i class="fas fa-chevron-left"></i>
            </a>
          <% } else { %>
            <span class="pagination-button disabled">
              <i class="fas fa-chevron-left"></i>
            </span>
          <% } %>
          
          <% for (let i = 1; i <= totalPages; i++) { %>
            <a href="?page=<%= i %><%= queryString %>" class="pagination-button <%= i === page ? 'active' : '' %>">
              <%= i %>
            </a>
          <% } %>
          
          <% if (page < totalPages) { %>
            <a href="?page=<%= page + 1 %><%= queryString %>" class="pagination-button">
              <i class="fas fa-chevron-right"></i>
            </a>
          <% } else { %>
            <span class="pagination-button disabled">
              <i class="fas fa-chevron-right"></i>
            </span>
          <% } %>
        </div>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-receipt"></i>
        </div>
        <h3 class="empty-state-title">No payments found</h3>
        <p class="empty-state-description">
          You don't have any payment records yet. They will appear here once you make or receive payments.
        </p>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Toggle filter panel
    const filterToggle = document.getElementById('filter-toggle');
    const filterPanel = document.getElementById('filter-panel');
    
    filterToggle.addEventListener('click', function() {
      if (filterPanel.style.display === 'none') {
        filterPanel.style.display = 'block';
      } else {
        filterPanel.style.display = 'none';
      }
    });
    
    // Export functionality
    const exportButton = document.getElementById('export-button');
    
    exportButton.addEventListener('click', function() {
      const format = prompt('Select export format (csv, pdf):', 'csv');
      
      if (format && (format.toLowerCase() === 'csv' || format.toLowerCase() === 'pdf')) {
        window.location.href = `/payments/export?format=${format.toLowerCase()}<%= queryString %>`;
      }
    });
    
    // Reset form
    const filterForm = document.getElementById('filter-form');
    
    filterForm.addEventListener('reset', function() {
      setTimeout(() => {
        filterForm.submit();
      }, 10);
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment-receipt.ejs

<%- include('../partials/header') %>

<div class="receipt-container">
  <div class="receipt-card">
    <div class="receipt-header">
      <div class="receipt-logo">
        <img src="/img/logo.png" alt="Logo" height="40">
      </div>
      <h1 class="receipt-title">Payment Receipt</h1>
      <p class="receipt-subtitle">Thank you for your payment</p>
      
      <div class="receipt-status">
        <%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %>
      </div>
    </div>
    
    <div class="receipt-body">
      <div class="receipt-section">
        <h2 class="section-title">Payment Information</h2>
        
        <div class="receipt-grid">
          <div class="receipt-item">
            <div class="item-label">Payment ID</div>
            <div class="item-value">#<%= payment._id.toString() %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Date</div>
            <div class="item-value"><%= payment.formattedDate %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Payment Method</div>
            <div class="item-value">
              <%= payment.method.replace('_', ' ').charAt(0).toUpperCase() + payment.method.replace('_', ' ').slice(1) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Status</div>
            <div class="item-value"><%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %></div>
          </div>
        </div>
      </div>
      
      <div class="receipt-section">
        <h2 class="section-title">Ride Details</h2>
        
        <div class="receipt-ride">
          <div class="ride-point">
            <div class="point-label">From</div>
            <div class="point-value"><%= booking.ride.departureCity %></div>
          </div>
          
          <div class="ride-arrow">
            <i class="fas fa-long-arrow-alt-right"></i>
          </div>
          
          <div class="ride-point">
            <div class="point-label">To</div>
            <div class="point-value"><%= booking.ride.destinationCity %></div>
          </div>
        </div>
        
        <div class="receipt-grid">
          <div class="receipt-item">
            <div class="item-label">Departure Date</div>
            <div class="item-value">
              <%= new Date(booking.ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Departure Time</div>
            <div class="item-value">
              <%= new Date(booking.ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Seats</div>
            <div class="item-value"><%= booking.seats %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Booking ID</div>
            <div class="item-value">#<%= booking._id.toString() %></div>
          </div>
        </div>
      </div>
      
      <div class="receipt-section">
        <h2 class="section-title">Payment Details</h2>
        
        <div class="receipt-details">
          <div class="detail-row">
            <div class="detail-label">Price per seat</div>
            <div class="detail-value">$<%= booking.ride.pricePerSeat.toFixed(2) %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Number of seats</div>
            <div class="detail-value"><%= booking.seats %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Subtotal</div>
            <div class="detail-value">$<%= (booking.ride.pricePerSeat * booking.seats).toFixed(2) %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Service fee</div>
            <div class="detail-value">$<%= booking.serviceFee.toFixed(2) %></div>
          </div>
          
          <% if (booking.discount) { %>
            <div class="detail-row">
              <div class="detail-label">Discount</div>
              <div class="detail-value">-$<%= booking.discount.toFixed(2) %></div>
            </div>
          <% } %>
        </div>
        
        <div class="receipt-total">
          <div class="total-label">Total Amount</div>
          <div class="total-value">$<%= payment.amount.toFixed(2) %></div>
        </div>
      </div>
      
      <div class="receipt-qr">
        <div class="qr-code">
          <img src="/api/qr-code?data=<%= payment._id.toString() %>" alt="QR Code" width="150" height="150">
        </div>
        <div class="qr-text">Scan to verify payment</div>
      </div>
    </div>
    
    <div class="receipt-footer">
      <div class="footer-text">
        This is an electronic receipt for your payment. Please keep it for your records.
      </div>
      
      <div class="footer-contact">
        If you have any questions, please contact us at support@carpooling.com
      </div>
    </div>
  </div>
  
  <div class="receipt-actions">
    <a href="/payments/history" class="btn btn-secondary">Back to Payment History</a>
    <a href="/payments/<%= payment._id %>/receipt/download" class="btn btn-primary">Download Receipt</a>
  </div>
</div>

<%- include('../partials/footer') %>

views/pages/feedback.ejs

<%- include('../partials/header') %>

<div class="feedback-container">
  <div class="feedback-header">
    <h1 class="feedback-title">Rate Your Ride</h1>
    <p class="feedback-subtitle">Your feedback helps improve our community</p>
  </div>

  <div class="feedback-card">
    <div class="ride-summary">
      <% if (ride.driver.profileImage) { %>
        <img src="<%= ride.driver.profileImage %>" alt="<%= ride.driver.firstName %> <%= ride.driver.lastName %>" class="ride-avatar">
      <% } else { %>
        <div class="ride-avatar">
          <%= ride.driver.firstName.charAt(0) %><%= ride.driver.lastName.charAt(0) %>
        </div>
      <% } %>
      
      <div class="ride-details">
        <div class="ride-route">
          <%= ride.departureCity %> to <%= ride.destinationCity %>
        </div>
        
        <div class="ride-meta">
          <div class="ride-date">
            <%= new Date(ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
          </div>
          <div class="ride-time">
            <%= new Date(ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
          </div>
          <div class="ride-driver">
            Driver: <%= ride.driver.firstName %> <%= ride.driver.lastName %>
          </div>
        </div>
      </div>
    </div>

    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <form action="/feedback/submit" method="POST" class="feedback-form">
      <input type="hidden" name="rideId" value="<%= ride._id %>">
      <input type="hidden" name="bookingId" value="<%= booking._id %>">
      
      <div class="rating-section">
        <h2 class="section-title">Overall Rating</h2>
        
        <div class="rating-stars">
          <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" name="rating" value="<%= i %>" id="star<%= i %>" class="star-input" <%= i === 5 ? 'checked' : '' %>>
            <label for="star<%= i %>" class="star-label">
              <%= i %> stars
            </label>
            <i class="fas fa-star star-icon"></i>
          <% } %>
        </div>
        
        <div class="rating-labels">
          <span>Poor</span>
          <span>Excellent</span>
        </div>
      </div>

      <div class="category-ratings">
        <h2 class="section-title">Rate Specific Aspects</h2>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Punctuality</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="punctuality">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="punctuality" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Cleanliness</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="cleanliness">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="cleanliness" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Comfort</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="comfort">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="comfort" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Safety</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="safety">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="safety" value="5">
        </div>
      </div>

      <div class="form-group">
        <label for="comment" class="form-label">Your Comments</label>
        <textarea id="comment" name="comment" class="form-control" rows="4" placeholder="Share your experience with this ride..."></textarea>
      </div>

      <div class="feedback-tags">
        <h2 class="section-title">What did you like?</h2>
        
        <div class="tags-list">
          <input type="checkbox" id="tag1" name="tags[]" value="friendly_driver" class="tag-item">
          <label for="tag1" class="tag-label">Friendly Driver</label>
          
          <input type="checkbox" id="tag2" name="tags[]" value="clean_car" class="tag-item">
          <label for="tag2" class="tag-label">Clean Car</label>
          
          <input type="checkbox" id="tag3" name="tags[]" value="good_conversation" class="tag-item">
          <label for="tag3" class="tag-label">Good Conversation</label>
          
          <input type="checkbox" id="tag4" name="tags[]" value="punctual" class="tag-item">
          <label for="tag4" class="tag-label">Punctual</label>
          
          <input type="checkbox" id="tag5" name="tags[]" value="safe_driving" class="tag-item">
          <label for="tag5" class="tag-label">Safe Driving</label>
          
          <input type="checkbox" id="tag6" name="tags[]" value="comfortable" class="tag-item">
          <label for="tag6" class="tag-label">Comfortable</label>
          
          <input type="checkbox" id="tag7" name="tags[]" value="good_music" class="tag-item">
          <label for="tag7" class="tag-label">Good Music</label>
          
          <input type="checkbox" id="tag8" name="tags[]" value="helpful" class="tag-item">
          <label for="tag8" class="tag-label">Helpful</label>
        </div>
      </div>

      <div class="feedback-actions">
        <p class="feedback-note">Your feedback will be visible to the driver and other users.</p>
        <button type="submit" class="btn btn-primary">Submit Feedback</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Handle category ratings
    const categoryStars = document.querySelectorAll('.category-stars');
    
    categoryStars.forEach(starsContainer => {
      const stars = starsContainer.querySelectorAll('.category-star');
      const category = starsContainer.getAttribute('data-category');
      const valueDisplay = starsContainer.parentElement.querySelector('.category-value');
      const hiddenInput = starsContainer.parentElement.querySelector(`input[name="${category}"]`);
      
      stars.forEach(star => {
        star.addEventListener('click', function() {
          const value = parseInt(this.getAttribute('data-value'));
          
          // Update hidden input
          hiddenInput.value = value;
          
          // Update display value
          valueDisplay.textContent = value;
          
          // Update stars
          stars.forEach(s => {
            const starValue = parseInt(s.getAttribute('data-value'));
            if (starValue <= value) {
              s.classList.add('active');
            } else {
              s.classList.remove('active');
            }
          });
        });
        
        star.addEventListener('mouseover', function() {
          const value = parseInt(this.getAttribute('data-value'));
          
          stars.forEach(s => {
            const starValue = parseInt(s.getAttribute('data-value'));
            if (starValue <= value) {
              s.classList.add('hover');
            } else {
              s.classList.remove('hover');
            }
          });
        });
        
        star.addEventListener('mouseout', function() {
          stars.forEach(s => {
            s.classList.remove('hover');
          });
        });
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/user-feedback.ejs

<%- include('../partials/header') %>

<div class="user-feedback-container">
  <div class="feedback-header">
    <h1 class="feedback-title">
      <% if (isOwnProfile) { %>
        My Feedback
      <% } else { %>
        Feedback for <%= user.firstName %> <%= user.lastName %>
      <% } %>
    </h1>
    <p class="feedback-subtitle">
      <% if (isOwnProfile) { %>
        See what others are saying about you
      <% } else { %>
        See what others are saying about <%= user.firstName %>
      <% } %>
    </p>
  </div>

  <div class="rating-summary">
    <div class="rating-overall">
      <div class="rating-value"><%= averageRating.toFixed(1) %></div>
      <div class="rating-stars">
        <% for (let i = 1; i <= 5; i++) { %>
          <i class="fas fa-star rating-star <%= i <= Math.round(averageRating) ? '' : 'far' %>"></i>
        <% } %>
      </div>
      <div class="rating-count"><%= totalFeedbacks %> reviews</div>
    </div>
    
    <div class="rating-breakdown">
      <h3 class="breakdown-title">Rating Breakdown</h3>
      
      <div class="breakdown-item">
        <div class="breakdown-label">5 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[5] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[5] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">4 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[4] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[4] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">3 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[3] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[3] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">2 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[2] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[2] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">1 Star</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[1] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[1] || 0 %></div>
      </div>
    </div>
  </div>

  <div class="feedback-filters">
    <button class="filter-button active" data-filter="all">All</button>
    <button class="filter-button" data-filter="5">5 Stars</button>
    <button class="filter-button" data-filter="4">4 Stars</button>
    <button class="filter-button" data-filter="3">3 Stars</button>
    <button class="filter-button" data-filter="2">2 Stars</button>
    <button class="filter-button" data-filter="1">1 Star</button>
  </div>

  <div class="feedback-list">
    <% if (feedbacks && feedbacks.length > 0) { %>
      <% feedbacks.forEach(feedback => { %>
        <div class="feedback-card" data-rating="<%= feedback.rating %>">
          <div class="feedback-header">
            <div class="feedback-user">
              <% if (feedback.reviewer.profileImage) { %>
                <img src="<%= feedback.reviewer.profileImage %>" alt="<%= feedback.reviewer.firstName %> <%= feedback.reviewer.lastName %>" class="user-avatar">
              <% } else { %>
                <div class="user-avatar">
                  <%= feedback.reviewer.firstName.charAt(0) %><%= feedback.reviewer.lastName.charAt(0) %>
                </div>
              <% } %>
              
              <div class="user-info">
                <div class="user-name"><%= feedback.reviewer.firstName %> <%= feedback.reviewer.lastName %></div>
                <div class="feedback-date"><%= new Date(feedback.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %></div>
              </div>
            </div>
            
            <div class="feedback-rating">
              <div class="rating-badge">
                <span class="badge-icon"><i class="fas fa-star"></i></span>
                <%= feedback.rating %>.0
              </div>
              
              <div class="feedback-stars">
                <% for (let i = 1; i <= 5; i++) { %>
                  <i class="fas fa-star feedback-star <%= i <= feedback.rating ? '' : 'far' %>"></i>
                <% } %>
              </div>
            </div>
          </div>
          
          <div class="feedback-content">
            <%= feedback.comment %>
          </div>
          
          <% if (feedback.tags && feedback.tags.length > 0) { %>
            <div class="feedback-tags">
              <% feedback.tags.forEach(tag => { %>
                <span class="feedback-tag"><%= tag.replace('_', ' ') %></span>
              <% }) %>
            </div>
          <% } %>
          
          <div class="feedback-ride">
            <span class="ride-icon"><i class="fas fa-car"></i></span>
            Ride from <%= feedback.ride.departureCity %> to <%= feedback.ride.destinationCity %> on 
            <%= new Date(feedback.ride.departureDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) %>
          </div>
        </div>
      <% }) %>
      
      <div class="pagination">
        <% for (let i = 1; i <= totalPages; i++) { %>
          <a href="?page=<%= i %>" class="pagination-button <%= i === currentPage ? 'active' : '' %>"><%= i %></a>
        <% } %>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-comment-alt"></i>
        </div>
        <h3 class="empty-state-title">No feedback yet</h3>
        <p class="empty-state-description">
          <% if (isOwnProfile) { %>
            You haven't received any feedback yet. Feedback will appear here after your rides.
          <% } else { %>
            <%= user.firstName %> hasn't received any feedback yet.
          <% } %>
        </p>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const filterButtons = document.querySelectorAll('.filter-button');
    const feedbackCards = document.querySelectorAll('.feedback-card');
    
    filterButtons.forEach(button => {
      button.addEventListener('click', function() {
        // Update active button
        filterButtons.forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        
        // Get filter value
        const filter = this.getAttribute('data-filter');
        
        // Filter feedback cards
        feedbackCards.forEach(card => {
          if (filter === 'all' || card.getAttribute('data-rating') === filter) {
            card.style.display = 'block';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/safety.ejs

<%- include('../partials/header') %>

<div class="safety-container">
  <div class="safety-header">
    <h1 class="safety-title">Safety Center</h1>
    <p class="safety-subtitle">Your safety is our top priority. Learn about the features and guidelines we've implemented to ensure a safe experience for everyone.</p>
  </div>

  <div class="safety-grid">
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-shield-alt"></i>
      </div>
      <h2 class="card-title">Rider Verification</h2>
      <p class="card-description">
        All users must verify their identity through our multi-step verification process, including email, phone, and ID verification.
      </p>
      <a href="/safety/verification" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-car"></i>
      </div>
      <h2 class="card-title">Driver Screening</h2>
      <p class="card-description">
        Drivers undergo additional verification, including driving license checks and vehicle inspections to ensure safety standards.
      </p>
      <a href="/safety/driver-screening" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-comments"></i>
      </div>
      <h2 class="card-title">Community Ratings</h2>
      <p class="card-description">
        Our rating system helps maintain high standards. Users with consistently low ratings may be removed from the platform.
      </p>
      <a href="/safety/ratings" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-phone-alt"></i>
      </div>
      <h2 class="card-title">Emergency Assistance</h2>
      <p class="card-description">
        Access emergency services directly from our app with the SOS button, which shares your location with emergency contacts.
      </p>
      <a href="/safety/emergency" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>

  <div class="safety-features">
    <h2 class="features-title">Safety Features</h2>
    
    <div class="features-list">
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-user-check"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Profile Verification</h3>
          <p class="feature-description">
            We verify all users' identities through multiple methods, including email, phone, and government ID verification.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-share-alt"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Trip Sharing</h3>
          <p class="feature-description">
            Share your trip details and real-time location with trusted contacts for added peace of mind.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-comment-alt"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">In-app Communication</h3>
          <p class="feature-description">
            Communicate with other users through our platform without sharing personal contact information.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Incident Reporting</h3>
          <p class="feature-description">
            Easily report safety concerns or incidents through our dedicated reporting system.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-bell"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Safety Alerts</h3>
          <p class="feature-description">
            Receive real-time notifications about safety issues or concerns in your area.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-clipboard-check"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Safety Checklist</h3>
          <p class="feature-description">
            Pre-ride safety reminders and checklist to ensure a safe journey for everyone.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="safety-cta">
    <h2 class="cta-title">Safety is a Shared Responsibility</h2>
    <p class="cta-description">
      While we implement robust safety measures, we encourage all users to follow safety guidelines and use common sense when carpooling.
    </p>
    <a href="/safety/guidelines" class="btn btn-primary">View Safety Guidelines</a>
  </div>

  <div class="safety-faq">
    <h2 class="faq-title">Safety FAQs</h2>
    
    <div class="faq-list">
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">How does the verification process work?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          Our verification process includes multiple steps: email verification, phone verification, and ID verification. For drivers, we also verify driving licenses. This helps ensure that all users on our platform are who they claim to be.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">What should I do if I feel unsafe during a ride?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          If you ever feel unsafe during a ride, you can use the SOS button in the app to contact emergency services. You can also share your trip with trusted contacts who can monitor your journey in real-time. If possible, exit the vehicle at a safe, public location.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">How do I report a safety concern or incident?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          You can report safety concerns or incidents through the app by going to the ride details and selecting "Report an Issue." For urgent matters, use the SOS button. You can also contact our support team directly through the Help Center.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">Can I see the safety rating of a driver before booking?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          Yes, you can see the overall rating of any driver before booking a ride. This includes specific feedback related to safety from previous passengers. We encourage users to review this information before making a booking.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">What safety measures are in place for COVID-19?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          We've implemented several COVID-19 safety measures, including mask requirements, vehicle sanitization guidelines, and reduced capacity recommendations. Users can also indicate their comfort level with these measures in their profiles.
        </div>
      </div>
    </div>
  </div>

  <div class="emergency-section">
    <h2 class="emergency-title">Emergency Contact Information</h2>
    <p class="emergency-description">
      In case of an emergency during your ride, please contact the appropriate emergency services in your area.
    </p>
    
    <div class="emergency-number">
      <div class="number-icon">
        <i class="fas fa-phone-alt"></i>
      </div>
      <div class="number-content">
        <div class="number-label">Emergency Services</div>
        <div class="number-value">911</div>
      </div>
    </div>
    
    <div class="emergency-number">
      <div class="number-icon">
        <i class="fas fa-headset"></i>
      </div>
      <div class="number-content">
        <div class="number-label">24/7 Support Hotline</div>
        <div class="number-value">1-800-CARPOOL</div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // FAQ accordion functionality
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');
      
      question.addEventListener('click', function() {
        // Toggle active class
        item.classList.toggle('active');
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/report.ejs

<%- include('../partials/header') %>

<div class="report-container">
  <div class="report-header">
    <h1 class="report-title">Report a Safety Concern</h1>
    <p class="report-subtitle">Your safety is our priority. Please provide details about your concern.</p>
  </div>

  <div class="report-card">
    <div class="report-notice">
      <h3 class="notice-title">
        <i class="fas fa-exclamation-circle notice-icon"></i>
        Important Information
      </h3>
      <p class="notice-text">
        For emergencies requiring immediate assistance, please contact local emergency services at 911 before submitting this report.
        This form is for reporting safety concerns that do not require immediate attention.
      </p>
    </div>

    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <% if (locals.success) { %>
      <div class="alert alert-success">
        <%= success %>
      </div>
    <% } %>

    <form action="/safety/report" method="POST" enctype="multipart/form-data" class="report-form">
      <div class="form-group">
        <label for="reportType" class="form-label">Type of Report</label>
        <select id="reportType" name="reportType" class="form-select" required>
          <option value="">Select report type</option>
          <option value="unsafe_driving">Unsafe Driving</option>
          <option value="harassment">Harassment or Inappropriate Behavior</option>
          <option value="vehicle_issue">Vehicle Safety Issue</option>
          <option value="accident">Accident</option>
          <option value="covid_violation">COVID-19 Safety Violation</option>
          <option value="other">Other Safety Concern</option>
        </select>
      </div>

      <div class="form-group">
        <label for="relatedRide" class="form-label">Related Ride (if applicable)</label>
        <select id="relatedRide" name="relatedRide" class="form-select">
          <option value="">Select a ride</option>
          <% if (rides && rides.length > 0) { %>
            <% rides.forEach(ride => { %>
              <option value="<%= ride._id %>">
                <%= ride.departureCity %> to <%= ride.destinationCity %> - 
                <%= new Date(ride.departureDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) %>
              </option>
            <% }) %>
          <% } %>
        </select>
        <div class="form-help">If your report is related to a specific ride, please select it from the list.</div>
      </div>

      <div class="form-group">
        <label for="involvedUser" class="form-label">User Involved (if applicable)</label>
        <input type="text" id="involvedUser" name="involvedUser" class="form-control" placeholder="Enter username or email">
        <div class="form-help">If your report involves a specific user, please provide their username or email.</div>
      </div>

      <div class="report-severity">
        <h3 class="severity-title">Severity Level</h3>
        
        <div class="severity-options">
          <div class="severity-option severity-low">
            <input type="radio" id="severityLow" name="severity" value="low" class="severity-input">
            <label for="severityLow" class="severity-label">
              <div class="severity-icon"><i class="fas fa-info-circle"></i></div>
              <div class="severity-text">Low</div>
              <div class="severity-desc">Minor concern, no immediate danger</div>
            </label>
          </div>
          
          <div class="severity-option severity-medium">
            <input type="radio" id="severityMedium" name="severity" value="medium" class="severity-input" checked>
            <label for="severityMedium" class="severity-label">
              <div class="severity-icon"><i class="fas fa-exclamation-circle"></i></div>
              <div class="severity-text">Medium</div>
              <div class="severity-desc">Concerning issue that needs attention</div>
            </label>
          </div>
          
          <div class="severity-option severity-high">
            <input type="radio" id="severityHigh" name="severity" value="high" class="severity-input">
            <label for="severityHigh" class="severity-label">
              <div class="severity-icon"><i class="fas fa-exclamation-triangle"></i></div>
              <div class="severity-text">High</div>
              <div class="severity-desc">Serious issue requiring urgent review</div>
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="description" class="form-label">Description of the Incident</label>
        <textarea id="description" name="description" class="form-textarea" rows="6" required placeholder="Please provide a detailed description of what happened..."></textarea>
        <div class="form-help">Be as specific as possible. Include dates, times, locations, and any other relevant details.</div>
      </div>

      <div class="form-group">
        <label for="date" class="form-label">Date of Incident</label>
        <input type="date" id="date" name="date" class="form-control" required max="<%= new Date().toISOString().split('T')[0] %>">
      </div>

      <div class="form-group">
        <label for="location" class="form-label">Location (if applicable)</label>
        <input type="text" id="location" name="location" class="form-control" placeholder="Enter the location where the incident occurred">
      </div>

      <div class="form-group">
        <label class="form-label">Evidence (Optional)</label>
        <div class="file-upload" id="evidenceUpload">
          <div class="upload-icon">
            <i class="fas fa-cloud-upload-alt"></i>
          </div>
          <div class="upload-text">Drag and drop files here or click to browse</div>
          <div class="upload-hint">You can upload photos, videos, or documents (max 5 files, 10MB each)</div>
          <input type="file" name="evidence" id="evidenceInput" class="upload-input" multiple accept=".jpg,.jpeg,.png,.pdf,.mp4,.mov">
        </div>
        
        <div class="uploaded-files" id="uploadedFiles"></div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" id="contactConsent" name="contactConsent" class="form-check-input" required>
          <label for="contactConsent" class="form-check-label">
            I consent to be contacted by the safety team regarding this report if necessary.
          </label>
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" id="truthConsent" name="truthConsent" class="form-check-input" required>
          <label for="truthConsent" class="form-check-label">
            I confirm that the information provided in this report is true and accurate to the best of my knowledge.
          </label>
        </div>
      </div>

      <div class="report-actions">
        <a href="/safety" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Submit Report</button>
      </div>
    </form>

    <p class="report-disclaimer">
      We take all safety reports seriously and will investigate your concern as soon as possible. 
      You will receive a confirmation email once your report has been submitted, and we will keep you updated on the status of your report.
    </p>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // File upload handling
    const evidenceInput = document.getElementById('evidenceInput');
    const uploadedFiles = document.getElementById('uploadedFiles');
    const evidenceUpload = document.getElementById('evidenceUpload');
    
    evidenceUpload.addEventListener('click', function() {
      evidenceInput.click();
    });
    
    evidenceUpload.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('dragover');
    });
    
    evidenceUpload.addEventListener('dragleave', function() {
      this.classList.remove('dragover');
    });
    
    evidenceUpload.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('dragover');
      
      if (e.dataTransfer.files.length) {
        handleFiles(e.dataTransfer.files);
      }
    });
    
    evidenceInput.addEventListener('change', function() {
      if (this.files.length) {
        handleFiles(this.files);
      }
    });
    
    function handleFiles(files) {
      // Clear previous files
      uploadedFiles.innerHTML = '';
      
      // Check file count
      if (files.length > 5) {
        alert('You can upload a maximum of 5 files.');
        return;
      }
      
      // Process each file
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        
        // Check file size
        if (file.size > 10 * 1024 * 1024) {
          alert(`File "${file.name}" exceeds the 10MB size limit.`);
          continue;
        }
        
        // Create file element
        const fileElement = document.createElement('div');
        fileElement.className = 'uploaded-file';
        
        // Determine file icon
        let fileIcon = 'fa-file';
        if (file.type.startsWith('image/')) {
          fileIcon = 'fa-file-image';
        } else if (file.type.startsWith('video/')) {
          fileIcon = 'fa-file-video';
        } else if (file.type === 'application/pdf') {
          fileIcon = 'fa-file-pdf';
        }
        
        fileElement.innerHTML = `
          <i class="fas ${fileIcon} file-icon"></i>
          <span class="file-name">${file.name}</span>
          <button type="button" class="file-remove">
            <i class="fas fa-times"></i>
          </button>
        `;
        
        uploadedFiles.appendChild(fileElement);
      }
      
      // Show uploaded files container
      uploadedFiles.style.display = 'flex';
    }
    
    // Remove file
    uploadedFiles.addEventListener('click', function(e) {
      if (e.target.classList.contains('file-remove') || e.target.parentElement.classList.contains('file-remove')) {
        const button = e.target.classList.contains('file-remove') ? e.target : e.target.parentElement;
        const fileElement = button.parentElement;
        fileElement.remove();
        
        // Hide container if empty
        if (uploadedFiles.children.length === 0) {
          uploadedFiles.style.display = 'none';
        }
      }
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/my-reports.ejs

<%- include('../partials/header') %>

<div class="my-reports-container">
  <div class="reports-header">
    <h1 class="reports-title">My Safety Reports</h1>
    
    <a href="/safety/report" class="btn btn-primary">
      <i class="fas fa-plus"></i> New Report
    </a>
  </div>

  <div class="reports-filters">
    <div class="filter-item <%= !filter || filter === 'all' ? 'active' : '' %>" data-filter="all">All Reports</div>
    <div class="filter-item <%= filter === 'pending' ? 'active' : '' %>" data-filter="pending">Pending</div>
    <div class="filter-item <%= filter === 'investigating' ? 'active' : '' %>" data-filter="investigating">Investigating</div>
    <div class="filter-item <%= filter === 'resolved' ? 'active' : '' %>" data-filter="resolved">Resolved</div>
    <div class="filter-item <%= filter === 'closed' ? 'active' : '' %>" data-filter="closed">Closed</div>
  </div>

  <div class="reports-list">
    <% if (reports && reports.length > 0) { %>
      <% reports.forEach(report => { %>
        <div class="report-card">
          <div class="report-header">
            <div class="report-id">#<%= report._id.toString().substring(0, 8) %></div>
            <div class="report-status status-<%= report.status %>">
              <%= report.status.charAt(0).toUpperCase() + report.status.slice(1) %>
            </div>
          </div>
          
          <div class="report-body">
            <h3 class="report-title">
              <%= report.reportType.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) %>
            </h3>
            
            <div class="report-meta">
              <div class="meta-item">
                <i class="fas fa-calendar-alt meta-icon"></i>
                Reported on <%= new Date(report.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </div>
              
              <div class="meta-item">
                <i class="fas fa-calendar-day meta-icon"></i>
                Incident date: <%= new Date(report.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </div>
              
              <% if (report.location) { %>
                <div class="meta-item">
                  <i class="fas fa-map-marker-alt meta-icon"></i>
                  <%= report.location %>
                </div>
              <% } %>
              
              <% if (report.ride) { %>
                <div class="meta-item">
                  <i class="fas fa-car meta-icon"></i>
                  Related to ride #<%= report.ride.toString().substring(0, 8) %>
                </div>
              <% } %>
            </div>
            
            <div class="report-description">
              <%= report.description.length > 150 ? report.description.substring(0, 150) + '...' : report.description %>
            </div>
            
            <div class="report-severity severity-<%= report.severity %>">
              <i class="fas <%= report.severity === 'high' ? 'fa-exclamation-triangle' : (report.severity === 'medium' ? 'fa-exclamation-circle' : 'fa-info-circle') %>"></i>
              <%= report.severity.charAt(0).toUpperCase() + report.severity.slice(1) %> Severity
            </div>
            
            <% if (report.updates && report.updates.length > 0) { %>
              <div class="report-updates">
                <h4 class="updates-title">
                  <i class="fas fa-history update-icon"></i>
                  Recent Updates
                </h4>
                
                <div class="updates-list">
                  <% const latestUpdate = report.updates[report.updates.length - 1]; %>
                  <div class="update-item">
                    <div class="update-timeline">
                      <div class="timeline-dot"></div>
                      <div class="timeline-line"></div>
                    </div>
                    
                    <div class="update-content">
                      <div class="update-header">
                        <div class="update-title"><%= latestUpdate.title %></div>
                        <div class="update-date">
                          <%= new Date(latestUpdate.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) %>
                        </div>
                      </div>
                      
                      <div class="update-text">
                        <%= latestUpdate.message %>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <% } %>
            
            <div class="report-actions">
              <a href="/safety/reports/<%= report._id %>" class="btn btn-primary">View Details</a>
              
              <% if (report.status === 'pending' || report.status === 'investigating') { %>
                <a href="/safety/reports/<%= report._id %>/cancel" class="btn btn-danger" onclick="return confirm('Are you sure you want to cancel this report?')">Cancel Report</a>
              <% } %>
            </div>
          </div>
        </div>
      <% }) %>
      
      <% if (totalPages > 1) { %>
        <div class="pagination">
          <% for (let i = 1; i <= totalPages; i++) { %>
            <a href="?page=<%= i %><%= filter ? '&filter=' + filter : '' %>" class="pagination-button <%= i === currentPage ? 'active' : '' %>">
              <%= i %>
            </a>
          <% } %>
        </div>
      <% } %>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-clipboard-list"></i>
        </div>
        <h3 class="empty-state-text">No reports found</h3>
        <p>You haven't submitted any safety reports yet.</p>
        <a href="/safety/report" class="btn btn-primary">Create a Report</a>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const filterItems = document.querySelectorAll('.filter-item');
    
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        const filter = this.getAttribute('data-filter');
        window.location.href = `/safety/reports?filter=${filter}`;
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/report-details.ejs

<%- include('../partials/header') %>

<div class="report-details-container">
  <div class="details-header">
    <div class="header-title">
      <div class="report-id">Report #<%= report._id.toString() %></div>
      <h1 class="report-title">
        <%= report.reportType.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())

Please make sure to add the following environment variables to your project:

Setup Integrations

Missing Files for Carpooling Application

I'll now generate all the missing files for your carpooling application. I'll focus on creating the view pages that are still needed.

View Pages

views/pages/edit-ride.ejs

<%- include('../partials/header') %>

<div class="edit-ride-container">
  <div class="edit-ride-header">
    <h1 class="edit-ride-title">Edit Your Ride</h1>
    <p class="edit-ride-subtitle">Update your ride details and preferences</p>
  </div>

  <div class="edit-ride-card">
    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <% if (locals.success) { %>
      <div class="alert alert-success">
        <%= success %>
      </div>
    <% } %>

    <form action="/rides/<%= ride._id %>/edit" method="POST" class="edit-ride-form">
      <div class="form-section">
        <h3 class="section-title">Route Information</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="departureCity" class="form-label">Departure City</label>
            <input type="text" id="departureCity" name="departureCity" class="form-control" value="<%= ride.departureCity %>" required>
          </div>

          <div class="form-group">
            <label for="departureAddress" class="form-label">Departure Address</label>
            <input type="text" id="departureAddress" name="departureAddress" class="form-control" value="<%= ride.departureAddress %>" required>
          </div>

          <div class="form-group">
            <label for="destinationCity" class="form-label">Destination City</label>
            <input type="text" id="destinationCity" name="destinationCity" class="form-control" value="<%= ride.destinationCity %>" required>
          </div>

          <div class="form-group">
            <label for="destinationAddress" class="form-label">Destination Address</label>
            <input type="text" id="destinationAddress" name="destinationAddress" class="form-control" value="<%= ride.destinationAddress %>" required>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Stops Along the Way (Optional)</label>
          <div id="stops-container">
            <% if (ride.stops && ride.stops.length > 0) { %>
              <% ride.stops.forEach((stop, index) => { %>
                <div class="stop-item">
                  <input type="text" name="stops[]" class="form-control" value="<%= stop %>" placeholder="Enter city name">
                  <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
                </div>
              <% }) %>
            <% } else { %>
              <div class="stop-item">
                <input type="text" name="stops[]" class="form-control" placeholder="Enter city name">
                <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
              </div>
            <% } %>
          </div>
          <button type="button" id="add-stop-btn" class="btn btn-outline">+ Add Another Stop</button>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Schedule</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="departureDate" class="form-label">Departure Date</label>
            <input type="date" id="departureDate" name="departureDate" class="form-control" value="<%= new Date(ride.departureDate).toISOString().split('T')[0] %>" required>
          </div>

          <div class="form-group">
            <label for="departureTime" class="form-label">Departure Time</label>
            <input type="time" id="departureTime" name="departureTime" class="form-control" value="<%= new Date(ride.departureDate).toTimeString().slice(0, 5) %>" required>
          </div>

          <div class="form-group">
            <label for="estimatedArrival" class="form-label">Estimated Arrival</label>
            <input type="time" id="estimatedArrival" name="estimatedArrival" class="form-control" value="<%= new Date(ride.estimatedArrival).toTimeString().slice(0, 5) %>" required>
          </div>

          <div class="form-group">
            <label for="isRecurring" class="form-label">Is this a recurring ride?</label>
            <select id="isRecurring" name="isRecurring" class="form-control">
              <option value="false" <%= !ride.isRecurring ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.isRecurring ? 'selected' : '' %>>Yes</option>
            </select>
          </div>
        </div>

        <div id="recurring-options" class="<%= !ride.isRecurring ? 'hidden' : '' %>">
          <div class="form-group">
            <label class="form-label">Recurring Days</label>
            <div class="checkbox-group">
              <% const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; %>
              <% days.forEach(day => { %>
                <label class="checkbox-label">
                  <input type="checkbox" name="recurringDays[]" value="<%= day.toLowerCase() %>" 
                    <%= ride.recurringDays && ride.recurringDays.includes(day.toLowerCase()) ? 'checked' : '' %>>
                  <%= day %>
                </label>
              <% }) %>
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Ride Details</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="availableSeats" class="form-label">Available Seats</label>
            <input type="number" id="availableSeats" name="availableSeats" class="form-control" min="1" max="8" value="<%= ride.availableSeats %>" required>
          </div>

          <div class="form-group">
            <label for="pricePerSeat" class="form-label">Price Per Seat ($)</label>
            <input type="number" id="pricePerSeat" name="pricePerSeat" class="form-control" min="0" step="0.01" value="<%= ride.pricePerSeat %>" required>
          </div>

          <div class="form-group">
            <label for="carModel" class="form-label">Car Model</label>
            <input type="text" id="carModel" name="carModel" class="form-control" value="<%= ride.carModel %>" required>
          </div>

          <div class="form-group">
            <label for="carColor" class="form-label">Car Color</label>
            <input type="text" id="carColor" name="carColor" class="form-control" value="<%= ride.carColor %>" required>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Preferences</h3>
        
        <div class="form-grid">
          <div class="form-group">
            <label for="allowSmoking" class="form-label">Allow Smoking?</label>
            <select id="allowSmoking" name="allowSmoking" class="form-control">
              <option value="false" <%= !ride.preferences.allowSmoking ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.preferences.allowSmoking ? 'selected' : '' %>>Yes</option>
            </select>
          </div>

          <div class="form-group">
            <label for="allowPets" class="form-label">Allow Pets?</label>
            <select id="allowPets" name="allowPets" class="form-control">
              <option value="false" <%= !ride.preferences.allowPets ? 'selected' : '' %>>No</option>
              <option value="true" <%= ride.preferences.allowPets ? 'selected' : '' %>>Yes</option>
            </select>
          </div>

          <div class="form-group">
            <label for="allowMusic" class="form-label">Music Preference</label>
            <select id="allowMusic" name="allowMusic" class="form-control">
              <option value="none" <%= ride.preferences.music === 'none' ? 'selected' : '' %>>No music</option>
              <option value="soft" <%= ride.preferences.music === 'soft' ? 'selected' : '' %>>Soft music</option>
              <option value="any" <%= ride.preferences.music === 'any' ? 'selected' : '' %>>Any music</option>
            </select>
          </div>

          <div class="form-group">
            <label for="luggageSize" class="form-label">Maximum Luggage Size</label>
            <select id="luggageSize" name="luggageSize" class="form-control">
              <option value="small" <%= ride.preferences.luggageSize === 'small' ? 'selected' : '' %>>Small (backpack)</option>
              <option value="medium" <%= ride.preferences.luggageSize === 'medium' ? 'selected' : '' %>>Medium (carry-on)</option>
              <option value="large" <%= ride.preferences.luggageSize === 'large' ? 'selected' : '' %>>Large (suitcase)</option>
            </select>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3 class="section-title">Additional Information</h3>
        
        <div class="form-group">
          <label for="description" class="form-label">Description</label>
          <textarea id="description" name="description" class="form-control" rows="4"><%= ride.description %></textarea>
        </div>
      </div>

      <div class="form-actions">
        <a href="/rides/<%= ride._id %>" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Update Ride</button>
      </div>
    </form>
  </div>
</div>

<script>
  // Toggle recurring options
  document.getElementById('isRecurring').addEventListener('change', function() {
    const recurringOptions = document.getElementById('recurring-options');
    if (this.value === 'true') {
      recurringOptions.classList.remove('hidden');
    } else {
      recurringOptions.classList.add('hidden');
    }
  });

  // Add stop functionality
  document.getElementById('add-stop-btn').addEventListener('click', function() {
    const stopsContainer = document.getElementById('stops-container');
    const stopItem = document.createElement('div');
    stopItem.className = 'stop-item';
    stopItem.innerHTML = `
      <input type="text" name="stops[]" class="form-control" placeholder="Enter city name">
      <button type="button" class="remove-stop-btn"><i class="fas fa-times"></i></button>
    `;
    stopsContainer.appendChild(stopItem);
  });

  // Remove stop functionality
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-stop-btn') || e.target.parentElement.classList.contains('remove-stop-btn')) {
      const button = e.target.classList.contains('remove-stop-btn') ? e.target : e.target.parentElement;
      const stopItem = button.parentElement;
      if (document.querySelectorAll('.stop-item').length > 1) {
        stopItem.remove();
      } else {
        stopItem.querySelector('input').value = '';
      }
    }
  });
</script>

<%- include('../partials/footer') %>

views/pages/edit-profile.ejs

<%- include('../partials/header') %>

<div class="edit-profile-container">
  <div class="edit-profile-header">
    <h1 class="edit-profile-title">Edit Your Profile</h1>
    <p class="edit-profile-subtitle">Update your personal information and preferences</p>
  </div>

  <div class="edit-profile-content">
    <div class="profile-sidebar">
      <div class="profile-avatar-section">
        <div class="profile-avatar">
          <% if (user.profileImage) { %>
            <img src="<%= user.profileImage %>" alt="<%= user.firstName %> <%= user.lastName %>" class="avatar-img">
          <% } else { %>
            <div class="avatar-placeholder">
              <%= user.firstName.charAt(0) %><%= user.lastName.charAt(0) %>
            </div>
          <% } %>
        </div>
        <form id="avatar-form" action="/users/profile/avatar" method="POST" enctype="multipart/form-data">
          <label for="avatar-upload" class="avatar-upload-btn">
            <i class="fas fa-camera"></i> Change Photo
          </label>
          <input type="file" id="avatar-upload" name="profileImage" accept="image/*" style="display: none;">
        </form>
      </div>

      <div class="profile-nav">
        <a href="#personal-info" class="profile-nav-item active">
          <i class="fas fa-user"></i> Personal Information
        </a>
        <a href="#contact-info" class="profile-nav-item">
          <i class="fas fa-envelope"></i> Contact Information
        </a>
        <a href="#preferences" class="profile-nav-item">
          <i class="fas fa-sliders-h"></i> Preferences
        </a>
        <a href="#verification" class="profile-nav-item">
          <i class="fas fa-check-circle"></i> Verification
        </a>
        <a href="#security" class="profile-nav-item">
          <i class="fas fa-lock"></i> Security
        </a>
        <a href="#emergency-contacts" class="profile-nav-item">
          <i class="fas fa-phone-alt"></i> Emergency Contacts
        </a>
      </div>
    </div>

    <div class="profile-main">
      <% if (locals.error) { %>
        <div class="alert alert-danger">
          <%= error %>
        </div>
      <% } %>

      <% if (locals.success) { %>
        <div class="alert alert-success">
          <%= success %>
        </div>
      <% } %>

      <form action="/users/profile/edit" method="POST" class="edit-profile-form">
        <div id="personal-info" class="form-section active">
          <h2 class="section-title">Personal Information</h2>
          
          <div class="form-grid">
            <div class="form-group">
              <label for="firstName" class="form-label">First Name</label>
              <input type="text" id="firstName" name="firstName" class="form-control" value="<%= user.firstName %>" required>
            </div>

            <div class="form-group">
              <label for="lastName" class="form-label">Last Name</label>
              <input type="text" id="lastName" name="lastName" class="form-control" value="<%= user.lastName %>" required>
            </div>

            <div class="form-group">
              <label for="dateOfBirth" class="form-label">Date of Birth</label>
              <input type="date" id="dateOfBirth" name="dateOfBirth" class="form-control" value="<%= user.dateOfBirth ? new Date(user.dateOfBirth).toISOString().split('T')[0] : '' %>" required>
            </div>

            <div class="form-group">
              <label for="gender" class="form-label">Gender</label>
              <select id="gender" name="gender" class="form-control">
                <option value="male" <%= user.gender === 'male' ? 'selected' : '' %>>Male</option>
                <option value="female" <%= user.gender === 'female' ? 'selected' : '' %>>Female</option>
                <option value="other" <%= user.gender === 'other' ? 'selected' : '' %>>Other</option>
                <option value="prefer-not-to-say" <%= user.gender === 'prefer-not-to-say' ? 'selected' : '' %>>Prefer not to say</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="bio" class="form-label">Bio</label>
            <textarea id="bio" name="bio" class="form-control" rows="4"><%= user.bio || '' %></textarea>
            <div class="form-hint">Tell other users about yourself (max 500 characters)</div>
          </div>
        </div>

        <div id="contact-info" class="form-section">
          <h2 class="section-title">Contact Information</h2>
          
          <div class="form-grid">
            <div class="form-group">
              <label for="email" class="form-label">Email Address</label>
              <input type="email" id="email" name="email" class="form-control" value="<%= user.email %>" disabled>
              <div class="form-hint">Email cannot be changed. Contact support if needed.</div>
            </div>

            <div class="form-group">
              <label for="phone" class="form-label">Phone Number</label>
              <input type="tel" id="phone" name="phone" class="form-control" value="<%= user.phone || '' %>">
            </div>

            <div class="form-group">
              <label for="city" class="form-label">City</label>
              <input type="text" id="city" name="city" class="form-control" value="<%= user.city || '' %>">
            </div>

            <div class="form-group">
              <label for="country" class="form-label">Country</label>
              <input type="text" id="country" name="country" class="form-control" value="<%= user.country || '' %>">
            </div>
          </div>
        </div>

        <div id="preferences" class="form-section">
          <h2 class="section-title">Preferences</h2>
          
          <div class="form-group">
            <label class="form-label">Communication Preferences</label>
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input type="checkbox" name="emailNotifications" <%= user.preferences && user.preferences.emailNotifications ? 'checked' : '' %>>
                Email Notifications
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="smsNotifications" <%= user.preferences && user.preferences.smsNotifications ? 'checked' : '' %>>
                SMS Notifications
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="pushNotifications" <%= user.preferences && user.preferences.pushNotifications ? 'checked' : '' %>>
                Push Notifications
              </label>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Ride Preferences</label>
            <div class="checkbox-group">
              <label class="checkbox-label">
                <input type="checkbox" name="smokingAllowed" <%= user.preferences && user.preferences.smokingAllowed ? 'checked' : '' %>>
                I'm okay with smoking
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="petsAllowed" <%= user.preferences && user.preferences.petsAllowed ? 'checked' : '' %>>
                I'm okay with pets
              </label>
              <label class="checkbox-label">
                <input type="checkbox" name="musicAllowed" <%= user.preferences && user.preferences.musicAllowed ? 'checked' : '' %>>
                I enjoy music during rides
              </label>
            </div>
          </div>

          <div class="form-group">
            <label for="language" class="form-label">Preferred Language</label>
            <select id="language" name="language" class="form-control">
              <option value="english" <%= user.preferences && user.preferences.language === 'english' ? 'selected' : '' %>>English</option>
              <option value="spanish" <%= user.preferences && user.preferences.language === 'spanish' ? 'selected' : '' %>>Spanish</option>
              <option value="french" <%= user.preferences && user.preferences.language === 'french' ? 'selected' : '' %>>French</option>
              <option value="german" <%= user.preferences && user.preferences.language === 'german' ? 'selected' : '' %>>German</option>
              <option value="chinese" <%= user.preferences && user.preferences.language === 'chinese' ? 'selected' : '' %>>Chinese</option>
            </select>
          </div>
        </div>

        <div id="verification" class="form-section">
          <h2 class="section-title">Verification</h2>
          
          <div class="verification-status">
            <div class="status-item <%= user.verifications && user.verifications.email ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.email ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Email Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.email) { %>
                    Your email has been verified.
                  <% } else { %>
                    Your email is not verified.
                    <a href="/users/verify/email" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.phone ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.phone ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Phone Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.phone) { %>
                    Your phone number has been verified.
                  <% } else { %>
                    Your phone number is not verified.
                    <a href="/users/verify/phone" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.id ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.id ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">ID Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.id) { %>
                    Your ID has been verified.
                  <% } else if (user.verifications && user.verifications.idPending) { %>
                    Your ID verification is pending review.
                  <% } else { %>
                    Your ID is not verified.
                    <a href="/users/verify/id" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>

            <div class="status-item <%= user.verifications && user.verifications.drivingLicense ? 'verified' : 'unverified' %>">
              <div class="status-icon">
                <i class="fas <%= user.verifications && user.verifications.drivingLicense ? 'fa-check-circle' : 'fa-times-circle' %>"></i>
              </div>
              <div class="status-content">
                <h3 class="status-title">Driving License Verification</h3>
                <p class="status-description">
                  <% if (user.verifications && user.verifications.drivingLicense) { %>
                    Your driving license has been verified.
                  <% } else if (user.verifications && user.verifications.drivingLicensePending) { %>
                    Your driving license verification is pending review.
                  <% } else { %>
                    Your driving license is not verified.
                    <a href="/users/verify/driving-license" class="verification-link">Verify now</a>
                  <% } %>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div id="security" class="form-section">
          <h2 class="section-title">Security</h2>
          
          <div class="form-group">
            <label for="currentPassword" class="form-label">Current Password</label>
            <input type="password" id="currentPassword" name="currentPassword" class="form-control">
            <div class="form-hint">Enter your current password to change it</div>
          </div>

          <div class="form-group">
            <label for="newPassword" class="form-label">New Password</label>
            <input type="password" id="newPassword" name="newPassword" class="form-control">
            <div class="form-hint">Leave blank if you don't want to change your password</div>
          </div>

          <div class="form-group">
            <label for="confirmPassword" class="form-label">Confirm New Password</label>
            <input type="password" id="confirmPassword" name="confirmPassword" class="form-control">
          </div>

          <div class="form-group">
            <label class="form-label">Two-Factor Authentication</label>
            <div class="toggle-switch">
              <input type="checkbox" id="twoFactorAuth" name="twoFactorAuth" class="toggle-input" <%= user.security && user.security.twoFactorEnabled ? 'checked' : '' %>>
              <label for="twoFactorAuth" class="toggle-label"></label>
              <span class="toggle-text"><%= user.security && user.security.twoFactorEnabled ? 'Enabled' : 'Disabled' %></span>
            </div>
            <div class="form-hint">Enable two-factor authentication for added security</div>
          </div>
        </div>

        <div id="emergency-contacts" class="form-section">
          <h2 class="section-title">Emergency Contacts</h2>
          
          <div id="emergency-contacts-container">
            <% if (user.emergencyContacts && user.emergencyContacts.length > 0) { %>
              <% user.emergencyContacts.forEach((contact, index) => { %>
                <div class="emergency-contact-item">
                  <div class="form-grid">
                    <div class="form-group">
                      <label class="form-label">Name</label>
                      <input type="text" name="emergencyContactName[]" class="form-control" value="<%= contact.name %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">Relationship</label>
                      <input type="text" name="emergencyContactRelationship[]" class="form-control" value="<%= contact.relationship %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">Phone</label>
                      <input type="tel" name="emergencyContactPhone[]" class="form-control" value="<%= contact.phone %>" required>
                    </div>

                    <div class="form-group">
                      <label class="form-label">&nbsp;</label>
                      <button type="button" class="remove-contact-btn">Remove</button>
                    </div>
                  </div>
                </div>
              <% }) %>
            <% } else { %>
              <div class="emergency-contact-item">
                <div class="form-grid">
                  <div class="form-group">
                    <label class="form-label">Name</label>
                    <input type="text" name="emergencyContactName[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">Relationship</label>
                    <input type="text" name="emergencyContactRelationship[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">Phone</label>
                    <input type="tel" name="emergencyContactPhone[]" class="form-control" required>
                  </div>

                  <div class="form-group">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="remove-contact-btn">Remove</button>
                  </div>
                </div>
              </div>
            <% } %>
          </div>

          <button type="button" id="add-contact-btn" class="btn btn-outline">+ Add Emergency Contact</button>
        </div>

        <div class="form-actions">
          <a href="/users/profile" class="btn btn-secondary">Cancel</a>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // Navigation
  document.querySelectorAll('.profile-nav-item').forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Update active nav item
      document.querySelectorAll('.profile-nav-item').forEach(navItem => {
        navItem.classList.remove('active');
      });
      this.classList.add('active');
      
      // Show corresponding section
      const targetId = this.getAttribute('href').substring(1);
      document.querySelectorAll('.form-section').forEach(section => {
        section.classList.remove('active');
      });
      document.getElementById(targetId).classList.add('active');
    });
  });

  // Profile image upload
  document.getElementById('avatar-upload').addEventListener('change', function() {
    if (this.files && this.files[0]) {
      document.getElementById('avatar-form').submit();
    }
  });

  // Add emergency contact
  document.getElementById('add-contact-btn').addEventListener('click', function() {
    const container = document.getElementById('emergency-contacts-container');
    const newContact = document.createElement('div');
    newContact.className = 'emergency-contact-item';
    newContact.innerHTML = `
      <div class="form-grid">
        <div class="form-group">
          <label class="form-label">Name</label>
          <input type="text" name="emergencyContactName[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">Relationship</label>
          <input type="text" name="emergencyContactRelationship[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">Phone</label>
          <input type="tel" name="emergencyContactPhone[]" class="form-control" required>
        </div>

        <div class="form-group">
          <label class="form-label">&nbsp;</label>
          <button type="button" class="remove-contact-btn">Remove</button>
        </div>
      </div>
    `;
    container.appendChild(newContact);
  });

  // Remove emergency contact
  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-contact-btn')) {
      const contactItem = e.target.closest('.emergency-contact-item');
      if (document.querySelectorAll('.emergency-contact-item').length > 1) {
        contactItem.remove();
      }
    }
  });

  // Toggle two-factor authentication text
  document.getElementById('twoFactorAuth').addEventListener('change', function() {
    const toggleText = this.nextElementSibling.nextElementSibling;
    toggleText.textContent = this.checked ? 'Enabled' : 'Disabled';
  });
</script>

<%- include('../partials/footer') %>

views/pages/pending-verification.ejs

<%- include('../partials/header') %>

<div class="verification-container">
  <div class="verification-header">
    <h1 class="verification-title">Account Verification</h1>
    <p class="verification-subtitle">Complete the verification process to unlock all features of our platform</p>
  </div>

  <div class="verification-status">
    <% if (user.verifications && user.verifications.idPending) { %>
      <div class="status-icon pending">
        <i class="fas fa-clock"></i>
      </div>
      <h2 class="status-title">Verification In Progress</h2>
      <p class="status-message">
        We're currently reviewing your submitted documents. This process typically takes 24-48 hours. 
        We'll notify you by email once the verification is complete.
      </p>
      <a href="/users/dashboard" class="status-action">Go to Dashboard</a>
    <% } else if (user.verifications && user.verifications.idRejected) { %>
      <div class="status-icon rejected">
        <i class="fas fa-times-circle"></i>
      </div>
      <h2 class="status-title">Verification Rejected</h2>
      <p class="status-message">
        Unfortunately, we couldn't verify your identity with the documents provided.
      </p>
      
      <div class="rejection-reason">
        <h3 class="reason-title">Reason for rejection:</h3>
        <p class="reason-text"><%= user.verifications.rejectionReason || 'The provided documents did not meet our verification requirements.' %></p>
      </div>
      
      <p class="status-message">
        Please review the rejection reason and submit new documents.
      </p>
      <a href="#verification-form" class="status-action">Try Again</a>
    <% } else if (user.verifications && user.verifications.id) { %>
      <div class="status-icon approved">
        <i class="fas fa-check-circle"></i>
      </div>
      <h2 class="status-title">Verification Complete</h2>
      <p class="status-message">
        Your identity has been successfully verified. You now have full access to all platform features.
      </p>
      <a href="/users/dashboard" class="status-action">Go to Dashboard</a>
      <a href="/rides/search" class="status-action secondary">Find a Ride</a>
    <% } else { %>
      <div class="status-icon pending">
        <i class="fas fa-user-clock"></i>
      </div>
      <h2 class="status-title">Verification Required</h2>
      <p class="status-message">
        To ensure the safety and trust of our community, we require all users to verify their identity.
        Please complete the verification steps below.
      </p>
    <% } %>
  </div>

  <% if (!(user.verifications && user.verifications.id) && !(user.verifications && user.verifications.idPending)) { %>
    <div class="verification-steps">
      <h2 class="steps-title">Verification Process</h2>
      
      <ul class="steps-list">
        <li class="step-item <%= user.verifications && user.verifications.email ? 'completed' : '' %>">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3 class="step-title">Verify Email Address</h3>
            <p class="step-description">Confirm your email address by clicking the link we sent to your inbox.</p>
            <% if (!(user.verifications && user.verifications.email)) { %>
              <a href="/users/verify/email/resend" class="step-action">Resend Verification Email</a>
            <% } %>
          </div>
        </li>
        
        <li class="step-item <%= user.verifications && user.verifications.phone ? 'completed' : '' %>">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3 class="step-title">Verify Phone Number</h3>
            <p class="step-description">Confirm your phone number by entering the code we sent via SMS.</p>
            <% if (!(user.verifications && user.verifications.phone)) { %>
              <a href="/users/verify/phone" class="step-action">Verify Phone Number</a>
            <% } %>
          </div>
        </li>
        
        <li class="step-item">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3 class="step-title">Identity Verification</h3>
            <p class="step-description">Upload a government-issued ID to verify your identity.</p>
          </div>
        </li>
        
        <li class="step-item <%= user.role === 'driver' && (user.verifications && user.verifications.drivingLicense) ? 'completed' : '' %>">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3 class="step-title">Driver's License Verification</h3>
            <p class="step-description">If you want to offer rides, you'll need to verify your driving license.</p>
            <% if (user.role === 'driver' && !(user.verifications && user.verifications.drivingLicense)) { %>
              <a href="/users/verify/driving-license" class="step-action">Verify Driving License</a>
            <% } %>
          </div>
        </li>
      </ul>
    </div>

    <div id="verification-form" class="verification-form">
      <h2 class="form-title">Identity Verification</h2>
      
      <% if (locals.error) { %>
        <div class="alert alert-danger">
          <%= error %>
        </div>
      <% } %>

      <form action="/users/verify/id" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          <label for="idType" class="form-label">ID Type</label>
          <select id="idType" name="idType" class="form-input" required>
            <option value="">Select ID Type</option>
            <option value="passport">Passport</option>
            <option value="national_id">National ID Card</option>
            <option value="driving_license">Driving License</option>
          </select>
          <div class="form-hint">Choose the type of government-issued ID you'll be uploading</div>
        </div>
        
        <div class="form-group">
          <label for="idNumber" class="form-label">ID Number</label>
          <input type="text" id="idNumber" name="idNumber" class="form-input" required>
          <div class="form-hint">Enter the number shown on your ID document</div>
        </div>
        
        <div class="form-group">
          <label class="form-label">ID Front Side</label>
          <div class="file-upload" id="frontUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Drag and drop your file here or click to browse</div>
            <div class="upload-hint">Supported formats: JPG, PNG, PDF (max 5MB)</div>
            <input type="file" name="idFront" id="idFrontInput" class="file-input" accept=".jpg,.jpeg,.png,.pdf" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">ID Back Side</label>
          <div class="file-upload" id="backUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Drag and drop your file here or click to browse</div>
            <div class="upload-hint">Supported formats: JPG, PNG, PDF (max 5MB)</div>
            <input type="file" name="idBack" id="idBackInput" class="file-input" accept=".jpg,.jpeg,.png,.pdf" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">Selfie with ID</label>
          <div class="file-upload" id="selfieUpload">
            <div class="upload-icon">
              <i class="fas fa-cloud-upload-alt"></i>
            </div>
            <div class="upload-text">Take a photo of yourself holding your ID</div>
            <div class="upload-hint">Make sure both your face and ID are clearly visible</div>
            <input type="file" name="selfie" id="selfieInput" class="file-input" accept=".jpg,.jpeg,.png" required>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-checkbox">
            <input type="checkbox" name="consent" required>
            I confirm that the information provided is accurate and I consent to the processing of my personal data for verification purposes.
          </label>
        </div>
        
        <button type="submit" class="form-submit">Submit for Verification</button>
      </form>
    </div>
  <% } %>
</div>

<script>
  // File upload preview
  function setupFileUpload(inputId, uploadAreaId) {
    const input = document.getElementById(inputId);
    const uploadArea = document.getElementById(uploadAreaId);
    
    uploadArea.addEventListener('click', () => {
      input.click();
    });
    
    uploadArea.addEventListener('dragover', (e) => {
      e.preventDefault();
      uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', () => {
      uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', (e) => {
      e.preventDefault();
      uploadArea.classList.remove('dragover');
      
      if (e.dataTransfer.files.length) {
        input.files = e.dataTransfer.files;
        updateFilePreview(input, uploadArea);
      }
    });
    
    input.addEventListener('change', () => {
      updateFilePreview(input, uploadArea);
    });
  }
  
  function updateFilePreview(input, uploadArea) {
    if (input.files && input.files[0]) {
      const fileName = input.files[0].name;
      const fileSize = (input.files[0].size / 1024 / 1024).toFixed(2); // Convert to MB
      
      // Update upload area to show file info
      uploadArea.innerHTML = `
        <div class="upload-icon">
          <i class="fas fa-file-alt"></i>
        </div>
        <div class="upload-text">${fileName}</div>
        <div class="upload-hint">${fileSize} MB</div>
        <div class="upload-success">
          <i class="fas fa-check-circle"></i> File selected
        </div>
      `;
      
      uploadArea.classList.add('has-file');
    }
  }
  
  // Initialize file uploads
  document.addEventListener('DOMContentLoaded', () => {
    setupFileUpload('idFrontInput', 'frontUpload');
    setupFileUpload('idBackInput', 'backUpload');
    setupFileUpload('selfieInput', 'selfieUpload');
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment.ejs

<%- include('../partials/header') %>

<div class="payment-container">
  <div class="payment-header">
    <h1 class="payment-title">Complete Your Payment</h1>
    <p class="payment-subtitle">Secure payment for your ride booking</p>
  </div>

  <div class="payment-summary">
    <h2 class="summary-title">Booking Summary</h2>
    
    <div class="ride-details">
      <div class="ride-info">
        <div class="ride-route">
          <div class="route-point">
            <div class="route-city"><%= booking.ride.departureCity %></div>
            <div class="route-address"><%= booking.ride.departureAddress %></div>
          </div>
          <div class="route-arrow">
            <i class="fas fa-long-arrow-alt-right"></i>
          </div>
          <div class="route-point">
            <div class="route-city"><%= booking.ride.destinationCity %></div>
            <div class="route-address"><%= booking.ride.destinationAddress %></div>
          </div>
        </div>
        
        <div class="ride-meta">
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-calendar"></i></div>
            <%= new Date(booking.ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
          </div>
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-clock"></i></div>
            <%= new Date(booking.ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
          </div>
          <div class="meta-item">
            <div class="meta-icon"><i class="fas fa-user"></i></div>
            <%= booking.seats %> <%= booking.seats > 1 ? 'seats' : 'seat' %>
          </div>
        </div>
      </div>
      
      <div class="booking-info">
        <h3 class="booking-title">Price Details</h3>
        
        <div class="booking-details">
          <div class="booking-row">
            <div class="booking-label">Price per seat</div>
            <div class="booking-value">$<%= booking.ride.pricePerSeat.toFixed(2) %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Number of seats</div>
            <div class="booking-value"><%= booking.seats %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Subtotal</div>
            <div class="booking-value">$<%= (booking.ride.pricePerSeat * booking.seats).toFixed(2) %></div>
          </div>
          <div class="booking-row">
            <div class="booking-label">Service fee</div>
            <div class="booking-value">$<%= booking.serviceFee.toFixed(2) %></div>
          </div>
          <% if (booking.discount) { %>
            <div class="booking-row">
              <div class="booking-label">Discount</div>
              <div class="booking-value">-$<%= booking.discount.toFixed(2) %></div>
            </div>
          <% } %>
        </div>
        
        <div class="booking-total">
          <div class="total-label">Total</div>
          <div class="total-value">$<%= booking.totalAmount.toFixed(2) %></div>
        </div>
      </div>
    </div>
  </div>

  <div class="payment-methods">
    <h2 class="methods-title">Select Payment Method</h2>
    
    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>
    
    <form action="/payments/process" method="POST" id="payment-form">
      <input type="hidden" name="bookingId" value="<%= booking._id %>">
      
      <div class="methods-list">
        <div class="payment-method" data-method="credit_card">
          <div class="method-icon"><i class="fas fa-credit-card"></i></div>
          <div class="method-name">Credit Card</div>
        </div>
        
        <div class="payment-method" data-method="debit_card">
          <div class="method-icon"><i class="fas fa-credit-card"></i></div>
          <div class="method-name">Debit Card</div>
        </div>
        
        <div class="payment-method" data-method="paypal">
          <div class="method-icon"><i class="fab fa-paypal"></i></div>
          <div class="method-name">PayPal</div>
        </div>
        
        <div class="payment-method" data-method="wallet">
          <div class="method-icon"><i class="fas fa-wallet"></i></div>
          <div class="method-name">Wallet</div>
          <% if (user.wallet && user.wallet.balance) { %>
            <div class="method-balance">Balance: $<%= user.wallet.balance.toFixed(2) %></div>
          <% } %>
        </div>
      </div>
      
      <input type="hidden" name="paymentMethod" id="selected-method" value="">
      
      <div id="credit-card-form" class="payment-form" style="display: none;">
        <div class="form-group">
          <label for="cardName" class="form-label">Name on Card</label>
          <input type="text" id="cardName" name="cardName" class="form-input" placeholder="John Doe">
        </div>
        
        <div class="card-details">
          <div class="form-group">
            <label for="cardNumber" class="form-label">Card Number</label>
            <input type="text" id="cardNumber" name="cardNumber" class="form-input" placeholder="1234 5678 9012 3456">
          </div>
          
          <div class="form-group">
            <label for="cardExpiry" class="form-label">Expiry Date</label>
            <input type="text" id="cardExpiry" name="cardExpiry" class="form-input" placeholder="MM/YY">
          </div>
          
          <div class="form-group">
            <label for="cardCvc" class="form-label">CVC</label>
            <input type="text" id="cardCvc" name="cardCvc" class="form-input" placeholder="123">
          </div>
        </div>
      </div>
      
      <div id="paypal-form" class="payment-form" style="display: none;">
        <p>You will be redirected to PayPal to complete your payment.</p>
      </div>
      
      <div id="wallet-form" class="payment-form" style="display: none;">
        <% if (user.wallet && user.wallet.balance >= booking.totalAmount) { %>
          <p>Your wallet balance is sufficient for this payment.</p>
        <% } else { %>
          <p>Your wallet balance is insufficient. Please add funds or choose another payment method.</p>
          <div class="form-group">
            <a href="/users/wallet/add-funds" class="btn btn-outline">Add Funds to Wallet</a>
          </div>
        <% } %>
      </div>
      
      <div class="payment-actions">
        <a href="/bookings/<%= booking._id %>" class="back-link">
          <span class="back-icon"><i class="fas fa-arrow-left"></i></span>
          Back to Booking
        </a>
        
        <button type="submit" class="pay-button">
          Pay $<%= booking.totalAmount.toFixed(2) %>
        </button>
      </div>
    </form>
  </div>
  
  <div class="payment-security">
    <div class="security-icon"><i class="fas fa-lock"></i></div>
    <div class="security-text">All payments are secure and encrypted. Your payment information is never stored on our servers.</div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const paymentMethods = document.querySelectorAll('.payment-method');
    const selectedMethodInput = document.getElementById('selected-method');
    const creditCardForm = document.getElementById('credit-card-form');
    const paypalForm = document.getElementById('paypal-form');
    const walletForm = document.getElementById('wallet-form');
    const paymentForm = document.getElementById('payment-form');
    
    // Select payment method
    paymentMethods.forEach(method => {
      method.addEventListener('click', function() {
        // Remove active class from all methods
        paymentMethods.forEach(m => m.classList.remove('active'));
        
        // Add active class to selected method
        this.classList.add('active');
        
        // Set selected method value
        const methodValue = this.getAttribute('data-method');
        selectedMethodInput.value = methodValue;
        
        // Show/hide appropriate form
        creditCardForm.style.display = (methodValue === 'credit_card' || methodValue === 'debit_card') ? 'block' : 'none';
        paypalForm.style.display = methodValue === 'paypal' ? 'block' : 'none';
        walletForm.style.display = methodValue === 'wallet' ? 'block' : 'none';
      });
    });
    
    // Form validation
    paymentForm.addEventListener('submit', function(e) {
      const selectedMethod = selectedMethodInput.value;
      
      if (!selectedMethod) {
        e.preventDefault();
        alert('Please select a payment method');
        return;
      }
      
      if (selectedMethod === 'credit_card' || selectedMethod === 'debit_card') {
        const cardName = document.getElementById('cardName').value;
        const cardNumber = document.getElementById('cardNumber').value;
        const cardExpiry = document.getElementById('cardExpiry').value;
        const cardCvc = document.getElementById('cardCvc').value;
        
        if (!cardName || !cardNumber || !cardExpiry || !cardCvc) {
          e.preventDefault();
          alert('Please fill in all card details');
          return;
        }
        
        // Basic card number validation
        if (!/^\d{16}$/.test(cardNumber.replace(/\s/g, ''))) {
          e.preventDefault();
          alert('Please enter a valid card number');
          return;
        }
        
        // Basic expiry date validation
        if (!/^\d{2}\/\d{2}$/.test(cardExpiry)) {
          e.preventDefault();
          alert('Please enter a valid expiry date (MM/YY)');
          return;
        }
        
        // Basic CVC validation
        if (!/^\d{3,4}$/.test(cardCvc)) {
          e.preventDefault();
          alert('Please enter a valid CVC');
          return;
        }
      }
      
      <% if (user.wallet && user.wallet.balance < booking.totalAmount) { %>
        if (selectedMethod === 'wallet') {
          e.preventDefault();
          alert('Your wallet balance is insufficient for this payment');
          return;
        }
      <% } %>
    });
    
    // Format card number with spaces
    const cardNumberInput = document.getElementById('cardNumber');
    cardNumberInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
      let formattedValue = '';
      
      for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) {
          formattedValue += ' ';
        }
        formattedValue += value[i];
      }
      
      e.target.value = formattedValue;
    });
    
    // Format expiry date
    const expiryInput = document.getElementById('cardExpiry');
    expiryInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
      
      if (value.length > 2) {
        value = value.substring(0, 2) + '/' + value.substring(2, 4);
      }
      
      e.target.value = value;
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment-history.ejs

<%- include('../partials/header') %>

<div class="history-container">
  <div class="history-header">
    <h1 class="history-title">Payment History</h1>
    
    <div class="history-actions">
      <button id="filter-toggle" class="filter-button">
        <span class="filter-icon"><i class="fas fa-filter"></i></span>
        Filter
      </button>
      
      <button id="export-button" class="export-button">
        <span class="export-icon"><i class="fas fa-download"></i></span>
        Export
      </button>
    </div>
  </div>

  <div id="filter-panel" class="filter-panel" style="display: none;">
    <form id="filter-form" action="/payments/history" method="GET">
      <div class="filter-form">
        <div class="form-  action="/payments/history" method="GET">
      <div class="filter-form">
        <div class="form-group">
          <label class="form-label">Date Range</label>
          <input type="date" name="startDate" class="form-input" value="<%= filters?.startDate || '' %>">
          <span>to</span>
          <input type="date" name="endDate" class="form-input" value="<%= filters?.endDate || '' %>">
        </div>
        
        <div class="form-group">
          <label class="form-label">Payment Type</label>
          <select name="type" class="form-select">
            <option value="">All Types</option>
            <option value="booking_payment" <%= filters?.type === 'booking_payment' ? 'selected' : '' %>>Booking Payment</option>
            <option value="refund" <%= filters?.type === 'refund' ? 'selected' : '' %>>Refund</option>
            <option value="payout" <%= filters?.type === 'payout' ? 'selected' : '' %>>Payout</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">Status</label>
          <select name="status" class="form-select">
            <option value="">All Statuses</option>
            <option value="completed" <%= filters?.status === 'completed' ? 'selected' : '' %>>Completed</option>
            <option value="pending" <%= filters?.status === 'pending' ? 'selected' : '' %>>Pending</option>
            <option value="failed" <%= filters?.status === 'failed' ? 'selected' : '' %>>Failed</option>
            <option value="refunded" <%= filters?.status === 'refunded' ? 'selected' : '' %>>Refunded</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">Payment Method</label>
          <select name="method" class="form-select">
            <option value="">All Methods</option>
            <option value="credit_card" <%= filters?.method === 'credit_card' ? 'selected' : '' %>>Credit Card</option>
            <option value="debit_card" <%= filters?.method === 'debit_card' ? 'selected' : '' %>>Debit Card</option>
            <option value="paypal" <%= filters?.method === 'paypal' ? 'selected' : '' %>>PayPal</option>
            <option value="wallet" <%= filters?.method === 'wallet' ? 'selected' : '' %>>Wallet</option>
            <option value="bank_transfer" <%= filters?.method === 'bank_transfer' ? 'selected' : '' %>>Bank Transfer</option>
          </select>
        </div>
      </div>
      
      <div class="filter-actions">
        <button type="reset" class="reset-button">Reset</button>
        <button type="submit" class="apply-button">Apply Filters</button>
      </div>
    </form>
  </div>

  <div class="payments-list">
    <% if (payments && payments.length > 0) { %>
      <table class="payment-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Type</th>
            <th>Method</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% payments.forEach(payment => { %>
            <tr>
              <td class="payment-date">
                <%= new Date(payment.paymentDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </td>
              <td>
                <%= payment.description || `Payment for booking #${payment.booking.toString().substring(0, 8)}` %>
                <div class="payment-id">#<%= payment._id.toString().substring(0, 8) %></div>
              </td>
              <td>
                <span class="payment-type type-<%= payment.type === 'refund' ? 'refund' : 'payment' %>">
                  <%= payment.type.replace('_', ' ').charAt(0).toUpperCase() + payment.type.replace('_', ' ').slice(1) %>
                </span>
              </td>
              <td>
                <%= payment.method.replace('_', ' ').charAt(0).toUpperCase() + payment.method.replace('_', ' ').slice(1) %>
              </td>
              <td class="payment-amount <%= payment.type === 'refund' ? 'amount-negative' : 'amount-positive' %>">
                <%= payment.type === 'refund' ? '-' : '' %>$<%= payment.amount.toFixed(2) %>
              </td>
              <td>
                <span class="payment-status status-<%= payment.status %>">
                  <%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %>
                </span>
              </td>
              <td>
                <div class="payment-actions">
                  <a href="/payments/<%= payment._id %>" class="action-button action-view" title="View Details">
                    <i class="fas fa-eye"></i>
                  </a>
                  <a href="/payments/<%= payment._id %>/receipt" class="action-button action-download" title="Download Receipt">
                    <i class="fas fa-file-download"></i>
                  </a>
                </div>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
      
      <div class="pagination">
        <div class="pagination-info">
          Showing <%= (page - 1) * limit + 1 %> to <%= Math.min(page * limit, totalPayments) %> of <%= totalPayments %> payments
        </div>
        
        <div class="pagination-controls">
          <% if (page > 1) { %>
            <a href="?page=<%= page - 1 %><%= queryString %>" class="pagination-button">
              <i class="fas fa-chevron-left"></i>
            </a>
          <% } else { %>
            <span class="pagination-button disabled">
              <i class="fas fa-chevron-left"></i>
            </span>
          <% } %>
          
          <% for (let i = 1; i <= totalPages; i++) { %>
            <a href="?page=<%= i %><%= queryString %>" class="pagination-button <%= i === page ? 'active' : '' %>">
              <%= i %>
            </a>
          <% } %>
          
          <% if (page < totalPages) { %>
            <a href="?page=<%= page + 1 %><%= queryString %>" class="pagination-button">
              <i class="fas fa-chevron-right"></i>
            </a>
          <% } else { %>
            <span class="pagination-button disabled">
              <i class="fas fa-chevron-right"></i>
            </span>
          <% } %>
        </div>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-receipt"></i>
        </div>
        <h3 class="empty-state-title">No payments found</h3>
        <p class="empty-state-description">
          You don't have any payment records yet. They will appear here once you make or receive payments.
        </p>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Toggle filter panel
    const filterToggle = document.getElementById('filter-toggle');
    const filterPanel = document.getElementById('filter-panel');
    
    filterToggle.addEventListener('click', function() {
      if (filterPanel.style.display === 'none') {
        filterPanel.style.display = 'block';
      } else {
        filterPanel.style.display = 'none';
      }
    });
    
    // Export functionality
    const exportButton = document.getElementById('export-button');
    
    exportButton.addEventListener('click', function() {
      const format = prompt('Select export format (csv, pdf):', 'csv');
      
      if (format && (format.toLowerCase() === 'csv' || format.toLowerCase() === 'pdf')) {
        window.location.href = `/payments/export?format=${format.toLowerCase()}<%= queryString %>`;
      }
    });
    
    // Reset form
    const filterForm = document.getElementById('filter-form');
    
    filterForm.addEventListener('reset', function() {
      setTimeout(() => {
        filterForm.submit();
      }, 10);
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/payment-receipt.ejs

<%- include('../partials/header') %>

<div class="receipt-container">
  <div class="receipt-card">
    <div class="receipt-header">
      <div class="receipt-logo">
        <img src="/img/logo.png" alt="Logo" height="40">
      </div>
      <h1 class="receipt-title">Payment Receipt</h1>
      <p class="receipt-subtitle">Thank you for your payment</p>
      
      <div class="receipt-status">
        <%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %>
      </div>
    </div>
    
    <div class="receipt-body">
      <div class="receipt-section">
        <h2 class="section-title">Payment Information</h2>
        
        <div class="receipt-grid">
          <div class="receipt-item">
            <div class="item-label">Payment ID</div>
            <div class="item-value">#<%= payment._id.toString() %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Date</div>
            <div class="item-value"><%= payment.formattedDate %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Payment Method</div>
            <div class="item-value">
              <%= payment.method.replace('_', ' ').charAt(0).toUpperCase() + payment.method.replace('_', ' ').slice(1) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Status</div>
            <div class="item-value"><%= payment.status.charAt(0).toUpperCase() + payment.status.slice(1) %></div>
          </div>
        </div>
      </div>
      
      <div class="receipt-section">
        <h2 class="section-title">Ride Details</h2>
        
        <div class="receipt-ride">
          <div class="ride-point">
            <div class="point-label">From</div>
            <div class="point-value"><%= booking.ride.departureCity %></div>
          </div>
          
          <div class="ride-arrow">
            <i class="fas fa-long-arrow-alt-right"></i>
          </div>
          
          <div class="ride-point">
            <div class="point-label">To</div>
            <div class="point-value"><%= booking.ride.destinationCity %></div>
          </div>
        </div>
        
        <div class="receipt-grid">
          <div class="receipt-item">
            <div class="item-label">Departure Date</div>
            <div class="item-value">
              <%= new Date(booking.ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Departure Time</div>
            <div class="item-value">
              <%= new Date(booking.ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
            </div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Seats</div>
            <div class="item-value"><%= booking.seats %></div>
          </div>
          
          <div class="receipt-item">
            <div class="item-label">Booking ID</div>
            <div class="item-value">#<%= booking._id.toString() %></div>
          </div>
        </div>
      </div>
      
      <div class="receipt-section">
        <h2 class="section-title">Payment Details</h2>
        
        <div class="receipt-details">
          <div class="detail-row">
            <div class="detail-label">Price per seat</div>
            <div class="detail-value">$<%= booking.ride.pricePerSeat.toFixed(2) %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Number of seats</div>
            <div class="detail-value"><%= booking.seats %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Subtotal</div>
            <div class="detail-value">$<%= (booking.ride.pricePerSeat * booking.seats).toFixed(2) %></div>
          </div>
          
          <div class="detail-row">
            <div class="detail-label">Service fee</div>
            <div class="detail-value">$<%= booking.serviceFee.toFixed(2) %></div>
          </div>
          
          <% if (booking.discount) { %>
            <div class="detail-row">
              <div class="detail-label">Discount</div>
              <div class="detail-value">-$<%= booking.discount.toFixed(2) %></div>
            </div>
          <% } %>
        </div>
        
        <div class="receipt-total">
          <div class="total-label">Total Amount</div>
          <div class="total-value">$<%= payment.amount.toFixed(2) %></div>
        </div>
      </div>
      
      <div class="receipt-qr">
        <div class="qr-code">
          <img src="/api/qr-code?data=<%= payment._id.toString() %>" alt="QR Code" width="150" height="150">
        </div>
        <div class="qr-text">Scan to verify payment</div>
      </div>
    </div>
    
    <div class="receipt-footer">
      <div class="footer-text">
        This is an electronic receipt for your payment. Please keep it for your records.
      </div>
      
      <div class="footer-contact">
        If you have any questions, please contact us at support@carpooling.com
      </div>
    </div>
  </div>
  
  <div class="receipt-actions">
    <a href="/payments/history" class="btn btn-secondary">Back to Payment History</a>
    <a href="/payments/<%= payment._id %>/receipt/download" class="btn btn-primary">Download Receipt</a>
  </div>
</div>

<%- include('../partials/footer') %>

views/pages/feedback.ejs

<%- include('../partials/header') %>

<div class="feedback-container">
  <div class="feedback-header">
    <h1 class="feedback-title">Rate Your Ride</h1>
    <p class="feedback-subtitle">Your feedback helps improve our community</p>
  </div>

  <div class="feedback-card">
    <div class="ride-summary">
      <% if (ride.driver.profileImage) { %>
        <img src="<%= ride.driver.profileImage %>" alt="<%= ride.driver.firstName %> <%= ride.driver.lastName %>" class="ride-avatar">
      <% } else { %>
        <div class="ride-avatar">
          <%= ride.driver.firstName.charAt(0) %><%= ride.driver.lastName.charAt(0) %>
        </div>
      <% } %>
      
      <div class="ride-details">
        <div class="ride-route">
          <%= ride.departureCity %> to <%= ride.destinationCity %>
        </div>
        
        <div class="ride-meta">
          <div class="ride-date">
            <%= new Date(ride.departureDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) %>
          </div>
          <div class="ride-time">
            <%= new Date(ride.departureDate).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) %>
          </div>
          <div class="ride-driver">
            Driver: <%= ride.driver.firstName %> <%= ride.driver.lastName %>
          </div>
        </div>
      </div>
    </div>

    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <form action="/feedback/submit" method="POST" class="feedback-form">
      <input type="hidden" name="rideId" value="<%= ride._id %>">
      <input type="hidden" name="bookingId" value="<%= booking._id %>">
      
      <div class="rating-section">
        <h2 class="section-title">Overall Rating</h2>
        
        <div class="rating-stars">
          <% for (let i = 5; i >= 1; i--) { %>
            <input type="radio" name="rating" value="<%= i %>" id="star<%= i %>" class="star-input" <%= i === 5 ? 'checked' : '' %>>
            <label for="star<%= i %>" class="star-label">
              <%= i %> stars
            </label>
            <i class="fas fa-star star-icon"></i>
          <% } %>
        </div>
        
        <div class="rating-labels">
          <span>Poor</span>
          <span>Excellent</span>
        </div>
      </div>

      <div class="category-ratings">
        <h2 class="section-title">Rate Specific Aspects</h2>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Punctuality</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="punctuality">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="punctuality" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Cleanliness</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="cleanliness">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="cleanliness" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Comfort</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="comfort">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="comfort" value="5">
        </div>
        
        <div class="category-item">
          <div class="category-label">
            <span class="category-name">Safety</span>
            <span class="category-value">5</span>
          </div>
          <div class="category-stars" data-category="safety">
            <% for (let i = 1; i <= 5; i++) { %>
              <i class="fas fa-star category-star <%= i <= 5 ? 'active' : '' %>" data-value="<%= i %>"></i>
            <% } %>
          </div>
          <input type="hidden" name="safety" value="5">
        </div>
      </div>

      <div class="form-group">
        <label for="comment" class="form-label">Your Comments</label>
        <textarea id="comment" name="comment" class="form-control" rows="4" placeholder="Share your experience with this ride..."></textarea>
      </div>

      <div class="feedback-tags">
        <h2 class="section-title">What did you like?</h2>
        
        <div class="tags-list">
          <input type="checkbox" id="tag1" name="tags[]" value="friendly_driver" class="tag-item">
          <label for="tag1" class="tag-label">Friendly Driver</label>
          
          <input type="checkbox" id="tag2" name="tags[]" value="clean_car" class="tag-item">
          <label for="tag2" class="tag-label">Clean Car</label>
          
          <input type="checkbox" id="tag3" name="tags[]" value="good_conversation" class="tag-item">
          <label for="tag3" class="tag-label">Good Conversation</label>
          
          <input type="checkbox" id="tag4" name="tags[]" value="punctual" class="tag-item">
          <label for="tag4" class="tag-label">Punctual</label>
          
          <input type="checkbox" id="tag5" name="tags[]" value="safe_driving" class="tag-item">
          <label for="tag5" class="tag-label">Safe Driving</label>
          
          <input type="checkbox" id="tag6" name="tags[]" value="comfortable" class="tag-item">
          <label for="tag6" class="tag-label">Comfortable</label>
          
          <input type="checkbox" id="tag7" name="tags[]" value="good_music" class="tag-item">
          <label for="tag7" class="tag-label">Good Music</label>
          
          <input type="checkbox" id="tag8" name="tags[]" value="helpful" class="tag-item">
          <label for="tag8" class="tag-label">Helpful</label>
        </div>
      </div>

      <div class="feedback-actions">
        <p class="feedback-note">Your feedback will be visible to the driver and other users.</p>
        <button type="submit" class="btn btn-primary">Submit Feedback</button>
      </div>
    </form>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Handle category ratings
    const categoryStars = document.querySelectorAll('.category-stars');
    
    categoryStars.forEach(starsContainer => {
      const stars = starsContainer.querySelectorAll('.category-star');
      const category = starsContainer.getAttribute('data-category');
      const valueDisplay = starsContainer.parentElement.querySelector('.category-value');
      const hiddenInput = starsContainer.parentElement.querySelector(`input[name="${category}"]`);
      
      stars.forEach(star => {
        star.addEventListener('click', function() {
          const value = parseInt(this.getAttribute('data-value'));
          
          // Update hidden input
          hiddenInput.value = value;
          
          // Update display value
          valueDisplay.textContent = value;
          
          // Update stars
          stars.forEach(s => {
            const starValue = parseInt(s.getAttribute('data-value'));
            if (starValue <= value) {
              s.classList.add('active');
            } else {
              s.classList.remove('active');
            }
          });
        });
        
        star.addEventListener('mouseover', function() {
          const value = parseInt(this.getAttribute('data-value'));
          
          stars.forEach(s => {
            const starValue = parseInt(s.getAttribute('data-value'));
            if (starValue <= value) {
              s.classList.add('hover');
            } else {
              s.classList.remove('hover');
            }
          });
        });
        
        star.addEventListener('mouseout', function() {
          stars.forEach(s => {
            s.classList.remove('hover');
          });
        });
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/user-feedback.ejs

<%- include('../partials/header') %>

<div class="user-feedback-container">
  <div class="feedback-header">
    <h1 class="feedback-title">
      <% if (isOwnProfile) { %>
        My Feedback
      <% } else { %>
        Feedback for <%= user.firstName %> <%= user.lastName %>
      <% } %>
    </h1>
    <p class="feedback-subtitle">
      <% if (isOwnProfile) { %>
        See what others are saying about you
      <% } else { %>
        See what others are saying about <%= user.firstName %>
      <% } %>
    </p>
  </div>

  <div class="rating-summary">
    <div class="rating-overall">
      <div class="rating-value"><%= averageRating.toFixed(1) %></div>
      <div class="rating-stars">
        <% for (let i = 1; i <= 5; i++) { %>
          <i class="fas fa-star rating-star <%= i <= Math.round(averageRating) ? '' : 'far' %>"></i>
        <% } %>
      </div>
      <div class="rating-count"><%= totalFeedbacks %> reviews</div>
    </div>
    
    <div class="rating-breakdown">
      <h3 class="breakdown-title">Rating Breakdown</h3>
      
      <div class="breakdown-item">
        <div class="breakdown-label">5 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[5] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[5] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">4 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[4] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[4] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">3 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[3] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[3] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">2 Stars</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[2] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[2] || 0 %></div>
      </div>
      
      <div class="breakdown-item">
        <div class="breakdown-label">1 Star</div>
        <div class="breakdown-bar">
          <div class="bar-fill" style="width: <%= (ratingCounts[1] / totalFeedbacks * 100) || 0 %>%;"></div>
        </div>
        <div class="breakdown-value"><%= ratingCounts[1] || 0 %></div>
      </div>
    </div>
  </div>

  <div class="feedback-filters">
    <button class="filter-button active" data-filter="all">All</button>
    <button class="filter-button" data-filter="5">5 Stars</button>
    <button class="filter-button" data-filter="4">4 Stars</button>
    <button class="filter-button" data-filter="3">3 Stars</button>
    <button class="filter-button" data-filter="2">2 Stars</button>
    <button class="filter-button" data-filter="1">1 Star</button>
  </div>

  <div class="feedback-list">
    <% if (feedbacks && feedbacks.length > 0) { %>
      <% feedbacks.forEach(feedback => { %>
        <div class="feedback-card" data-rating="<%= feedback.rating %>">
          <div class="feedback-header">
            <div class="feedback-user">
              <% if (feedback.reviewer.profileImage) { %>
                <img src="<%= feedback.reviewer.profileImage %>" alt="<%= feedback.reviewer.firstName %> <%= feedback.reviewer.lastName %>" class="user-avatar">
              <% } else { %>
                <div class="user-avatar">
                  <%= feedback.reviewer.firstName.charAt(0) %><%= feedback.reviewer.lastName.charAt(0) %>
                </div>
              <% } %>
              
              <div class="user-info">
                <div class="user-name"><%= feedback.reviewer.firstName %> <%= feedback.reviewer.lastName %></div>
                <div class="feedback-date"><%= new Date(feedback.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %></div>
              </div>
            </div>
            
            <div class="feedback-rating">
              <div class="rating-badge">
                <span class="badge-icon"><i class="fas fa-star"></i></span>
                <%= feedback.rating %>.0
              </div>
              
              <div class="feedback-stars">
                <% for (let i = 1; i <= 5; i++) { %>
                  <i class="fas fa-star feedback-star <%= i <= feedback.rating ? '' : 'far' %>"></i>
                <% } %>
              </div>
            </div>
          </div>
          
          <div class="feedback-content">
            <%= feedback.comment %>
          </div>
          
          <% if (feedback.tags && feedback.tags.length > 0) { %>
            <div class="feedback-tags">
              <% feedback.tags.forEach(tag => { %>
                <span class="feedback-tag"><%= tag.replace('_', ' ') %></span>
              <% }) %>
            </div>
          <% } %>
          
          <div class="feedback-ride">
            <span class="ride-icon"><i class="fas fa-car"></i></span>
            Ride from <%= feedback.ride.departureCity %> to <%= feedback.ride.destinationCity %> on 
            <%= new Date(feedback.ride.departureDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) %>
          </div>
        </div>
      <% }) %>
      
      <div class="pagination">
        <% for (let i = 1; i <= totalPages; i++) { %>
          <a href="?page=<%= i %>" class="pagination-button <%= i === currentPage ? 'active' : '' %>"><%= i %></a>
        <% } %>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-comment-alt"></i>
        </div>
        <h3 class="empty-state-title">No feedback yet</h3>
        <p class="empty-state-description">
          <% if (isOwnProfile) { %>
            You haven't received any feedback yet. Feedback will appear here after your rides.
          <% } else { %>
            <%= user.firstName %> hasn't received any feedback yet.
          <% } %>
        </p>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const filterButtons = document.querySelectorAll('.filter-button');
    const feedbackCards = document.querySelectorAll('.feedback-card');
    
    filterButtons.forEach(button => {
      button.addEventListener('click', function() {
        // Update active button
        filterButtons.forEach(btn => btn.classList.remove('active'));
        this.classList.add('active');
        
        // Get filter value
        const filter = this.getAttribute('data-filter');
        
        // Filter feedback cards
        feedbackCards.forEach(card => {
          if (filter === 'all' || card.getAttribute('data-rating') === filter) {
            card.style.display = 'block';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/safety.ejs

<%- include('../partials/header') %>

<div class="safety-container">
  <div class="safety-header">
    <h1 class="safety-title">Safety Center</h1>
    <p class="safety-subtitle">Your safety is our top priority. Learn about the features and guidelines we've implemented to ensure a safe experience for everyone.</p>
  </div>

  <div class="safety-grid">
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-shield-alt"></i>
      </div>
      <h2 class="card-title">Rider Verification</h2>
      <p class="card-description">
        All users must verify their identity through our multi-step verification process, including email, phone, and ID verification.
      </p>
      <a href="/safety/verification" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-car"></i>
      </div>
      <h2 class="card-title">Driver Screening</h2>
      <p class="card-description">
        Drivers undergo additional verification, including driving license checks and vehicle inspections to ensure safety standards.
      </p>
      <a href="/safety/driver-screening" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-comments"></i>
      </div>
      <h2 class="card-title">Community Ratings</h2>
      <p class="card-description">
        Our rating system helps maintain high standards. Users with consistently low ratings may be removed from the platform.
      </p>
      <a href="/safety/ratings" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
    
    <div class="safety-card">
      <div class="card-icon">
        <i class="fas fa-phone-alt"></i>
      </div>
      <h2 class="card-title">Emergency Assistance</h2>
      <p class="card-description">
        Access emergency services directly from our app with the SOS button, which shares your location with emergency contacts.
      </p>
      <a href="/safety/emergency" class="card-link">Learn more <i class="fas fa-arrow-right"></i></a>
    </div>
  </div>

  <div class="safety-features">
    <h2 class="features-title">Safety Features</h2>
    
    <div class="features-list">
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-user-check"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Profile Verification</h3>
          <p class="feature-description">
            We verify all users' identities through multiple methods, including email, phone, and government ID verification.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-share-alt"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Trip Sharing</h3>
          <p class="feature-description">
            Share your trip details and real-time location with trusted contacts for added peace of mind.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-comment-alt"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">In-app Communication</h3>
          <p class="feature-description">
            Communicate with other users through our platform without sharing personal contact information.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-exclamation-triangle"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Incident Reporting</h3>
          <p class="feature-description">
            Easily report safety concerns or incidents through our dedicated reporting system.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-bell"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Safety Alerts</h3>
          <p class="feature-description">
            Receive real-time notifications about safety issues or concerns in your area.
          </p>
        </div>
      </div>
      
      <div class="feature-item">
        <div class="feature-icon">
          <i class="fas fa-clipboard-check"></i>
        </div>
        <div class="feature-content">
          <h3 class="feature-title">Safety Checklist</h3>
          <p class="feature-description">
            Pre-ride safety reminders and checklist to ensure a safe journey for everyone.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="safety-cta">
    <h2 class="cta-title">Safety is a Shared Responsibility</h2>
    <p class="cta-description">
      While we implement robust safety measures, we encourage all users to follow safety guidelines and use common sense when carpooling.
    </p>
    <a href="/safety/guidelines" class="btn btn-primary">View Safety Guidelines</a>
  </div>

  <div class="safety-faq">
    <h2 class="faq-title">Safety FAQs</h2>
    
    <div class="faq-list">
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">How does the verification process work?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          Our verification process includes multiple steps: email verification, phone verification, and ID verification. For drivers, we also verify driving licenses. This helps ensure that all users on our platform are who they claim to be.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">What should I do if I feel unsafe during a ride?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          If you ever feel unsafe during a ride, you can use the SOS button in the app to contact emergency services. You can also share your trip with trusted contacts who can monitor your journey in real-time. If possible, exit the vehicle at a safe, public location.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">How do I report a safety concern or incident?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          You can report safety concerns or incidents through the app by going to the ride details and selecting "Report an Issue." For urgent matters, use the SOS button. You can also contact our support team directly through the Help Center.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">Can I see the safety rating of a driver before booking?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          Yes, you can see the overall rating of any driver before booking a ride. This includes specific feedback related to safety from previous passengers. We encourage users to review this information before making a booking.
        </div>
      </div>
      
      <div class="faq-item">
        <div class="faq-question">
          <span class="question-text">What safety measures are in place for COVID-19?</span>
          <i class="fas fa-chevron-down question-icon"></i>
        </div>
        <div class="faq-answer">
          We've implemented several COVID-19 safety measures, including mask requirements, vehicle sanitization guidelines, and reduced capacity recommendations. Users can also indicate their comfort level with these measures in their profiles.
        </div>
      </div>
    </div>
  </div>

  <div class="emergency-section">
    <h2 class="emergency-title">Emergency Contact Information</h2>
    <p class="emergency-description">
      In case of an emergency during your ride, please contact the appropriate emergency services in your area.
    </p>
    
    <div class="emergency-number">
      <div class="number-icon">
        <i class="fas fa-phone-alt"></i>
      </div>
      <div class="number-content">
        <div class="number-label">Emergency Services</div>
        <div class="number-value">911</div>
      </div>
    </div>
    
    <div class="emergency-number">
      <div class="number-icon">
        <i class="fas fa-headset"></i>
      </div>
      <div class="number-content">
        <div class="number-label">24/7 Support Hotline</div>
        <div class="number-value">1-800-CARPOOL</div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // FAQ accordion functionality
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');
      
      question.addEventListener('click', function() {
        // Toggle active class
        item.classList.toggle('active');
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/report.ejs

<%- include('../partials/header') %>

<div class="report-container">
  <div class="report-header">
    <h1 class="report-title">Report a Safety Concern</h1>
    <p class="report-subtitle">Your safety is our priority. Please provide details about your concern.</p>
  </div>

  <div class="report-card">
    <div class="report-notice">
      <h3 class="notice-title">
        <i class="fas fa-exclamation-circle notice-icon"></i>
        Important Information
      </h3>
      <p class="notice-text">
        For emergencies requiring immediate assistance, please contact local emergency services at 911 before submitting this report.
        This form is for reporting safety concerns that do not require immediate attention.
      </p>
    </div>

    <% if (locals.error) { %>
      <div class="alert alert-danger">
        <%= error %>
      </div>
    <% } %>

    <% if (locals.success) { %>
      <div class="alert alert-success">
        <%= success %>
      </div>
    <% } %>

    <form action="/safety/report" method="POST" enctype="multipart/form-data" class="report-form">
      <div class="form-group">
        <label for="reportType" class="form-label">Type of Report</label>
        <select id="reportType" name="reportType" class="form-select" required>
          <option value="">Select report type</option>
          <option value="unsafe_driving">Unsafe Driving</option>
          <option value="harassment">Harassment or Inappropriate Behavior</option>
          <option value="vehicle_issue">Vehicle Safety Issue</option>
          <option value="accident">Accident</option>
          <option value="covid_violation">COVID-19 Safety Violation</option>
          <option value="other">Other Safety Concern</option>
        </select>
      </div>

      <div class="form-group">
        <label for="relatedRide" class="form-label">Related Ride (if applicable)</label>
        <select id="relatedRide" name="relatedRide" class="form-select">
          <option value="">Select a ride</option>
          <% if (rides && rides.length > 0) { %>
            <% rides.forEach(ride => { %>
              <option value="<%= ride._id %>">
                <%= ride.departureCity %> to <%= ride.destinationCity %> - 
                <%= new Date(ride.departureDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) %>
              </option>
            <% }) %>
          <% } %>
        </select>
        <div class="form-help">If your report is related to a specific ride, please select it from the list.</div>
      </div>

      <div class="form-group">
        <label for="involvedUser" class="form-label">User Involved (if applicable)</label>
        <input type="text" id="involvedUser" name="involvedUser" class="form-control" placeholder="Enter username or email">
        <div class="form-help">If your report involves a specific user, please provide their username or email.</div>
      </div>

      <div class="report-severity">
        <h3 class="severity-title">Severity Level</h3>
        
        <div class="severity-options">
          <div class="severity-option severity-low">
            <input type="radio" id="severityLow" name="severity" value="low" class="severity-input">
            <label for="severityLow" class="severity-label">
              <div class="severity-icon"><i class="fas fa-info-circle"></i></div>
              <div class="severity-text">Low</div>
              <div class="severity-desc">Minor concern, no immediate danger</div>
            </label>
          </div>
          
          <div class="severity-option severity-medium">
            <input type="radio" id="severityMedium" name="severity" value="medium" class="severity-input" checked>
            <label for="severityMedium" class="severity-label">
              <div class="severity-icon"><i class="fas fa-exclamation-circle"></i></div>
              <div class="severity-text">Medium</div>
              <div class="severity-desc">Concerning issue that needs attention</div>
            </label>
          </div>
          
          <div class="severity-option severity-high">
            <input type="radio" id="severityHigh" name="severity" value="high" class="severity-input">
            <label for="severityHigh" class="severity-label">
              <div class="severity-icon"><i class="fas fa-exclamation-triangle"></i></div>
              <div class="severity-text">High</div>
              <div class="severity-desc">Serious issue requiring urgent review</div>
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="description" class="form-label">Description of the Incident</label>
        <textarea id="description" name="description" class="form-textarea" rows="6" required placeholder="Please provide a detailed description of what happened..."></textarea>
        <div class="form-help">Be as specific as possible. Include dates, times, locations, and any other relevant details.</div>
      </div>

      <div class="form-group">
        <label for="date" class="form-label">Date of Incident</label>
        <input type="date" id="date" name="date" class="form-control" required max="<%= new Date().toISOString().split('T')[0] %>">
      </div>

      <div class="form-group">
        <label for="location" class="form-label">Location (if applicable)</label>
        <input type="text" id="location" name="location" class="form-control" placeholder="Enter the location where the incident occurred">
      </div>

      <div class="form-group">
        <label class="form-label">Evidence (Optional)</label>
        <div class="file-upload" id="evidenceUpload">
          <div class="upload-icon">
            <i class="fas fa-cloud-upload-alt"></i>
          </div>
          <div class="upload-text">Drag and drop files here or click to browse</div>
          <div class="upload-hint">You can upload photos, videos, or documents (max 5 files, 10MB each)</div>
          <input type="file" name="evidence" id="evidenceInput" class="upload-input" multiple accept=".jpg,.jpeg,.png,.pdf,.mp4,.mov">
        </div>
        
        <div class="uploaded-files" id="uploadedFiles"></div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" id="contactConsent" name="contactConsent" class="form-check-input" required>
          <label for="contactConsent" class="form-check-label">
            I consent to be contacted by the safety team regarding this report if necessary.
          </label>
        </div>
      </div>

      <div class="form-group">
        <div class="form-check">
          <input type="checkbox" id="truthConsent" name="truthConsent" class="form-check-input" required>
          <label for="truthConsent" class="form-check-label">
            I confirm that the information provided in this report is true and accurate to the best of my knowledge.
          </label>
        </div>
      </div>

      <div class="report-actions">
        <a href="/safety" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Submit Report</button>
      </div>
    </form>

    <p class="report-disclaimer">
      We take all safety reports seriously and will investigate your concern as soon as possible. 
      You will receive a confirmation email once your report has been submitted, and we will keep you updated on the status of your report.
    </p>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // File upload handling
    const evidenceInput = document.getElementById('evidenceInput');
    const uploadedFiles = document.getElementById('uploadedFiles');
    const evidenceUpload = document.getElementById('evidenceUpload');
    
    evidenceUpload.addEventListener('click', function() {
      evidenceInput.click();
    });
    
    evidenceUpload.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('dragover');
    });
    
    evidenceUpload.addEventListener('dragleave', function() {
      this.classList.remove('dragover');
    });
    
    evidenceUpload.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('dragover');
      
      if (e.dataTransfer.files.length) {
        handleFiles(e.dataTransfer.files);
      }
    });
    
    evidenceInput.addEventListener('change', function() {
      if (this.files.length) {
        handleFiles(this.files);
      }
    });
    
    function handleFiles(files) {
      // Clear previous files
      uploadedFiles.innerHTML = '';
      
      // Check file count
      if (files.length > 5) {
        alert('You can upload a maximum of 5 files.');
        return;
      }
      
      // Process each file
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        
        // Check file size
        if (file.size > 10 * 1024 * 1024) {
          alert(`File "${file.name}" exceeds the 10MB size limit.`);
          continue;
        }
        
        // Create file element
        const fileElement = document.createElement('div');
        fileElement.className = 'uploaded-file';
        
        // Determine file icon
        let fileIcon = 'fa-file';
        if (file.type.startsWith('image/')) {
          fileIcon = 'fa-file-image';
        } else if (file.type.startsWith('video/')) {
          fileIcon = 'fa-file-video';
        } else if (file.type === 'application/pdf') {
          fileIcon = 'fa-file-pdf';
        }
        
        fileElement.innerHTML = `
          <i class="fas ${fileIcon} file-icon"></i>
          <span class="file-name">${file.name}</span>
          <button type="button" class="file-remove">
            <i class="fas fa-times"></i>
          </button>
        `;
        
        uploadedFiles.appendChild(fileElement);
      }
      
      // Show uploaded files container
      uploadedFiles.style.display = 'flex';
    }
    
    // Remove file
    uploadedFiles.addEventListener('click', function(e) {
      if (e.target.classList.contains('file-remove') || e.target.parentElement.classList.contains('file-remove')) {
        const button = e.target.classList.contains('file-remove') ? e.target : e.target.parentElement;
        const fileElement = button.parentElement;
        fileElement.remove();
        
        // Hide container if empty
        if (uploadedFiles.children.length === 0) {
          uploadedFiles.style.display = 'none';
        }
      }
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/my-reports.ejs

<%- include('../partials/header') %>

<div class="my-reports-container">
  <div class="reports-header">
    <h1 class="reports-title">My Safety Reports</h1>
    
    <a href="/safety/report" class="btn btn-primary">
      <i class="fas fa-plus"></i> New Report
    </a>
  </div>

  <div class="reports-filters">
    <div class="filter-item <%= !filter || filter === 'all' ? 'active' : '' %>" data-filter="all">All Reports</div>
    <div class="filter-item <%= filter === 'pending' ? 'active' : '' %>" data-filter="pending">Pending</div>
    <div class="filter-item <%= filter === 'investigating' ? 'active' : '' %>" data-filter="investigating">Investigating</div>
    <div class="filter-item <%= filter === 'resolved' ? 'active' : '' %>" data-filter="resolved">Resolved</div>
    <div class="filter-item <%= filter === 'closed' ? 'active' : '' %>" data-filter="closed">Closed</div>
  </div>

  <div class="reports-list">
    <% if (reports && reports.length > 0) { %>
      <% reports.forEach(report => { %>
        <div class="report-card">
          <div class="report-header">
            <div class="report-id">#<%= report._id.toString().substring(0, 8) %></div>
            <div class="report-status status-<%= report.status %>">
              <%= report.status.charAt(0).toUpperCase() + report.status.slice(1) %>
            </div>
          </div>
          
          <div class="report-body">
            <h3 class="report-title">
              <%= report.reportType.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) %>
            </h3>
            
            <div class="report-meta">
              <div class="meta-item">
                <i class="fas fa-calendar-alt meta-icon"></i>
                Reported on <%= new Date(report.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </div>
              
              <div class="meta-item">
                <i class="fas fa-calendar-day meta-icon"></i>
                Incident date: <%= new Date(report.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) %>
              </div>
              
              <% if (report.location) { %>
                <div class="meta-item">
                  <i class="fas fa-map-marker-alt meta-icon"></i>
                  <%= report.location %>
                </div>
              <% } %>
              
              <% if (report.ride) { %>
                <div class="meta-item">
                  <i class="fas fa-car meta-icon"></i>
                  Related to ride #<%= report.ride.toString().substring(0, 8) %>
                </div>
              <% } %>
            </div>
            
            <div class="report-description">
              <%= report.description.length > 150 ? report.description.substring(0, 150) + '...' : report.description %>
            </div>
            
            <div class="report-severity severity-<%= report.severity %>">
              <i class="fas <%= report.severity === 'high' ? 'fa-exclamation-triangle' : (report.severity === 'medium' ? 'fa-exclamation-circle' : 'fa-info-circle') %>"></i>
              <%= report.severity.charAt(0).toUpperCase() + report.severity.slice(1) %> Severity
            </div>
            
            <% if (report.updates && report.updates.length > 0) { %>
              <div class="report-updates">
                <h4 class="updates-title">
                  <i class="fas fa-history update-icon"></i>
                  Recent Updates
                </h4>
                
                <div class="updates-list">
                  <% const latestUpdate = report.updates[report.updates.length - 1]; %>
                  <div class="update-item">
                    <div class="update-timeline">
                      <div class="timeline-dot"></div>
                      <div class="timeline-line"></div>
                    </div>
                    
                    <div class="update-content">
                      <div class="update-header">
                        <div class="update-title"><%= latestUpdate.title %></div>
                        <div class="update-date">
                          <%= new Date(latestUpdate.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) %>
                        </div>
                      </div>
                      
                      <div class="update-text">
                        <%= latestUpdate.message %>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <% } %>
            
            <div class="report-actions">
              <a href="/safety/reports/<%= report._id %>" class="btn btn-primary">View Details</a>
              
              <% if (report.status === 'pending' || report.status === 'investigating') { %>
                <a href="/safety/reports/<%= report._id %>/cancel" class="btn btn-danger" onclick="return confirm('Are you sure you want to cancel this report?')">Cancel Report</a>
              <% } %>
            </div>
          </div>
        </div>
      <% }) %>
      
      <% if (totalPages > 1) { %>
        <div class="pagination">
          <% for (let i = 1; i <= totalPages; i++) { %>
            <a href="?page=<%= i %><%= filter ? '&filter=' + filter : '' %>" class="pagination-button <%= i === currentPage ? 'active' : '' %>">
              <%= i %>
            </a>
          <% } %>
        </div>
      <% } %>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon">
          <i class="fas fa-clipboard-list"></i>
        </div>
        <h3 class="empty-state-text">No reports found</h3>
        <p>You haven't submitted any safety reports yet.</p>
        <a href="/safety/report" class="btn btn-primary">Create a Report</a>
      </div>
    <% } %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Filter functionality
    const filterItems = document.querySelectorAll('.filter-item');
    
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        const filter = this.getAttribute('data-filter');
        window.location.href = `/safety/reports?filter=${filter}`;
      });
    });
  });
</script>

<%- include('../partials/footer') %>

views/pages/report-details.ejs

<%- include('../partials/header') %>

<div class="report-details-container">
  <div class="details-header">
    <div class="header-title">
      <div class="report-id">Report #<%= report._id.toString() %></div>
      <h1 class="report-title">
        <%= report.reportType.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())

Please make sure to add the following environment variables to your project:

Setup Integrations

Main Application Files

Config Files

Controllers

Middleware

Models

Public CSS

Public JavaScript

Routes

Utils

Views Partials

Views Pages

Views Admin Pages

Views Errors

Missing Files for Carpooling Application

View Pages

views/pages/edit-ride.ejs

views/pages/edit-profile.ejs

views/pages/pending-verification.ejs

views/pages/payment.ejs

views/pages/payment-history.ejs

views/pages/payment-receipt.ejs

views/pages/feedback.ejs

views/pages/user-feedback.ejs

views/pages/safety.ejs

views/pages/report.ejs

views/pages/my-reports.ejs

views/pages/report-details.ejs

Main Application Files

Config Files

Controllers

Middleware

Models

Public CSS

Public JavaScript

Routes

Utils

Views Partials

Views Pages

Views Admin Pages

Views Errors

Missing Files for Carpooling Application

View Pages

views/pages/edit-ride.ejs

views/pages/edit-profile.ejs

views/pages/pending-verification.ejs

views/pages/payment.ejs

views/pages/payment-history.ejs

views/pages/payment-receipt.ejs

views/pages/feedback.ejs

views/pages/user-feedback.ejs

views/pages/safety.ejs

views/pages/report.ejs

views/pages/my-reports.ejs

views/pages/report-details.ejs