<%- header %>
<main class="dashboard-main">
  <%- navbar %>
  <%- include('../../partials/utils/mask.ejs') %>

  <div class="container flex-1 pt-20 w-full my-4">
    <%- include('../../partials/utils/title.ejs', {title: "Trip Members"}) %>

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
      { label: "Recurring Trips", href: "/admin/recurring-trips" },
      { label: "Trip Members" }
    ];
    %>
    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <!-- Trip Info Card -->
    <div class="card mb-4">
      <div class="card-body">
        <div class="row">
          <div class="col-md-3">
            <strong>Recurring ID:</strong> <span class="badge bg-info" id="recurringId"></span>
          </div>
          <div class="col-md-3">
            <strong>Trip Type:</strong> <span id="tripType"></span>
          </div>
          <div class="col-md-3">
            <strong>Weekdays:</strong> <span class="badge bg-primary" id="weekdays"></span>
          </div>
          <div class="col-md-3">
            <strong>Trip Date:</strong> <span id="tripDate"></span>
          </div>
        </div>
      </div>
    </div>

    <!-- Members Table -->
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">Members List (<span id="totalMembers">0</span>)</h5>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Date of Birth</th>
                <th>Special Requirements</th>
              </tr>
            </thead>
            <tbody id="membersTableBody">
              <tr>
                <td colspan="6" class="text-center">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Back Button -->
    <div class="mt-3">
      <a href="/admin/recurring-trips" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to Recurring Trips
      </a>
    </div>
  </div>
</main>

<script>
  // Get trip ID from URL
  const urlParams = new URLSearchParams(window.location.search);
  const tripId = urlParams.get('trip_id');

  if (!tripId) {
    Swal.fire('Error', 'Trip ID is missing', 'error').then(() => {
      window.location.href = '/admin/recurring-trips';
    });
  }

  // Fetch trip data
  async function loadTripMembers() {
    try {
      const response = await fetch(`/admin/getTripMembers?trip_id=${tripId}`);
      const data = await response.json();

      if (!data.success) {
        throw new Error(data.message || 'Failed to load trip members');
      }

      const trip = data.data;

      // Update trip info
      document.getElementById('recurringId').textContent = trip.recurring_trip_id || 'N/A';
      document.getElementById('tripType').textContent = trip.trip_type || 'N/A';
      document.getElementById('weekdays').textContent = trip.weekdays || 'N/A';
      document.getElementById('tripDate').textContent = trip.formatted_trip_date || 'N/A';

      // Parse members
      let members = [];
      if (trip.trip_members) {
        try {
          members = typeof trip.trip_members === 'string' 
            ? JSON.parse(trip.trip_members) 
            : trip.trip_members;
        } catch (e) {
          console.error('Error parsing members:', e);
        }
      }

      // Update total count
      document.getElementById('totalMembers').textContent = members.length;

      // Populate table
      const tbody = document.getElementById('membersTableBody');
      tbody.innerHTML = '';

      if (members.length === 0) {
        tbody.innerHTML = `
          <tr>
            <td colspan="6" class="text-center text-muted py-4">
              <i class="fas fa-users fa-3x mb-3 d-block"></i>
              No members found for this trip
            </td>
          </tr>
        `;
        return;
      }

      members.forEach((member, index) => {
        // Format date of birth
        let dobFormatted = 'N/A';
        if (member.date_birth) {
          try {
            const dob = new Date(member.date_birth);
            dobFormatted = dob.toLocaleDateString('en-US', { 
              year: 'numeric', 
              month: 'short', 
              day: 'numeric' 
            });
          } catch (e) {
            dobFormatted = member.date_birth;
          }
        }

        // Gender badge
        let genderBadge = '';
        if (member.gender === 'Male') {
          genderBadge = '<span class="badge bg-primary"><i class="fas fa-mars"></i> Male</span>';
        } else if (member.gender === 'Female') {
          genderBadge = '<span class="badge bg-danger"><i class="fas fa-venus"></i> Female</span>';
        } else {
          genderBadge = '<span class="badge bg-secondary">N/A</span>';
        }

        // Format dates
        const createdDate = member.created ? new Date(member.created).toLocaleDateString() : 'N/A';
        const modifiedDate = member.modified ? new Date(member.modified).toLocaleDateString() : 'N/A';

        const row = `
          <tr>
            <td>${index + 1}</td>
            <td><span class="badge bg-secondary">${member.id || 'N/A'}</span></td>
            <td><strong>${member.name || 'N/A'} ${member.surname || ''}</strong></td>
            <td>${genderBadge}</td>
            <td>${dobFormatted}</td>
            <td>
              ${member.special_requirement 
                ? `<span class="badge bg-warning text-dark">${member.special_requirement}</span>` 
                : '<span class="text-muted">None</span>'}
            </td>
          </tr>
        `;
        tbody.innerHTML += row;
      });

    } catch (error) {
      console.error('Error loading trip members:', error);
      Swal.fire('Error', error.message || 'Failed to load trip members', 'error');
      
      const tbody = document.getElementById('membersTableBody');
      tbody.innerHTML = `
        <tr>
          <td colspan="6" class="text-center text-danger py-4">
            <i class="fas fa-exclamation-triangle fa-2x mb-2 d-block"></i>
            Failed to load members
          </td>
        </tr>
      `;
    }
  }

  // Load data when page loads
  document.addEventListener('DOMContentLoaded', loadTripMembers);
</script>

<%- footer %>
