@extends('layouts.app')

@section('title', ($sub_type ?? null) === 'downpayment' ? 'New Downpayment · POS' : __('sale.pos_sale'))

@section('content')
    <section class="content no-print">
        <input type="hidden" id="amount_rounding_method" value="{{ $pos_settings['amount_rounding_method'] ?? '' }}">
        @if (!empty($pos_settings['allow_overselling']))
            <input type="hidden" id="is_overselling_allowed">
        @endif
        @if (session('business.enable_rp') == 1)
            <input type="hidden" id="reward_point_enabled">
        @endif
        @php
            $is_discount_enabled = $pos_settings['disable_discount'] != 1 ? true : false;
            $is_rp_enabled = session('business.enable_rp') == 1 ? true : false;
            $show_category_suggestion = session('business.enable_category') == 1 && empty($pos_settings['hide_category_suggestion']) && !empty($categories);
            $show_brand_suggestion = session('business.enable_brand') == 1 && empty($pos_settings['hide_brand_suggestion']) && !empty($brands);
            $show_pos_suggestions = $show_category_suggestion || $show_brand_suggestion;
            $is_pos_downpayment = ($sub_type ?? null) === 'downpayment';
        @endphp
        @if ($business_details->offlineSalesEnabled() && !$is_pos_downpayment)
            @include('sale_pos.partials.offline_sales')
        @endif
        @if($is_pos_downpayment)
            @include('sale_pos.partials.downpayment_pos_guide')
        @endif
        {!! Form::open([
            'url' => action([\App\Http\Controllers\SellPosController::class, 'store']),
            'method' => 'post',
            'id' => 'add_pos_sell_form',
            'files' => true,
        ]) !!}
        <input type="hidden" name="below_cost_price_approval_token" id="below_cost_price_approval_token">
        <input type="hidden" name="below_cost_price_approved_by" id="below_cost_price_approved_by">
        <input type="hidden" name="discount_approval_token" id="discount_approval_token">
        <input type="hidden" name="discount_approved_by" id="discount_approved_by">
        <input type="hidden" name="manager_approval_token" id="manager_approval_token">
        @if ($business_details->offlineSalesEnabled() && !$is_pos_downpayment)
            <input type="hidden" name="pos_client_uuid" id="pos_client_uuid" value="{{ \Illuminate\Support\Str::uuid() }}">
        @endif
        @if(!empty($exchange_sale))
            {!! Form::hidden('exchange_parent_id', $exchange_sale->id) !!}
        @endif

        @php
            // Exchange credit (return total) starts at 0 and is computed client-side from selected return items.
            // If this page is opened via the legacy exchange redirect, we still show the summary box prefilled.
            $exchange_return_total = 0;
            if (!empty($exchange_sale)) {
                $exchange_return_total = request()->has('exchange_return_total')
                    ? (float) request()->get('exchange_return_total')
                    : 0;
            }
        @endphp
        <input type="hidden" id="exchange_return_total" value="{{ $exchange_return_total }}">
        <div class="row hide" id="exchange_summary_box">
            <div class="col-md-12">
                <div class="tw-rounded-xl tw-bg-amber-50 tw-border tw-border-amber-200 tw-px-4 tw-py-3 tw-mb-3">
                    <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-2 md:tw-items-center md:tw-justify-between">
                        <div class="tw-text-sm tw-text-black">
                            <span class="tw-font-semibold">Exchange Credit (Return Total):</span>
                            <span id="exchange_return_total_text">0</span>
                            <span class="tw-text-gray-600" id="exchange_invoice_hint">
                                for invoice <span id="exchange_invoice_no_text">{{ $exchange_sale->invoice_no ?? '' }}</span>
                            </span>
                        </div>
                        <div class="tw-text-sm tw-text-black">
                            <span class="tw-font-semibold">New Sale Total:</span>
                            <span id="exchange_new_sale_total_text">0</span>
                        </div>
                        <div class="tw-text-sm tw-text-black">
                            <span class="tw-font-semibold" id="exchange_diff_label">Customer Pays:</span>
                            <span id="exchange_diff_amount_text">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-12">
            <div class="col-md-12 tw-pt-0 tw-mb-14">
                <div class="row pos-sale-layout-row tw-flex lg:tw-flex-row md:tw-flex-col sm:tw-flex-col tw-flex-col tw-items-start md:tw-gap-4">
                    <div class="tw-px-3 tw-w-full  lg:tw-px-0 lg:tw-pr-0 @if($show_pos_suggestions) lg:tw-w-[60%]  @else lg:tw-w-[100%] @endif">

                        <div class="pos-sale-cart-panel tw-shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] tw-rounded-2xl tw-bg-white tw-mb-2 md:tw-mb-8 tw-p-2">
                            <div class="box-body pb-0">
                                {!! Form::hidden('location_id', $default_location->id ?? null, [
                                    'id' => 'location_id',
                                    'data-receipt_printer_type' => !empty($default_location->receipt_printer_type)
                                        ? $default_location->receipt_printer_type
                                        : 'browser',
                                    'data-default_payment_accounts' => $default_location->default_payment_accounts ?? '',
                                ]) !!}
                                <input type="hidden" id="pos_search_dropdown_filter" value="{{ $is_pos_downpayment ? 'all' : ($pos_settings['pos_search_dropdown_filter'] ?? 'all') }}">
                                {!! Form::hidden('sub_type', isset($sub_type) ? $sub_type : null) !!}
                                <input type="hidden" id="item_addition_method" value="{{ $business_details->item_addition_method }}">
                                @if ($business_details->advancedPromotionsEnabled())
                                    @include('sale_pos.partials.advanced_promotions')
                                @endif
                                @include('sale_pos.partials.pos_form')

                                @include('sale_pos.partials.pos_form_totals')

                                @include('sale_pos.partials.payment_modal')

                                @if (empty($pos_settings['disable_suspend']))
                                    @include('sale_pos.partials.suspend_note_modal')
                                @endif

                                @if (empty($pos_settings['disable_recurring_invoice']))
                                    @include('sale_pos.partials.recurring_invoice_modal')
                                @endif
                            </div>
                        </div>
                    </div>
                    @if ($show_pos_suggestions && !isMobile())
                    <div class="pos-products-sidebar-col md:tw-no-padding tw-w-full lg:tw-w-[40%] tw-px-5">
                            @include('sale_pos.partials.pos_sidebar')
                        </div>
                    @endif
                </div>
            </div>
        </div>
        @include('sale_pos.partials.pos_form_actions')
        {!! Form::close() !!}
    </section>

    <!-- This will be printed -->
    <section class="invoice print_section" id="receipt_section">
    </section>
    <div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        @include('contact.create', ['quick_add' => true])
    </div>
    @if ($show_pos_suggestions && isMobile())
        @include('sale_pos.partials.mobile_product_suggestions')
    @endif
    <!-- /.content -->
    <div class="modal fade register_details_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade close_register_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <!-- quick product modal -->
    <div class="modal fade quick_add_product_modal" tabindex="-1" role="dialog" aria-labelledby="modalTitle"></div>

    <div class="modal fade" id="expense_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    <div class="modal fade" id="pos_pay_contact_due_modal" tabindex="-1" role="dialog">
    </div>

    @include('sale_pos.partials.configure_search_modal')

    @include('sale_pos.partials.product_picker_modal')

    @include('sale_pos.partials.recent_transactions_modal')

    @include('sale_pos.partials.weighing_scale_modal')

    @include('sale_pos.partials.exchange_modal')

    @include('sale_pos.partials.sell_return_modal')

    @if($business_details->managerPinApprovalsEnabled() && !$is_pos_downpayment)
        @include('sale_pos.partials.remote_manager_approval_modal')
    @endif

    @if(!$is_pos_downpayment && !$business_details->managerPinApprovalsEnabled())
        @include('sale_pos.partials.below_cost_price_approval_modal')
        @include('sale_pos.partials.discount_approval_modal')
    @endif

@stop
@section('css')
    <style>
        @include('sale_pos.partials.compact_pos_styles')

        @media (min-width: 1024px) {
            .pos-sale-layout-row {
                align-items: stretch !important;
            }

            .pos-sale-cart-panel,
            .pos-products-sidebar-col {
                height: calc(100vh - 230px);
            }

            .pos-products-sidebar-col {
                display: flex;
                flex-direction: column;
            }

            .pos-products-sidebar-col > .row:last-child,
            .pos-products-sidebar-col > .row:last-child > .col-md-12,
            .pos-products-list-panel {
                display: flex;
                flex: 1 1 auto;
                flex-direction: column;
                min-height: 0;
                height: 100%;
            }
        }

        .pos-product-toolbar-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            row-gap: 8px;
        }

        .pos-product-list-search .input-group-addon,
        .pos-product-list-search .form-control {
            border-color: #dfe6ef;
            box-shadow: none;
            height: 36px;
        }

        .pos-product-list-search .form-control {
            border-left: 0;
            font-size: 13px;
        }

        .pos-product-toolbar-row #product_category_div label,
        .pos-product-toolbar-row #product_brand_div label {
            height: 36px;
            border-radius: 8px;
            font-size: 13px !important;
            line-height: 1;
            gap: 6px;
        }

        .pos-product-toolbar-row #product_category_div label svg,
        .pos-product-toolbar-row #product_brand_div label svg {
            width: 16px;
            height: 16px;
        }

        .pos-product-list-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 74px 112px;
            gap: 12px;
            align-items: center;
            padding: 12px 16px;
            margin-top: 8px;
            color: #8a97ab;
            font-weight: 700;
            font-size: 13px;
            background: #ffffff;
            border: 1px solid #e5eaf1;
            border-bottom: 0;
            border-radius: 14px 14px 0 0;
        }

        .pos-products-list-panel #product_list_body {
            display: block;
            height: calc(100vh - 390px);
            max-height: calc(100vh - 390px);
            min-height: 380px;
            overflow-y: auto;
            background: #ffffff;
            border: 1px solid #e5eaf1;
            border-radius: 0 0 14px 14px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
        }

        @media (min-width: 1024px) {
            .pos-products-list-panel #product_list_body {
                flex: 1 1 auto;
                min-height: 0;
            }
        }

        .pos-products-list-panel #product_list_body .product_list {
            width: 100% !important;
            float: none;
            padding: 0;
        }

        .pos-products-list-panel #product_list_body .product_box.pos-list-product-box {
            display: grid;
            grid-template-columns: 64px minmax(0, 1fr) 74px 112px;
            gap: 12px;
            align-items: center;
            width: 100%;
            min-height: 72px;
            margin: 0;
            padding: 10px 16px;
            border: 0;
            border-bottom: 1px solid #edf1f6;
            border-radius: 0;
            box-shadow: none;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.15s ease, transform 0.15s ease;
        }

        .pos-products-list-panel #product_list_body .product_box.pos-list-product-box:hover {
            background: #f8fbff;
            transform: translateX(2px);
        }

        .pos-products-list-panel #product_list_body .product_box .image-container {
            width: 56px;
            height: 44px;
            min-height: 44px;
            border-radius: 8px;
            background-color: #eef3f8;
            border: 1px solid #e5eaf1;
        }

        .pos-products-list-panel #product_list_body .product_box .text_div {
            min-width: 0;
            padding: 0;
        }

        .pos-products-list-panel .pos-list-product-name {
            display: -webkit-box;
            overflow: hidden;
            color: #26364a !important;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.3;
            max-height: none;
            text-transform: uppercase;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .pos-products-list-panel .pos-list-product-code {
            display: block;
            margin-top: 3px;
            color: #7c8da6 !important;
            font-size: 12px;
        }

        .pos-products-list-panel .pos-list-product-stock,
        .pos-products-list-panel .pos-list-product-price {
            color: #53647d;
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

        .pos-products-list-panel .pos-list-product-stock {
            text-align: center;
        }

        .pos-products-list-panel .pos-list-product-price {
            color: #26364a;
            text-align: right;
        }

        .pos-products-list-panel .text-red {
            color: #ef4444 !important;
        }
    </style>
    <!-- include module css -->
    @if (!empty($pos_module_data))
        @foreach ($pos_module_data as $key => $value)
            @if (!empty($value['module_css_path']))
                @includeIf($value['module_css_path'])
            @endif
        @endforeach
    @endif
@stop
@section('javascript')
    @if ($business_details->offlineSalesEnabled())
        <script src="{{ asset('js/pos-offline.js?v=' . $asset_v) }}"></script>
    @endif
    <script src="{{ asset('js/pos.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/printer.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/product.js?v=' . $asset_v) }}"></script>
    <script src="{{ asset('js/opening_stock.js?v=' . $asset_v) }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function update_exchange_summary_box() {
                if (!$('#exchange_return_total').length) {
                    return;
                }

                var credit = __read_number($('#exchange_return_total'));
                var new_sale_total = __read_number($('#final_total_input'));
                var diff = new_sale_total - credit;

                $('#exchange_return_total_text').text(__currency_trans_from_en(credit, false));
                $('#exchange_new_sale_total_text').text(__currency_trans_from_en(new_sale_total, false));

                // Show summary only when an exchange receipt has been selected or there is any credit.
                var has_parent = $('input[name="exchange_parent_id"]').length && !!$('input[name="exchange_parent_id"]').val();
                if (has_parent || credit > 0) {
                    $('#exchange_summary_box').removeClass('hide');
                } else {
                    $('#exchange_summary_box').addClass('hide');
                }

                // Hide invoice hint if we don't have an invoice number yet.
                var inv_no = ($('#exchange_invoice_no_text').text() || '').toString().trim();
                if (inv_no.length) {
                    $('#exchange_invoice_hint').removeClass('hide');
                } else {
                    $('#exchange_invoice_hint').addClass('hide');
                }

                if (diff > 0) {
                    $('#exchange_diff_label').text('Customer Pays:');
                    $('#exchange_diff_amount_text').text(__currency_trans_from_en(diff, false));
                } else if (diff < 0) {
                    $('#exchange_diff_label').text('Credit Customer:');
                    $('#exchange_diff_amount_text').text(__currency_trans_from_en(Math.abs(diff), false));
                } else {
                    $('#exchange_diff_label').text('Even:');
                    $('#exchange_diff_amount_text').text(__currency_trans_from_en(0, false));
                }
            }

            // Update on any invoice total recalculation (fires from pos.js).
            $(document).on('invoice_total_calculated', function () {
                update_exchange_summary_box();
            });

            // Initial render.
            update_exchange_summary_box();
        });
    </script>
    @include('sale_pos.partials.keyboard_shortcuts')

    <!-- Call restaurant module if defined -->
    @if (in_array('tables', $enabled_modules) ||
            in_array('modifiers', $enabled_modules) ||
            in_array('service_staff', $enabled_modules))
        <script src="{{ asset('js/restaurant.js?v=' . $asset_v) }}"></script>
    @endif
    <!-- include module js -->
    @if (!empty($pos_module_data))
        @foreach ($pos_module_data as $key => $value)
            @if (!empty($value['module_js_path']))
                @includeIf($value['module_js_path'], ['view_data' => $value['view_data']])
            @endif
        @endforeach
    @endif
    @include('sale_pos.partials.pos_layout_script', ['form_id' => 'add_pos_sell_form'])
@endsection