<%- header %>
<main class="dashboard-main">
  <%- navbar %>

  <div class="container-fluid pt-20 my-4">

    <%- include('../../partials/utils/title.ejs', {title: "Corporate Details"}) %>

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Corporate Details" }
      ];
    %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <!-- TOP SECTION -->
    <div class="row g-4 mt-1" style="padding-inline: 0px !important;">

      <!-- LEFT PROFILE -->
      <div class="col-lg-4">
        <div class="card border-0 rounded-2 h-100" style="padding: 20px !important;">

          <div class="text-center">

            <% if (corporate.image && corporate.image.img_path) { %>
              <img src="<%= IMAGE_FOLDER_PATH %><%= corporate.image.img_path %>"
                   class="rounded-circle mb-3"
                   style="width:110px;height:110px;object-fit:cover;"
                   onerror="this.onerror=null; this.src='/placeholder.jpg';">
            <% } else { %>
              <img src="/placeholder.jpg"
                   class="rounded-circle mb-3"
                   style="width:110px;height:110px;object-fit:cover;">
            <% } %>

            <h4 style="font-size: 20px !important;" class="fw-bold mb-1"><%= corporate.u_fname %> <%= corporate.u_lname || '' %></h4>
            <div class="text-muted small mb-4">Corporate ID: #<%= corporate.user_id %></div>

            <!-- Stats -->
            <div class="row g-3">
              <div class="col-6">
                <div class="stat-box">
                  <div class="stat-number text-primary"><%= totalUsers %></div>
                  <div class="stat-label">Users</div>
                </div>
              </div>
              
              <div class="col-6">
                <div class="stat-box">
                  <div class="stat-number text-success"><%= totalTrips %></div>
                  <div class="stat-label">Trips</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- RIGHT INFO -->
      <div class="col-lg-8">
        <div class="card border-0 rounded-2 h-100" style="padding: 20px !important;">

          <h4 class="fw-bold mb-4" style="font-size: 20px !important;">Corporate Information</h4>

          <div class="row g-4">

            <div class="col-md-6">
              <div class="info-row"><span>Corporate Name</span><p><%= corporate.u_fname %></p></div>
              <div class="info-row"><span>Full Name</span><p><%= corporate.u_lname || 'N/A' %></p></div>
              <div class="info-row"><span>Email</span><p><%= corporate.u_email %></p></div>
            </div>

            <div class="col-md-6">
              <div class="info-row"><span>Phone</span><p><%= corporate.c_code %> <%= corporate.u_phone %></p></div>
              <div class="info-row"><span>Wallet</span>
                <p class="fw-bold text-success"><%= city_cur %><%= (corporate.u_wallet || 0).toFixed(2) %></p>
              </div>
              <div class="info-row">
                <span>Status</span>
                <p>
                  <span style="width: 62px !important; color: white; text-align: center;" class="badge rounded-pill <%= (corporate.u_active == 1 || corporate.active == 1) ? 'bg-success' : 'bg-danger' %>">
                    <%= (corporate.u_active == 1 || corporate.active == 1) ? 'Active' : 'Inactive' %>
                  </span>
                </p>
              </div>
            </div>

          </div>
          <!-- ACTION BUTTONS -->
          <div class="d-flex flex-wrap gap-2 pt-2 border-top">
            <a href="/admin/corporates/edit/<%= corporate.user_id %>" class="btn btn-primary px-4" style="margin-top: 10px;">
              <i class="bi bi-pencil-square"></i> Edit Corporate
            </a>
          </div>

        </div>
      </div>
    </div>

    <!-- USERS -->
    <div class="card border-0 rounded-2" style="padding: 20px !important; margin-top: 20px;">
      <div class="d-flex justify-content-between align-items-center px-3 pt-2 pb-3">
        <h5 style="font-size: 20px !important;" class="fw-bold mb-0">Corporate Users (<%= totalUsers %>)</h5>
      </div>

      <% if (corporateUsers && corporateUsers.length > 0) { %>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>User</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <% corporateUsers.forEach(user => { %>
                <tr>
                  <td>
                    <div class="d-flex align-items-center">
                      <img 
                        src="<%= IMAGE_FOLDER_PATH %><%= user.img_path || '/placeholder.jpg' %>" 
                        alt="User" 
                        class="rounded-circle me-2" 
                        width="40" 
                        height="40"
                        onerror="this.onerror=null; this.src='/placeholder.jpg';"
                      >
                      <div>
                        <strong><%= user.u_fname %> <%= user.u_lname || '' %></strong><br>
                        <small class="text-muted">ID: #<%= user.user_id %></small>
                      </div>
                    </div>
                  </td>
                  <td><%= user.u_email %></td>
                  <td>+<%= user.c_code %> <%= user.u_phone %></td>
                  <td>
                    <span class="badge rounded-pill <%= (user.u_active == 1 || user.active == 1) ? 'bg-success' : 'bg-danger' %>" style="color: white; padding: 5px 10px;">
                      <%= (user.u_active == 1 || user.active == 1) ? 'Active' : 'Inactive' %>
                    </span>
                  </td>
                  <td>
                    <a href="/admin/edit-user/<%= user.user_id %>" class="btn btn-sm btn-outline-success">
                      <i class="bi bi-pencil"></i> Edit
                    </a>
                  </td>
                </tr>
              <% }); %>
            </tbody>
          </table>
        </div>
      <% } else { %>
        <div class="text-center text-muted pb-3">No users found</div>
      <% } %>
    </div>

  </div>
</main>

<style>
.card{
  background:#fff;
  border:1px solid #eee;
}

/* stats */
.stat-box{
  background:#f8f9fb;
  padding:18px 10px;
  border-radius:12px;
}
.stat-number{
  font-size:22px;
  font-weight:700;
}
.stat-label{
  font-size:13px;
  color:#888;
}

/* info rows */
.info-row{
  margin-bottom:18px;
}
.info-row span{
  font-size:12px;
  color:#8c8c8c;
  display:block;
  margin-bottom:3px;
}
.info-row p{
  font-weight:600;
  margin:0;
  font-size:15px;
}

/* Table styling */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(0,0,0,.02);
}

.table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: #fff;
}

.table th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  color: #495057;
}

.table td {
  vertical-align: middle;
  border-bottom: 1px solid #dee2e6;
}

.container-fluid{
  max-width:1600px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
  // Toggle user status
  $(document).on('click', '.toggle-user-status', function() {
    const button = $(this);
    const userId = button.data('id');
    const currentStatus = parseInt(button.data('active'), 10);
    const newStatus = currentStatus === 1 ? 0 : 1;

    // Show loading state
    button.prop('disabled', true);

    // Send AJAX request to update status
    $.ajax({
      url: `/admin/update-passenger-status/${userId}`,
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        active: newStatus
      }),
      success: function(response) {
        if (response.success) {
          // Show success message
          Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: response.message || 'Status updated successfully',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true
          });
          
          // Update button
          button.data('active', newStatus);
          if (newStatus === 1) {
            button.removeClass('bg-danger').addClass('bg-success');
            button.text('Active');
          } else {
            button.removeClass('bg-success').addClass('bg-danger');
            button.text('Inactive');
          }
        } else {
          Swal.fire('Error!', response.message || 'Failed to update status', 'error');
        }
      },
      error: function(xhr) {
        const errorMessage = xhr.responseJSON?.message || 'Something went wrong';
        Swal.fire('Error!', errorMessage, 'error');
      },
      complete: function() {
        button.prop('disabled', false);
      }
    });
  });
});
</script>

<%- footer %>
