From e479cf41e40134fb82cf19cc2d60bebe90b60efe Mon Sep 17 00:00:00 2001
From: Frank John Begornia <frank.begornia@yahoo.com>
Date: Fri, 17 Apr 2026 18:40:47 +0800
Subject: [PATCH] feat: enhance cart layout and styling for improved user
 experience

---
 resources/views/sublayouts/cart.blade.php | 324 ++++++++++++++++++----
 1 file changed, 266 insertions(+), 58 deletions(-)

diff --git a/resources/views/sublayouts/cart.blade.php b/resources/views/sublayouts/cart.blade.php
index 20256fc..4ae3258 100644
--- a/resources/views/sublayouts/cart.blade.php
+++ b/resources/views/sublayouts/cart.blade.php
@@ -2,15 +2,223 @@
 @section('content')
 
 <style>
+body {
+    background: #f4f6f8;
+}
+
+.cart-breadcrumb .breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    margin-bottom: 14px;
+}
+
+.cart-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+}
+
+.cart-title-row hr {
+    border-color: #e5e7eb;
+    margin-top: 12px;
+    margin-bottom: 16px;
+}
+
+.cart-card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 14px;
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    margin-bottom: 12px;
+}
+
+.cart-card h3,
+.cart-card h4,
+.cart-card h5 {
+    color: #111827;
+}
+
+.summary-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.summary-line .summary-label {
+    font-weight: 700;
+    color: #111827;
+}
+
+.summary-line .summary-value {
+    text-align: right;
+    color: #374151;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.summary-total {
+    margin-top: 2px;
+}
+
+.summary-total .summary-label {
+    font-size: 20px;
+}
+
+.summary-total .summary-value {
+    font-size: 22px;
+    color: #111827;
+}
+
+.summary-total-currency {
+    font-size: 14px;
+    color: #6b7280;
+    font-weight: 600;
+    margin-left: 4px;
+}
+
+.order-summary {
+    position: sticky;
+    top: 18px;
+}
+
+.cart-summary-title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.cart-store-head img {
+    border-radius: 6px;
+    margin-right: 6px;
+}
+
+.cart-item-block + .cart-item-block {
+    margin-top: 10px;
+}
+
+.cart-items-shell {
+    padding: 0;
+}
+
+.cart-items-shell .cart-store-head {
+    padding: 14px;
+    border-bottom: 1px solid #e5e7eb;
+    background: #f8fafc;
+    border-radius: 12px 12px 0 0;
+}
+
+.cart-items-shell .cart-store-head h4 {
+    margin: 0;
+}
+
+.cart-items-shell .cart-item-block {
+    margin: 0;
+    border: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.cart-items-shell .cart-item-block:last-child {
+    border-bottom: 0;
+    border-radius: 0 0 12px 12px;
+}
+
+.cart-item-title {
+    margin-top: 0;
+    margin-bottom: 8px;
+    font-size: 18px;
+}
+
+.cart-item-title a {
+    color: #1f2937;
+    text-decoration: none;
+}
+
+.cart-item-title a:hover {
+    color: #0f172a;
+    text-decoration: underline;
+}
+
+.cart-meta {
+    color: #6b7280;
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+
+.cart-table-wrap .table {
+    margin-bottom: 0;
+}
+
+.cart-table-wrap .table > thead > tr > th {
+    border-bottom: 1px solid #e5e7eb;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    color: #64748b;
+}
+
+.cart-table-wrap .table > tbody > tr > td {
+    border-top: 1px solid #f1f5f9;
+    vertical-align: middle;
+    font-size: 13px;
+}
+
+.cart-remove-btn {
+    color: #ef4444;
+}
+
+.cart-remove-btn:hover {
+    color: #b91c1c;
+}
+
+.voucher-row .btn {
+    border-radius: 6px;
+}
+
+.checkout-btn {
+    background-color: #ffc300;
+    border-color: #e2ad00;
+    text-align: -webkit-center;
+    border-radius: 8px;
+}
+
+.checkout-btn:hover {
+    background-color: #ffcf33;
+    border-color: #d39b00;
+}
+
+.continue-btn {
+    border-radius: 8px;
+}
+
+.empty-cart {
+    color: #94a3b8;
+    text-align: center;
+    margin: 40px 0;
+    font-weight: 600;
+}
+
 .previewImage{
     height: 150px;
     width: 95%;
     overflow:hidden;
     object-fit: contain;
 }
+
+@media (max-width: 991px) {
+    .order-summary {
+        position: static;
+    }
+}
 </style>
 
-<div class="row">
+<div class="row cart-breadcrumb">
     <div class="col-md-12">
         <ol class="breadcrumb">
             @if(isset($store_array[0]->StoreUrl))
@@ -23,9 +231,9 @@
     </div>
 </div>
 
-<div class="row">
+<div class="row cart-title-row">
     <div class="col-md-12">
-            <h2 style="font-size: 20px; font-weight: bold;">MY CART</h2>
+            <h2 class="cart-title">My Cart</h2>
             @if(Session::has('cartkeyError'))
                 <div class="alert alert-danger alert-dismissible">
                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
@@ -37,11 +245,11 @@
     </div>
 </div>
 
-@if(count($row) > 0)
+@if(collect($row)->count() > 0)
 
 <div class="row">
     <div class="col-md-4 col-md-push-8 order-summary" >
-        <div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
+        <div class="cart-card">
             @if(Session::has('msg'))
                 <div class="alert alert-warning alert-dismissible">
                     <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
@@ -49,46 +257,45 @@
                         {!! Session::get('msg') !!}
                 </div>
             @endif
-            <h3>Order Summary</h3>
-        </div>
-
-        @if (!Auth::guest())
-
-        <div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
+            <h3 class="cart-summary-title">Order Summary</h3>
 
+            @if (!Auth::guest())
+            <hr>
             <p><strong>Ship to:</strong></p>
 
             @if ($address_book === null)
-            <a href="{{ url('user/address-book/create') }}">[ Add ]</a>
+                <a href="{{ url('user/address-book/create') }}">[ Add ]</a>
             @else
-            <div>{{ $address_book[0]->Fullname }}</div>
-            <div>{{ $address_book[0]->ContactNumber }}</div>
-            <div>
-                {{ $address_book[0]->Address . ' ' . $address_book[0]->Address2 . ', ' . $address_book[0]->State . ', ' . $address_book[0]->City . ', ' . $address_book[0]->Country . ', ' . $address_book[0]->CountryCode . ' ' . $address_book[0]->ZipCode }}
-                <a href="{{ url('user/address-book/edit/'.$address_book[0]->Id) }}">[ Edit ]</a>
-            </div>
+                <div>{{ $address_book[0]->Fullname }}</div>
+                <div>{{ $address_book[0]->ContactNumber }}</div>
+                <div>
+                    {{ $address_book[0]->Address . ' ' . $address_book[0]->Address2 . ', ' . $address_book[0]->State . ', ' . $address_book[0]->City . ', ' . $address_book[0]->Country . ', ' . $address_book[0]->CountryCode . ' ' . $address_book[0]->ZipCode }}
+                    <a href="{{ url('user/address-book/edit/'.$address_book[0]->Id) }}">[ Edit ]</a>
+                </div>
+            @endif
             @endif
 
-        </div>
-        @endif
-        
-        <div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
+            <hr>
             {{-- <h3>Subtotal: <span id="my_subtotal">{{  round($getSubtotal, 2)  }}</span> <small>{{ $store_array[0]->StoreCurrency }}</small></h3> --}}
-            <h5><strong>Subtotal:</strong> 
-                <span>{{ number_format($tax['order_grandtotal'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
-            </h5>
-            <h5><strong>Shipping Fee:</strong>
-                <span>{{ number_format($shipping_fee, 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
-            </h5>
-            <h5> <strong>Tax:</strong>
-                <span>{{ number_format($tax['tax'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
-            </h5>
+            <div class="summary-line">
+                <span class="summary-label">Subtotal:</span>
+                <span class="summary-value">{{ number_format($tax['order_grandtotal'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </div>
+            <div class="summary-line">
+                <span class="summary-label">Shipping Fee:</span>
+                <span class="summary-value">{{ number_format($shipping_fee, 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </div>
+            <div class="summary-line">
+                <span class="summary-label">Tax:</span>
+                <span class="summary-value">{{ number_format($tax['tax'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
+            </div>
             <hr>
-            <h3> <strong>Total:</strong> <span id="my_subtotal">{{ number_format($tax['order_grandtotal'] + $shipping_fee + $tax['tax'], 2) }}</span>
-                <span>{{ $store_array[0]->StoreCurrency }}</span>
-            </h3>
+            <div class="summary-line summary-total">
+                <span class="summary-label">Total:</span>
+                <span class="summary-value"><span id="my_subtotal">{{ number_format($tax['order_grandtotal'] + $shipping_fee + $tax['tax'], 2) }}</span><span class="summary-total-currency">{{ $store_array[0]->StoreCurrency }}</span></span>
+            </div>
             <hr>
-            <div class="form-group" id="voucher_list">
+            <div class="form-group voucher-row" id="voucher_list">
                 @foreach($row as $item)
                     @if($item->VoucherId != null)
                         <div class="btn-group">
@@ -119,20 +326,20 @@
                 <span id="error_voucher" style="color: #dd4b39"></span>
             </form>
             <div class="clearfix"></div>
-        </div>
-        
-        <div style="border: 1px solid #e2e2e2; padding: 10px;">
-            <a @if($getSubtotal <= 0 ) disabled  @endif href="{{ url('getCheckout') }}" class="btn btn-primary btn-block" style="background-color: #ffc300; border-color: #e2ad00; text-align: -webkit-center;" ><img src="{{asset('/images/paypal1.png')}}" class="img img-responsive" style="height:30px;"></a><br>
-            <a href="{{ url('teamstore') . '/' . $store_array[0]->StoreUrl }}" class="btn btn-default btn-block" type="submit">Continue Shopping</a>
+
+            <hr>
+            <a @if($getSubtotal <= 0 ) disabled  @endif href="{{ url('getCheckout') }}" class="btn btn-primary btn-block checkout-btn" ><img src="{{asset('/images/paypal1.png')}}" class="img img-responsive" style="height:30px;"></a><br>
+            <a href="{{ url('teamstore') . '/' . $store_array[0]->StoreUrl }}" class="btn btn-default btn-block continue-btn" type="submit">Continue Shopping</a>
         </div>
     </div>
     <div class="col-md-8 col-md-pull-4">
-        <div style="border: 1px solid #e2e2e2; padding: 10px;">
-            <h4><img height="30px" class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreLogo) }}"> {{ $store_array[0]->StoreName }}</h4>
-        </div>
+        <div class="cart-card cart-items-shell">
+            <div class="cart-store-head">
+                <h4><img height="30px" class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreLogo) }}"> {{ $store_array[0]->StoreName }}</h4>
+            </div>
         @foreach($item_group as $item)
             @if($item->VoucherId == null)
-            <div style="border: 1px solid #e2e2e2; padding: 10px; border-top: none;">
+            <div class="cart-card cart-item-block">
                 <div class="row">
                     <div class="col-md-3">
                         <div class="text-center">
@@ -144,11 +351,11 @@
                         </div>
                     </div>
                     <div class="col-md-9">
-                        <h4>
+                        <h4 class="cart-item-title">
                             <a href="{{ url('teamstore') . '/' . $item->StoreURL . '/' . 'product/' .  $item->ProductURL }}">{{ $item->ProductName }}</a>
                         </h4>
-                        <p>Total Price: {{ $item->total_price . ' ' . $store_array[0]->StoreCurrency  }} &bull; Row(s): {{ $item->qty }} </p>
-                        <div class="table-responsive">  
+                        <p class="cart-meta">Total Price: {{ $item->total_price . ' ' . $store_array[0]->StoreCurrency  }} &bull; Row(s): {{ $item->qty }} </p>
+                        <div class="table-responsive cart-table-wrap">  
                             <table class="table table-striped table-condensed">
 
                                     @if($item->FormUsed=="jersey-and-shorts-form")
@@ -252,20 +459,20 @@
                                                     <td>{{ $sub_item->ShortsSize }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="tshirt-form")
                                                 <tr>
                                                     <td>{{ $sub_item->Size }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="quantity-form")
                                                 <tr>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="name-number-form")
                                                 <tr>
@@ -273,7 +480,7 @@
                                                     <td>{{ $sub_item->Number }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                              @elseif($item->FormUsed=="name-number-size-form")
                                                 <tr>
@@ -282,14 +489,14 @@
                                                     <td>{{ $sub_item->Size }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="number-form")
                                                 <tr>
                                                     <td>{{ $sub_item->Number }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="name-name2-size-form")
                                                 <tr>
@@ -298,7 +505,7 @@
                                                     <td>{{ $sub_item->Size }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="name-size-form")
                                                 <tr>
@@ -306,7 +513,7 @@
                                                     <td>{{ $sub_item->Size }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="jersey-and-shorts-quantity-form")
                                                 <tr>
@@ -314,7 +521,7 @@
                                                     <td>{{ $sub_item->ShortsSize}}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @elseif($item->FormUsed=="number-jersey-shorts-form")
                                                 <tr>
@@ -323,7 +530,7 @@
                                                     <td>{{ $sub_item->ShortsSize }}</td>
                                                     <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
                                                     <td>{{ $sub_item->Quantity }}</td>
-                                                    <td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
+                                                    <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
                                                 </tr>
                                             @else
 
@@ -338,13 +545,14 @@
             </div>
             @endif
         @endforeach
+        </div>
     </div>
 
 </div>
 @else
 <div class="row">
     <div class="col-md-12">
-        <h3 style="color:#d2d2d2;">Your cart is currently empty.</h3>
+        <h3 class="empty-cart">Your cart is currently empty.</h3>
     </div>
 </div>