Kent-logistics-Laravel/resources/views/admin/orders.blade.php

@extends('admin.layouts.app')

@section('page-title', 'Orders')

@section('content')
<style>
  /* ===== GLOBAL RESPONSIVE STYLES ===== */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}
    /* VARIABLES AND BASE STYLES */
    :root {
        --primary-color: #3b82f6; /* Blue 500 */
        --primary-hover: #2563eb; /* Blue 600 */
        --border-light: #e5e7eb; /* Gray 200 */
        --bg-container: #ffffff;
        --bg-light: #f9fafb; /* Gray 50 */
        --bg-hover: #f3f4f6; /* Gray 100 */
        --text-dark: #1f2937; /* Gray 800 */
        --text-muted: #6b7280; /* Gray 500 */
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .orders-container {
        background: var(--bg-container);
        padding: 24px;
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
        margin-top: 28px;
        font-family: 'Inter', sans-serif; /* A modern, clean font */
    
    }

    .orders-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 24px;
        color: var(--text-dark);
        border-bottom: 1px solid var(--border-light);
        padding-bottom: 16px;
    }

    /* TABLE STRUCTURE & WRAPPER FOR RESPONSIVENESS */
    .table-wrapper {
        overflow-x: auto; /* Enables horizontal scrollbar */
        max-width: 100%;
        border-radius: 8px;
        border: 1px solid var(--border-light);
    }

    .orders-table {
        width: 100%;
        min-width: 1300px; /* Minimum width to prevent excessive squeezing of columns */
        border-collapse: separate; /* Required for border-radius on cells in the future */
        border-spacing: 0;
        font-size: 14px;
        color: var(--text-dark);
    }

    .orders-table thead {
        background: var(--bg-light);
    }

    .orders-table th {
        padding: 16px 20px;
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        white-space: nowrap;
        border-bottom: 2px solid var(--border-light);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .orders-table td {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border-light);
        white-space: nowrap;
    }

    .orders-table tbody tr:last-child td {
        border-bottom: none;
    }

    .orders-table tbody tr:hover {
        background: var(--bg-hover);
        transition: background 0.2s ease;
    }

    /* STATUS BADGES */
    .status-badge {
        padding: 6px 10px;
        border-radius: 9999px; /* Pill shape */
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        text-transform: capitalize;
        white-space: nowrap;
    }

    .shipstatus{
      
    }

    /* INVOICE STATUS STYLES */
    .status-paid { background: #d1fae5; color: #059669; } /* Green */
    .status-pending { background: #fffbeb; color: #d97706; } /* Yellow */

    /* SHIPMENT STATUS STYLES */
    .status-delivered { background: #e0f2fe; color: #0284c7; } /* Sky Blue */
    .status-in_transit { background: #fef3c7; color: #b45309; } /* Amber */

    /* ACTION BUTTON */
    .action-btn {
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.2s ease, transform 0.2s ease;
        font-size: 18px;
    }

    .action-btn:hover {
        color: var(--primary-color);
        transform: scale(1.15);
    }

    /* EMPTY STATE */
    .no-data {
        padding: 40px;
        text-align: center;
        font-size: 16px;
        color: var(--text-muted);
        background: var(--bg-light);
        border-radius: 8px;
        margin-top: 10px;
        border: 1px solid var(--border-light);
    }

    /* RESPONSIVE ADJUSTMENTS */
    @media(max-width: 768px) {
        .orders-title {
            font-size: 24px;
        }
        .orders-container {
            padding: 16px;
        }
    }

    /* ---------- Pagination Styles (Same as Account Dashboard) ---------- */
    .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>

{{-- Make sure you include Font Awesome CDN in your main layout file, e.g., in <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
--}}

<div class="orders-container">
    <div class="orders-title">
        <i class="fas fa-box-open mr-2"></i> Orders List
    </div>

    @if(isset($orders) && $orders->count() > 0)
        <div class="table-wrapper">
            <table class="orders-table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Shipment ID</th>
                        <th>Customer ID</th>
                        <th>Company</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Order Date</th>
                        <th>Invoice No</th>
                        <th>Invoice Date</th>
                        <th>Amount</th>
                        <th>Amount + GST</th>
                        <th>Invoice Status</th>
                        <th>Shipment Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody id="ordersTableBody">
                    @foreach($orders as $order)
                        @php
                            $mark = $order->markList ?? null;
                            $invoice = $order->invoice ?? null;
                            $shipment = $order->shipments->first() ?? null;
                            $invoiceStatus = strtolower($invoice->status ?? '');
                            $shipmentStatus = strtolower(str_replace('_', ' ', $shipment->status ?? ''));
                        @endphp

                        <tr>
                            <td>{{ $order->order_id ?? '-' }}</td> 
                           <td>{{ $shipment->shipment_id ?? '-' }}</td>
                            <td>{{ $mark->customer_id ?? '-' }}</td>
                            <td>{{ $mark->company_name ?? '-' }}</td>
                            <td>{{ $mark->origin ?? $order->origin ?? '-' }}</td>
                            <td>{{ $mark->destination ?? $order->destination ?? '-' }}</td>
                            <td>{{ $order->created_at ? $order->created_at->format('d-m-Y') : '-' }}</td>

                            <td>{{ $invoice->invoice_number ?? '-' }}</td>

                            <td>
                                {{ $invoice?->invoice_date ? date('d-m-Y', strtotime($invoice->invoice_date)) : '-' }}
                            </td>

                            <td>
                                {{ $invoice?->final_amount ? '₹'.number_format($invoice->final_amount, 2) : '-' }}
                            </td>

                            <td>
                                {{ $invoice?->final_amount_with_gst ? '₹'.number_format($invoice->final_amount_with_gst, 2) : '-' }}
                            </td>

                            <td>
                                @if($invoice?->status)
                                    <span class="status-badge status-{{ $invoiceStatus }}">
                                        {{ ucfirst($invoice->status) }}
                                    </span>
                                @else
                                    <span class="status-badge status-pending">Pending</span>
                                @endif
                            </td>

                            <td>
                                @if($shipment?->status)
                                    <span class="status-badge status-{{ str_replace(' ', '_', $shipmentStatus) }}">
                                        {{ ucfirst($shipmentStatus) }}
                                    </span>
                                @else
                                    <span class="shipstatus">-</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <a href="{{ route('admin.orders.show', $order->id) }}" title="View Details">
                                    <i class="fas fa-eye action-btn"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div> {{-- End table-wrapper --}}

        <!-- Pagination Controls -->
        <div class="pagination-container">
            <div class="pagination-info" id="pageInfo">Showing 1 to {{ min(10, count($orders)) }} of {{ count($orders) }} 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" {{ count($orders) > 10 ? '' : '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>
    @else
        <p class="no-data">
            <i class="fas fa-info-circle mr-2"></i> No orders found.
        </p>
    @endif
</div>

<script>
    // Pagination state
    let currentPage = 1;
    const itemsPerPage = 10;
    let allOrders = @json($orders);
    let filteredOrders = [...allOrders];

    // Initialize pagination
    document.addEventListener('DOMContentLoaded', function() {
        renderTable();
        updatePaginationControls();
        
        // Bind pagination events
        document.getElementById('prevPageBtn').addEventListener('click', goToPreviousPage);
        document.getElementById('nextPageBtn').addEventListener('click', goToNextPage);
    });

    // Pagination Functions
    function goToPreviousPage() {
        if (currentPage > 1) {
            currentPage--;
            renderTable();
            updatePaginationControls();
        }
    }

    function goToNextPage() {
        const totalPages = Math.ceil(filteredOrders.length / itemsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            renderTable();
            updatePaginationControls();
        }
    }

    function updatePaginationControls() {
        const totalPages = Math.ceil(filteredOrders.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, filteredOrders.length);
        pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredOrders.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);
    }

    // Render Table Function
    function renderTable() {
        const tbody = document.getElementById('ordersTableBody');
        tbody.innerHTML = '';
        
        if (filteredOrders.length === 0) {
            tbody.innerHTML = '<tr><td colspan="14" class="text-center py-4 text-muted">No orders found.</td></tr>';
            return;
        }
        
        // Calculate pagination
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const paginatedItems = filteredOrders.slice(startIndex, endIndex);
        
        paginatedItems.forEach(order => {
            const mark = order.markList || null;
            const invoice = order.invoice || null;
            const shipment = order.shipments?.[0] || null;
            const invoiceStatus = (invoice?.status || '').toLowerCase();
            const shipmentStatus = (shipment?.status || '').toLowerCase().replace('_', ' ');
            
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${order.order_id || '-'}</td>
                <td>${shipment?.shipment_id || '-'}</td>
                <td>${mark?.customer_id || '-'}</td>
                <td>${mark?.company_name || '-'}</td>
                <td>${mark?.origin || order.origin || '-'}</td>
                <td>${mark?.destination || order.destination || '-'}</td>
                <td>${order.created_at ? new Date(order.created_at).toLocaleDateString('en-GB') : '-'}</td>
                <td>${invoice?.invoice_number || '-'}</td>
                <td>${invoice?.invoice_date ? new Date(invoice.invoice_date).toLocaleDateString('en-GB') : '-'}</td>
                <td>${invoice?.final_amount ? '₹' + Number(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-'}</td>
                <td>${invoice?.final_amount_with_gst ? '₹' + Number(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '-'}</td>
                <td>
                    ${invoice?.status 
                        ? `<span class="status-badge status-${invoiceStatus}">${invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}</span>`
                        : '<span class="status-badge status-pending">Pending</span>'
                    }
                </td>
                <td>
                    ${shipment?.status
                        ? `<span class="status-badge status-${shipmentStatus.replace(' ', '_')}">${shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1)}</span>`
                        : '<span class="shipstatus">-</span>'
                    }
                </td>
                <td class="text-center">
                    <a href="/admin/orders/${order.id}" title="View Details">
                        <i class="fas fa-eye action-btn"></i>
                    </a>
                </td>
            `;
            tbody.appendChild(row);
        });
    }
</script>

@endsection