@extends('backend.layouts.app')
@section('content')
    <style type="text/css">
        .block {
            margin-bottom: 0;
        }
    </style>
    <div class="content">
        <form action="{{route('sale.store')}}" method="post">
            @csrf
            <div class="row justify-content-end">
                <div class="col-md-8">
                    <div class="block block-rounded">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">Sales Product</h3>
                            <button type="button" class="btn btn-success me-1 mb-1 addEvenMore">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <div class="block-content">
                            <div class="row mb-3 pt-2">
                                <div class="col-3 p-0">
                                    <label class="form-label">Product Name</label>
                                </div>
                                <div class="col-3 p-0">
                                    <label class="form-label">Price</label>
                                </div>
                                <div class="col-2 p-0">
                                    <label class="form-label">Qty</label>
                                </div>
                                <div class="col-3 p-0">
                                    <label class="form-label">Amount</label>
                                </div>
                                <div class="col-1 p-0">
                                    <label class="form-label">Action</label>
                                </div>
                            </div>
                            <div class="add_item" id="add_item">
                                <div class="form-row">

                                </div>
                            </div>
                            <div class="row show_get_search_product">

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

                <div class="col-md-4">
                    <div class="block block-rounded mb-0">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">Customer &amp; Amount Information</h3>
                        </div>
                        <div class="block-content">
                            <div class="mb-4">
                                <div class="form-floating">
                                    <select class="form-select" name="customer_id" id="customer_id" required="">
                                        <option value="">Select One</option>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                    </select>
                                    <label class="form-label">Customer Name</label>
                                </div>
                            </div>

                            <div class="mb-4">
                                <div class="form-floating">
                                    <input type="text" readonly id="sub_total" class="form-control" name="sub_total"
                                        required="">
                                    <label class="form-label">Sub Total</label>
                                </div>

                            </div>
                            <div class="mb-4">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" name="discount" id="discount"
                                                onkeyup="discountValue()" required="" value="0">

                                            <label class="form-label">Discount</label>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <input type="checkbox" class="form-check-input" name="discount_type" id="percentage"
                                            value="0"> %
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <div class="form-floating">
                                    <input type="text" readonly class="form-control" name="total_ammount"
                                        id="total_price" required="">
                                    <label class="form-label">Total</label>
                                </div>
                            </div>

                            <div class="mb-4 text-center">
                                <button type="submit" class="btn btn-primary">
                                    Checkout
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div style="visibility: hidden;">
        <div class="whole_extra_item_add" id="whole_extra_item_add">
            <div class="delete_whole_extra_item_add" id="delete_whole_extra_item_add">

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        //  Admin order product by ajax
        $(document).ready(function() {
            var counter = 0;
            $(document).on("click", ".addEvenMore", function() {
                function getRandomInt(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }

                const random_number = getRandomInt(100, 9999);
                let product_id = $(this).attr('product_id');
                var whole_extra_item_add = $("#whole_extra_item_add").html();
                var addItem = $("#add_item");
                addItem.append(`
                        <div class="delete_whole_extra_item_add" id="delete_whole_extra_item_add">
                            <div class="form-row">
                                <div class="row mb-1">

                                    <input type="hidden" name="product_id[]" class="product_id product_id-${random_number}" value="">
                                    <input type="hidden" name="category_name[]" class="product_category product_category-${random_number}" value="">
                                    <input type="hidden" name="product_img[]" class="product_image product_image-${random_number}" value="">

                                    <div class="col-3 p-0">
                                        <input type="text" class="form-control search_product search_product-${random_number}" name="product_name[]" placeholder="Product Name.." value="" >
                                    </div>
                                   
                                    <div class="col-3 p-0">
                                        <input type="text" id="textToNumber" class="form-control unitPrice-${random_number}" name="unit_price[]" placeholder="Price.." required>
                                    </div>                             
                                    <div class="col-2 p-0">
                                        <input type="text" class="form-control buyingQty-${random_number}" name="buying_qty[]" placeholder="Qty.." required>
                                    </div>
                                    <div class="col-3 p-0">
                                        <input type="text" class="form-control amount amount-${random_number} single_subtotal single_subtotal-${random_number}" name="amount[]" id="single_subtotal" readonly value="0">
                                    </div>   
                                    <div class="col-1 p-0">
                                        <button type="button" class="btn btn-danger me-1 mb-1 removeEvenMore">
                                            <i class="fa fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `);
                counter++;

                $(document).on("click", ".removeEvenMore", function(event) {
                    $(this).closest(".delete_whole_extra_item_add").remove();
                    subtotal();
                    discountValue();
                    vatValue();
                    toastr.warning(" Product Removed", "Remove");
                });
                var className = "search_product-" + random_number;
                var priceClassName = "unitPrice-" + random_number;
                var classNameID = "product_id-" + random_number;
                var imageClassName = "product_image-" + random_number;
                var categoryClassName = "product_category-" + random_number;


                $("body").on("keyup", "." + className, function(e) {
                    let searchData = e.target.value;
                    let searchDataLength = searchData.length;
                    $.ajax({
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        type: "GET",
                        url: "admin-order-search-product",
                        data: {
                            search: searchData,
                            searchDataLength: searchDataLength,
                        },
                        success: function(result) {

                            var searchHtml = '';
                            $.each(result.products, function(key, v) {
                                var class_name =
                                    `setProductName-${v.id}-${result.rand}`;
                                searchHtml += `
                                <div class="col-md-6 col-xl-4 col-12 stock_product" data-id="${v.id}" style="cursor: pointer;">
                                    <a class="block setProductName ${class_name}" rand="${result.rand}" product_id="${v.id}">
                                        <div class="row">
                                            <div class="col-12">
                                                <p class="font-size-lg font-w600 mb-0">
                                                    ${v.product_name} <br>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            `
                                $(document).on('click', "." + class_name, function() {
                                        var product_id = $(this).attr('product_id');
                                        var rand = $(this).attr('rand');
                                        var gen_class_name ="setProductName-" + result.rand;
                                        $("." + className).val(product_id);
                                        $(".show_get_search_product").html('');

                                        $.ajax({
                                            headers: {
                                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                            },
                                            url: 'admin-order-get-product-details',
                                            type: "POST",
                                            data: {
                                                product_id: product_id
                                            },
                                            success: function(resp) {
                                                $("." +classNameID).val(resp.productDetails.id);
                                                $("." +className).val(resp.productDetails.product_name);
                                                $("." +priceClassName).val(resp.productDetails.main_price);
                                                $("." +imageClassName).val(resp.productDetails.image);
                                                $("." +categoryClassName).val(resp.productDetails.category.category_name);


                                                let buyingPriceElements =document.getElementsByClassName('unitPrice-' +random_number);
                                                let buyingQtyElements =document.getElementsByClassName('buyingQty-' +random_number);
                                                let amountElements =document.getElementsByClassName('amount-' +random_number);

                                                var buyingPrice = 0;
                                                var buyingQty = 0;
                                                Array.from(buyingPriceElements).forEach((buyingPriceElement) => {
                                                    buyingPriceElement.addEventListener('keyup',function(e) {
                                                            buyingPrice=e.target.value;
                                                            if (/^\d*$/.test(buyingPrice)) {
                                                                updateAmount();
                                                                subtotal();
                                                            } else {
                                                                buyingPriceElement.value ='';
                                                            }
                                                        }
                                                    );
                                                });
                                                Array.from(buyingQtyElements).forEach((buyingQtyElement) => {
                                                    buyingQtyElement.addEventListener('keyup',function(e) {
                                                                buyingQty=e.target.value;
                                                                if (/^\d*$/.test(buyingQty)) {
                                                                    updateAmount();
                                                                    subtotal();
                                                                } else {
                                                                    buyingQtyElement.value ='';
                                                                }
                                                            }
                                                        );
                                                });

                                                function updateAmount() {Array.from(amountElements).forEach((amountElement) => {

                                                        // if(buyingPrice){
                                                        //     amountElement.value =buyingPrice * buyingQty;
                                                        // }

                                                        var price = $('.unitPrice-' +random_number).val();
                                                        var qty = $('.buyingQty-' +random_number).val();
                                                        amountElement.value =price * qty;
                                                    });
                                                }
                                            },
                                            error: function() {
                                                toastr.error(" Product Doesn't Added","Error");
                                            }
                                        });

                                    });
                            })

                            if(searchHtml)
                            {
                                $(".show_get_search_product").html(searchHtml);    
                            }else{
                                $(".show_get_search_product").html('Product Not Found');    
                            }
                        },
                    });
                });
            });

        });

        function subtotal() {
            var total_subtotal = 0;
            var single_subtotal_element = document.getElementsByClassName(
                "single_subtotal");
            Array.from(single_subtotal_element).forEach((ele) => {
                total_subtotal += parseInt(ele.value);
            });

            var sub_total_value = $("#sub_total").val(total_subtotal);
            var sub_value = $("#total_price").val(total_subtotal);
            discountValue();
        };



        $(document).on('click', '#percentage', function() {
            var value = $(this).val();
            if (value == 0) {
                value = 1;
            } else {
                value = 0;
            }
            $(this).val(value);
            $("#discount").val('');
        })

        function discountValue() {
            var value = $("#discount").val();
            var sub_total = $("#sub_total").val();
            let percentage = $("#percentage").val();

            if (percentage == 1) {
                var total_price = (sub_total * value) / 100;
                var discounted_value = $("#total_price").val(sub_total - total_price);
            } else {
                var discounted_value = $("#total_price").val(sub_total - value);
            }
            return discounted_value;
        }
    </script>
@endsection