@if ($order)
    @php
            $version = get_cms_version();
            Theme::asset()->add('front-ecommerce-css', 'vendor/core/plugins/ecommerce/css/front-ecommerce.css', version: $version);
    @endphp
    <link href="https://cdn.materialdesignicons.com/7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
    <style>
        @media (max-width: 768px) {
            
            .bb-order-detail-wrapper .bb-order-info-item
            {
                flex-direction: row;
                gap: 0px !important;
                 padding-bottom: 0rem !important;
            }
            .bb-order-detail-wrapper .card {
                margin-bottom: 1rem;
            }
            
            .bb-order-detail-wrapper .card-body {
                padding: 1rem;
            }
            
            .bb-section-title {
                font-size: 1.1rem !important;
            }
            
            .custom-steps {
                flex-direction: column !important;
                /* gap: 1rem; */
            }
            
            .custom-steps .step {
                display: flex !important;
                align-items: center;
                text-align: left !important;
                /* padding: 0.75rem; */
                background: #f8f9fa;
                border-radius: 8px;
                margin-bottom: 0.5rem;
            }
            
            .custom-steps .step .step-icon-wrap {
                width: 50px !important;
                height: 50px !important;
                margin-right: 1rem;
                flex-shrink: 0;
            }
            
            .custom-steps .step .step-icon {
                width: 50px !important;
                height: 50px !important;
                font-size: 20px !important;
                line-height: 50px !important;
            }
            
            .custom-steps .step .step-icon-wrap::before,
            .custom-steps .step .step-icon-wrap::after {
                display: none !important;
            }
            
            .custom-steps .step .step-title {
                font-size: 14px !important;
                margin: 0;
            }
            
            .bb-order-info-item {
                display: flex;
                /* flex-direction: column; */
                margin-bottom: 0.75rem;
                /* padding: 0.5rem 0; */
                border-bottom: 1px solid #eee;
            }
            
            .bb-order-info-item .label {
                font-weight: 600;
                color: #666;
                font-size: 0.85rem;
                margin-bottom: 0.25rem;
            }
            
            .bb-order-info-item .value {
                font-size: 0.9rem;
            }
            
            .orders-table-container {
                margin: 0 -1rem;
            }
            
            .orders-table {
                display: block;
                width: 100%;
            }
            
            .orders-table thead {
                display: none;
            }
            
            .orders-table tbody {
                display: block;
            }
            
            .orders-table tbody tr {
                display: block;
                background: #fff;
                border: 1px solid #e9ecef;
                border-radius: 8px;
                margin-bottom: 1rem;
                padding: 1rem;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            
            .orders-table tbody td {
                display: block;
                width: 100%;
                padding: 0.5rem 0;
                border: none;
                text-align: left !important;
                position: relative;
                padding-left: 100px;
            }
            
            .orders-table tbody td:before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                top: 0.5rem;
                width: 90px;
                font-weight: 600;
                color: #666;
                font-size: 0.8rem;
                text-transform: uppercase;
            }
            
            .orders-table tbody td:nth-child(1):before { content: "Product"; }
            .orders-table tbody td:nth-child(2):before { content: "Price"; }
            .orders-table tbody td:nth-child(3):before { content: "Qty"; }
            .orders-table tbody td:nth-child(4):before { content: "Total"; }
            
            .orders-table tbody td .d-flex {
                flex-direction: column !important;
                align-items: flex-start !important;
            }
            
            .orders-table tbody td img {
                width: 40px !important;
                height: 40px !important;
                margin-bottom: 0.5rem !important;
                margin-right: 0 !important;
            }
            
            .bb-order-summary .table {
                font-size: 0.9rem;
            }
            
            .bb-order-summary .table td {
                padding: 0.5rem 0;
            }
        }
        
        @media (max-width: 576px) {
            .bb-order-detail-wrapper .card-body {
                padding: 0 !important;
            }
            
            .bb-section-title {
                font-size: 1rem !important;
            }
            
            .custom-steps .step {
                /* padding: 0.5rem; */
            }
            
            .custom-steps .step .step-title {
                font-size: 13px !important;
            }
            
            .orders-table tbody td {
                padding-left: 80px;
                font-size: 0.85rem;
            }
            
            .orders-table tbody td:before {
                width: 70px;
                font-size: 0.75rem;
            }
        }
        @media (max-width: 375px) {
            .bb-order-detail-wrapper .bb-order-info-item{
                flex-direction: column;
            }

        }
        /* Responsive Order Summary Table */
        @media (max-width: 768px) {

            .bb-order-summary table td {
                display: flex;
                justify-content: space-between;
                width: 100% !important;
                text-align: left !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                border: none !important;
            }

            .bb-order-summary table tr {
                display: flex;
                margin-bottom: 10px;
            }

            .bb-order-summary table tr td:nth-child(1),
            .bb-order-summary table tr td:nth-child(2) {
                display: none !important; /* hide empty cells */
            }

            .bb-order-summary table tr td:nth-child(3),
            .bb-order-summary table tr td:nth-child(4) {
                display: flex !important;
            }

            .bb-order-summary table tr td:nth-child(3) {
                font-weight: 600;
                FONT-SIZE: 12PX;
            }
        }
        /*  */
        .btn-secondary{
            border-radius: 6px !important;
            font-weight: 600 !important;
            padding: .5rem 1rem !important;
        }
        .bb-profile-header {
            display: none;
        }

        .orders-table thead th {
            background: #f9fafb;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgb(7, 55, 99);
            vertical-align: middle;
            border-bottom: 2px solid #dee2e6;
            white-space: nowrap;
        }

        .orders-table tbody tr:hover {
            /* background-color: #f8f9fa; */
            background-color: #ECECEC;
        }

        .orders-table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
            font-size: 14px;
            color: #495057;
        }

        .orders-table tbody tr {
            transition: background-color 0.15s ease;
        }

        .bb-order-detail-wrapper .card {
            box-shadow: none !important;
        }

        /* .bb-payment-proof-card {
                border: 0px solid #eee !important;
                box-shadow: none !important;
            } */
        /* .form-control {

            height: 38px !important;
        } */

        .bb-customer-page .bb-profile-content {
            padding: 0rem 2rem 2rem 2rem;
        }
           .custom-steps .step {
          display: block;
          flex: 1;
          text-align: center;
      }

      .custom-steps .step .step-icon-wrap {
          display: block;
          position: relative;
          width: 100%;
          height: 70px;
          text-align: center;
      }

      .custom-steps .step.completed .step-icon {
          border-color: #88aaf3;
          background-color: #88aaf3;
          color: #fff;
      }

      .custom-steps .step .step-icon {
            display: inline-block;
            position: relative;
            width: 53px;
            height: 53px;
            border: 1px solid #e1e7ec;
            border-radius: 10px;
            background-color: #f5f5f5;
            color: #374250;
            font-size: 33px;
            line-height: 53px;
            z-index: 5;
      }

      .custom-steps .step.completed .step-icon-wrap::after {
          background-color: #88aaf3;
      }

      .custom-steps .step .step-icon-wrap::after {
          display: block;
          position: absolute;
          top: 38%;
          width: 50%;
          height: 3px;
          margin-top: -1px;
          background-color: #e1e7ec;
          content: "";
          z-index: 1;
          right: 0;
      }

      .custom-steps .step .step-title {
         margin-top: 0px;
        margin-bottom: 0;
        color: #606975;
        font-size: 13px;    
        font-weight: 500;
      }

      .custom-steps .step .step-icon-wrap::before {
          display: block;
          position: absolute;
          top: 38%;
          width: 50%;
          height: 3px;
          margin-top: -1px;
          background-color: #e1e7ec;
          content: "";
          z-index: 1;
          left: 0;
      }

      .custom-steps .step.completed .step-icon-wrap::before {
          background-color: #88aaf3;
      }

      .bg-faded,
      .bg-secondary {
          background-color: #f5f5f5 !important;
          color: #606975;
      }

      .custom-steps .step:first-child .step-icon-wrap::before {
          display: none;
      }

      .custom-steps .step:last-child .step-icon-wrap::after {
          display: none;
      }

      .ec-odr-dtl .product-img {
          width: 50px;
          border-radius: 15px;
      }

      tbody {
          /* color: #8a909d; */
          /* text-align: center; */
      }

      @media (max-width: 576px) {
          .custom-steps .step {
              margin-bottom: 12px;
          }
      }
       @media (max-width:  810px) {
        .bb-order-header .bb-order-title { 
            font-size: 1.25rem;
         }
       }

        @media (max-width: 768px) {
            h2 {
                line-height: 19px !important;
            }
            .bb-order-header{
                margin-bottom:10px;
            }
            .orders-table-container {
                margin: 0 -15px;
            }

            .orders-table-wrapper {
                overflow-x: visible;
            }

            .orders-table {
                display: block;
                width: 100%;
                min-width: auto;
            }

            .orders-table thead {
                display: none;
            }

            .orders-table tbody {
                display: block;
                width: 100%;
            }

            .orders-table tbody tr {
                display: block;
                background: #fff;
                border: 1px solid #e9ecef;
                border-radius: 8px;
                margin-bottom: 15px;
                padding: 15px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .orders-table tbody td {
                display: block;
                width: 100%;
                padding: 8px 0;
                border: none;
                text-align: left;
                position: relative;
                padding-left: 120px;
                min-height: 24px;
            }

            .orders-table tbody td:before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                top: 8px;
                width: 110px;
                font-weight: 600;
                color: #495057;
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .orders-table tbody td:nth-child(1):before {
                content: "Product";
            }

            .orders-table tbody td:nth-child(2):before {
                content: "Price";
            }

            .orders-table tbody td:nth-child(3):before {
                content: "Quantity";
            }

            .orders-table tbody td:nth-child(4):before {
                content: "Total";
            }
            .bb-order-header .bb-order-title{
                    font-size: 15PX !important;
            }
        }
        
        .payment-summary {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        

        
        .list_payment_method .list-group-item.active {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }
        
        /* Payment Methods Section Styling */
        .payment-methods-section {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e9ecef;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .payment-methods-header {
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 15px;
        }
        
        .payment-methods-title {
            color: #2c3e50;
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        
        .payment-methods-subtitle {
            font-size: 13px;
            margin-top: 4px;
        }
        
        .payment-methods-list .list-group-item {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 12px;
            padding: 16px 20px;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #fafbfc;
        }
        
        .payment-methods-list .list-group-item:hover {
            border-color: #007bff;
            background-color: #f8f9ff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,123,255,0.15);
        }
        
        .payment-methods-list .list-group-item.active {
            background-color: #e7f3ff;
            border-color: #007bff;
            box-shadow: 0 4px 12px rgba(0,123,255,0.2);
        }
        
        .payment-methods-list .payment_method_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .payment-methods-list .payment_method_item label {
            display: flex;
            align-items: center;
            margin: 0;
            cursor: pointer;
            font-weight: 500;
            color: #495057;
        }
        
        .payment-methods-list .payment_method_item input[type="radio"] {
            margin-right: 12px;
            transform: scale(1.2);
        }
        
        .payment-methods-list .payment_method_item .payment-method-logo {
            height: 24px;
            margin-left: auto;
        }
        .bb-customer-page .customer-order-detail span{
            margin: 4px 0 !important;
        }
        .bb-order-detail-wrapper .bb-order-info-list {
            gap: 0rem !important;
        }
        
        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            .input-group>.form-control, .input-group>.form-floating, .input-group>.form-select{
                    width: 100% !important;
            }
            .bb-customer-page .bb-profile-content {
                padding: 0rem 1rem 1.5rem;
            }
            
            .bb-order-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1rem;
            }
            
            .bb-order-header .bb-order-title {
                font-size: 1.25rem !important;
            }
            
            .bb-order-actions {
                width: 100%;
                justify-content: flex-start !important;
            }
            
            .bb-order-actions .btn {
                font-size: 12px !important;
                padding: 0.4rem 0.8rem !important;
                flex: 1;
                min-width: auto;
            }
            
            .custom-steps {
                flex-direction: column !important;
            }
            
            .custom-steps .step {
                display: flex !important;
                align-items: center;
                text-align: left !important;
                /* padding: 0.75rem; */
                background: #f8f9fa;
                border-radius: 8px;
                margin-bottom: 0;
            }
            
            .custom-steps .step .step-icon-wrap {
                width: 45px !important;
                height: 45px !important;
                margin-right: 0.75rem;
                flex-shrink: 0;
            }
            
            .custom-steps .step .step-icon {
                width: 35px !important;
                height: 35px !important;
                font-size: 18px !important;
                line-height: 35px !important;
            }
            
            .custom-steps .step .step-icon-wrap::before,
            .custom-steps .step .step-icon-wrap::after {
                display: none !important;
            }
            
            .custom-steps .step .step-title {
                font-size: 13px !important;
                margin: 0;
                font-weight: 500;
            }
            
           
            
            .input-group {
                flex-direction: column !important;
            }
            
            .input-group .form-control {
                border-radius: 0.375rem !important;
                margin-bottom: 0.5rem;
            }
            
            .input-group .btn {
                border-radius: 0.375rem !important;
                width: 100%;
            }
            
            .modal-dialog {
                margin: 1rem;
            }
            
            .modal-content {
                border-radius: 12px;
            }
            
            .modal-header {
                padding: 1rem;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .modal-header .btn-close {
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
            
            .modal-body {
                padding: 1rem;
            }
            
            .modal-footer {
                padding: 1rem;
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .modal-footer .btn {
                width: 100%;
                margin: 0;
            }
            
            .payment-summary {
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            .payment-summary .row {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .payment-summary .col-sm-6 {
                text-align: left !important;
            }
            
            .payment-methods-section {
                padding: 1rem;
            }
            
            .payment-methods-title {
                font-size: 1.1rem;
            }
            
            .payment-methods-list .list-group-item {
                padding: 1rem;
                margin-bottom: 0.75rem;
            }
            
            .payment-methods-list .payment_method_item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .payment-methods-list .payment_method_item label {
                width: 100%;
            }
            
            .payment-methods-list .payment_method_item .payment-method-logo {
                margin-left: 0;
                align-self: flex-end;
            }
        }
        
        @media (max-width: 576px) {
            .bb-customer-page .bb-profile-content {
                padding: 0rem 0.5rem 1rem;
            }
            
            .bb-order-header .bb-order-title {
                font-size: 1.1rem !important;
            }
            
            .bb-order-actions .btn {
                font-size: 11px !important;
                padding: 0.35rem 0.6rem !important;
            }
            
            .custom-steps .step {
                /* padding: 0.5rem; */
            }
            
            .custom-steps .step .step-icon-wrap {
                width: 40px !important;
                height: 40px !important;
                margin-right: 0.5rem;
            }
            
            .custom-steps .step .step-icon {
                width: 30px !important;
                height: 30px !important;
                font-size: 16px !important;
                line-height: 30px !important;
            }
            
            .custom-steps .step .step-title {
                font-size: 12px !important;
            }
            
            .bb-payment-proof-card {
                margin: 0.75rem 0;
            }
            
            .bb-payment-proof-card-content {
                padding: 1rem;
            }
            
            .bb-payment-proof-card-title {
                font-size: 1rem;
            }
            
            .modal-dialog {
                margin: 0.5rem;
            }
            
            .modal-header,
            .modal-body,
            .modal-footer {
                padding: 0.75rem;
            }
            
            .payment-summary {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            .payment-methods-section {
                padding: 0.75rem;
            }
            
            .payment-methods-title {
                font-size: 1rem;
            }
            
            .payment-methods-list .list-group-item {
                padding: 0.75rem;
            }
        }
        
        @media (max-width: 480px) {
            .bb-order-actions {
                flex-direction: column;
            }
            
            .bb-order-actions .btn {
                width: 100%;
                margin-bottom: 0.25rem;
            }
            
            .custom-steps .step {
                /* padding: 0.4rem; */
            }
            
            .custom-steps .step .step-title {
                font-size: 11px !important;
                line-height: 1.2;
            }
        }
       
    </style>
    <div class="bb-order-detail-wrapper">
        <!-- Order Tracking Section -->
        <div class="card">
            <div class="card-body">
                 <div class="bb-order-products">
                    <h5 class="bb-section-title mb-3">
                            {{ __('Tracking Order No -') }} {{ $order->code ?? '-' }}
                            <small class="text-muted" style="font-size: 0.8rem;">
                                ({{ $order->created_at ? $order->created_at->translatedFormat('d M Y H:i:s') : '-' }})
                            </small>
                        </h5>
                                            
                        @php
                            $status = (string) $order->status;
                            $statusSteps = [
                                'pending' => 1,
                                'confirmed' => 2,
                                'picked_up' => 3,
                                'on_the_way' => 4,
                                'delivered' => 5,
                            ];
                            $currentStep = $statusSteps[$status ?? 'pending'] ?? 0;

                            // Step titles and icons
                            $stepDetails = [
                                ['title' => 'Pending Order', 'icon' => 'mdi-cart'],
                                ['title' => 'Confirmed Order', 'icon' => 'mdi-repeat'],
                                ['title' => 'Picked Up Order', 'icon' => 'mdi-gift'],
                                ['title' => 'On The Way Order', 'icon' => 'mdi-truck-delivery'],
                                ['title' => 'Order Delivered', 'icon' => 'mdi-hail'],
                            ];
                        @endphp
                            <div class="custom-steps d-flex justify-content-between">
                                @foreach ($stepDetails as $index => $step)
                                    <div class="step {{ $currentStep >= $index + 1 ? 'completed' : '' }}">
                                        <div class="step-icon-wrap">
                                            <div class="step-icon"><i class="mdi {{ $step['icon'] }}"></i></div>
                                        </div>
                                        <h4 class="step-title">{{ $step['title'] }}</h4>
                                    </div>
                                @endforeach
                            </div>
                 </div>

            </div>
        </div>

        <!-- Order Information Section -->
        <div class="card">
            <div class="card-body">
                <div class="bb-order-info">
                    <div class="row">
                        <div @class([
                            'col-12' => !$order->address->name  && $order->user_id === 104,
                            'col-md-12' => $order->address->name && $order->user_id === 104,
                            'col-md-6' => $order->address->name && $order->user_id !== 104,
                        ])>
                            <div class="bb-order-info-section">
                                <h5 class="bb-section-title mb-3">{{ __('Order Information') }}</h5>
                                <div class="bb-order-info-list">
                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Order number') }}:</span>
                                        <span class="value fw-bold">{{ $order->code }}</span>
                                    </div>
                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Date & Time') }}:</span>
                                        <span
                                            class="value">{{ $order->created_at->translatedFormat('d M Y H:i:s') }}</span>
                                    </div>
                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Customer Name') }}:</span>
                                        <span
                                            class="value">{{ $order->user->name ?? ($order->address->name ?? '-') }}</span>
                                    </div>
                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Email') }}:</span>
                                        @if ($order->user_id === 104)
                                            <span class="value">-</span>
                                        @else
                                            <span class="value">{{ $order->user->email ?? ($order->address->email ?? '-') }}</span>
                                        @endif
                                    </div>

                                    {{-- <div class="bb-order-info-item">
                                        <span class="label">{{ __('Order status') }}:</span>
                                        <span class="value">{{ $order->status->label() }}</span>
                                    </div> --}}
                                    @if ($order->cancellation_reason)
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Cancellation Reason') }}:</span>
                                            <span
                                                class="value text-warning">{{ $order->cancellation_reason_message }}</span>
                                        </div>
                                    @endif
                                    @if (is_plugin_active('payment') && $order->payment_method)
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Payment method') }}:</span>
                                            {{ sales_payment_method()[$order->payment_method] ?? __('Unknown') }}
                                        </div>
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Payment status') }}:</span>
                                            {!! BaseHelper::clean($order->payment->status->toHtml()) !!}</span>
                                        </div>
                                    @endif
                                    @if ($order->description)
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Note') }}:</span>
                                            <span
                                                class="value text-warning fst-italic">{{ $order->description }}</span>
                                        </div>
                                    @endif

                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Total Products') }}:</span>
                                        <span class="value">{{ $order->products->count() ?? 0 }}</span>
                                    </div>
                                    <div class="bb-order-info-item">
                                        <span class="label">{{ __('Total Price') }}:</span>
                                        <span class="value">{{ format_price($order->sub_total ?? 0) }}</span>
                                    </div>
                                     <div class="bb-order-info-item">
                                        <span class="label">{{ __('Tax Amount') }}:</span>
                                        <span class="value">{{ format_price($order->tax_amount ?? 0) }}</span>
                                    </div>
                                    @php
                                        $termsIds = $order->terms_conditions
                                            ? json_decode($order->terms_conditions, true)
                                            : [];
                                        $terms = $termsIds
                                            ? \App\Models\EcTermCondition::whereIn('id', $termsIds)->get()
                                            : collect();
                                    @endphp
                                    @if ($terms->isNotEmpty())
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Terms & Conditions') }}:</span>
                                            <span class="value">
                                                @foreach ($terms as $term)
                                                    @if ($term->description)
                                                        <div class="text-muted mb-1">{!! $term->description !!}</div>
                                                    @endif
                                                @endforeach
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @if ($order->address->name)
                            <div @class([
                                'd-none' => $order->user_id === 104,
                                'col-md-6' => $order->user_id !== 104,
                            ])>
                                <div class="bb-order-address-section">
                                    <h5 class="bb-section-title mb-3">{{ __('Shipping Address') }}</h5>
                                    <div class="bb-order-info-list">
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Full Name') }}:</span>
                                            <span class="value">{{ $order->address->name }}</span>
                                        </div>
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Phone') }}:</span>
                                            <span class="value">{{ $order->address->phone }}</span>
                                        </div>
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Address') }}:</span>
                                            <span class="value">{{ $order->address->full_address }}</span>
                                        </div>
                                        <!-- Shipping Information Section -->
                                        @if (!EcommerceHelper::isDisabledPhysicalProduct() && $order->shipment->id)

                                            {{-- <div class="bb-order-info-item">
                                                <span class="label">{{ __('Shipping Status') }}:</span>
                                                <span class="value">{!! BaseHelper::clean($order->shipment->status->toHtml()) !!}</span>
                                            </div> --}}

                                            @if ($order->shipment->shipping_company_name)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Shipping Company Name') }}:</span>
                                                    <span
                                                        class="value">{{ $order->shipment->shipping_company_name }}</span>
                                                </div>
                                            @endif

                                            @if ($order->shipment->tracking_id)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Tracking ID') }}:</span>
                                                    <span class="value">{{ $order->shipment->tracking_id }}</span>
                                                </div>
                                            @endif

                                            @if ($order->shipment->tracking_link)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Tracking Link') }}:</span>
                                                    <span class="value">
                                                        <a href="{{ $order->shipment->tracking_link }}"
                                                            target="_blank">{{ $order->shipment->tracking_link }}</a>
                                                    </span>
                                                </div>
                                            @endif

                                            @if ($order->shipment->note)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Delivery Notes') }}:</span>
                                                    <span class="value">{{ $order->shipment->note }}</span>
                                                </div>
                                            @endif

                                            @if ($order->shipment->estimate_date_shipped)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Estimate Date Shipped') }}:</span>
                                                    <span
                                                        class="value">{{ $order->shipment->estimate_date_shipped }}</span>
                                                </div>
                                            @endif

                                            @if ($order->shipment->date_shipped)
                                                <div class="bb-order-info-item">
                                                    <span class="label">{{ __('Date Shipped') }}:</span>
                                                    <span class="value">{{ $order->shipment->date_shipped }}</span>
                                                </div>
                                            @endif

                                        @endif
                                    </div>
                                </div>

                                @php
                                        $billing = $order->customerBillingAddress ?? null;
                                        $billingExists = $billing && $billing->name;

                                        $shippingJson = $order->shipping_address
                                            ? json_decode($order->shipping_address, true)
                                            : null;

                                        // Decide source
                                        $addressSource = $billingExists ? $billing : $shippingJson;

                                        // Build full address
                                        if ($billingExists) {
                                            $fullAddress = $billing->full_address ?? trim(
                                                ($billing->address ?? '') .
                                                ($billing->locationCity ? ', ' . $billing->locationCity->name : '') .
                                                ($billing->locationState ? ', ' . $billing->locationState->name : '') .
                                                ($billing->locationCountry ? ', ' . $billing->locationCountry->name : '') .
                                                ($billing->zip_code ? ', ' . $billing->zip_code : '')
                                            );
                                        } elseif ($shippingJson) {
                                            $jsonCity = !empty($shippingJson['city']) ? \Botble\Location\Models\City::find(intval($shippingJson['city'])) : null;
                                            $jsonState = !empty($shippingJson['state']) ? \Botble\Location\Models\State::find(intval($shippingJson['state'])) : null;
                                            $jsonCountry = !empty($shippingJson['country']) ? \Botble\Location\Models\Country::find(intval($shippingJson['country'])) : null;

                                            $fullAddress = ($shippingJson['address'] ?? '');
                                            $fullAddress .= $jsonCity ? ', ' . $jsonCity->name : '';
                                            $fullAddress .= $jsonState ? ', ' . $jsonState->name : '';
                                            $fullAddress .= $jsonCountry ? ', ' . $jsonCountry->name : '';
                                            $fullAddress .= !empty($shippingJson['postal_code']) ? ', ' . $shippingJson['postal_code'] : '';
                                        } else {
                                            $fullAddress = '-';
                                        }
                                    @endphp

                            

                                <div class="bb-order-address-section">
                                    <h5 class="bb-section-title mb-3">{{ __('Billing Address') }}</h5>
                                    <div class="bb-order-info-list">
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Full Name') }}:</span>
                                            <span class="value">{{ $billingExists ? $billing->name : ($shippingJson['name'] ?? '-') }}</span>
                                        </div>
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Phone') }}:</span>
                                            <span class="value">{{ $billingExists ? $billing->phone : ($shippingJson['phone'] ?? '-') }}</span>
                                        </div>
                                        <div class="bb-order-info-item">
                                            <span class="label">{{ __('Address') }}:</span>
                                            <span class="value">{!! nl2br(e($fullAddress)) !!}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Products Section -->
        <div class="card">
            <div class="card-body">
                <h5 class="bb-section-title mb-3">{{ __('Products') }}</h5>

                <div class="bb-order-products">
                    <div class="orders-table-container">
                        <div class="orders-table-wrapper">
                            <table class="table orders-table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th width="50%">{{ __('Product') }}</th>
                                        <th width="15%" class="text-center">{{ __('Price') }}</th>
                                        <th width="15%" class="text-center">{{ __('Quantity') }}</th>
                                        <th width="20%" class="text-end">{{ __('Total') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($order->products as $orderProduct)
                                        @php
                                            $product = get_products([
                                                'condition' => [
                                                    'ec_products.id' => $orderProduct->product_id,
                                                ],
                                                'take' => 1,
                                                'select' => [
                                                    'ec_products.id',
                                                    'ec_products.images',
                                                    'ec_products.name',
                                                    'ec_products.price',
                                                    'ec_products.sale_price',
                                                    'ec_products.sale_type',
                                                    'ec_products.start_date',
                                                    'ec_products.end_date',
                                                    'ec_products.sku',
                                                    'ec_products.is_variation',
                                                    'ec_products.status',
                                                    'ec_products.order',
                                                    'ec_products.created_at',
                                                ],
                                            ]);
                                        @endphp
                                        <tr style="vertical-align: middle;">
                                            <td style="vertical-align: middle;">
                                                <div class="d-flex align-items-center">
                                                    <img src="{{ RvMedia::getImageUrl($orderProduct->product_image, 'thumb', false, RvMedia::getDefaultImage()) }}"
                                                        alt="{{ $orderProduct->product_name }}" class="me-3"
                                                        style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
                                                    <div>
                                                        <div class="fw-medium">
                                                            @if ($product && $product->original_product?->url)
                                                                <a href="{{ $product->original_product->url }}"
                                                                    class="text-decoration-none">{!! BaseHelper::clean($orderProduct->product_name) !!}</a>
                                                            @else
                                                                {!! BaseHelper::clean($orderProduct->product_name) !!}
                                                            @endif
                                                        </div>
                                                        @if ($sku = Arr::get($orderProduct->options, 'sku'))
                                                            <small class="text-muted">SKU: {{ $sku }}</small>
                                                        @endif
                                                        @if ($attributes = Arr::get($orderProduct->options, 'attributes'))
                                                            <br><small class="text-muted">{{ $attributes }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                {{ $orderProduct->amount_format }}</td>
                                            <td class="text-center" style="vertical-align: middle;">
                                                {{ $orderProduct->qty }}</td>
                                            <td class="text-end fw-bold" style="vertical-align: middle;">
                                                {{ $orderProduct->total_format }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                        <div class="bb-order-summary mt-3">
                            <div class="row">
                                <div class="col-12">
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <td></strong></td>
                                                <td  class="text-center"><strong></strong></td>
                                                <td class="text-end">
                                                    <strong>{{ __('Order Summary') }}</strong></td>
                                                <td  class="text-end"><strong>{{ __('Total') }}</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td class="text-center"></td>
                                                <td class="text-end">{{ __('Subtotal') }}</td>
                                                <td class="text-end">{{ format_price($order->amount) }}</td>
                                            </tr>
                                            @if (EcommerceHelper::isTaxEnabled() && (float) $order->tax_amount)
                                                <tr>
                                                    <td></td>
                                                    <td class="text-center"></td>
                                                    <td class="text-end">{{ __('Tax') }}</td>
                                                    <td class="text-end">{{ format_price($order->tax_amount) }}</td>
                                                </tr>
                                            @endif
                                            @if ((float) $order->charges_totalamount)
                                                <tr>
                                                    <td></td>
                                                    <td class="text-center"></td>
                                                    <td class="text-end">{{ __('Charges Amount') }}</td>
                                                    <td class="text-end">{{ format_price($order->charges_totalamount) }}
                                                    </td>
                                                </tr>
                                            @endif

                                            @if ((float) $order->discount_amount)
                                                <tr class="text-success">
                                                    <td></td>
                                                    <td class="text-center"></td>
                                                    <td class="text-end">{{ __('Discount') }}</td>
                                                    <td class="text-end">-{{ format_price($order->discount_amount) }}</td>
                                                </tr>
                                            @endif
                                            {{-- @if (
                                                (float) $order->shipping_amount &&
                                                    EcommerceHelper::countDigitalProducts($order->products) != $order->products->count())
                                                <tr>
                                                    <td></td>
                                                    <td class="text-center"></td>
                                                    <td class="text-end">{{ __('Shipping fee') }}</td>
                                                    <td class="text-end">{{ format_price($order->shipping_amount) }}</td>
                                                </tr>
                                            @endif --}}
                                            @if ($order->shipping_method)
                                            <tr>
                                                <td></td>
                                                <td class="text-center"></td>
                                                <td  class="text-end">
                                                    @if ($order->pick_up_shipping_location)
                                                        {{ __('Pickup Location') }}:
                                                    @else
                                                        {!! BaseHelper::html(
                                                            __('Shipping Method and fee') .
                                                                ($order->is_free_shipping
                                                                    ? ' <small>(' . __('Using coupon code') . ': <strong>' . $order->coupon_code . '</strong>)</small>'
                                                                    : ''),
                                                        ) !!}:
                                                    @endif
                                                </td>
                                                <td class="text-end {{ $order->pick_up_shipping_location ? 'max-custom' : '' }}">
                                                    @if ($order->pick_up_shipping_location)
                                                        {{ $order->pick_up_shipping_location }}
                                                    @else
                                                        {{ BaseHelper::html(
                                                            $order->shipping_method_name .
                                                                ((float) $order->shipping_amount
                                                                    ? ' - ' . format_price($order->shipping_amount)
                                                                    : ' - ' . __('Free'))
                                                        ) }}
                                                    @endif
                                                </td>
                                            </tr>
                                            @endif

                                            <tr class="border-top">
                                                <td class="fw-bold fs-5"></td>
                                                <td class="text-center"></td>
                                                <td class="text-end">{{ __('Total Amount') }}</td>
                                                <td class="text-end fw-bold fs-5 text-primary">
                                                    {{ format_price($order->sub_total) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>

        <!-- Shipping Information Section -->
        {{-- @if (!EcommerceHelper::isDisabledPhysicalProduct() && $order->shipment->id)
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="bb-section-title mb-3">{{ __('Shipping Information') }}</h5>
                    <div class="bb-order-shipping">
                        <div class="bb-order-info-list">
                            <div class="bb-order-info-item">
                                <span class="label">{{ __('Shipping Status') }}:</span>
                                <span class="value">{!! BaseHelper::clean($order->shipment->status->toHtml()) !!}</span>
                            </div>

                            @if ($order->shipment->shipping_company_name)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Shipping Company Name') }}:</span>
                                    <span class="value">{{ $order->shipment->shipping_company_name }}</span>
                                </div>
                            @endif

                            @if ($order->shipment->tracking_id)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Tracking ID') }}:</span>
                                    <span class="value">{{ $order->shipment->tracking_id }}</span>
                                </div>
                            @endif

                            @if ($order->shipment->tracking_link)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Tracking Link') }}:</span>
                                    <span class="value">
                                        <a href="{{ $order->shipment->tracking_link }}" target="_blank">{{ $order->shipment->tracking_link }}</a>
                                    </span>
                                </div>
                            @endif

                            @if ($order->shipment->note)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Delivery Notes') }}:</span>
                                    <span class="value">{{ $order->shipment->note }}</span>
                                </div>
                            @endif

                            @if ($order->shipment->estimate_date_shipped)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Estimate Date Shipped') }}:</span>
                                    <span class="value">{{ $order->shipment->estimate_date_shipped }}</span>
                                </div>
                            @endif

                            @if ($order->shipment->date_shipped)
                                <div class="bb-order-info-item">
                                    <span class="label">{{ __('Date Shipped') }}:</span>
                                    <span class="value">{{ $order->shipment->date_shipped }}</span>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif --}}
    </div>
@elseif (request()->input('order_id') || request()->input('email'))
    <div role="alert" class="alert alert-danger mt-3">
        <div class="d-flex align-items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle"
                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 9v4"></path>
                <path
                    d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z">
                </path>
                <path d="M12 16h.01"></path>
            </svg>

            {{ __('The order could not be found. Please try again or contact us if you need assistance.') }}
        </div>
    </div>
@endif