Account Section UI Changes

2025-11-27 19:39:36 +05:30
parent 04b00c9db8
commit 97db70c40e
14 changed files with 2876 additions and 523 deletions
--- a/resources/views/admin/mark_list.blade.php
+++ b/resources/views/admin/mark_list.blade.php
@@ -277,6 +277,139 @@
        from { box-shadow: 0 0 0px #b4a02455 inset; }
        to { box-shadow: 0 0 10px #b4a024aa inset; }
      }
+
+      /* ---------- Pagination Styles ---------- */
+      .pagination-container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 15px;
+          padding: 12px 0;
+          border-top: 1px solid #eef3fb;
+      }
+
+      .pagination-info {
+          font-size: 13px;
+          color: #9ba5bb;
+          font-weight: 600;
+      }
+
+      .pagination-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+      }
+
+      .pagination-btn {
+          background: #fff;
+          border: 1px solid #e3eaf6;
+          color: #1a2951;
+          padding: 8px 12px;
+          border-radius: 6px;
+          font-size: 13px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 40px;
+          height: 32px;
+      }
+
+      .pagination-btn:hover:not(:disabled) {
+          background: #1a2951;
+          color: white;
+          border-color: #1a2951;
+      }
+
+      .pagination-btn:disabled {
+          background: #f8fafc;
+          color: #cbd5e0;
+          border-color: #e2e8f0;
+          cursor: not-allowed;
+          opacity: 0.6;
+      }
+
+      .pagination-page-btn {
+          background: #fff;
+          border: 1px solid #e3eaf6;
+          color: #1a2951;
+          padding: 6px 12px;
+          border-radius: 6px;
+          font-size: 13px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          min-width: 36px;
+          text-align: center;
+      }
+
+      .pagination-page-btn:hover {
+          background: #1a2951;
+          color: white;
+          border-color: #1a2951;
+      }
+
+      .pagination-page-btn.active {
+          background: #1a2951;
+          color: white;
+          border-color: #1a2951;
+      }
+
+      .pagination-pages {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+      }
+
+      .pagination-ellipsis {
+          color: #9ba5bb;
+          font-size: 13px;
+          padding: 0 4px;
+      }
+
+      /* Image-based pagination buttons */
+      .pagination-img-btn {
+          background: #fff;
+          border: 1px solid #e3eaf6;
+          border-radius: 6px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 40px;
+          height: 32px;
+          padding: 0;
+      }
+
+      .pagination-img-btn:hover:not(:disabled) {
+          background: #1a2951;
+          border-color: #1a2951;
+      }
+
+      .pagination-img-btn:disabled {
+          background: #f8fafc;
+          border-color: #e2e8f0;
+          cursor: not-allowed;
+          opacity: 0.5;
+      }
+
+      .pagination-img-btn img {
+          width: 16px;
+          height: 16px;
+          filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
+          transition: filter 0.3s ease;
+      }
+
+      .pagination-img-btn:hover:not(:disabled) img {
+          filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
+      }
+
+      .pagination-img-btn:disabled img {
+          filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
+      }
    </style>

    @if(session('success'))
@@ -304,63 +437,207 @@
            <th>Action</th>
          </tr>
        </thead>
-        <tbody>
-          @foreach($markList as $mark)
-          <tr>
-            <td>{{ $mark->id }}</td>
-            <td>{{ $mark->mark_no }}</td>
-            <td>{{ $mark->origin }}</td>
-            <td>{{ $mark->destination }}</td>
-            <td>{{ $mark->customer_name }}</td>
-            <td>{{ $mark->customer_id }}</td>
-            <td>{{ $mark->mobile_no }}</td>
-            <td>{{ \Carbon\Carbon::parse($mark->date)->format('d-m-Y') }}</td>
-            <td>
-              @if($mark->status == 'active')
-                <span class="badge badge-active">
-                  <i class="bi bi-check-circle-fill status-icon"></i>
-                  Active
-                </span>
-              @else
-                <span class="badge badge-inactive">
-                  <i class="bi bi-exclamation-triangle-fill status-icon"></i>
-                  In-Active
-                </span>
-              @endif
-            </td>
-            <td>
-              @if($mark->status == 'active')
-                <a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action btn-action-deactivate">
-                  <i class="bi bi-power btn-icon"></i>
-                  Deactivate
-                </a>
-              @else
-                <a href="{{ route('admin.marklist.toggle', $mark->id) }}" class="btn-action btn-action-activate">
-                  <i class="bi bi-play-circle btn-icon"></i>
-                  Activate
-                </a>
-              @endif
-            </td>
-          </tr>
-          @endforeach
+        <tbody id="markListTableBody">
+          <!-- Data will be loaded dynamically -->
        </tbody>
      </table>

-      @if($markList->isEmpty())
-        <div class="py-4 text-center text-muted fst-italic">No mark numbers found.</div>
-      @endif
+      <!-- Pagination Controls -->
+      <div class="pagination-container">
+          <div class="pagination-info" id="pageInfo">Showing 0 entries</div>
+          <div class="pagination-controls">
+              <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
+                  <!-- Left arrow SVG -->
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+              </button>
+              <div class="pagination-pages" id="paginationPages">
+                  <!-- Page numbers will be inserted here -->
+              </div>
+              <button class="pagination-img-btn" id="nextPageBtn" title="Next page" disabled>
+                  <!-- Right arrow SVG -->
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+              </button>
+          </div>
+      </div>
+
+      <div id="noResults" class="py-4 text-center text-muted fst-italic" style="display: none;">No mark numbers found.</div>
    </div>

    <script>
-      document.getElementById('globalSearch').addEventListener('input', function () {
-        const filter = this.value.toLowerCase();
-        const rows = document.querySelectorAll('#markListTable tbody tr');
+      // Pagination state
+      let currentPage = 1;
+      const itemsPerPage = 10;
+      let allMarkList = @json($markList);
+      let filteredMarkList = [...allMarkList];

-        rows.forEach(row => {
-          const text = row.textContent.toLowerCase();
-          row.style.display = text.includes(filter) ? '' : 'none';
-        });
+      // Initialize pagination
+      document.addEventListener('DOMContentLoaded', function() {
+          renderTable();
+          updatePaginationControls();
+          
+          // Bind pagination events
+          document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
+          document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
+          
+          // Bind search event
+          document.getElementById('globalSearch').addEventListener('input', handleSearch);
      });
+
+      // Pagination Functions
+      function goToPreviousPage() {
+          if (currentPage > 1) {
+              currentPage--;
+              renderTable();
+              updatePaginationControls();
+          }
+      }
+
+      function goToNextPage() {
+          const totalPages = Math.ceil(filteredMarkList.length / itemsPerPage);
+          if (currentPage < totalPages) {
+              currentPage++;
+              renderTable();
+              updatePaginationControls();
+          }
+      }
+
+      function updatePaginationControls() {
+          const totalPages = Math.ceil(filteredMarkList.length / itemsPerPage);
+          const prevBtn = document.getElementById('prevPageBtn');
+          const nextBtn = document.getElementById('nextPageBtn');
+          const pageInfo = document.getElementById('pageInfo');
+          const paginationPages = document.getElementById('paginationPages');
+          
+          prevBtn.disabled = currentPage === 1;
+          nextBtn.disabled = currentPage === totalPages || totalPages === 0;
+          
+          // Update page info text
+          const startIndex = (currentPage - 1) * itemsPerPage + 1;
+          const endIndex = Math.min(currentPage * itemsPerPage, filteredMarkList.length);
+          pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredMarkList.length} entries`;
+          
+          // Generate page numbers
+          paginationPages.innerHTML = '';
+          
+          if (totalPages <= 7) {
+              // Show all pages
+              for (let i = 1; i <= totalPages; i++) {
+                  addPageButton(i, paginationPages);
+              }
+          } else {
+              // Show first page, current page range, and last page
+              addPageButton(1, paginationPages);
+              
+              if (currentPage > 3) {
+                  paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+              }
+              
+              const start = Math.max(2, currentPage - 1);
+              const end = Math.min(totalPages - 1, currentPage + 1);
+              
+              for (let i = start; i <= end; i++) {
+                  addPageButton(i, paginationPages);
+              }
+              
+              if (currentPage < totalPages - 2) {
+                  paginationPages.innerHTML += '<span class="pagination-ellipsis">...</span>';
+              }
+              
+              addPageButton(totalPages, paginationPages);
+          }
+      }
+
+      function addPageButton(pageNumber, container) {
+          const button = document.createElement('button');
+          button.className = 'pagination-page-btn';
+          if (pageNumber === currentPage) {
+              button.classList.add('active');
+          }
+          button.textContent = pageNumber;
+          button.addEventListener('click', () => {
+              currentPage = pageNumber;
+              renderTable();
+              updatePaginationControls();
+          });
+          container.appendChild(button);
+      }
+
+      // Search Function
+      function handleSearch() {
+          const filter = this.value.toLowerCase();
+          filteredMarkList = allMarkList.filter(mark => {
+              return Object.values(mark).some(value => 
+                  String(value).toLowerCase().includes(filter)
+              );
+          });
+          
+          currentPage = 1;
+          renderTable();
+          updatePaginationControls();
+      }
+
+      // Render Table Function - FIXED: Using direct URL construction
+      function renderTable() {
+          const tbody = document.getElementById('markListTableBody');
+          const noResults = document.getElementById('noResults');
+          tbody.innerHTML = '';
+          
+          if (filteredMarkList.length === 0) {
+              tbody.innerHTML = '';
+              noResults.style.display = 'block';
+              return;
+          }
+          
+          noResults.style.display = 'none';
+          
+          // Calculate pagination
+          const startIndex = (currentPage - 1) * itemsPerPage;
+          const endIndex = startIndex + itemsPerPage;
+          const paginatedItems = filteredMarkList.slice(startIndex, endIndex);
+          
+          paginatedItems.forEach(mark => {
+              const row = document.createElement('tr');
+              row.innerHTML = `
+                  <td>${mark.id}</td>
+                  <td>${mark.mark_no}</td>
+                  <td>${mark.origin}</td>
+                  <td>${mark.destination}</td>
+                  <td>${mark.customer_name}</td>
+                  <td>${mark.customer_id}</td>
+                  <td>${mark.mobile_no}</td>
+                  <td>${new Date(mark.date).toLocaleDateString('en-GB')}</td>
+                  <td>
+                      ${mark.status == 'active' 
+                          ? `<span class="badge badge-active">
+                                <i class="bi bi-check-circle-fill status-icon"></i>
+                                Active
+                             </span>`
+                          : `<span class="badge badge-inactive">
+                                <i class="bi bi-exclamation-triangle-fill status-icon"></i>
+                                In-Active
+                             </span>`
+                      }
+                  </td>
+                  <td>
+                      ${mark.status == 'active'
+                          ? `<a href="/admin/mark-list/status/${mark.id}" class="btn-action btn-action-deactivate">
+                                <i class="bi bi-power btn-icon"></i>
+                                Deactivate
+                             </a>`
+                          : `<a href="/admin/mark-list/status/${mark.id}" class="btn-action btn-action-activate">
+                                <i class="bi bi-play-circle btn-icon"></i>
+                                Activate
+                             </a>`
+                      }
+                  </td>
+              `;
+              tbody.appendChild(row);
+          });
+      }
    </script>
  </div>
 </div>