@php
    $is_mobile = isMobile();
@endphp

@if($is_mobile)
    <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">
            <div
                class="tw-flex tw-items-center tw-justify-between tw-flex-col sm:tw-flex-row md:tw-flex-row lg:tw-flex-row xl:tw-flex-row tw-gap-2 tw-px-4 tw-py-0 tw-overflow-x-auto tw-w-full">

                <div class="md:!tw-w-none !tw-flex md:!tw-hidden !tw-flex-row !tw-items-center !tw-gap-3">
                    <div class="tw-pos-total tw-flex tw-items-center tw-gap-3">
                        <div class="tw-text-black tw-font-bold tw-text-sm tw-flex tw-items-center tw-flex-col tw-leading-1">
                            <div>@lang('sale.total_payable'):</div>
                        </div>
                        <input type="hidden" name="final_total" id="final_total_input" value="0.00">
                        <span id="total_payable" class="tw-text-green-900 tw-font-bold tw-text-sm number">0.00</span>
                    </div>
                </div>

                <div class="!tw-w-full md:!tw-w-none !tw-flex md:!tw-hidden !tw-flex-row !tw-items-center !tw-gap-3">
                    @if (!Gate::check('disable_pay_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                        <button type="button"
                            class=" tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1 tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-[#001F3E] tw-rounded-md tw-p-2 tw-w-[8.5rem] @if (!$is_mobile)  @endif 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"
                            class="tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-[rgb(40,183,123)] tw-p-2 tw-rounded-md tw-w-[5.5rem] tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1 @if (!$is_mobile)  @endif no-print @if ($pos_settings['disable_express_checkout'] != 0 || !array_key_exists('cash', $payment_types)) hide @endif pos-express-finalize @if ($is_mobile) col-xs-6 @endif"
                            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 (empty($edit))
                        <button type="button" class="tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-red-600 tw-p-2 tw-rounded-md tw-w-[5.5rem] tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1" id="pos-cancel"> <i
                                class="fas fa-window-close"></i> @lang('sale.cancel')</button>
                    @else
                        <button type="button" class="btn-danger tw-dw-btn hide tw-dw-btn-xs" id="pos-delete"
                            @if (!empty($only_payment)) disabled @endif> <i class="fas fa-trash-alt"></i>
                            @lang('messages.delete')</button>
                    @endif
                </div>
                <div class="tw-flex tw-items-center tw-gap-4 tw-flex-row tw-overflow-x-auto">

                    @if (!Gate::check('disable_draft') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                        <button type="button"
                            class="tw-font-bold tw-text-gray-700 tw-text-xs md:tw-text-sm tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1 @if ($pos_settings['disable_draft'] != 0) hide @endif"
                            id="pos-draft" @if (!empty($only_payment)) disabled @endif><i
                                class="fas fa-edit tw-text-[#009ce4]"></i> @lang('sale.draft')</button>
                    @endif

                    @if (!Gate::check('disable_quotation') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                        <button type="button"
                            class="tw-font-bold tw-text-gray-700 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1 @if ($is_mobile) col-xs-6 @endif"
                            id="pos-quotation" @if (!empty($only_payment)) disabled @endif><i
                                class="fas fa-edit tw-text-[#E7A500]"></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="tw-font-bold tw-text-gray-700 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1  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 tw-text-[#EF4B51]" 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=" tw-font-bold tw-text-gray-700 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1 no-print pos-express-finalize @if ($is_mobile) col-xs-6 @endif"
                                data-pay_method="credit_sale" title="@lang('lang_v1.tooltip_credit_sale')"
                                @if (!empty($only_payment)) disabled @endif>
                                <i class="fas fa-check tw-text-[#5E5CA8]" 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="tw-font-bold tw-text-gray-700 tw-cursor-pointer tw-text-xs md:tw-text-sm tw-flex tw-flex-col tw-items-center tw-justify-center tw-gap-1  no-print @if (!empty($pos_settings['disable_suspend']))  @endif pos-express-finalize @if (!array_key_exists('card', $payment_types)) hide @endif @if ($is_mobile) col-xs-6 @endif"
                            data-pay_method="card" title="@lang('lang_v1.tooltip_express_checkout_card')">
                            <i class="fas fa-credit-card tw-text-[#D61B60]" aria-hidden="true"></i> @lang('lang_v1.express_checkout_card')
                        </button>
                    @endif

                    @if (!Gate::check('disable_pay_checkout') || auth()->user()->can('superadmin') || auth()->user()->can('admin'))
                        <button type="button"
                            class="tw-hidden md:tw-flex md:tw-flex-row md:tw-items-center md:tw-justify-center md:tw-gap-1 tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-[#001F3E] tw-rounded-md tw-p-2 tw-w-[8.5rem] @if (!$is_mobile)  @endif 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"
                            class="tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-[rgb(40,183,123)] tw-p-2 tw-rounded-md tw-w-[8.5rem] tw-hidden md:tw-flex lg:tw-flex lg:tw-flex-row lg:tw-items-center lg:tw-justify-center lg:tw-gap-1 @if (!$is_mobile)  @endif 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 (empty($edit))
                        <button type="button"
                            class="tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-red-600 tw-p-2 tw-rounded-md tw-w-[8.5rem] tw-hidden md:tw-flex lg:tw-flex lg:tw-flex-row lg:tw-items-center lg:tw-justify-center lg:tw-gap-1"
                            id="pos-cancel"> <i class="fas fa-window-close"></i> @lang('sale.cancel')</button>
                    @else
                        <button type="button"
                            class="tw-font-bold tw-text-white tw-cursor-pointer tw-text-xs md:tw-text-sm tw-bg-red-600 tw-p-2 tw-rounded-md tw-w-[8.5rem] tw-hidden md:tw-flex lg:tw-flex lg:tw-flex-row lg:tw-items-center lg:tw-justify-center lg:tw-gap-1 hide"
                            id="pos-delete" @if (!empty($only_payment)) disabled @endif> <i
                                class="fas fa-trash-alt"></i> @lang('messages.delete')</button>
                    @endif

                    @if (!$is_mobile)
                        <div class="pos-total md:tw-flex md:tw-items-center md:tw-gap-3 tw-hidden">
                            <div
                                class="tw-text-black tw-font-bold tw-text-base md:tw-text-2xl tw-flex tw-items-center tw-flex-col">
                                <div>Total</div>
                                <div>Payable:</div>
                            </div>
                            <input type="hidden" name="final_total" id="final_total_input" value="0.00">
                            <span id="total_payable"
                                class="tw-text-green-900 tw-font-bold tw-text-base md:tw-text-2xl number">0.00</span>
                        </div>
                    @endif
                </div>

                <div class="tw-w-full md:tw-w-fit tw-flex tw-flex-col tw-items-end tw-gap-3 tw-hidden md:tw-block">
                    @if (!isset($pos_settings['hide_recent_trans']) || $pos_settings['hide_recent_trans'] == 0)
                        <button type="button"
                            class="tw-font-bold tw-bg-[#646EE4] hover:tw-bg-[#414aac] tw-rounded-full tw-text-white tw-w-full md:tw-w-fit tw-px-5 tw-h-11 tw-cursor-pointer tw-text-xs md:tw-text-sm"
                            data-toggle="modal" data-target="#recent_transactions_modal" id="recent-transactions"> <i
                                class="fas fa-clock"></i> @lang('lang_v1.recent_transactions')</button>
                    @endif
                </div>
            </div>
        </div>
    </div>
@else
    <div class="pos-form-actions theme__pos" style="line-height: 1 !important;">
        <div class="row" style="background-color:unset !important;line-height: 1 !important;">

            <div class="col-md-5">
                @include('sale_pos.partials.pos_form_totals')
            </div>
            
            <!-- To organize footer actions buttons -->
            <div class="col-md-7">
                <div class="row" style="background-color:unset !important;line-height: 1 !important;color: #fff;">
            
                    <input type="hidden" id="total_discount_input" value="">

                    <div class="col-md-3 text-right" @if($is_mobile) style="text-align: center;margin: 15px 0;font-size: 25px;" @endif>
                        <b>@lang('sale.total_payable'):</b>
                        <input type="hidden" name="final_total" id="final_total_input" value=0>
                        <span id="total_payable" @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>


                <div class="total-payable">
                    <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>
    </div>
@endif