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

<style>
    .order-popup-card {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
    }
    .order-user-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .order-user-left {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    .order-profile-icon {
        width: 60px;
        height: 60px;
        background: #e5e7eb;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: #6b7280;
    }
    .order-summary-card {
        background: #f3f4f6;
        padding: 18px;
        border-radius: 12px;
        margin: 20px 0;
    }
    .summary-title {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .summary-value {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
    }
    .status-badge {
        background: #fde6d4;
        color: #ad6200;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    .totals-box {
        background: #f3f4f6;
        padding: 18px;
        border-radius: 12px;
        margin-top: 25px;
        text-align: center;
    }
</style>

<div class="order-popup-card">

    {{-- Header --}}
    <h3 class="fw-bold">Order Details</h3>
    <p class="text-muted mb-4">Detailed View of all Orders in this shipment consolidation.</p>

    {{-- USER SECTION --}}
    <div class="order-user-box">

        <div class="order-user-left">
            <div class="order-profile-icon">
                {{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
            </div>

            <div>
                <h5 class="mb-1">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
                <p class="mb-0">{{ $user->company_name ?? 'N/A Company' }}</p>
                <p class="text-muted mb-0">{{ $user->email ?? '' }}</p>
                <p class="text-muted mb-0">{{ $user->mobile_no ?? '' }}</p>
            </div>
        </div>

        <div class="text-end">
            <p class="mb-0">{{ $user->address ?? 'No Address' }}</p>
            <small class="text-muted">{{ $user->pincode ?? '' }}</small>
        </div>

    </div>

    {{-- ORDER SUMMARY --}}
    <div class="order-summary-card">
        <div class="row text-center">

            <div class="col-md-4">
                <p class="summary-title">Order ID</p>
                <p class="fw-bold text-primary" style="font-size:18px;">{{ $order->order_id }}</p>
            </div>

            <div class="col-md-4">
                <p class="summary-title">Total Orders</p>
                <p class="summary-value">{{ $order->items->count() }}</p>
            </div>

            <div class="col-md-4">
                <p class="summary-title">Status</p>
                <span class="status-badge">{{ ucfirst($order->status) }}</span>
            </div>

        </div>
    </div>

    {{-- ITEMS TABLE --}}
<div class="table-responsive mt-3">
    <table class="table table-borderless align-middle">
        <thead>
            <tr class="text-muted">
                <th>#</th>
                <th>Description</th>
                <th>CTN</th>
                <th>QTY</th>
                <th>TTL/QTY</th>
                <th>Unit</th>
                <th>Price (₹)</th>
                <th>TTL Amount (₹)</th>
                <th>CBM</th>
                <th>TTL CBM</th>
                <th>KG</th>
                <th>TTL KG</th>
                <th>Shop No</th>
            </tr>
        </thead>

        <tbody>
            @foreach($order->items as $index => $item)
            <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $item->description }}</td>
                <td>{{ $item->ctn }}</td>
                <td>{{ $item->qty }}</td>
                <td>{{ $item->ttl_qty }}</td>
                <td class="fw-bold">{{ strtoupper($item->unit) }}</td>
                <td class="fw-bold">₹{{ number_format($item->price, 2) }}</td>
                <td class="fw-bold">₹{{ number_format($item->ttl_amount, 2) }}</td>
                <td>{{ $item->cbm }}</td>
                <td>{{ $item->ttl_cbm }}</td>
                <td>{{ $item->kg }}</td>
                <td>{{ $item->ttl_kg }}</td>
                <td>{{ $item->shop_no }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>


    {{-- TOTALS --}}
    <div class="totals-box">
        <div class="row">

            <div class="col-md-4">
                <h4 class="text-primary fw-bold">{{ $order->ttl_qty }}</h4>
                <p class="text-muted mb-0">Total TTL/QTY</p>
            </div>

            <div class="col-md-4">
                <h4 class="text-success fw-bold">{{ $order->ttl_kg }}</h4>
                <p class="text-muted mb-0">Total TTL KG</p>
            </div>

            <div class="col-md-4">
                <h4 style="color:#e60073;" class="fw-bold">₹{{ number_format($order->ttl_amount, 2) }}</h4>
                <p class="text-muted mb-0">Total Amount</p>
            </div>

        </div>
    </div>

</div>