<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('./partials/head'); -%>
</head>
<body onload="startTime()">
    <%- include('./partials/header_sidebar'); -%>

    <!-- Page Sidebar Ends-->
    <div class="page-body">
      <div class="container-fluid">
        <div class="page-title">
          <div class="row">
            <div class="col-sm-6">
              <h3>Plan List</h3>
            </div>
            <div class="col-sm-6">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/index"><i data-feather="home"></i></a></li>
                <li class="breadcrumb-item">Dashboard</li>
                <li class="breadcrumb-item active">Plan List</li>
              </ol>
            </div>
          </div>
        </div>
      </div>
      <!-- Container-fluid starts-->
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="card">
              <div class="card-header d-flex justify-content-end pb-0">
                <% let permiss = per != "1" ? (per.captain_plan ? per.captain_plan[1] : "0") : "1" %>
                <% if(permiss == "1") { %>
                <a class="btn btn-square btn-primary b-r-10" type="button" href="/plan/add">Add Plan</a>
                <% } %>
              </div>
              <div class="card-body">
                <%- include('./partials/table_skeleton'); -%>
                <div class="real-table-wrapper dt-loading">
                  <div class="table-responsive theme-scrollbar">
                    <table class="display" id="basic-1">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>Image</th>
                          <th>Title</th>
                          <th>Price</th>
                          <th>Ride Limit</th>
                          <th>Services</th>
                          <th>Status</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <% var i = 1 %>
                        <% plan_list.forEach((data) => { %>
                          <tr>
                            <td><%= i %></td>
                            <td class="p-1">
                              <% if (!data.image) { %>
                                <img class="p-0 rounded" width="55" height="55" src="../images/dashboard/default/profile.png" alt="plan image">
                              <% } else { %>
                                <img class="p-0 rounded" width="55" height="55" src="../../<%= data.image %>" alt="plan image">
                              <% } %>
                            </td>
                            <td><strong><%= data.title %></strong></td>
                            <td class="invosymbol"><%= data.price %></td>
                            <td><span class="badge badge-info"><%= data.ride_limit %> Rides</span></td>
                            <td>
                              <%
                              let svcs = [];
                              try {
                                if (Array.isArray(data.services)) {
                                  svcs = data.services;
                                } else {
                                  svcs = JSON.parse(data.services || '[]');
                                }
                              } catch(e){ svcs = []; }
                            %>
                              <% svcs.forEach(function(s){ %>
                                <span class="badge badge-secondary me-1"><%= s %></span>
                              <% }); %>
                            </td>
                            <td>
                              <% if (data.status == '1') { %>
                                <span class="badge badge-success">Active</span>
                              <% } else { %>
                                <span class="badge badge-danger">Inactive</span>
                              <% } %>
                            </td>
                            <td>
                              <% let permissions = per != "1" ? (per.captain_plan ? per.captain_plan[2] : "0") : "1" %>
                              <ul class="action">
                                <% if(permissions == "1") { %>
                                <li class="edit custom_tooltip">
                                  <a href="/plan/edit/<%= data.id %>"><i class="icon-pencil-alt"></i></a>
                                  <span class="tooltiptext" style="width:100px;margin-left:-50px;padding:5px;font-size:11px;bottom:135%;">Edit Plan</span>
                                </li>
                                <% } %>
                                <% if(permiss == "1") { %>
                                <li class="delete custom_tooltip">
                                  <a href="/plan/delete/<%= data.id %>" onclick="return confirm('Are you sure you want to delete this plan?')"><i class="icon-trash"></i></a>
                                  <span class="tooltiptext" style="width:100px;margin-left:-50px;padding:5px;font-size:11px;bottom:135%;">Delete Plan</span>
                                </li>
                                <% } %>
                              </ul>
                            </td>
                          </tr>
                          <% i++ %>
                        <% }) %>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Container-fluid Ends-->
    </div>

    <%- include('./partials/footer'); -%>
    <%- include('./partials/script'); -%>
    <script src="/socket.io/socket.io.js"></script>
    <script src="../../socket_function.js"></script>
  </body>
</html>
