@php
    $is_mobile = isMobile();
@endphp
                <div class="row">
                    <div class="pos-form-actions tw-rounded-tr-xl tw-rounded-tl-xl tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-bg-white tw-cursor-pointer">

                        <!-- Hidden inputs used by POS JS -->
                        <input type="hidden" name="final_total" id="final_total_input" value="0.00">
                        <input type="hidden" name="applied_smart_root_discount_ids" id="applied_smart_root_discount_ids" value="">

                        <!-- Main container: 3-section layout (secondary | center | payment) -->
                        <div class="pos-actions-container tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-3 tw-gap-4 tw-w-full">

                            <!-- LEFT SECTION: Secondary actions -->
                            <div class="pos-actions-left tw-flex tw-items-center tw-gap-2 tw-flex-wrap">
                                @if (!Gate::check('disable_draft') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                                    @if (empty($pos_settings['disable_draft']) || $pos_settings['disable_draft'] == 0)
                                        <button type="button" class="pos-secondary-btn" id="pos-draft" @if (!empty($only_payment)) disabled @endif>
                                            <i class="fas fa-file-alt"></i>
                                            <span class="pos-btn-label">@lang('sale.draft')</span>
                                        </button>
                                    @endif
                                @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="pos-secondary-btn" data-pay_method="suspend" title="@lang('lang_v1.tooltip_suspend')" @if (!empty($only_payment)) disabled @endif>
                                        <i class="fas fa-pause-circle"></i>
                                        <span class="pos-btn-label">@lang('lang_v1.suspend')</span>
                                    </button>
                                @endif
                            @endif

                            @if (!isset($pos_settings['hide_recent_trans']) || $pos_settings['hide_recent_trans'] == 0)
                                <button type="button" class="pos-recent-btn" data-toggle="modal" data-target="#recent_transactions_modal" id="recent-transactions">
                                    <i class="fas fa-history"></i>
                                    <span class="pos-btn-label">@lang('lang_v1.recent_transactions')</span>
                                </button>
                            @endif
                        </div>

                        <!-- CENTER SECTION: Total display (prominent & updatable) -->
                        <div class="pos-actions-center tw-flex-1 tw-flex tw-items-center tw-justify-center">
                            <div class="pos-total-box tw-text-center tw-px-4 tw-py-2">
                                <div class="pos-total-label tw-text-gray-600 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wide">
                                    @lang('sale.total_payable')
                                </div>
                                <span class="pos-total-amount tw-text-3xl tw-font-bold tw-text-green-600 tw-mt-1 tw-font-mono number total_payable_span" id="total_payable">0.00</span>
                            </div>
                        </div>

                        <!-- RIGHT SECTION: Primary payment actions -->
                        <div class="pos-actions-right tw-flex tw-items-center tw-justify-end tw-gap-3 tw-flex-wrap">
                            @if (empty($edit))
                                <button type="button" class="pos-cancel-btn" id="pos-cancel">
                                    <i class="fas fa-times-circle"></i>
                                    <span class="pos-btn-label">@lang('sale.cancel')</span>
                                </button>
                            @else
                                <button type="button" class="pos-cancel-btn" id="pos-delete" @if (!empty($only_payment)) disabled @endif>
                                    <i class="fas fa-trash-alt"></i>
                                    <span class="pos-btn-label">@lang('messages.delete')</span>
                                </button>
                            @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="pos-secondary-btn 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-file-invoice-dollar"></i>
                                        <span class="pos-btn-label">@lang('lang_v1.credit_sale')</span>
                                    </button>
                                @endif
                            @endif

                            @if (!Gate::check('disable_card') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                                @if (array_key_exists('card', $payment_types))
                                    <button type="button" class="pos-secondary-btn pos-express-finalize" data-pay_method="card" title="@lang('lang_v1.tooltip_express_checkout_card')">
                                        <i class="fas fa-credit-card"></i>
                                        <span class="pos-btn-label">@lang('lang_v1.express_checkout_card')</span>
                                    </button>
                                @endif
                            @endif

                            @if (!Gate::check('disable_pay_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                                @if (empty($pos_settings['disable_pay_checkout']) || $pos_settings['disable_pay_checkout'] == 0)
                                    <button type="button" class="pos-primary-btn" id="pos-finalize" title="@lang('lang_v1.tooltip_checkout_multi_pay')">
                                        <i class="fas fa-shopping-cart"></i>
                                        <span class="pos-btn-label">@lang('lang_v1.checkout_multi_pay')</span>
                                        <i class="fas fa-spinner fa-spin pos-processing1 hidden tw-text-gray-600"></i>
                                    </button>
                                @endif
                            @endif

                            @if (!Gate::check('disable_express_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                                @if (empty($pos_settings['disable_express_checkout']) && array_key_exists('cash', $payment_types))
                                    <button type="button" class="pos-cash-btn pos-express-finalize" data-pay_method="cash" title="@lang('tooltip.express_checkout')">
                                        <i class="fas fa-money-bill-alt"></i>
                                        <span class="pos-btn-label">@lang('lang_v1.express_checkout_cash')</span>
                                        <i class="fas fa-spinner fa-spin pos-processing2 hidden tw-text-gray-600"></i>
                                    </button>
                                @endif
                            @endif
                        </div>
                    </div>

                    <!-- Mobile simplified total (shows on small screens) -->
                    {{-- @if ($is_mobile)
                        <div class="pos-mobile-total tw-border-t tw-border-gray-200 tw-mt-3 tw-pt-3 tw-text-center">
                            <div class="tw-text-gray-600 tw-text-xs tw-font-semibold">@lang('sale.total_payable')</div>
                            <span class="tw-text-2xl tw-font-bold tw-text-green-600 tw-mt-1 number total_payable_span" id="total_payable_mobile">0.00</span>
                        </div>
                    @endif --}}

                </div>
            </div>

            <style>
            :root{
                --pf-primary-500: #0066cc;
                --pf-primary-700: #004a99;
                --pf-success-500: #16a34a;
                --pf-success-600: #15803d;
                --pf-danger-500: #e53935;
                --pf-danger-600: #c62828;
                --pf-warn-500: #f59e0b;
                --pf-warn-600: #d97706;
                --pf-purple-500: #8b5cf6;
                --pf-purple-600: #6d28d9;
                --pf-teal-500: #0ea5a4;
                --pf-teal-600: #057f78;
                --pf-accent-500: #7c3aed;
                --btn-radius: 12px;
            }

            .pos-actions-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);} 
            .pos-actions-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
            .pos-secondary-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 12px;min-height:60px;min-width:70px;border-radius:var(--btn-radius);font-weight:600;font-size:12px;color:#fff;border:none;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);background:linear-gradient(180deg,#6b7280,#4b5563)}
            .pos-secondary-btn i{font-size:18px}
            .pos-actions-center{flex:1;min-width:200px;display:flex;align-items:center;justify-content:center}
            .pos-total-box{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid var(--pf-success-500);border-radius:12px;padding:12px 24px;min-width:200px;text-align:center}
            .pos-total-amount{font-size:2.5rem;font-weight:900;color:var(--pf-success-600);font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin-top:.5rem}
            .pos-actions-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
            .pos-primary-btn,.pos-cash-btn,.pos-cancel-btn,.pos-recent-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 14px;min-height:60px;min-width:80px;border-radius:var(--btn-radius);font-weight:700;font-size:12px;color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.12)}
            .pos-primary-btn{background:linear-gradient(180deg,var(--pf-primary-500),var(--pf-primary-700));min-width:90px}
            .pos-cash-btn{background:linear-gradient(180deg,var(--pf-success-500),var(--pf-success-600));min-width:85px}
            .pos-cancel-btn{background:linear-gradient(180deg,var(--pf-danger-500),var(--pf-danger-600));min-width:80px}
            .pos-recent-btn{background:linear-gradient(180deg,var(--pf-accent-500),#6d28d9);min-width:75px; height: 50px;;}

            /* Custom button colors requested: draft, suspend, card, credit sale */
            button#pos-draft{background:linear-gradient(180deg,#6366F1,#4F46E5)}
            button[data-pay_method="suspend"]{background:linear-gradient(180deg,#F59E0B,#D97706)}
            button[data-pay_method="card"]{background:linear-gradient(180deg,#06B6D4,#0E7490)}
            /* Credit sale (الدفع بالآجل) — now yellow with white text/icon */
            button[data-pay_method="credit_sale"]{background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#ffffff}
            button[data-pay_method="credit_sale"] i{color:#ffffff}

            @media (max-width:1024px){.pos-actions-container{flex-direction:column;align-items:stretch;padding:.75rem 1rem}.pos-actions-left,.pos-actions-right{width:100%;justify-content:flex-start}.pos-actions-center{width:100%;order:3}}
            @media (max-width:768px){.pos-primary-btn,.pos-cash-btn{flex:1;min-width:0}.pos-secondary-btn{flex:1;min-width:0;min-height:50px;font-size:10px;padding:6px 10px}.pos-total-amount{font-size:2rem}.pos-total-box{padding:10px 16px;min-width:160px}}
            @media (max-width:480px){.pos-actions-container{padding:.6rem .8rem;gap:.6rem}.pos-secondary-btn,.pos-primary-btn,.pos-cash-btn,.pos-cancel-btn{min-height:45px;font-size:9px;padding:5px 8px}.pos-total-box{padding:8px 12px;min-width:140px}.pos-total-amount{font-size:1.5rem}}

            </style>

            @if (isset($transaction))
                @include('sale_pos.partials.edit_discount_modal', [
                    'sales_discount' => $transaction->discount_amount,
                    'discount_type' => $transaction->discount_type,
                    'rp_redeemed' => $transaction->rp_redeemed,
                    'rp_redeemed_amount' => $transaction->rp_redeemed_amount,
                    'max_available' => !empty($redeem_details['points']) ? $redeem_details['points'] : 0,
                ])
            @else
                @include('sale_pos.partials.edit_discount_modal', [
                    'sales_discount' => $business_details->default_sales_discount,
                    'discount_type' => 'percentage',
                    'rp_redeemed' => 0,
                    'rp_redeemed_amount' => 0,
                    'max_available' => 0,
                ])
            @endif

            @if (isset($transaction))
                @include('sale_pos.partials.edit_order_tax_modal', ['selected_tax' => $transaction->tax_id])
            @else
                @include('sale_pos.partials.edit_order_tax_modal', [
                    'selected_tax' => $business_details->default_sales_tax,
                ])
            @endif

            <script>
                window.LANG_TEMPLATE = "