@extends('backend.layouts.master')
@section('section-title', 'Purchase')
@section('page-title', 'Edit Purchase')
@section('action-button')
    <a href="{{ route('purchase.index') }}" class="btn add_list_btn">
        <i class="mr-2 feather icon-list"></i>
        Purchase List
    </a>
@endsection
@push('css')
    <style>
        .invoice-contentbar {
            margin: 80px 5px 0 5px;
            padding: 20px;
            margin-bottom: 60px;
        }

        /* pos footer section start */

        .footerpos {
            display: grid;
            grid-template-columns: 1fr 50%;
        }

        .footerpos .footerpos_left {
            background-color: #000ce2 !important;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 12px 10px;
            border-top-left-radius: 35px;
            border-bottom-left-radius: 35px;
        }

        .footerpos .footerpos_left div {
            font-size: 25px;
            color: #fff;
        }

        .footerpos_right {
            background-color: #00a65a !important;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 12px 10px;
            border-top-right-radius: 35px;
            border-bottom-right-radius: 35px;
        }

        .footerpos_right div {
            font-size: 25px;
            color: #fff;
            cursor: pointer;
        }

        .productcss {
            /* border: 1px solid #DDD;  */
            cursor: pointer;
            padding-bottom: 30px;
            height: 262px;
        }

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .table-responsive {
            overflow-x: auto;
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <!-- Start col -->
        <div class="col-md-12">
            <div class="card  card_style">
                <form action="{{ route('invoice.store') }}" id="payment_form" method="POST">
                    @csrf
                    <div class="cart-container">
                        <div class="cart-head">
                            <div class="form-row">
                                {{-- Purchase Date --}}
                                <div class="mb-3 col-md-6">
                                    <label class="form-label font-weight-bold">
                                        Date *
                                    </label>
                                    <input type="date" class="form-control" value="{{ $purchase->date }}" name="date"
                                        required>
                                </div>
                                {{-- Purchase No --}}
                                <div class="mb-3 col-md-6">
                                    <label for="validationCustom02" class="form-label font-weight-bold">Purchase No
                                        *</label>
                                    <input type="text" class="form-control" value="{{ $purchase->purchase_no }}"
                                        name="purchase_no" required readonly>
                                </div>
                            </div>
                            <div class="form-row">
                                {{-- supplier invoice no --}}
                                {{-- <div class="mb-3 col-md-6">
                                <label for="validationCustom02" class="form-label font-weight-bold">Supplier Invoice No
                                </label>
                                <input type="text" class="form-control" value="{{ $purchase->supplier_invoice_no }}"
                                    name="supplier_invoice_no" placeholder="Please Enter Supplier Invoice No" required>
                            </div> --}}
                                {{-- Purchase Date --}}
                                {{-- <div class="mb-3 col-md-6">
                                <label class="form-label font-weight-bold">
                                    Supplier Invoice Date
                                </label>
                                <input type="date" class="form-control" value="{{ $purchase->supplier_invoice_date }}"
                                    name="supplier_invoice_date" required>
                            </div> --}}

                            </div>
                            <div class="form-row">
                                {{-- Note --}}
                                <div class="mb-3 col-md-6">
                                    <label class="form-label font-weight-bold">
                                        Note</label>
                                    <input type="text" class="form-control" placeholder="Enter Note" name="note">
                                </div>
                                {{-- Supplier --}}
                                <div class="mb-3 col-md-6">
                                    <div class="row">
                                        <div class="col-md-11 col-10" style="margin-right: -7px">
                                            <label class="form-label font-weight-bold">Suppliers *</label>
                                            <select class="select2" id="supplier" name="supplier_id" required>
                                                {{-- <option selected value="">Select Supplier</option> --}}
                                                @foreach ($supplier as $supplier)
                                                    <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-1 col-2 m-0 p-0">
                                            <label class="form-label font-weight-bold"></label>
                                            <div class="" style="margin-top: 10px">
                                                {{-- <button type="button" class="btn btn-primary"></button> --}}
                                                <a href="#" data-toggle="modal" data-target="#addModal"
                                                    class="btn extra_btn">
                                                    <i class="feather icon-plus"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text barcod_style" id="basic-addon1"><i
                                            class="fa fa-barcode"></i></span>
                                </div>
                                <input type="text" id="product_search" class="form-control" placeholder="Type & Barcode"
                                    aria-label="Type & Barcode" onkeydown="return event.keyCode !== 13" autocomplete="off">
                            </div>
                        </div>
                        <div class="cart-head">
                            <div class="table-responsive">
                                <table class="table table-striped text-center">
                                    <thead>
                                        <tr class="header_bg">
                                            {{-- <th class="header_style_left" width="">Sl</th> --}}
                                            <th class="header_style_left">Product</th>
                                            <th width="">Size</th>
                                            <th width="">Rate</th>
                                            <th width="">Quantity</th>
                                            <th width="">Total</th>
                                            <th class="header_style_right">Action</th>
                                        </tr>
                                    </thead>
                                    @php
                                    $sl = 1;
                                        $purchaseItem = App\Models\PurchaseItem::where(
                                            'purchase_id',
                                            $purchase->id,
                                        )->get();
                                    @endphp
                                    <input type="hidden" name="id" value="{{ $purchase->id }}">
                                    @foreach ($purchaseItem as $key => $item)
                                        @php
                                            $product_variation = App\Models\ProductVariation::where('product_id', $item->product_id)
                                                ->get();
                                                // dd($item);
                                        @endphp
                                        <tr>
                                            <input type="hidden" name="itemID[]" value="{{ $item->id }}">
                                            <td class="table_data_style_left">
                                                {{-- Product Name --}}
                                                {{ $item->product?->name }} - {{ $item->product?->barcode }}
                                                <input type="hidden" value="{{ $item->product_id }}"
                                                    name="product_id[{{ $item->product_id }}]" />
                                            </td>
                                            <td>
                                                <select name="" id="" class="form-control">
                                                    @foreach ($product_variation as $variation)
                                                    <option value="{{ $variation->id }}" @if($variation->id == $item->product_variation_id) selected @endif >{{ $variation->size?->size }} - {{ $variation->color?->color }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" style="min-width: 70px;" class="form-control rate"
                                                    name="new_rate[{{ $item->product_id }}]"
                                                    value="{{ $item->rate }}" />
                                            </td>
                                            <td style="width:250px">
                                                <div class="form-row">
                                                    @if ($item->product->unit->related_unit == null)
                                                        <input type="text" class="has_sub_unit" hidden value="false">
                                                        <label class="ml-2 mt-2  mr-2"
                                                            style="padding-top: 5px;">{{ $item->product->unit->name }}:</label>
                                                        <input type="number" value="{{ $item->main_qty }}"
                                                            class="form-control col main_qty"
                                                            name="new_main_qty[{{ $item->product_id }}]"
                                                            data-value="{{ product_stock($item->product) }}"
                                                            data-related="{{ $item->product->unit->related_value }}"
                                                            onkeydown="return event.keyCode !== 190" min="1">
                                                        <input type="hidden" value="{{ $item->sub_qty }}"
                                                            class="form-control col sub_qty mr-1"
                                                            name="new_sub_qty[{{ $item->product_id }}]"
                                                            onkeydown="return event.keyCode !== 190" min="0"
                                                            max="{{ $item->product->unit->related_value - 1 }}">
                                                    @else
                                                        {{-- HAS SUB UNIT --}}
                                                        <input type="text" class="has_sub_unit" hidden value="true">
                                                        <input type="text" class="conversion" hidden
                                                            value="{{ $item->product->unit->related_value }}">
                                                        <label class="mr-1 ml-1"
                                                            style="padding-top: 5px;">{{ $item->product->unit->name }}:</label>
                                                        <input type="number" value="{{ $item->main_qty }}"
                                                            class="form-control col main_qty mr-1"
                                                            name="new_main_qty[{{ $item->product_id }}]"
                                                            data-value="{{ product_stock($item->product) }}"
                                                            data-related="{{ $item->product->unit->related_value }}"
                                                            onkeydown="return event.keyCode !== 190" min="0">
                                                        <label class="mr-1"
                                                            style="padding-top: 5px;">{{ $item->product->unit->related_unit->name }}:</label>
                                                        <input type="number" value="{{ $item->sub_qty }}"
                                                            class="form-control col sub_qty mr-1"
                                                            name="new_sub_qty[{{ $item->product_id }}]"
                                                            onkeydown="return event.keyCode !== 190" min="0"
                                                            max="{{ $item->product->unit->related_value - 1 }}">
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                {{-- <strong><span class="sub_total">{{ $item->subtotal }}</span>
                                                    {{ empty(get_setting('com_currency')) ?: get_setting('com_currency') }}</strong> --}}
                                                <input type="text" readonly name="new_subtotal_input[{{ $item->product_id }}]"
                                                    class="subtotal_input form-control" value="{{ $item->subtotal }}">
                                            </td>
                                            <td class="table_data_style_right">
                                                <a href="#" class="remove-btn item-index" data-value="${index}"><i class="fa fa-undo text-danger"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                    <tbody id="tbody">

                                    </tbody>
                                    <tfoot>
                                        <tr class="bg-light-primary">
                                            <td colspan="3" class="text-right fw-bold">Grand Total</td>
                                            <td colspan="1">
                                                <input type="number" step="any" style="min-width:100px"
                                                    name="estimated_amount" value="{{ $purchase->estimated_amount }}"
                                                    class="form-control estimated_amount" readonly>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                        {{-- Discount --}}
                                        <tr class="bg-light-primary">
                                            <td colspan="3" class="text-right fw-bold">Discount</td>
                                            <td colspan="1">
                                                <input type="number" step="any" name="discount_amount"
                                                    min="0" value="{{ $purchase->discount_amount }}" class="form-control discount_amount"
                                                    required>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                        {{-- Total Amount --}}
                                        <tr class="">
                                            <td colspan="3" class="text-right fw-bold">Payable
                                                Amount</td>
                                            <td colspan="1">
                                                <input type="number" step="any" name="total_amount" min="0"
                                                    value="{{ $purchase->total_amount }}" class="form-control total_amount" readonly>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                        {{-- Payment Method --}}
                                        <tr class="">
                                            <td colspan="3" class="text-right fw-bold text-black">Bank Account
                                            </td>
                                            <td colspan="1">
                                                <select class="select2" id="bankAmount" name="bank_id" required>
                                                    @foreach ($bank_accounts as $bank_account)
                                                        <option value="{{ $bank_account->id }}"
                                                            data-bank-name="{{ $bank_account->bank_name }}"
                                                            data-bank-balance="{{ current_balance($bank_account->id) }}">
                                                            {{ $bank_account->bank_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                        {{-- Paid Amount --}}
                                        <tr class="">
                                            <td colspan="3" class="text-right fw-bold text-black">Paid
                                                Amount</td>
                                            <td colspan="1">
                                                <input type="number" step="any" name="paid_amount" min="0"
                                                    value="{{ $purchase->total_paid }}" class="form-control paid_amount" required>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                        {{-- Due Amount in --}}
                                        <tr class="bg-light-danger due_amount">
                                            <td colspan="3" class="text-right fw-bold">Due
                                                Amount</td>
                                            <td colspan="1">
                                                <input type="number" step="any" name="due_amount" min="0"
                                                    value="{{ $purchase->total_due }}" class="form-control due_amount" readonly>
                                            </td>
                                            <td class="text-right"></td>
                                        </tr>
                                    </tfoot>
                                </table>
                                <div class="text-center col-md-12">
                                    <button class="btn col-sm-6 submit_button"
                                        style="padding: 5px 20px; background: #12b76a;color:white; border-radius:25px;margin-right: 5px">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End col -->
    </div>

@endsection

@push('js')
    <script>
        $(document).ready(function() {
            function updateTotalPoint() {
                var customerId = $('#customer_id').val();

                if (customerId == "1") {
                    $('#point_row').hide();
                } else {
                    $('#point_row').show();
                }

                if (customerId) {
                    $.ajax({
                        url: '/customer/points/' + customerId,
                        type: 'GET',
                        success: function(response) {
                            var totalPoint = response.total_point ? response.total_point : 0;
                            $('.total_point').text(totalPoint);

                            if (totalPoint >= 100) {
                                $('.pay_amount_div').show();
                            } else {
                                $('.pay_amount_div').hide();
                            }
                        }
                    });
                } else {
                    $('.total_point').text('0.00');
                    $('.pay_amount_div').hide();
                }
            }

            $('#customer_id').change(updateTotalPoint);

            updateTotalPoint();
        });
    </script>
    <script>
        // Select the input field when the page loads
        window.onload = function() {
            var inputField = document.getElementById('product_search');
            inputField.select();
        };
    </script>
    <script>
        // Page Load
        var empty = '';
        $('body').addClass('toggle-menu');
        $('#product_search').blur();

        var localData = localStorage.getItem('pos-items') ? JSON.parse(localStorage.getItem('pos-items')) : [];

        function showList() {
            if (localData.length <= 0) {
                $("#tbody").html(empty);
            } else {
                localData.forEach((item, index) => {
                    domPrepend(item, index);
                });
            }
        }

        showList();
        estimatedAmount();

        var cartList = [];

        // Helper Functions
        function empty_field_check(placeholder) {
            // console.log(typeof placeholder);
            if (typeof placeholder == NaN) {
                placeholder = 0;
            } else if (placeholder == null) {
                placeholder = 0;
            } else if (placeholder.trim() == "") {
                placeholder = 0;
            } else if (placeholder == 'null') {
                placeholder = 0;
            }
            return placeholder;
        }

        function to_sub_unit(main_val, sub_val, related_by, has_sub_unit) {
            if (has_sub_unit == 'true') {
                return (main_val * related_by) + sub_val;
            }
            return main_val;


        }

        function convert_to_main_and_sub(quantity, has_sub_unit, related_by) {
            var main_qty = 0;
            var main_qty_as_sub = 0;
            var sub_qty = 0;

            main_qty = parseInt(quantity);

            if (has_sub_unit == "true" && quantity != 0 && related_by != 0) {
                main_qty = parseInt(quantity / related_by);
                main_qty_as_sub = main_qty * related_by;
                sub_qty = quantity - main_qty_as_sub;
            }

            return {
                'main_qty': main_qty,
                'sub_qty': sub_qty
            };
        }

        function calculate_sub_total(main_qty, sub_qty, unit_price, related_by, has_sub_unit) {
            var sub_unit_price = 0;

            if (has_sub_unit == "true" && related_by != 0) {
                sub_unit_price = parseFloat(unit_price / related_by);
            }
            var main_price = main_qty * unit_price;
            var sub_price = sub_qty * sub_unit_price;

            return parseFloat(main_price + sub_price).toFixed(2);
        }

        // Manage Addition and Removal from LocalStorage
        function pExist(pid) {
            let ldata = localStorage.getItem('pos-items') ? JSON.parse(localStorage.getItem('pos-items')) : [];
            return ldata.some(function(el) {
                return el.product.id === pid
            });
        }

        function storedata(data) {
            if (localStorage.getItem('pos-items') != null) {
                cartList = JSON.parse(localStorage.getItem('pos-items'))
                cartList.push(data);
            } else {
                cartList.push(data);
            }
            localStorage.setItem('pos-items', JSON.stringify(cartList));
        }

        function addProductToCard(data, variation_code = null) {
            storedata(data);
            var x = 0;
            domPrepend(data, x++, variation_code);
            estimatedAmount();
        }

        // Search Product
        var variation_code = '';
        $("#product_search").autocomplete({
            source: function(req, res) {
                let barcode = req.term.substring(0, 6);
                variation_code = req.term.substring(6);
                let url = "{{ route('sc-product-search') }}";
                $.get(url, {
                    req: barcode
                }, (data) => {
                    res($.map(data, function(item) {
                        return {
                            id: item.id,
                            value: item.name + " " + item.barcode,
                            price: item.selling_price
                        }
                    })); // end res

                });
            },
            select: function(event, ui) {

                $(this).val(ui.item.value);
                $("#search_product_id").val(ui.item.id);
                let url = "{{ route('sc-search-product-id', 'my_id') }}".replace('my_id', ui.item.id);
                $.get(url, (data) => {
                    if (data.product.is_service == 0) {
                        // check stock
                        if (data.stock_qty <= 0) {
                            iziToast.warning({
                                title: "This product is Stock out. Please Purchases the Product.",
                                position: "topRight",
                            });
                            return false;
                        }
                    }
                    addProductToCard(data, variation_code);

                });

                $(this).val('');

                return false;
            },
            response: function(event, ui) {
                if (ui.content.length == 1) {
                    ui.item = ui.content[0];
                    $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', ui);
                    $(this).autocomplete('close');

                }
            },
            minLength: 0
        });

        // Manage Cart items
        $(document).on('click', '.product', function() {
            let productId = $(this).attr('data-value');
            let url = "{{ route('sc-pos-product-id', 'my_id') }}".replace('my_id', productId);
            $.get(url, data => {
                if (data.product.is_service == 0) {
                    // check stock
                    if (data.stock_qty <= 0) {
                        iziToast.warning({
                            title: "This product is Stock out. Please Purchases the Product.",
                            position: "topRight",
                        });
                        return false;
                    }
                }

                addProductToCard(data);
            }); // Load Data to cart

        });

        $(document).on('click', '.remove-btn', function() {
            let itemIndex = $(this).attr('data-value');
            localData.splice(itemIndex, 1);
            localStorage.removeItem('pos-items');
            localStorage.setItem('pos-items', JSON.stringify(localData))
            $(this).parents('tr').remove();
            estimatedAmount();
        });

        $("#clearList").on('click', function() {
            localStorage.removeItem('pos-items');
            $("#tbody").html(empty);
            estimatedAmount();
        });

        function domPrepend(data = null, index = null, variation_code = null) {
            var name = data.product.name;
            var quantity_data = '';
            var variation_data = ``;
            if (data.variations.length > 0) {
                variation_data +=
                    `<input type="text" class="has_size" data-has-size="true" hidden>
                                <select name="variation[]" id="variation_id" class="form-control size" required>
                                    <option value="">Select Variation</option>`;

                $.each(data.variations, function(index, value) {
                    if (parseFloat(value.stock) <= 0) return;
                    let selected = (value.id == variation_code) ? "selected" : "";
                    variation_data += "<option stock='" + value.stock + "' value='" + value.id + "' " + selected +
                        ">" +
                        value.size + " - " + value.color + " - " + value.stock + "</option>";
                });

                variation_data += '</select>';
            } else {
                variation_data =
                    `<input type="text" class="has_size" data-has-size="false" hidden>`;
            }
            if (data.product.is_service == 0) {
                if (data.product.unit.related_unit == null) {
                    quantity_data =
                        `<input type="text" class="has_sub_unit" hidden value="false">
                            <label class="ml-2 mr-2" style="padding-top: 5px;">${data.product.unit.name}:</label>
                            <input type="number" value="1" class="form-control col main_qty" name="main_qty[]" 
                            data-value="${data.stock_qty}" data-related="${data.product.unit.related_value}" 
                            onkeydown="return event.keyCode !== 190" min="0">`;
                } else {
                    quantity_data =
                        `<input type="text" class="has_sub_unit" hidden value="true">
                            <input type="text" class="conversion" hidden value="${data.product.unit.related_value}">
                            <label class="mr-1 ml-1" style="padding-top: 5px;">${data.product.unit.name}:</label>
                            <input type="number" value="1" class="form-control col main_qty mr-1" name="main_qty[]" 
                            data-value="${data.stock_qty}" data-related="${data.product.unit.related_value}" 
                            onkeydown="return event.keyCode !== 190" min="0">

                            <label class="mr-1" style="padding-top: 5px;">${data.product.unit.related_unit.name}:</label>
                            <input type="number" value="0" class="form-control col sub_qty mr-1" name="sub_qty[]"  
                            onkeydown="return event.keyCode !== 190" min="0" max="${data.product.unit.related_value-1}">`;
                }
            } else {
                quantity_data =
                    `
                            <label class="ml-2 mr-2" style="padding-top: 5px;">pcs:</label>
                            <input type="number" value="1" class="form-control col main_qty" name="main_qty[${data.product.id}]" onkeydown="return event.keyCode !== 190" min="0">`;
                name_data = `
                ${data.product.name}
                    
                    <input type="hidden" class="name" value="${name.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '')}" name="name[${data.product.id}]" />
                    <input type="hidden" value="${data.product.id}" name="product_id[${data.product.id}]" />
                `;
            }
            let dom = `
                <tr id="tbody_tr">
                    <td class="table_data_style_left" style="min-width: 100px;">
                    ${data.product.name + " - " + data.product.barcode }
                    <input type="hidden" class="name" value="${name.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '')}" name="name[]" />
                    <input type="hidden" value="${data.product.id}" name="product_id[]" />
                    </td>
                    <td style="min-width: 120px;">
                        ${variation_data}
                        <input type="hidden" name="variation_id[]"  value="${variation_code ?? ''}">
                    </td>
                    <td>
                        <input type="number" style="min-width: 100px;" readonly value="${data.product.selling_price}" class="form-control rate" name="rate[]" />
                    </td>
                    <td>
                            <div class="form-row" style="min-width: 100px;">
                                ${quantity_data}
                            </div>
                    </td>
                    <td>
                    <input type="number" style="min-width: 100px;" readonly name="sub_total[]" class="form-control sub_total" value="${data.product.selling_price}"/>
                    </td>
                    <td class="table_data_style_right">
                    <a href="#" class="remove-btn item-index" data-value="${index}"><i class="fa fa-trash"></i></a>
                    </td>
                </tr>
            `;
            $("#tbody").prepend(dom);
        }

        function handle_change(obj) {
            var main_val = parseInt(empty_field_check(obj.parents('tr').find('.main_qty').val()));
            var sub_val = parseInt(empty_field_check(obj.parents('tr').find('.sub_qty').val()));
            let related_by = parseInt(empty_field_check(obj.parents('tr').find('.main_qty').attr('data-related')));
            var has_sub_unit = obj.parents('tr').find('.has_sub_unit').val();
            let converted_sub = to_sub_unit(main_val, sub_val, related_by, has_sub_unit);
            let stock = obj.parents('tr').find('.main_qty').attr('data-value');
            // alert(stock);


            if (stock < converted_sub) {
                // put the max stock
                var converted;
                if (has_sub_unit == "true") {
                    converted = convert_to_main_and_sub(stock, has_sub_unit, related_by);
                    obj.parents('tr').find('.main_qty').val(converted.main_qty);
                    obj.parents('tr').find('.sub_qty').val(converted.sub_qty);
                } else {
                    converted = convert_to_main_and_sub(stock, has_sub_unit, related_by);
                    obj.parents('tr').find('.main_qty').val(converted.main_qty);
                }

                let price = obj.parents('tr').find('.rate').val();
                price = parseFloat(price);

                let subTotal = calculate_sub_total(converted.main_qty, converted.sub_qty, price, related_by, has_sub_unit);

                obj.parents('tr').find('.sub_total').val(subTotal);
                estimatedAmount();

                iziToast.warning({
                    title: "Not Enough Stock.",
                    position: "topRight",
                });
            } else {
                let price = obj.parents('tr').find('.rate').val();
                price = parseFloat(price);
                let subTotal = calculate_sub_total(main_val, sub_val, price, related_by, has_sub_unit);
                obj.parents('tr').find('.sub_total').val(subTotal);
                estimatedAmount();
            }
        }

        // main_qty
        $(document).on('keyup change', '.main_qty', function(e) {
            handle_change($(this));
        });

        //sub_qty change
        $(document).on('keyup change', '.sub_qty', function(e) {
            handle_change($(this));
        });

        // rate change
        $(document).on('keyup change', '.rate', function(e) {
            handle_change($(this));
            return;
        });

        //estimatedAmount function
        function estimatedAmount() {
            var sum = 0;

            $(".sub_total").each(function() {
                var value = $(this).val();
                if (!isNaN(value) && value.length != 0) {
                    sum += parseFloat(value);
                }
            });
            $("input[name='estimated_amount']").val(sum);
            totalCalculate();
        }

        // Other Calculations - discount
        $(document).on(
            "keyup change",
            "input[name='discount_amount']",
            function() {
                totalCalculate();
            }
        );

        $(document).on(
            "keyup change",
            "input[name='pay_point']",
            function() {
                totalCalculate();
            }
        );


        function totalCalculate() {
            let discount = $(".discount_amount").val();
            let estimated_amount = parseFloat(
                $("input[name='estimated_amount']").val()
            );
            discount = empty_field_check(discount);


            let discountAmount = 0;
            if ((typeof discount === 'string' || discount instanceof String) && discount.includes("%")) {
                let removed_percent_discount = discount.replace('%', '');
                discount = parseFloat(removed_percent_discount);
                discountAmount = Math.round($(".estimated_amount").val() * (discount / 100));
            } else {
                discountAmount = parseFloat(discount);
            }
            let total_amount = estimated_amount - discountAmount;
            $("#grand_total").text(total_amount.toFixed(2));
            $(".sub_total").text(estimated_amount.toFixed(2));
            $(".discount_amount").text(discountAmount.toFixed(2));
            $(".discount").val(discountAmount.toFixed(2));
            $(".payable_amount").text(total_amount.toFixed(2));
            $("#payable_amount").val(total_amount.toFixed(2));
        }

        // ===================order modal===================
        //payment_modal_btn
        $("#payment_modal_btn").on("click", function() {
            //date
            var date = $("#date").val();
            var variation = $("#variation_id").val();
            if (date == '') {
                //Walking Customer Can't to Create a Due
                iziToast.warning({
                    title: "Please select a date.",
                    position: "topRight",
                });
                return false;
            }
            if (variation == '') {
                //Walking Customer Can't to Create a Due
                iziToast.warning({
                    title: "Please select a product variation.",
                    position: "topRight",
                });
                return false;
            }
            //customer_id
            var customer_id = $("#customer_id").val();
            if (customer_id == '') {
                //Walking Customer Can't to Create a Due
                iziToast.warning({
                    title: "Please select a customer.",
                    position: "topRight",
                });
                return false;
            }
            //order_modal_obj
            if ($.trim($('.name').val()) == '') {
                iziToast.warning({
                    title: "Please select at least one product",
                    position: "topRight",
                });
                return false;
            }
            // count of tr in cart_list table
            var count = $("#tbody").find("tr#tbody_tr").length;
            $(".total_item").text(count);
            //get customer name from id="customer_id"
            var customer_name = $("#customer_id").find("option:selected").text();
            $("#payment_modal").find("#customer_name").text(customer_name);
            var customer_id = $("#customer_id").val();
            $("#payment_modal").find("input[name=customer_id]").val(customer_id);
            //show payment_modal
            $("#payment_modal").modal("show");
        });

        //.full_pay_btn
        $(".full_pay_btn").on("click", function() {
            var payable_amount = $("#grand_total").text();
            payable_amount = parseFloat(payable_amount);
            payable_amount = payable_amount.toFixed(2);

            $(".pay_amount").val(payable_amount);
            $("#paid_amount").val(payable_amount);
            $(".paid_amount").text(payable_amount);
            $("#due_amount").val('0.00');
            $(".due_amount").text('0.00');
        });

        //.full_due_btn
        $(".full_due_btn").on("click", function() {
            var payable_amount = $("#grand_total").text();
            payable_amount = parseFloat(payable_amount);
            payable_amount = payable_amount.toFixed(2);

            $(".pay_amount").val('0.00');
            $("#due_amount").val(payable_amount);
            $(".due_amount").text(payable_amount);
            $("#paid_amount").val('0.00');
            $(".paid_amount").text('0.00');
        });

        //name="pay_amount"
        $(".pay_amount").on("keyup change", function() {
            var pay_amount = $(this).val();
            if (pay_amount == "") {
                pay_amount = '0.00';
            }
            pay_amount = parseFloat(pay_amount);
            pay_amount = pay_amount.toFixed(2);
            var payable_amount = $("#payment_modal")
                .find("input[name=payable_amount]")
                .val();
            var pay_point = $(".pay_amount_div")
                .find("input[name=pay_point]")
                .val();

            console.log(pay_point);

            var due_amount = payable_amount - pay_point - pay_amount;
            due_amount = parseFloat(due_amount);
            due_amount = due_amount.toFixed(2);
            var balance = '0.00';
            if (due_amount < 0) {
                balance = Math.abs(due_amount);
                due_amount = '0.00';
            }

            $("#payment_modal").find(".due_amount").text(due_amount);
            $("#payment_modal").find("input[name=due_amount]").val(due_amount);

            $("#payment_modal").find(".balance").text(balance);
            $("#payment_modal").find("input[name=balance]").val(balance);

            $("#payment_modal").find(".paid_amount").text(pay_amount);
            $("#payment_modal").find("input[name=paid_amount]").val(pay_amount);

            updateAmounts();
        });

        //id="checkout"
        $("#checkout").on("click", function() {
            var customer_id = $("#customer_id").val();
            var payable_amount = $("#payable_amount").val();
            var pay_amount = $(".pay_amount").val();
            var paid_amount = $("#paid_amount").val();
            var due_amount = $("#due_amount").val();
            if (parseFloat(pay_amount) > parseFloat(payable_amount)) {
                iziToast.warning({
                    title: "Sorry Over Payment Not Allowed.",
                    position: "topRight",
                });
                return false;
            }
            if (parseFloat(pay_amount) < 0) {
                iziToast.warning({
                    title: "Sorry Below Payment Not Allowed.",
                    position: "topRight",
                });
                return false;
            }
            if (paid_amount == 0.00 && due_amount == 0.00) {
                iziToast.warning({
                    title: "Please Enter Pay Amount.",
                    position: "topRight",
                });
                return false;
            }
            if (customer_id == 1 && due_amount != 0.00) {
                iziToast.warning({
                    title: "Walking Customer Can't to Create a Due",
                    position: "topRight",
                });
                return false;
            }
            localStorage.clear();
            $("#payment_form").submit();
        });

        // Product Search
        $(document).on("change", "#getProductsByCat", function() {
            var cat_id = $(this).val();
            $.ajax({
                url: "{{ route('posProducts') }}",
                type: "GET",
                data: {
                    cat_id: cat_id
                },
                success: function(data) {
                    $("#products").html(data);
                    // console.log(data)
                },
                error: function() {
                    alert('Error !');
                }
            });
        });
    </script>
@endpush