<script type="text/javascript">

    function Check(){
        var rUsd = document.getElementById('returnusd');
        var rKhr = document.getElementById('returnkhr');
        var rThb = document.getElementById('returnthb');
        document.getElementById('modal_pay').addEventListener("click", function (){
            if(rUsd.value < 0 || rKhr.value < 0 || rThb.value < 0){
                alert("Please Input Pay In");
                $('#modal_pay').removeAttr('data-dismiss');
                $('#modal_pay').removeAttr('id');
                document.getElementById('dolarPay').focus();
                return 0;
            }else{
                $('#modal_pay').attr('data-dismiss' , 'modal');
                $('#modal_pay').attr('id' , 'modal_pay');
            }
        });
    }

    function returnCash(){
        var realPay = document.getElementById('realPay');
        var dolarPay = document.getElementById('dolarPay');
        var thbPay = document.getElementById('bthPay');
        var amountUsd = document.getElementById('dolarAmount');
        var khr = realPay.value / {{$khrs->exchange_in_rate}};
        var thb = thbPay.value / {{$thbs->exchange_in_rate}};
        var sumUsd = (dolarPay.value - (-khr) - (-thb));
        var rUsd = sumUsd - amountUsd.value;
        var rKhr = rUsd * {{$khrs->exchange_in_rate}};
        var rThb = rUsd * {{$thbs->exchange_in_rate}};
        document.getElementById('returnusd').value = rUsd.toFixed(2);
        document.getElementById('returnkhr').value = rKhr.toFixed(2);
        document.getElementById('returnthb').value = rThb.toFixed(2);
        displayColorReal();
        displayColorDolar();
        displayColorBth();
        if(rUsd.value < 0 || rKhr.value < 0 || rThb.value < 0){
            alert("Please Input Pay In");
            $('#modal_pay').removeAttr('data-dismiss');
            $('#modal_pay').removeAttr('id');
            document.getElementById('dolarPay').focus();
            return 0;
        }else{
            $('#modal_pay').attr('data-dismiss' , 'modal');
            $('#modal_pay').attr('id' , 'modal_pay');
        }
        $('#modal_pay').attr('data-dismiss' , 'modal');
        $('#modal_pay').attr('id' , 'modal_pay');
    }

    var product_id, thbAmount, usdAmount,khrAmount;
    var btn_print = document.getElementById('print');
    btn_print.disabled = true;
    var btn_pay = document.getElementById('btn_pay');
    btn_pay.disabled = true;
    var rowCount = $("#table-product").find("tr:first td").length;

    if(rowCount == 0){
        $(document).ready(function () {
            btn_pay.addEventListener("click", function () {
                $('.message').toast({animation: true, delay: 2000, autohide: true});
                $('.message').toast('show');
            })
            btn_print.addEventListener("click", function () {
                $('#message').toast({animation: true, delay: 2000, autohide: true});
                $('#message').toast('show');
            })
        });
    }else {
        $(document).ready(function (){
            btn_pay.addEventListener("click", function (){
                $('#message').attr('hidden' , true);
            })
        })
    }

    let inputField = document.getElementById('input');
    let ulField = document.getElementById('suggestions');
    inputField.addEventListener('input', changeAutoComplete);
    ulField.addEventListener('click', selectItem);

    var html = '';
    var btn = '';

    function changeAutoComplete({target}) {
        var q = $('input[name="q"]').val();
        $.ajax({
            url: "{{route('search')}}?q=" + q,
            cache: false,
            success: function (response) {
                // $("#results").append(html);
                html = '';
                btn = '';
                // alert(response[0].name)

                if (response.length > 1) {
                    let data = target.value;
                    ulField.innerHTML = ``;
                    if (data.length) {
                        let autoCompleteValues = autoComplete(data, response);
                        autoCompleteValues.forEach(value => {
                            addItem(value);
                        });
                    }
                    btn_pay.disabled = false;
                } else {
                    if (response.length == 1) {
                        product_id= response[0].id;
                        html = '<tr> <td> <input type="checkbox" value="1"> </td> <td> ' + response[0].name + ' </td> <td class="credit"> ' + response[0].price + ' </td><td class="credit"> 0 </td> <td class="credit"> ' + response[0].price + '</td> </tr> ';
                        btn = ''+ response[0].part_number +'';
                        btn_print.disabled = false;


                        $('#table-product').html(html);
                        $('#print').attr("href" ,"{{route('pointToSale.show')}}?q=" + btn );
                        $('#print').attr("target" , "_blank")

                        btn_pay.disabled = false;
                        $(document).ready(function (){
                            btn_pay.addEventListener("click", function (){
                                $('#message').attr('hidden' , true);
                            })
                        })


                        if (response[0].image) {
                            $('#framefav').attr('src', '/' + response[0].image)
                        } else {
                            $('#framefav').attr('src', '/no_image.png')
                        }
                        setTotal(response[0].price)
                        $('input#dolarAmount').val(response[0].price);
                        $('input#khrAmount').val(response[0].price*({{$rate['KHR']}}));
                        $('input#thbAmount').val(response[0].price*({{$rate['THB']}}));

                        var q = $('input[name="q"]').val('');

                    } else {
                        $('.error').toast({animation: true, delay: 2000, autohide: true});
                        $('.error').toast('show');

                        // const toastContent = document.querySelector('.toast');
                        // const toast = new bootstrap.Toast(toastContent);
                        // $('.toast').toast({animation: false, delay: 200000});
                        // setTimeout(function (){
                        //     toast.show().fadeOut(4000);
                        // }, 700);

                    }
                }
            }
        });
    }
    $('#modal_pay').click(function(){
        returnCash();

        var rUsd = document.getElementById('returnusd');
        var rKhr = document.getElementById('returnkhr');
        var rThb = document.getElementById('returnthb');
        if(rUsd.value < 0 || rKhr.value < 0 || rThb.value < 0){
            alert("Please Input Pay In");
            $('#modal_pay').removeAttr('data-dismiss');
            $('#modal_pay').removeAttr('id');
            document.getElementById('dolarPay').focus();
            return 0;
        }else{
            $('#close_modal').trigger('click');
            $('#modal_pay').attr('data-dismiss' , 'modal');
            $('#modal_pay').attr('id' , 'modal_pay');
        }
        usdAmount = $('input[name="usd_amount"]').val();
        khrAmount = $('input[name="khr_amount"]').val();
        thbAmount = $('input[name="thb_amount"]').val();
        $.ajax({
            url: "{{route('sell.store')}}",
            // cache: false,
            type: 'POST',
            data: {
                usd_amount : usdAmount,
                khr_amount : khrAmount,
                thb_amount : thbAmount,
                product_id : product_id,
                user_id    : "{{Auth::user()->id}}",
            },
            // contentType: 'application/json; charset=utf-8',
            success: function (response) {
                // $("#results").append(html);
                html = '';
                btn = '';
                $('#table-product').html(html);

                btn_pay.disabled = true;
                if(rowCount == 0){
                    $(document).ready(function () {
                        btn_pay.addEventListener("click", function () {
                            $('#message').attr('hidden' , false);
                            $('#message').toast({animation: true, delay: 2000, autohide: true});
                            $('#message').toast('show');
                        })
                        btn_print.addEventListener("click", function () {
                            $('#print').attr('disabled' , true);
                            $('#message').attr('hidden' , false);
                            $('#print').removeAttr("href");
                            $('#message').toast({animation: true, delay: 2000, autohide: true});
                            $('#message').toast('show');
                        })
                    });
                }
                $('#modal_pay').attr('data-dismiss' , 'modal');
                $('#modal_pay').attr('id' , 'modal_pay');

                $('#framefav').attr('src', '/no_image.png')

                setTotal('$ 00.00')
                $('input#dolarAmount').val('');
                $('input#khrAmount').val('');
                $('input#thbAmount').val('');
                $('input#returnusd').val('0');
                $('input#returnkhr').val('0');
                $('input#returnthb').val('0');
                var q = $('input[name="q"]').val('');
                $('input[name="usd_amount"],input[name="khr_amount"],input[name="thb_amount"]').val('');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
            }
        });
    });
    function setTotal(price) {
        $('#total_price').html(price)
        // $('#total_').html(price)
        $('#total_grand').html(price)
    }

    function autoComplete(inputValue, api) {
        let destination = [];
        return destination.filter(
            (value) => value.toLowerCase().includes(inputValue.toLowerCase())
        );
    }

    function addItem(value) {
        ulField.innerHTML = ulField.innerHTML + `<li class="hover-search"><a class="val">${value}</a></li>` + '<br>';
    }

    function selectItem({target}) {
        if (target.tagName === 'LI' || target.tagName === 'A') {
            inputField.value = target.textContent;
            ulField.innerHTML = ``;
        }
        document.getElementById('input').focus();
        document.getElementById('input').form.submit();
    }

    $('#delete-btn').click(function () {
        html = '';
        $('#table-product').html(html);
        document.getElementById('total_price').innerHTML = "$ 00.00";
        document.getElementById('total_grand').innerHTML = "$ 00.00";
        $('#framefav').attr('src', '/no_image.png');
        var btn_pay = document.getElementById('btn_pay');
        btn_pay.disabled = true;
        btn_print.disabled = true;
        btn_print.removeAttribute('href');
        $('#message').attr('hidden' , false);
        $('#print').attr('hidden' , false);
    })


</script>