@extends('layouts.master')

@section('title', 'POS | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.pos'))

<!-- css insert -->
@section('css')
<!-- -- datatables plugin -- -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.2/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/autofill/2.3.9/css/autoFill.bootstrap5.min.css">
@endsection

@section('fixedcontent')

<!-- session successful message -->
@if (Session::has('success'))
<div id="flash-msg" class="shadow pt-3">
    <div class="d-flex justify-content-between mb-2">
        <i class="fas fs-1 fa-check"></i>
        <a id="flash-msg-btn" class="text-blue-300 clickable-item-pointer"><i class="fas fa-times"></i></a>
    </div>
    <h3>Sent Successfully</h3>
    <p class="text-blue-300">{{ Session::get('success') }}</p>
</div>
@endif

@endsection


<!-- content insert -->
@section('content')


<form id="myform" class="myform" method="POST" action="{{ route('sett.acc_pos.store') }}" enctype="multipart/form-data">
    @csrf

    <div class="px-0">

        <div class="row">
            <div class="col-12 col-md-8">

                <div class="row mb-3">
                    <div class="col-12 col-md-9 mb-2 mb-md-0">
                        <div class="d-flex align-items-center">
                            <a href="{{ route('sett.home') }}"
                                class="btn btn-sm status-col-link status-col-link white-color-btn b-r-xs h-100 me-2 b-r-l-cont p-2 shadow">
                                <div> <i class="fas fa-long-arrow-alt-left fs-4"></i></div>
                            </a>

                            <div class="d-flex align-items-center bg-white shadow px-4 b-r-l-cont w-100">
                                <i class="fas fa-barcode fs-2  me-2"></i>
                                <input type="text" name="barcode_insert_input" id="barcode_insert_input"
                                    class="form-control barcode_insert_input border-0"
                                    placeholder="{{ __('basic.write here product name or barcode') }}" autofocus>
                            </div>
                        </div>

                    </div>

                    <div class="col-12 col-md-3">
                        <div class="card shadow h-100 main-color-btn status-col-link px-2 py-2">
                            <div class="card-body py-2 px-3 d-flex justify-content-between clickable-item-pointer"
                                data-bs-toggle="modal" data-bs-target="#choose_client_modal">
                                <h6 id="choosen_client_name" class="mb-0">{{ __('basic.pos clients') }}</h6>
                                <i class="fas fa-plus"></i>
                                <input type="hidden" id="choosen_client" name="choosen_client" value="1">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" id="products_cont">

                    @if(count($products) > 0)
                    @foreach ($products as $item)
                    {{-- products --}}
                    <div class="col-12 col-md-3 mb-3">
                        <div class="card shadow h-100 pos_product" data-id="{{ $item->id }}"
                            data-name="{{ $item->name }}" data-img="{{ $item->main_image }}"
                            data-barcode="{{ $item->barcode }}" data-price="{{ $item->sell_price }}">
                            <img src="{{ URL::asset('img/products/' . $item->main_image) }}"
                                class="card-img-top pso_product_img" alt="...">
                            <div class="card-body py-2 px-3">
                                <p class="text-start fw-bold mb-0">{{ $item->name }}</p>
                                <p class="text-gray-400 text-s">{{ $item->barcode }}</p>
                                <div class="d-flex justify-content-between align-items-center px-0">
                                    <div>
                                        <h6 class=" mb-0 fw-bold text-grat-800">{{ $item->quantity }}</h6>
                                        <p class="text-xxs text-gray-400 text-uppercase mb-0">
                                            {{ $item->unit->name }}</p>
                                    </div>
                                    <div>
                                        <h4 class="mb-0 fw-bold text-grat-800">{{ $item->sell_price }}</h4>
                                        <p class="text-xxs text-gray-400 text-uppercase mb-0">
                                            {{ $currency }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @else
                    <div class="col-12">
                        <div class="card shadow">
                            <div class="card-body p-5 text-center">
                                <img width="400px" src="{{ URL::asset('img/svg/undraw_heavy_box_agqi.svg') }}" alt=""
                                    class="mb-3 img-responsive">
                                <h4 class="text-gray-400">{{ __('basic.no product found') }}</h4>
                            </div>

                        </div>
                    </div>
                    @endif

                </div>
            </div>
            <div class="col-12 col-md-4 px-0">
                <div class="pos_sidebar py-5 px-4 b-r-l-cont">
                    <h5>{{ __('basic.current order') }}</h5>

                    <div>
                        <div class="row mb-2">
                            <h6 class="col-5 text-xs text-gray-300 mb-0">{{ __('basic.items') }}</h6>
                            <h6 class="col-2 text-xs text-gray-300 text-center mb-0">{{ __('basic.quantity') }}</h6>
                            <h6 class="col-3 text-xs text-gray-300 text-center mb-0 ">{{ __('basic.final price') }}</h6>
                            <h6 class="col-2 text-xs text-gray-300 text-end mb-0"></h6>
                        </div>
                        <div id="pos_sidebar_items" class="pos_sidebar_items">
                            <div class="text-center mt-5" id="pos_sidebar_items_empty_msg">
                                <img width="180px" src="{{ URL::asset('img/svg/undraw_credit_card_re_blml.svg') }}"
                                    alt="" class="mb-3 img-responsive">
                                <h5 class="text-gray-400">{{ __('basic.add product to order') }}</h5>
                            </div>
                        </div>
                    </div>
                    <div>

                        <div class="d-flex justify-content-between">
                            <h6>{{ __('basic.subtotal') }}</h6>
                            <h6><span class="subtotal_total">0</span> <span class="text-gray-400 text-xs">{{ $currency
                                    }}</span></h6>
                        </div>

                        <div class="d-flex justify-content-between">
                            <h6>{{ __('basic.tax') }}</h6>
                            <h6>0 <span class="text-gray-400 text-xs">{{ $currency }}</span></h6>
                        </div>

                        <div class="d-flex justify-content-between">
                            <h6>{{ __('basic.discount') }}</h6>
                            <h6>0 <span class="text-gray-400 text-xs">{{ $currency }}</span></h6>
                        </div>

                        <div class="d-flex justify-content-between main-color mb-2">
                            <h6 class="fw-bold">{{ __('basic.final price') }}</h6>
                            <h5 class="fw-bold"><span class="final_price_total">0</span> <span class="text-xs">{{
                                    $currency
                                    }}</span></h5>
                        </div>

                        <div class="row">

                            <div class="col-12 col-md-6 align-self-center">
                                <span class="chbox_true chbox_true_with_icon">
                                    <input type="radio" checked name="payment_method" id="client_cash" value="1"><label
                                        for="client_cash">{{ __('basic.cash')
                                        }}</label>
                                </span>

                                <span class="chbox_true chbox_true_with_icon h-100">
                                    <input type="radio" name="payment_method" id="client_visa" value="3"><label
                                        for="client_visa">{{ __('basic.credit') }}</label>
                                </span>
                            </div>

                            <input type="hidden" value="{{ $session_id }}" name="session_id">

                            <div class="col-12 col-md-6 d-flex justify-content-between align-items-center main-color-btn status-col-link b-r-l-cont px-3 py-2 clickable-item-pointer keyboad_show"
                                data-id="pay" data-type="pay" value="0">
                                <h6 class="fw-bold mb-0">{{ __('basic.pay') }}</h6>
                                <h5 class="fw-bold mb-0 text-white"><span class="final_price_total">0</span> <span
                                        class="text-xs">{{ $currency }}</span></h5>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Modal for clients -->
    <div class="modal fade" id="choose_client_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable ">
            <div class="modal-content b-r-s-cont border-0">

                <div class="modal-header">
                    <div class="modal-title" id="exampleModalLabel"><i class="fas fa-users me-1"></i>
                        {{ __('basic.choose your clients') }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal content -->
                <div class="modal-body px-5 py-4">

                    <div class="search-eng-cont-calander mb-5">

                        <div class="p-1 bg-white rounded rounded-pill border-all"
                            style="box-shadow: -1px 1rem 1rem 7px rgb(58 59 69 / 15%) !important; ">
                            <div class="input-group">
                                <input id="search-eng-traveler" type="search"
                                    placeholder="{{ __('patientappo.patient search msg') }}"
                                    aria-describedby="button-add" class="form-control border-0 bg-transparent px-4"
                                    required>
                                <div class="input-group-append pe-2">
                                    <button class="btn btn-link text-primary typeahead"><i
                                            class="fa fa-search text-gray-300"></i></button>
                                </div>
                            </div>
                        </div>

                        <div id="patient_info_ajax">
                            <!-- to get the patient info from ajax -->
                        </div>
                    </div>

                    <div class="main-color-bg p-4 text-white b-r-l-cont text-center clickable-item-pointer search-traveler-select-btn"
                        data-id="1" data-full_name="{{ __('basic.pos clients') }}"><i class="fas fa-users me-1"></i> {{
                        __('basic.pos clients') }}</div>
                </div>

            </div>
        </div>
    </div>


    <!-- Modal for clients -->
    <div class="modal fade" id="choose_qty_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable ">
            <div class="modal-content b-r-s-cont border-0">

                <div class="modal-header">
                    <div class="modal-title" id="exampleModalLabel"><i class="fas fa-cash-register me-1"></i></i>
                        {{ __('basic.keyboard') }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal content -->
                <div class="modal-body px-5 py-4">
                    <input type="hidden" id="keyboard_type" value="">
                    <input type="hidden" id="keyboard_input_id" value="">
                    <div class="row mb-2">
                        <div class="col-12">
                            <h6 id="what_to_pay" style="display: none">{{ __('basic.paying') }}</h6>
                            <input id="keyboard_screen" class="form-control mb-3 pos_keyboard_screen" readonly disabled>
                        </div>
                        <div class="col-12" id="keyboard_remaining_amount_cont" style="display: none">
                            <h6>{{ __('basic.remaining amount') }}</h6>
                            <input id="keyboard_remaining_amount" class="form-control mb-3 pos_keyboard_screen" readonly
                                disabled>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="1">1</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="2">2</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="3">3</div>
                        </div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="4">4</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="5">5</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="6">6</div>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="7">7</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="8">8</div>
                        </div>
                        <div class="col-4">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="9">9</div>
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-3">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="delete"><i class="fas fa-backspace"></i></div>
                        </div>
                        <div class="col-3">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value="0">0</div>
                        </div>
                        <div class="col-3">
                            <div class="fs-1 text-center p-3 px-4 btn btn-outline-secondary w-100 keyboard_click"
                                data-value=".">.</div>
                        </div>
                        <div class="col-3">
                            <div class="fs-1 text-center px-0 p-md-3 px-md-4  btn btn-outline-secondary w-100"
                                id="keyboard_enter" data-value="enter" data-bs-dismiss="modal">{{ __('basic.enter') }}
                            </div>
                            <button id="keyboard_submit"
                                class="justify-content-between h-100 align-items-center w-100 main-color-btn status-col-link  b-r-xs px-5 py-3"
                                style="display: none">
                                {{ __('basic.pay') }}
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
    </div>
    </div>


</form>

@endsection

<!-- js insert -->
@section('js')
<script>
    $(document).ready(function() {
            var table = $('#p-lab-table').DataTable({
                lengthChange: true,
                buttons: [{
                    extend: 'csv',
                    split: ['pdf', 'excel'],
                }]
            });
    });

    // --------- barcode insert ----------
    $(document).on('keyup', '#barcode_insert_input', function() {

        let search_query = $(this).val();

        var url = "{{ route('sett.product_search_ajax', ':search_query') }}";
        url = url.replace(':search_query', search_query);

        if (search_query != "") {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {

                    avatar_url = '{{ URL::asset('img/products') }}';

                    if (data.length > 0) {
                        var html = ''
                        $.each(data, function(key, value) {
                            html +=   '<div class="col-12 col-md-3 mb-3">' +
                                           '<div class="card shadow h-100 pos_product" data-id="product_' + value.id + '" data-name="' + value.name + '" data-img="' + value.main_image + '" data-barcode="' + value.barcode + '" data-price="' + value.sell_price + '" >' +
                                                '<img class="card-img-top pso_product_img" src=' + avatar_url + '/' + value.main_image + '>' +
                                                '<div class="card-body py-2 px-3">' +
                                                    '<p class="text-start fw-bold mb-0">' + value.name +'</p>' +
                                                    '<p class="text-gray-400 text-s">' + value.barcode + '</p>' +
                                                   '<div class="d-flex justify-content-between align-items-center px-0">' +
                                                        '<div>' +
                                                           '<h6 class=" mb-0 fw-bold text-grat-800">' + value.quantity + '</h6>' +
                                                            '<p class="text-xxs text-gray-400 text-uppercase mb-0">' +
                                                             value.unit.name + '</p>' +
                                                        '</div>' +
                                                        '<div>' +
                                                            '<h4 class="mb-0 fw-bold text-grat-800">' + value.sell_price + '<h4>' +
                                                            '<p class="text-xxs text-gray-400 text-uppercase mb-0">{{ $currency }}</p>' +
                                                        '</div>' +
                                                    '</div>' +
                                                '</div>' +
                                            '</div>' +
                                        '</div>'
                        });

                        $('#products_cont').html(html);
                    }else{
                        console.log('asd');
                        $("#products_cont").html(
                            '<div class="col-12">' +
                                '<div class="card shadow">' +
                                        '<div class="card-body p-5 text-center">' +
                                            '<img width="400px" src="{{ URL::asset("img/svg/undraw_heavy_box_agqi.svg") }}" alt="" class="mb-3 img-responsive">' +
                                            '<h4 class="text-gray-400">{{ __("basic.no product found") }}</h4>' +
                                        '</div>' +
                                '</div>' +
                            '</div>'
                        );
                    }
                },
            });
        } else {
            $("#products_cont").html(
               '<div class="col-12">' +
                   '<div class="card shadow">' +
                        '<div class="card-body p-5 text-center">' +
                            '<img width="400px" src="{{ URL::asset("img/svg/undraw_heavy_box_agqi.svg") }}" alt="" class="mb-3 img-responsive">' +
                            '<h4 class="text-gray-400">{{ __("basic.no product found") }}</h4>' +
                        '</div>' +
                   '</div>' +
                '</div>'
            );
        }
    });

        // ------- Traveler --------
        // Send Search Text to the server
    $("#search-eng-traveler").keyup(function() {

            let search_query = $(this).val();

            var url = "{{ route('sett.app_calander_patient_search', ':search_query') }}";
            url = url.replace(':search_query', search_query);

            if (search_query != "") {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {

                        avatar_url = '{{ URL::asset('img/useravatar') }}';

                        if (data !== "") {
                            var html = '';
                            $.each(data, function(key, value) {
                                html +=
                                    '<div class="row border-top-gray py-4 align-items-center px-0 px-md-2">' +

                                    '<div class="col-6 col-md-5 d-flex mb-2 align-items-center">' +
                                    '<div class="position-relative">' +
                                    '<img class="rounded-circle avatar-small2 me-3" src=' +
                                    avatar_url + '/' + value.avatar +
                                    '> </div>' +
                                    '<div><p class = "mb-0 text-xs text-gray-300 ">{{ __('basic.patient') }} </p> <p class = "mb-0 text-xs fw-bold text-gray-600 " >' +
                                    value.full_name +
                                    '</p> </div> </div>' +
                                    '<div class="col-6 col-md mb-2">' +
                                    '<h6 class="text-gray-300 text-xs mb-1">{{ __('patientappo.phone number') }}</h6>' +
                                    '<p class="text-gray-600 text-s fw-bold">' + value.phone_number + '</p></div>' +

                                    '<div class="col-6 col-md mb-2 text-end">' +
                                    '<input type="button" name="next" class="search-traveler-select-btn btn btn-primary" value="{{ __('basic.choose') }}" data-id="' +
                                    value.id + '" data-full_name="' +
                                    value.full_name + '" data-avatar="' + value.avatar + '">' +
                                    '</div>' +

                                    '</div>'
                            });

                            $('#patient_info_ajax').html(html);
                        }else{
                                $('#patient_info_ajax').html(
                                '<a class="list-group-item list-group-item-action border-0 text-gray-700"><i class="fas fa-search text-gray-200 me-2"></i>No Record founded</a>'
                            );
                        }
                    },
    });
    } else {
        $('#hid-info-search').hide();
        $("#patient_info_ajax").empty();
    }
    });

    // select client from the search or pos client
    $(document).on("click", ".search-traveler-select-btn", function() {
        var id = $(this).data('id');
        var name = $(this).data('full_name');
        var avatar = $(this).data('avatar');
        var avatar_url = '{{ URL::asset('img/useravatar') }}';
        $('#choosen_client').val(id);
        $('#choosen_client_name').html(name);
        $('.modal').modal('hide');
    })

    // ------------- order --------------
    // add product to current order
    $(document).on("click", ".pos_product", function() {

        var id = $(this).data('id');
        var new_id = "product_" + $(this).data('id');
        var name = $(this).data('name');
        var img = $(this).data('img');
        var barcode = $(this).data('barcode');
        var price = $(this).data('price');
        var quantity = 1;

        avatar_url = '{{ URL::asset('img/products') }}';

        if($('#' + id).length > 0){

            var price = $('#' + id).find('.pos_product_price').val();

            //increament quntity if product is exists
            var current_qty = $('#' + id).find('.pos_product_qty').val();
            var quantity = parseInt(current_qty) + 1;
            $('#' + id).find('.pos_product_qty').val(quantity)

            // final price after new qunitity
            var price_after = parseInt(quantity * price).toFixed(2);
            $('#' + id).find('.pos_product_final_price').val(price_after);
            $("#pos_sidebar_items").append(
                '<audio autoplay><source src="{{ URL::asset('sound/barcode_scanner_beep_sound.wav') }}" type="audio/wav">Your browser does not support the audio element.</audio>'
            )

        }else{
            $("#pos_sidebar_items_empty_msg").hide();
            $("#pos_sidebar_items").append(
            '<div class="row align-items-center mb-2" id="' + new_id + '">' +
                '<div class="col-5 d-flex">' +
                    '<img class="avatar-small rounded-circle me-2" src=' + avatar_url + '/' + img + '>' +
                    '<div>' +
                    '<h6 class="mb-0 text-truncate">' + name + '</h6>' +
                        '<div class="text-xs mb-0 d-flex">'
                            + '<span class="text-xs text-gray-400">{{ __("basic.price") }}: </span>' +
                            '<input name="product_price[]" class="clickable-item-pointer pos_product_price border-0 d-inline keyboad_show" data-id="' + new_id + '" data-type="price" readonly value="' + price + '">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<div class="col-2">' +
                    '<input name="product_id[]" type="hidden" value="'+ id +'">' +
                    '<input name="quantity[]" class="w-100 text-center fw-bold mb-0 border-0 clickable-item-pointer pos_product_qty keyboad_show" data-id="' + new_id + '" data-type="quantity" value="' + quantity + '" readonly>' +
                    '<audio autoplay><source src="{{ URL::asset('sound/barcode_scanner_beep_sound.wav') }}" type="audio/wav">Your browser does not support the audio element.</audio>' +
                '</div>' +
                '<input readonly value='+ price +' class="col-3 border-0 text-center fw-bold mb-0 pos_product_final_price">' +
                '<h6 class="col-2 text-center fw-bold mb-0 text-red clickable-item-pointer delete_item"><i class="fas fa-trash-alt"></i></h6>' +
            '</div>'

           )
        }

        fetchTotals();
    })


    //fetch total debt and credit
    function fetchTotals() {
        // sell
        var sell = $('.pos_product_final_price');
        var sell_total = 0;
        $.each(sell, function(key, value) {
            if(this.value > 0){
                sell_total += parseFloat(this.value);
            }
        });

        var total_sell = '.final_price_total';
        var subtotal_total = '.subtotal_total';

        $(subtotal_total).html(parseInt(sell_total).toFixed(2));
        $(total_sell).html(parseInt(sell_total).toFixed(2));
    }

    // delete item from order
    $(document).on("click", ".delete_item", function() {
        $(this).parent().remove();
        fetchTotals();

        var check_items = $(".pos_product_qty");

        if(check_items.length == 0) {
            $("#pos_sidebar_items_empty_msg").show();
        }

    });


    // ----- Keyboard ------
    $(document).on("click", ".keyboad_show", function() {

        var id = $(this).data('id');
        var type = $(this).data('type');
        var value = $(this).val();

        $('#keyboard_enter').show();

        $('#keyboard_remaining_amount_cont').hide();
        $('#what_to_pay').hide();
        $('#keyboard_submit').hide();

        if(type === "pay"){
            var value = $('.final_price_total').html();
            $('#keyboard_enter').hide();

            $('#keyboard_screen').val();
            $('#keyboard_remaining_amount').val(value);

            $('#what_to_pay').show();
            $('#keyboard_remaining_amount_cont').show();
            $('#keyboard_submit').show();
        }else{
            $('#keyboard_screen').val(value);
        }

        $('#keyboard_input_id').val(id);
        $('#keyboard_type').val(type);

        $('#choose_qty_modal').modal('show');
    });


    $(document).on("click", ".keyboard_click", function() {

        var type = $("#keyboard_type").val();
        var input_id = $('#keyboard_input_id').val();
        var value = $(this).data('value');

        if(type === "quantity"){
            var qty_selector = $('#' + input_id).find('.pos_product_qty');
            var price = $('#' + input_id).find('.pos_product_price').val();
            var quantity = qty_selector.val();
            if(value === "delete"){
                if(quantity.length > 1){
                    qty_selector.val(quantity.slice(0,-1));
                    //for keyboard screen
                    $('#keyboard_screen').val(quantity.slice(0,-1));
                }else{
                    qty_selector.val('');
                        //for keyboard screen
                        $('#keyboard_screen').val('');
                }
            }else{
                qty_selector.val(quantity + value);
                    //for keyboard screen
                    $('#keyboard_screen').val(quantity + value);
            }
            var quantity = qty_selector.val();
            var price_after = parseInt(quantity * price).toFixed(2);
            $('#' + input_id).find('.pos_product_final_price').val(price_after);
        }
        else if(type === "price"){
            var quantity = $('#' + input_id).find('.pos_product_qty').val();
            var price_selector = $('#' + input_id).find('.pos_product_price');
            var price = price_selector.val();
            console.log(price);
            if(value === "delete"){
                if(price.length > 1){
                    price_selector.val(price.slice(0,-1));
                    //for keyboard screen
                    $('#keyboard_screen').val(price.slice(0,-1));
                }else{
                    price_selector.val('');
                        //for keyboard screen
                    $('#keyboard_screen').val('');
                }
            }else{
                price_selector.val(price + value);
                    //for keyboard screen
                    $('#keyboard_screen').val(price + value);
            }
            var price = price_selector.val();
            var price_after = parseInt(price * quantity).toFixed(2);
            $('#' + input_id).find('.pos_product_final_price').val(price_after);
        }
        else if(type === "pay"){
            var final_price = $('.final_price_total').html();
            var pay = $('#keyboard_screen').val();

            if(value === "delete"){
                if(pay.length > 1){
                    $('#keyboard_screen').val(pay.slice(0,-1));
                }else{
                        $('#keyboard_screen').val('');
                }
            }else{
                var total_amount_write = pay + value;
                    $('#keyboard_screen').val(total_amount_write);
                    $('#keyboard_remaining_amount').val( final_price - total_amount_write);
            }

        }


        fetchTotals();

    });


    //Assign Action to Keyboard Keys (Keyboard Event)
    $(document).keydown(function(event) {
        var key = String.fromCharCode(event.keyCode);
        key.toUpperCase();

        if(key === "Enter Key"){
            alert('Key A')
        }

        // case 37: alert('Arrow Key Left');  break;
        //  case 38: alert('Arrow Key Up');    break;
        //  case 39: alert('Arrow Key Right'); break;
        //  case 40: alert('Arrow Key Down');  break;
        //  case 13: alert('Enter Key');       break;
        //  case 27: alert('ESC Button');      break;
        //  case 32: alert('Space Bar');       break;
    });



    //submit the form
    $(document).on("click", "#keyboard_submit", function() {

        var pay = $('#keyboard_screen').val();
        var remaining_amount = $('#keyboard_remaining_amount').val();

        if(remaining_amount <= 0){
            $("#myform").submit();
        }else{
            toastr.error("{{ __('basic.you need to pay the full amount') }}");
        }
    })

</script>

<!-- -- datatables plugin -- -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.2/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.colVis.min.js"></script>

@endsection