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

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

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

          <% const breadcrumbs=[ { label: "Dashboard" , href: "/admin/dashboard" , icon: "bi bi-house-door" }, {
            label: "Owner 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 (data.owner.image && data.owner.image.img_path) { %>
                        <img src="<%= IMAGE_FOLDER_PATH %><%= data.owner.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">
                              <%= data.driver_name %>
                            </h4>
                            <div class="text-muted small mb-4">Owner ID: #<%= data.owner.driver_id %>
                            </div>

                            <!-- Stats -->
                            <div class="row g-3">
                              <div class="col-6">
                                <div class="stat-box">
                                  <div class="stat-number text-primary">
                                    <%= data.totalOwnerDrivers %>
                                  </div>
                                  <div class="stat-label">Drivers</div>
                                </div>
                              </div>

                              <div class="col-6">
                                <div class="stat-box">
                                  <div class="stat-number text-success">
                                    <%= data.totalOwnerVehicles %>
                                  </div>
                                  <div class="stat-label">Vehicles</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;">Owner Information</h4>

                    <div class="row g-4">

                      <div class="col-md-6">
                        <div class="info-row"><span>First Name</span>
                          <p>
                            <%= data.owner.d_fname %>
                          </p>
                        </div>
                        <div class="info-row"><span>Last Name</span>
                          <p>
                            <%= data.owner.d_lname || 'N/A' %>
                          </p>
                        </div>
                        <div class="info-row"><span>Email</span>
                          <p>
                            <%= data.owner.d_email %>
                          </p>
                        </div>
                        <div class="info-row"><span>Phone</span>
                          <p>
                            <%= data.owner.d_phone %>
                          </p>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="info-row"><span>Total Rides</span>
                          <p class="fw-bold text-primary">
                            <%= data.totalRides %>
                          </p>
                        </div>
                        <div class="info-row">
                          <span>Wallet</span>
                          <p
                            class="fw-bold <%= (data.owner.d_wallet || 0) < 0 ? 'text-danger' : ((data.owner.d_wallet || 0) > 0 ? 'text-success' : 'text-secondary') %>">
                            <%= city_cur %>
                              <%= (data.owner.d_wallet || 0).toFixed(2) %>
                          </p>
                        </div>
                        <!-- <div class="info-row"><span>Wallet</span>
                <p class="fw-bold text-success"><%= city_cur %><%= (data.owner.d_wallet || 0).toFixed(2) %></p>
              </div> -->
                        <div class="info-row">
                          <span>Status</span>
                          <p>
                            <span style="width: 55px !important; color: white;"
                              class="badge   rounded-pill <%= data.owner.d_active ? 'bg-success' : 'bg-danger' %>">
                              <%= data.owner.d_active ? 'Active' : 'Inactive' %>
                            </span>
                          </p>
                        </div>
                      </div>

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

                      <a href="/admin/owner/drivers/<%= data.owner.driver_id %>" class="btn btn-primary px-4"
                        style="margin-top: 10px;">
                        <i class="bi bi-people"></i> View Drivers
                      </a>

                      <a href="/admin/owner/vehicles/<%= data.owner.driver_id %>" class="btn btn-dark px-4"
                        style="margin-top: 10px;">
                        <i class="bi bi-truck"></i> View Vehicles
                      </a>
                    </div>

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

              <!-- DRIVERS -->
              <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">Owner Drivers (<%= data.totalOwnerDrivers
                      %>)</h5>
                  <a href="/admin/owner/drivers/<%= ownerID %>" class="btn btn-primary btn-sm px-3">View All</a>
                </div>

                <% if (data.ownerDrivers && data.ownerDrivers.length> 0) { %>
                  <div class="table-responsive">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>Driver</th>
                          <th>Email</th>
                          <th>Phone</th>
                          <th>Status</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% data.ownerDrivers.slice(0, 5).forEach(driver=> { %>
                          <tr>
                            <td>
                              <div class="d-flex align-items-center">
                                <img src="<%= IMAGE_FOLDER_PATH %><%= driver.image?.img_path || '/placeholder.jpg' %>"
                                  alt="Driver" class="rounded-circle me-2" width="40" height="40"
                                  onerror="this.onerror=null; this.src='/placeholder.jpg';">
                                <div>
                                  <strong>
                                    <%= driver.d_fname %>
                                      <%= driver.d_lname || '' %>
                                  </strong><br>
                                  <small class="text-muted">ID: #<%= driver.driver_id %></small>
                                </div>
                              </div>
                            </td>
                            <td>
                              <%= driver.d_email %>
                            </td>
                            <td>
                              <%= driver.c_code %>
                                <%= driver.d_phone %>
                            </td>
                            <td>
                              <span class="badge <%= driver.d_active ? 'bg-success' : 'bg-danger' %>">
                                <%= driver.d_active ? 'Active' : 'Inactive' %>
                              </span>
                            </td>
                            <td>
                              <a href="/admin/driver-detailed-report/<%= driver.driver_id %>"
                                class="btn btn-sm btn-outline-primary me-1">
                                <i class="bi bi-eye"></i>
                              </a>
                              <a href="/admin/edit-driver/<%= driver.driver_id %>"
                                class="btn btn-sm btn-outline-success">
                                <i class="bi bi-pencil"></i>
                              </a>
                            </td>
                          </tr>
                          <% }); %>
                      </tbody>
                    </table>
                  </div>
                  <% } else { %>
                    <div class="text-center text-muted pb-3">No drivers found</div>
                    <% } %>
              </div>

              <!-- VEHICLES -->
              <div class="card border-0 rounded-2 p-3" style="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">Owner Vehicles (<%=
                      data.totalOwnerVehicles %>)</h5>
                  <a href="/admin/owner/vehicles/<%= ownerID %>" class="btn btn-primary btn-sm px-3">View All</a>
                </div>

                <% if (data.ownerVehicles && data.ownerVehicles.length> 0) { %>
                  <div class="table-responsive">
                    <table class="table table-striped">
                      <thead>
                        <tr>
                          <th>Vehicle</th>
                          <th>Registration No.</th>
                          <th>Model</th>
                          <th>Registration Year</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% data.ownerVehicles.slice(0, 5).forEach(vehicle=> { %>
                          <tr>
                            <td>
                              <div class="d-flex align-items-center">
                                <img
                                  src="<%= IMAGE_FOLDER_PATH %><%= vehicle.frontImage?.img_path || '/placeholder.jpg' %>"
                                  alt="Vehicle" class="rounded me-2" width="40" height="32" style="object-fit: cover;"
                                  onerror="this.onerror=null; this.src='/placeholder.jpg';">
                                <div>
                                  <strong>
                                    <%= vehicle.car_name || 'N/A' %>
                                  </strong><br>
                                  <small class="text-muted">ID: #<%= vehicle.car_id %></small>
                                </div>
                              </div>
                            </td>
                            <td>
                              <%= vehicle.car_reg_no || 'N/A' %>
                            </td>
                            <td>
                              <%= vehicle.car_model || 'N/A' %>
                            </td>
                            <td>
                              <%= vehicle.car_make || 'N/A' %>
                            </td>

                          </tr>
                          <% }); %>
                      </tbody>
                    </table>
                  </div>
                  <% } else { %>
                    <div class="text-center text-muted pb-3">No vehicles 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 like other pages */
    .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;
    }

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

  <%- footer %>