{{-- <div class="row pos_form_totals" style="background-color: unset !important;color: #fff !important;">
	<div class="col-md-12" style="padding-right: 0 !important">
		<table class="table table-condensed" style="margin-bottom: unset;font-size: 12px !important;">
			<tr style="background-color: unset !important;color: #fff !important;">
				<td><b class="tw-text-base md:tw-text-lg tw-font-bold">@lang('sale.item'):</b>&nbsp;
					<span class="total_quantity tw-text-base md:tw-text-lg tw-font-semibold">0</span></td>
				<td>
					<b class="tw-text-base md:tw-text-lg tw-font-bold">@lang('sale.total'):</b> &nbsp;
					<span class="price_total tw-text-base md:tw-text-lg tw-font-semibold">0</span>
				</td>
			</tr>
			<tr>
				
					<td @if(!Gate::check('disable_discount') || auth()->user()->can('superadmin') || auth()->user()->can('admin')) class="" @else class="hide" @endif>
						<b class="tw-text-base md:tw-text-lg tw-font-bold">
							@if($is_discount_enabled)
								@lang('sale.discount')
								@show_tooltip(__('tooltip.sale_discount'))
							@endif
							@if($is_rp_enabled)
								{{session('business.rp_name')}}
							@endif
							@if($is_discount_enabled)
								(-):
								@if($edit_discount)
								<i class="fas fa-edit cursor-pointer" id="pos-edit-discount" title="@lang('sale.edit_discount')" aria-hidden="true" data-toggle="modal" data-target="#posEditDiscountModal"></i>
								@endif
							
								<span class="tw-text-base md:tw-text-lg tw-font-semibold" id="total_discount">0</span>
							@endif
								<input type="hidden" name="discount_type" id="discount_type" value="@if(empty($edit)){{'percentage'}}@else{{$transaction->discount_type}}@endif" data-default="percentage">

								<input type="hidden" name="discount_amount" id="discount_amount" value="@if(empty($edit)) {{@num_format($business_details->default_sales_discount)}} @else {{@num_format($transaction->discount_amount)}} @endif" data-default="{{$business_details->default_sales_discount}}">

								<input type="hidden" name="rp_redeemed" id="rp_redeemed" value="@if(empty($edit)){{'0'}}@else{{$transaction->rp_redeemed}}@endif">

								<input type="hidden" name="rp_redeemed_amount" id="rp_redeemed_amount" value="@if(empty($edit)){{'0'}}@else {{$transaction->rp_redeemed_amount}} @endif">

								</span>
						</b> 
					</td>
				
				<td class="@if($pos_settings['disable_order_tax'] != 0) hide @endif">
					<span class="tw-text-base md:tw-text-lg tw-font-semibold">
						<b class="tw-text-base md:tw-text-lg tw-font-bold">@lang('sale.order_tax')(+): @show_tooltip(__('tooltip.sale_tax'))</b>
						<i class="fas fa-edit cursor-pointer" title="@lang('sale.edit_order_tax')" aria-hidden="true" data-toggle="modal" data-target="#posEditOrderTaxModal" id="pos-edit-tax" ></i> 
						<span class="tw-text-base md:tw-text-lg tw-font-semibold" id="order_tax">
							@if(empty($edit))
								0
							@else
								{{$transaction->tax_amount}}
							@endif
						</span>

						<input type="hidden" name="tax_rate_id" 
							id="tax_rate_id" 
							value="@if(empty($edit)) {{$business_details->default_sales_tax}} @else {{$transaction->tax_id}} @endif" 
							data-default="{{$business_details->default_sales_tax}}">

						<input type="hidden" name="tax_calculation_amount" id="tax_calculation_amount" 
							value="@if(empty($edit)) {{@num_format($business_details->tax_calculation_amount)}} @else {{@num_format($transaction->tax?->amount)}} @endif" data-default="{{$business_details->tax_calculation_amount}}">

					</span>
				</td>
				<td>
					<span class="tw-text-base md:tw-text-lg tw-font-semibold">

						<b class="tw-text-base md:tw-text-lg tw-font-bold">@lang('sale.shipping')(+): @show_tooltip(__('tooltip.shipping'))</b> 
						<i class="fas fa-edit cursor-pointer"  title="@lang('sale.shipping')" aria-hidden="true" data-toggle="modal" data-target="#posShippingModal"></i>
						<span id="shipping_charges_amount">0</span>
						<input type="hidden" name="shipping_details" id="shipping_details" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_details}}@endif" data-default="">

						<input type="hidden" name="shipping_address" id="shipping_address" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_address}}@endif">

						<input type="hidden" name="shipping_status" id="shipping_status" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_status}}@endif">

						<input type="hidden" name="delivered_to" id="delivered_to" value="@if(empty($edit)){{''}}@else{{$transaction->delivered_to}}@endif">

						<input type="hidden" name="delivery_person" id="delivery_person" value="@if(empty($edit)){{''}}@else{{$transaction->delivery_person}}@endif">

						<input type="hidden" name="shipping_charges" id="shipping_charges" value="@if(empty($edit)){{@num_format(0.00)}} @else{{@num_format($transaction->shipping_charges)}} @endif" data-default="0.00">
					</span>
				</td>
				@if(in_array('types_of_service', $enabled_modules))
					<td class="col-sm-3 col-xs-6 d-inline-table">
						<b class="tw-text-base md:tw-text-lg tw-font-bold">@lang('lang_v1.packing_charge')(+):</b>
						<i class="fas fa-edit cursor-pointer service_modal_btn"></i> 
						<span  class="tw-text-base md:tw-text-lg tw-font-semibold" id="packing_charge_text">
							0
						</span>
					</td>
				@endif
				@if(!empty($pos_settings['amount_rounding_method']) && $pos_settings['amount_rounding_method'] > 0)
				<td>
					<b class="tw-text-base md:tw-text-lg tw-font-bold" id="round_off">@lang('lang_v1.round_off'):</b> <span id="round_off_text">0</span>								
					<input type="hidden" name="round_off_amount" id="round_off_amount" value=0>
				</td>
				@endif
			</tr>
		</table>
	</div>
</div> --}}



<style>
	.row.pos_form_totals .text-info{
		color: black !important
	}

    /* Right-aligned grid for footer action buttons - 3 buttons per row */
    .pos-actions-wrap{ display:flex; justify-content:flex-end; padding-right:100px; }
    .pos-actions-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; max-width: 100%; }
    /* Modern unified button style - all buttons same color - Blue matching Add to Cart (#0b5394) */
    .pos-actions-grid .btn{ 
        width:100%; 
        margin:0 !important; 
        border-radius:12px; 
        border:none; 
        box-shadow:0 4px 14px rgba(11, 83, 148, 0.25), 0 2px 6px rgba(11, 83, 148, 0.15); 
        font-weight:600; 
        font-size:14px;
        padding:14px 18px;
        transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
        text-transform:none;
        background: #0b5394 !important;
        color: #ffffff !important;
        position: relative;
        overflow: hidden;
    }
    .pos-actions-grid .btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    .pos-actions-grid .btn:hover:before {
        left: 100%;
    }
    .pos-actions-grid .btn:hover{ 
        transform: translateY(-3px) scale(1.02); 
        box-shadow:0 8px 20px rgba(11, 83, 148, 0.35), 0 4px 10px rgba(11, 83, 148, 0.2);
        background: #084d82 !important;
    }
    .pos-actions-grid .btn:active{ 
        transform: translateY(-1px) scale(0.98); 
        box-shadow:0 3px 8px rgba(11, 83, 148, 0.25), 0 1px 3px rgba(11, 83, 148, 0.15);
        background: #073d6b !important;
    }
    .pos-actions-grid .btn i{ margin-right:8px; font-size:15px; }
    
    /* Override Bootstrap color classes for payment buttons - make them blue (#0b5394) */
    .pos-actions-grid .btn.bg-green,
    .pos-actions-grid .btn.bg-red,
    .pos-actions-grid .btn.bg-purple,
    .pos-actions-grid .btn.bg-maroon,
    .pos-actions-grid .pos-express-finalize {
        background: #0b5394 !important;
        box-shadow: 0 4px 14px rgba(11, 83, 148, 0.25), 0 2px 6px rgba(11, 83, 148, 0.15) !important;
    }
    .pos-actions-grid .btn.bg-green:hover,
    .pos-actions-grid .btn.bg-red:hover,
    .pos-actions-grid .btn.bg-purple:hover,
    .pos-actions-grid .btn.bg-maroon:hover,
    .pos-actions-grid .pos-express-finalize:hover {
        background: #084d82 !important;
        box-shadow: 0 8px 20px rgba(11, 83, 148, 0.35), 0 4px 10px rgba(11, 83, 148, 0.2) !important;
    }
    .pos-actions-grid .btn.bg-green:active,
    .pos-actions-grid .btn.bg-red:active,
    .pos-actions-grid .btn.bg-purple:active,
    .pos-actions-grid .btn.bg-maroon:active,
    .pos-actions-grid .pos-express-finalize:active {
        background: #073d6b !important;
        box-shadow: 0 3px 8px rgba(11, 83, 148, 0.25), 0 1px 3px rgba(11, 83, 148, 0.15) !important;
    }
    
    /* Keep Cancel button red if it has id="pos-cancel" */
    .pos-actions-grid .btn#pos-cancel {
        background: #dc2626 !important;
        box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25), 0 2px 6px rgba(220, 38, 38, 0.15) !important;
    }
    .pos-actions-grid .btn#pos-cancel:hover {
        background: #b91c1c !important;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.35), 0 4px 10px rgba(220, 38, 38, 0.2) !important;
    }
    .pos-actions-grid .btn#pos-cancel:active {
        background: #991b1b !important;
        box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25), 0 1px 3px rgba(220, 38, 38, 0.15) !important;
    }
    
    @media (max-width: 768px) {
        .pos-actions-grid{ grid-template-columns: repeat(2, 1fr); gap:8px; }
        .pos-actions-grid .btn{ padding:12px 14px; font-size:13px; }
    }
    @media (max-width: 480px) {
        .pos-actions-grid{ grid-template-columns: 1fr; gap:8px; }
    }

    /* Glassmorphism floating basket */
    .pos-basket{ position: fixed; right: 40px; bottom: 24px; margin-right: 40px !important; background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.35); border-radius: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35); padding: 16px; z-index: 9999; }
    .pos-basket:before{ content:''; position:absolute; inset:0; border-radius:18px; background: linear-gradient(145deg, rgba(255,255,255,0.6), rgba(255,255,255,0.05)); opacity:.25; pointer-events:none; mix-blend-mode:overlay; }
    .pos-basket .basket-amount{ display:flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
    .pos-basket .basket-metrics{ display:grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
    .pos-basket .metric{ background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.45); border-radius: 12px; padding: 8px 12px; font-size: 12px; color:#111827; display:flex; align-items:center; justify-content:space-between; gap:8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.45); }
    .pos-basket .metric b{ font-weight: 700; }
    .pos-basket .bm-edit{ border:none; background: rgba(0,0,0,0.06); color:#111827; border-radius: 6px; padding: 2px 6px; font-size: 11px; line-height: 1; cursor:pointer; }
    .pos-basket .bm-edit:hover{ filter: brightness(0.95); }
    .pos-basket .basket-amount .label{ font-weight: 800; color:#000000; text-shadow: none; font-size: 18px; }
    .pos-basket .basket-amount .value{ font-size: 36px; font-weight: 900; color:#22c55e; text-shadow: none; }
    /* Comprehensive Responsive Styles for Basket */
    @media (max-width: 991.98px) { 
        .pos-basket{ 
            right: 12px; 
            left: 12px; 
            bottom: 12px; 
            width: auto !important;
            max-width: calc(100% - 24px);
        }
        .pos-basket .basket-metrics {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 6px;
        }
        .pos-basket .basket-amount .label {
            font-size: 16px;
        }
        .pos-basket .basket-amount .value {
            font-size: 28px;
        }
    }
    @media (max-width: 768px) {
        .pos-basket {
            padding: 12px;
            border-radius: 12px;
        }
        .pos-basket .basket-amount .label {
            font-size: 14px;
        }
        .pos-basket .basket-amount .value {
            font-size: 24px;
        }
        .pos-basket .metric {
            padding: 6px 8px;
            font-size: 11px;
        }
        .pos-basket .basket-metrics {
            gap: 4px;
        }
        .pos-actions-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px;
        }
        .pos-actions-grid .btn {
            padding: 10px 12px;
            font-size: 12px;
        }
    }
    @media (max-width: 480px) {
        .pos-basket {
            padding: 10px;
            border-radius: 12px;
            bottom: 70px !important; /* Move up to avoid bottom nav */
            right: 8px;
            left: 8px;
            width: auto !important;
        }
        .pos-basket .basket-amount {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .pos-basket .basket-amount .label {
            font-size: 14px;
        }
        .pos-basket .basket-amount .value {
            font-size: 20px;
        }
        .pos-basket .basket-metrics {
            grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns */
            gap: 6px;
            margin-bottom: 8px;
        }
        .pos-basket .metric {
            padding: 6px 8px;
            font-size: 11px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pos-actions-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px;
        }
        /* Hide all buttons except Checkout and Cash on mobile */
        .pos-actions-grid .btn {
            display: none !important;
        }
        .pos-actions-grid .btn#pos-finalize,
        .pos-actions-grid .btn#cash_sell_btn {
            display: flex !important;
            width: 100%;
            justify-content: center;
            padding: 10px;
            font-size: 13px;
        }
        .pos-actions-wrap {
            padding-right: 0 !important;
        }
    }

    /* Hide the legacy left total payable block and old metrics row */
    .total-payable-left{ display:none; }
    .legacy-metrics{ display:none !important; }
</style>

@php
        $is_mobile = isMobile();
    @endphp

<div class="row pos_form_totals" style="background-color: unset !important;color: black !important;">


	
	<!---item shipping others --->

    <div class="col-md-6" style="padding-right: 0 !important">
        <table class="table table-condensed legacy-metrics" style="margin-bottom: unset;font-size: 12px !important;">
			<tr style="background-color: unset !important;color: black !important;">
				@if(!Gate::check('disable_discount') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
					<td style="background-color: unset !important;color: black !important;border-top: unset !important;">
						<b>
							@if($is_discount_enabled)
								@lang('sale.discount')
								@show_tooltip(__('tooltip.sale_discount'))
							@endif
							@if($is_rp_enabled)
								{{session('business.rp_name')}}
							@endif

							@if($is_discount_enabled)
								(-):
								@if($edit_discount)
									<i style="color: black !important;" class="fas fa-edit cursor-pointer" id="pos-edit-discount" title="@lang('sale.edit_discount')" aria-hidden="true" data-toggle="modal" data-target="#posEditDiscountModal"></i>
								@endif
								<span id="total_discount">0</span>
							@endif

							<span>
								<input type="hidden" name="discount_type" id="discount_type" value="@if(empty($edit)){{'percentage'}}@else{{$transaction->discount_type}}@endif" data-default="percentage">
								<input type="hidden" name="discount_amount" id="discount_amount" value="@if(empty($edit)) {{@num_format($business_details->default_sales_discount)}} @else {{@num_format($transaction->discount_amount)}} @endif" data-default="{{$business_details->default_sales_discount}}">
								<input type="hidden" name="rp_redeemed" id="rp_redeemed" value="@if(empty($edit)){{'0'}}@else{{$transaction->rp_redeemed ?? 0}}@endif">
								<input type="hidden" name="rp_redeemed_amount" id="rp_redeemed_amount" value="@if(empty($edit)){{'0'}}@else {{$transaction->rp_redeemed_amount ?? 0}} @endif">
							</span>
						</b> 
					</td>
				@endif


				<td class="@if($pos_settings['disable_order_tax'] != 0) hide @endif" style="background-color: unset !important;color: black !important;border-top: unset !important;">
					<span>
						<b>@lang('sale.order_tax')(+): @show_tooltip(__('tooltip.sale_tax'))</b>
						<i style="color: black !important;" class="fas fa-edit cursor-pointer" title="@lang('sale.edit_order_tax')" aria-hidden="true" data-toggle="modal" data-target="#posEditOrderTaxModal" id="pos-edit-tax" ></i> 
						<span id="order_tax">
							@if(empty($edit))
								0
							@else
								{{$transaction->tax_amount}}
							@endif
						</span>
						<input type="hidden" name="tax_rate_id" id="tax_rate_id" value="@if(empty($edit)) {{$business_details->default_sales_tax}} @else {{$transaction->tax_id}} @endif" data-default="{{$business_details->default_sales_tax}}">
						<input type="hidden" name="tax_calculation_amount" id="tax_calculation_amount" value="@if(empty($edit)) {{@num_format($business_details->tax_calculation_amount)}} @else {{@num_format($transaction->tax?->amount)}} @endif" data-default="{{$business_details->tax_calculation_amount}}">
					</span>
				</td>


				<td style="background-color: unset !important;color: black !important;border-top: unset !important;">
					<span>
						<b>@lang('sale.shipping')(+): @show_tooltip(__('tooltip.shipping'))</b> 
						<i style="color: black !important;" class="fas fa-edit cursor-pointer"  title="@lang('sale.shipping')" aria-hidden="true" data-toggle="modal" data-target="#posShippingModal"></i>
						<span id="shipping_charges_amount">0</span>
						<input type="hidden" name="shipping_details" id="shipping_details" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_details}}@endif" data-default="">
						<input type="hidden" name="shipping_address" id="shipping_address" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_address}}@endif">
						<input type="hidden" name="shipping_status" id="shipping_status" value="@if(empty($edit)){{''}}@else{{$transaction->shipping_status}}@endif">
						<input type="hidden" name="delivered_to" id="delivered_to" value="@if(empty($edit)){{''}}@else{{$transaction->delivered_to}}@endif">
						<input type="hidden" name="delivery_person" id="delivery_person" value="@if(empty($edit)){{''}}@else{{$transaction->delivery_person}}@endif">
						<input type="hidden" name="shipping_charges" id="shipping_charges" value="@if(empty($edit)){{@num_format(0.00)}} @else{{@num_format($transaction->shipping_charges)}} @endif" data-default="0.00">
					</span>
				</td>


				@if(in_array('types_of_service', $enabled_modules))
					<td class="col-sm-3 col-xs-6 d-inline-table" style="background-color: unset !important;color: black !important;border-top: unset !important;">
						<b>@lang('lang_v1.packing_charge')(+):</b>
						<i style="color: black !important;" class="fas fa-edit cursor-pointer service_modal_btn"></i> 
						<span id="packing_charge_text">
							0
						</span>
					</td>
				@endif
				@if(!empty($pos_settings['amount_rounding_method']) && $pos_settings['amount_rounding_method'] > 0)
					<td style="background-color: unset !important;color: black !important;border-top: unset !important;">
						<b id="round_off">
							@lang('lang_v1.round_off'):
						</b> 
						<span id="round_off_text">0</span>								
						<input type="hidden" name="round_off_amount" id="round_off_amount" value=0>
					</td>
				@endif


				<td style="border-top: unset !important;background-color: unset !important;color: black !important;">
					<b>@lang('sale.item'):</b>&nbsp;
					<span class="total_quantity">0</span>
				</td>
				<td style="background-color: unset !important;color: black !important;border-top: unset !important; text-align: center">
					<b>@lang('sale.total'):</b> &nbsp;
					<span class="price_total">0</span>
				</td>
			</tr>
		</table>
	</div>

	<div class="col-md-6"></div>

<!----Payable Amount----->
		<div class="col-md-12">
			<input type="hidden" id="total_discount_input" value="">

        <div class="text-start total-payable-left" style="display: none;">
			<b>@lang('sale.total_payable'):</b>
			<input type="hidden" name="final_total" id="final_total_input" value=0>
            <span id="total_payable" style="font-size: xx-large" @if ($is_mobile) style="font-size: 25px;" @endif
				class="text-success lead text-bold text-right">0</span>
		</div>

		{{-- <div class="col-md-9 action_button_list"style="text-align: center;">
			@if (!Gate::check('disable_pay_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn btn-default btn-pos bg-info text-white btn-flat no-print pos_custom_btn @if ($pos_settings['disable_pay_checkout'] != 0) hide @endif"
					id="pos-finalize" title="@lang('lang_v1.tooltip_checkout_multi_pay')">
					<i class="fas fa-money-check-alt" aria-hidden="true"></i>
					@lang('lang_v1.checkout_multi_pay')
				</button>
			@endif
			@if (!Gate::check('disable_express_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn btn-default btn-pos bg-green btn-flat no-print pos_custom_btn @if ($pos_settings['disable_express_checkout'] != 0 || !array_key_exists('cash', $payment_types)) hide @endif pos-express-finalize "
					data-pay_method="cash"
					style="    background: linear-gradient(145deg, #32cd32, #228b22) !important;border: 2px solid #006400 !important;"
					title="@lang('tooltip.express_checkout')">
					<i class="fas fa-money-bill-alt" aria-hidden="true"></i>
					@lang('lang_v1.express_checkout_cash')
				</button>
			@endif
			@if (!Gate::check('disable_draft') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn bg-info text-white btn-default btn-pos btn-flat pos_custom_btn @if ($pos_settings['disable_draft'] != 0) hide @endif"
					id="pos-draft">
					<i class="fas fa-edit"></i>
					@lang('sale.draft')
				</button>
			@endif
			@if (!Gate::check('disable_quotation') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button" class="btn btn-default btn-pos bg-yellow btn-flat pos_custom_btn"
					id="pos-quotation"
					style="color: #800000 !important;
					background: linear-gradient(145deg, #ffcc00, #b8860b) !important;    border-color: #800000 !important;">
					<i class="fas fa-edit"></i>
					@lang('lang_v1.quotation')
				</button>
			@endif
			@if (!Gate::check('disable_suspend_sale') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				@if (empty($pos_settings['disable_suspend']))
					<button type="button"
						class="btn bg-red btn-default btn-pos btn-flat no-print pos-express-finalize pos_custom_btn"
						style="    color: #f6f6f6 !important;
				background: linear-gradient(145deg, #c50000, #8b0000) !important;    border-color: #f6f6f5 !important; "
						data-pay_method="suspend" title="@lang('lang_v1.tooltip_suspend')"
						@if (!empty($only_payment)) disabled @endif>
						<i class="fas fa-pause" aria-hidden="true"></i>
						@lang('lang_v1.suspend')
					</button>
				@endif
			@endif
			@if (!Gate::check('disable_credit_sale') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				@if (empty($pos_settings['disable_credit_sale_button']))
					<input type="hidden" name="is_credit_sale" value="0" id="is_credit_sale">
					<button type="button"
						class="btn bg-purple btn-default btn-pos btn-flat no-print pos-express-finalize pos_custom_btn"
						style="    color: #ecebe8 !important;
						background: linear-gradient(145deg, #4b0082, #3a005f) !important;    border-color: #fbf9f0 !important;"
						data-pay_method="credit_sale" title="@lang('lang_v1.tooltip_credit_sale')"
						@if (!empty($only_payment)) disabled @endif>
						<i class="fas fa-check" aria-hidden="true"></i>
						@lang('lang_v1.credit_sale')
					</button>
				@endif
			@endif
			@if (!Gate::check('disable_card') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					style="    color: #ffffff !important;
						background: linear-gradient(145deg, #800000, #4b0000) !important;    border-color: #ffffff !important;"
					class="btn bg-maroon btn-default btn-pos btn-flat no-print pos_custom_btn @if (!empty($pos_settings['disable_suspend']))  @endif pos-express-finalize @if (!array_key_exists('card', $payment_types)) hide @endif"
					data-pay_method="card" title="@lang('lang_v1.tooltip_express_checkout_card')">
					<i class="fas fa-credit-card" aria-hidden="true"></i>
					@lang('lang_v1.express_checkout_card')
				</button>
			@endif
			@if (empty($edit))
				<button type="button"
					style="box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important;
			border-color: #003399 !important;"
					class="btn bg-maroon btn-default btn-pos btn-flat no-print pos_custom_btn"
					id="pos-cancel">
					<i class="fas fa-window-close"></i>
					@lang('sale.cancel')
				</button>
			@else
				<button type="button" class="btn btn-danger btn-flat hide pos_custom_btn"
					id="pos-delete">
					<i class="fas fa-trash-alt"></i>
					@lang('messages.delete')
				</button>
			@endif
		</div> --}}

	


	<div class="total-payable" style="text-align: right">
		<input type="hidden" name="final_total" id="final_total_input" value=0>
		<input type="hidden" name="final_total_target" id="final_total_target_input" value="0">
		<div class="total-payable-target" style="display: none;">
		</div>

	</div>
		</div>


<!----ALl BUttons--->
    <div class="col-md-12" style="padding-right: 0 !important">
        <div class="pos-actions-wrap">
        <div class="pos-basket">
        <div class="basket-amount">
            <span class="label">@lang('sale.total_payable'):</span>
            <span id="total_payable_basket" class="value">0</span>
        </div>
        <div class="basket-metrics">
            <div class="metric">
                <b>@lang('sale.discount') <span style="font-size: 12px; color: #666; font-weight: bold;">(F9)</span>:</b>
                <span id="bm_discount">0</span>
                <button type="button" class="bm-edit" title="@lang('sale.edit_discount')" data-toggle="modal" data-target="#posEditDiscountModal">
                    <i class="fas fa-edit"></i>
                </button>
            </div>
            <div class="metric">
                <b>@lang('sale.shipping'):</b>
                <span id="bm_shipping">0</span>
                <button type="button" class="bm-edit" title="@lang('sale.shipping')" data-toggle="modal" data-target="#posShippingModal">
                    <i class="fas fa-edit"></i>
                </button>
            </div>
            <div class="metric"><b>@lang('sale.item'):</b><span id="bm_items">0</span></div>
            <div class="metric"><b>@lang('sale.total'):</b><span id="bm_total">0</span></div>
        </div>
        <div class="action_button_list pos-actions-grid">
			@if (!Gate::check('disable_pay_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn btn-default btn-pos text-white btn-flat no-print @if ($pos_settings['disable_pay_checkout'] != 0) hide @endif"
					id="pos-finalize" title="@lang('lang_v1.tooltip_checkout_multi_pay')">
					<i class="fas fa-money-check-alt" aria-hidden="true"></i>
					@lang('lang_v1.checkout_multi_pay')
				</button>
			@endif
			@if (!Gate::check('disable_express_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button" id="cash_sell_btn"
					class="btn btn-default btn-pos bg-green btn-flat no-print @if ($pos_settings['disable_express_checkout'] != 0 || !array_key_exists('cash', $payment_types)) hide @endif pos-express-finalize "
					data-pay_method="cash"
					title="@lang('tooltip.express_checkout')">
					<i class="fas fa-money-bill-alt" aria-hidden="true"></i>
					@lang('lang_v1.express_checkout_cash')
				</button>
			@endif
			@if (!Gate::check('disable_draft') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn text-white btn-default btn-pos  @if ($pos_settings['disable_draft'] != 0) hide @endif"
					id="pos-draft">
					<i class="fas fa-edit"></i>
					@lang('sale.draft')
				</button>
			@endif
			@if (!Gate::check('disable_suspend_sale') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				@if (empty($pos_settings['disable_suspend']))
					<button type="button"
						class="btn bg-red btn-default btn-pos btn-flat no-print pos-express-finalize"
						data-pay_method="suspend" title="@lang('lang_v1.tooltip_suspend')"
						@if (!empty($only_payment)) disabled @endif>
						<i class="fas fa-pause" aria-hidden="true"></i>
						@lang('lang_v1.suspend')
					</button>
				@endif
			@endif
			@if (!Gate::check('disable_credit_sale') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				@if (empty($pos_settings['disable_credit_sale_button']))
					<input type="hidden" name="is_credit_sale" value="0" id="is_credit_sale">
					<button type="button"
						class="btn is_credit_sale bg-purple btn-default btn-pos btn-flat no-print pos-express-finalize"
						data-pay_method="credit_sale" title="@lang('lang_v1.tooltip_credit_sale')"
						@if (!empty($only_payment)) disabled @endif>
						<i class="fas fa-check" aria-hidden="true"></i>
						@lang('lang_v1.credit_sale')
					</button>
				@endif
			@endif
			@if (!Gate::check('disable_card') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
				<button type="button"
					class="btn btn-default btn-pos no-print @if (!empty($pos_settings['disable_suspend']))  @endif pos-express-finalize @if (!array_key_exists('card', $payment_types)) hide @endif"
					data-pay_method="card" title="@lang('lang_v1.tooltip_express_checkout_card')">
					<i class="fas fa-credit-card" aria-hidden="true"></i>
					@lang('lang_v1.express_checkout_card')
				</button>
			@endif
			@if (empty($edit))
				<button type="button"
					class="btn btn-default btn-pos no-print"
					id="pos-cancel">
					<i class="fas fa-window-close"></i>
					@lang('sale.cancel')
				</button>
			@else
				<button type="button"
					style="margin: 5px;"
					class="btn btn-danger btn-flat hide pos_custom_btn"
					id="pos-delete">
					<i class="fas fa-trash-alt"></i>
					@lang('messages.delete')
				</button>
			@endif
        </div>
        </div>
        </div>
	</div>


	
	
 </div>
 <script>
 (function() {
     function syncBasket() {
         var source = document.getElementById('total_payable');
         var target = document.getElementById('total_payable_basket');
         if (source && target) { target.textContent = source.textContent; }

         // metrics
         var dSrc = document.getElementById('total_discount');
         var dTgt = document.getElementById('bm_discount');
         if (dSrc && dTgt) { dTgt.textContent = dSrc.textContent; }

         var sSrc = document.getElementById('shipping_charges_amount');
         var sTgt = document.getElementById('bm_shipping');
         if (sSrc && sTgt) { sTgt.textContent = sSrc.textContent; }

         var iSrc = document.querySelector('.total_quantity');
         var iTgt = document.getElementById('bm_items');
         if (iSrc && iTgt) { iTgt.textContent = iSrc.textContent; }

         var tSrc = document.querySelector('.price_total');
         var tTgt = document.getElementById('bm_total');
         if (tSrc && tTgt) { tTgt.textContent = tSrc.textContent; }
     }
     if (window.MutationObserver) {
         var source = document.getElementById('total_payable');
         if (source) {
             var obs = new MutationObserver(syncBasket);
             obs.observe(source, { childList: true, characterData: true, subtree: true });
         }

         // listen to discount and shipping changes too
         var obsPairs = [
             ['total_discount', 'bm_discount'],
             ['shipping_charges_amount', 'bm_shipping']
         ];
         obsPairs.forEach(function(pair){
             var s = document.getElementById(pair[0]);
             if (s) {
                 var o = new MutationObserver(syncBasket);
                 o.observe(s, { childList: true, characterData: true, subtree: true });
             }
         });
     }
     document.addEventListener('DOMContentLoaded', syncBasket);
     setInterval(syncBasket, 800);
 })();
 </script>