<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Product Page</title>
    <link href="Theme/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/nvd3/nv.d3.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/plugins/mapplic/css/mapplic.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/rickshaw/rickshaw.min.css" rel="stylesheet" type="text/css" />
    <link href="Theme/plugins/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
    <link href="Theme/plugins/jquery-metrojs/MetroJs.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="Theme/css/pages-icons.css" rel="stylesheet" type="text/css">
    <link class="main-stylesheet" href="Theme/css/pages.css" rel="stylesheet" type="text/css" />
    <script src="Theme/plugins/jquery/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="<?php echo THEME_PATH; ?>plugins/jQuery-Scanner-Detection-master/jquery.scannerdetection.js"></script>
    <script src="<?php echo THEME_PATH; ?>plugins/jQuery-Scanner-Detection-master/jquery.scannerdetection.compatibility.js">
    </script>

</head>

<body>
    <style>
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body {
            background-color: #f3f3f3;
        }

        .product-card {
            background-color: #fdfefe;
            max-width: 550px;
            min-height: 400px;
            margin: 0 auto;
            margin-top: 50px;
            margin-bottom: 150px;
            box-shadow: 8px 12px 30px #b3b3b3;
            color: #919495;
            font-weight: normal;
            text-align: left;
            font-size: 18px;
            position: relative;
        }

        .product-details {
            width: 100%;
            height: auto;
            text-align: center;
            padding: 30px;
        }

        .product-details h1 {
            color: #333;
            font-family: sans-serif;
            margin-bottom: 35px;
        }

        .product-details button {
            width: 150px;
            height: 50px;
            margin-top: 20px;
            background-color: #337AB7;
            border-radius: 0;
            color: #fff;
            box-shadow: 2px 2px 7px #173853;
        }

        .product-details button:hover,
        .product-details button:active,
        .product-details button:focus {
            color: #fff;
        }

        .product-image {
            position: absolute;
            right: -20px;
            top: -40px;
        }

        .product-image img {
            max-width: 400px;
        }

        @media (max-width: 700px) {
            .product-card {
                margin-left: 20px;
                margin-right: 20px;
            }
        }

        @media (max-width: 540px) {
            .product-card {
                overflow: hidden;
                margin-bottom: 50px;
            }

            .product-details {
                width: 60%;
                z-index: 1;
            }

            .product-image {
                width: 100%;
                left: 40%;
                top: -50px;
            }
        }

        @media (max-width: 440px) {
            .product-details {
                width: 65%;
            }
        }

        @media (max-width: 365px) {
            .product-details {
                width: 80%;
                position: relative;
                color: #333;
                background-color: rgba(255, 255, 255, 0.7);
            }
        }
    </style>
    <input type="hidden" id="barcode_input" class="input-barcode-scan barcode_input" placeholder="<?php print CommonLanguage::getMessage('search') ?>" class="form-control borderStyle common-print" />

    <div class="product-card">
        <div class="product-details">
            <p>Scan Barcode Product </p>
            <h1 id="pro_name"></h1>
            <h1 id="pro_price"></h1>
            <h1 id="pro_price2"></h1>
            <h1 id="our_rate"></h1>
        </div>
    </div>
    <script src="Theme/plugins/pace/pace.min.js" type="text/javascript"></script>
    <!--   <script src="Theme/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>-->
    <script src="Theme/plugins/modernizr.custom.js" type="text/javascript"></script>
    <script src="Theme/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="Theme/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="Theme/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script type="text/javascript" src="Theme/plugins/bootstrap-select2/select2.min.js"></script>
    <script src="Theme/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Theme/js/pages.min.js"></script>

    <script>
        $(window).ready(function(e) {
                $(window).scannerDetection({
                    focusInputClass: 'input-barcode-scan',
                    minLength: 5
                });
                $(window).bind('scannerDetectionComplete', '.barcode_input', function(e, data) {
                    ID = data.string;
 
                    searchScannedItem(ID);
                }).bind('scannerDetectionError', function(e, data) {}).bind('scannerDetectionReceive', function(e, data) {});
            })


        function searchScannedItem(barcode) {
            $.ajax({
                url: "product_page/searchBarcodeforPOS",
                method: 'GET',
                data: {
                    barcode: barcode
                },
                dataType: 'json',
                complete: function(v1, v2) {
                    var Data = v1.responseJSON;
                    console.log('Data')
                    console.log(Data)
                     if(Data == null ){
                        $("#pro_name").text('Barcode not found');
                        $("#pro_price").text('');
                        $("#pro_price2").text('');
                        $("#our_rate").text('');

                    }else{
                        $("#pro_name").text(Data['Name']);
                        $("#pro_price").text('Price: '+Data['fir_price'] );
                        $("#pro_price2").text('Price: '+Data['sec_price'] );
                        $("#our_rate").text('Rate: '+Data['our_rate'] );
                    }


                }
            })

        }
    </script>

</body>

</html>