Account Section UI Changes

resources/views/admin/dashboard.blade.php

@@ -556,6 +556,138 @@ body, .container-fluid {
   overflow-y: auto;
 }
 
+/* ===== 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;
+}
+
+.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%);
+}
+
 /* ===== RESPONSIVE BREAKPOINTS ===== */
 
 /* Laptop (1200px and below) */
@@ -598,6 +730,16 @@ body, .container-fluid {
   .table td {
     padding: 10px 5px;
   }
+
+  .pagination-container {
+    flex-direction: column;
+    gap: 10px;
+    align-items: stretch;
+  }
+  
+  .pagination-controls {
+    justify-content: center;
+  }
 }
 
 /* Mobile Landscape (768px and below) */
@@ -900,6 +1042,9 @@ body, .container-fluid {
       <div class="card shadow-sm">
         <div class="card-header bg-light">
           <strong>Recent Orders</strong>
+          <span style="font-size:13px;color:#6577a3;margin-left:10px;">
+            Total orders: <span id="ordersCount">{{ $orders->count() }}</span>
+          </span>
         </div>
         <div class="card-body table-responsive">
           <table class="table table-striped table-bordered align-middle text-center">
@@ -923,7 +1068,7 @@ body, .container-fluid {
                 <th>Actions</th>
               </tr>
             </thead>
-            <tbody>
+            <tbody id="ordersTableBody">
               @forelse($orders as $order)
               <tr>
                 <td>{{ $order->id }}</td>
@@ -963,6 +1108,28 @@ body, .container-fluid {
                 @endforelse
               </tbody>
             </table>
+
+            <!-- Pagination Controls -->
+            <div class="pagination-container">
+                <div class="pagination-info" id="pageInfo">Showing 1 to 10 of {{ $orders->count() }} entries</div>
+                <div class="pagination-controls">
+                    <button class="pagination-img-btn" id="prevPageBtn" title="Previous page">
+                        <!-- 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">
+                        <!-- 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>
         </div>
       </div>
@@ -1167,6 +1334,14 @@ document.addEventListener('DOMContentLoaded', function() {
     const closeBtn = document.getElementById('closeCreateOrderModal');
     const clearFormBtn = document.getElementById('clearForm');
 
+    // Pagination state
+    let currentPage = 1;
+    const ordersPerPage = 10;
+    let allOrders = @json($orders->values());
+
+    // Initialize pagination
+    initializePagination();
+
     // Reset temp data function
     const resetTempData = () => {
         fetch('{{ route("admin.orders.temp.reset") }}', {
@@ -1265,6 +1440,168 @@ document.addEventListener('DOMContentLoaded', function() {
                 });
         });
     });
+
+    /* ---------- Pagination Functions ---------- */
+    function initializePagination() {
+        renderOrdersTable(allOrders);
+        updatePaginationControls();
+        
+        // Bind pagination buttons
+        document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
+        document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
+    }
+
+    function goToPreviousPage() {
+        if (currentPage > 1) {
+            currentPage--;
+            renderOrdersTable(allOrders);
+            updatePaginationControls();
+        }
+    }
+
+    function goToNextPage() {
+        const totalPages = Math.ceil(allOrders.length / ordersPerPage);
+        if (currentPage < totalPages) {
+            currentPage++;
+            renderOrdersTable(allOrders);
+            updatePaginationControls();
+        }
+    }
+
+    function updatePaginationControls() {
+        const totalPages = Math.ceil(allOrders.length / ordersPerPage);
+        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) * ordersPerPage + 1;
+        const endIndex = Math.min(currentPage * ordersPerPage, allOrders.length);
+        pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${allOrders.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;
+            renderOrdersTable(allOrders);
+            updatePaginationControls();
+        });
+        container.appendChild(button);
+    }
+
+    function renderOrdersTable(orders) {
+        const tbody = document.getElementById('ordersTableBody');
+        tbody.innerHTML = '';
+        
+        if (!orders || orders.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="16" class="text-muted">No orders found</td></tr>';
+            return;
+        }
+
+        // Calculate pagination
+        const startIndex = (currentPage - 1) * ordersPerPage;
+        const endIndex = startIndex + ordersPerPage;
+        const paginatedOrders = orders.slice(startIndex, endIndex);
+
+        paginatedOrders.forEach(order => {
+            const tr = document.createElement('tr');
+            tr.innerHTML = `
+                <td>${order.id}</td>
+                <td>
+                    <a href="javascript:void(0)"
+                        class="fw-semibold text-primary open-order-modal"
+                        data-id="${order.id}">
+                        ${order.order_id}
+                    </a>
+                </td>
+                <td>${order.mark_no || ''}</td>
+                <td>${order.origin || ''}</td>
+                <td>${order.destination || ''}</td>
+                <td>${order.ctn || ''}</td>
+                <td>${order.qty || ''}</td>
+                <td>${order.ttl_qty || ''}</td>
+                <td>₹${order.ttl_amount ? Number(order.ttl_amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '0.00'}</td>
+                <td>${order.cbm || ''}</td>
+                <td>${order.ttl_cbm || ''}</td>
+                <td>${order.kg || ''}</td>
+                <td>${order.ttl_kg || ''}</td>
+                <td>
+                    <span class="badge bg-info text-dark">${order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1) : ''}</span>
+                </td>
+                <td>${new Date(order.created_at).toLocaleDateString('en-GB')}</td>
+                <td>
+                    <a href="/admin/orders/${order.id}" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-eye"></i> View
+                    </a>
+                </td>
+            `;
+            tbody.appendChild(tr);
+
+            // Re-bind order details modal for newly rendered rows
+            const orderLink = tr.querySelector('.open-order-modal');
+            if (orderLink) {
+                orderLink.addEventListener('click', function() {
+                    let id = this.dataset.id;
+                    let modal = new bootstrap.Modal(document.getElementById('orderDetailsModal'));
+
+                    document.getElementById('orderDetailsBody').innerHTML =
+                        "<p class='text-center text-muted'>Loading...</p>";
+
+                    modal.show();
+
+                    fetch(`/admin/orders/view/${id}`)
+                        .then(response => response.text())
+                        .then(html => {
+                            document.getElementById('orderDetailsBody').innerHTML = html;
+                        })
+                        .catch(() => {
+                            document.getElementById('orderDetailsBody').innerHTML =
+                                "<p class='text-danger text-center'>Failed to load order details.</p>";
+                        });
+                });
+            }
+        });
+    }
 });
 </script>