
<style type="text/css">
    #OrderTable thead tr th {
        color:#fff;
        border: 1px solid rgba(0,0,0,0.1);
        background-color: #4c0870;
    }
    #OrderTable tbody tr td input{
        width:100%;
        margin:0;
        border: 1px solid rgba(0,0,0,0.02);
        background-color:#e5e5e5;
    }
    #OrderTable tbody tr td {
        /*		padding:3px 1px;*/
        position:relative;
    }
    #OrderTable tbody tr:first-child td{
        padding-top:10px;
    }
    #OrderTable .Hint{
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
        bottom: 5px;
        right: 12px;
        color: rgb(153, 153, 153);
    }
    #OrderTable input.wrong{
        border: 1px solid rgba(255, 0, 0, 0.2);
        background: rgba(255, 0, 0, 0.05);
        /*        width:100%;*/
    }
    .datepicker thead tr .dow {
        color:#4c0870  !important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870  !important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870  !important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870   !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870  !important;
    }
    .datepicker table tr td span:hover {
        background-color: #4c0870  !important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .select2-container > .select2-choice{
        background-color: #e5e5e5;
        /*        width: 150px;*/
    }
</style>
<script src="<?php echo THEME_PATH; ?>plugins/jquery-validation/js/jquery.validate.min.js"></script>
<div id="OrderDisabler" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:2099;display:none"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>
<form method="POST" action="" onsubmit="return false" id="OrderForm">
    <div class="container-fluid container-fixed-lg">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="OrderSuccess" class="hidden"></div>
                <div class="invoice padding-50 sm-padding-10">
                    <div class="container-sm-height">
                        <div class="row-sm-height">
                            <div class="col-md-9 col-sm-height sm-no-padding">
                                <h2 class="font-montserrat all-caps hint-text"><?php print CommonLanguage::getMessage('sales_order'); ?></h2>
                                <div>
                                    <div class="input-group  col-md-4 center-margin pull-left">
                                        <span class="input-group-addon bg-primary">
                                            <i class="fa fa-search"></i>
                                        </span>
                                        <input type="text" id="search_Customer" class="form-control" placeholder="<?php print CommonLanguage::getMessage('customer_name'); ?>" >
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <br>
                                <div id="CustomerInfo">
                                    <input type="hidden" name="Customer_ID" required id="Customer_ID" />
                                    <div id="CustomerInfoContent">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-height col-bottom sm-no-padding sm-p-b-20" style="vertical-align: top;">
                                <div class="sm-m-t-20">
                                    <h4><?php print CommonLanguage::getMessage('order'); ?> # <?php if (empty($max_order_id)) {
    echo 1;
} else {
    echo $max_order_id + 1;
} ?></h4>
                                </div>
                                <div  class="form-group form-group-default input-group">
                                    <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                                    <input id="Sales_Order_Date" name="Sales_Order_Date" class="form-control" value="<?php echo ($today); ?>" />
                                    <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                                </div>
                                <div class="form-group">
                                    <div class="input-group m-b">
                                        <select name="Zone_ID" id="Zone_ID" class="full-width" data-init-plugin="select2">
                                            <?php foreach ($all_zones as $zonelist): ?>
                                                <option value="<?php echo $zonelist['Zone_ID']; ?>"><?php echo $zonelist['Zone_Name']; ?></option>
<?php endforeach; ?>
                                        </select>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn" style="width:0 ;background-color:#4c0870 " ><i class="fa fa-compass"style="color:#fff;margin-left:-7px"></i> </button> </span>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="table-responsive" style="padding:20px;">
                        <table class="table table-bordered" id='OrderTable'>
                            <thead>
                                <tr>
                                    <th class="text-center" ><?php print CommonLanguage::getMessage('Type'); ?></th>
                                    <th class="text-center" ><?php print CommonLanguage::getMessage('product_name'); ?></th>
                                    <th class="text-center"  ><?php print CommonLanguage::getMessage('Quantity'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                for ($x = 0; $x < count($productList); $x++) {
                                    $CurItem = $productList[$x];
                                    ?>
                                    <tr data-id="<?php echo $CurItem['Product_ID'] ?>">
                                        <td class='v-align-middle text-center '  ><?php echo $CurItem['Cat_Name'] ?></td>
                                        <td class='v-align-middle text-center Product_Name'><?php echo $CurItem['Product_Name'] ?></td>
                                        <td class='v-align-middle  '>
                                            <input  class="Quantity text-center"type="text" value="" />
                                        </td>
                                    </tr>	
<?php } ?>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="container-sm-height" >
                        <button class=" btn  btn-cons m-b-10 pull-right" id="OrderSubmitButton" style="color:#fff;background-color:#4c0870 ;padding-top: 10px;top: 20px;min-width:253px;" type="button"><i class="pg-form"></i> <span class="bold"><?php print CommonLanguage::getMessage('Save'); ?></span></button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
<script>
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
            CompanyLang = <?php echo json_encode(CommonLanguage::getMessage('company')); ?>,
            EmailLang = <?php echo json_encode(CommonLanguage::getMessage('Email')); ?>,
            PhoneLang = <?php echo json_encode(CommonLanguage::getMessage('Phone')); ?>,
            AddressLang = <?php echo json_encode(CommonLanguage::getMessage('address')); ?>,
            CountryLang = <?php echo json_encode(CommonLanguage::getMessage('country')); ?>,
            FinancialNbLang = <?php echo json_encode(CommonLanguage::getMessage('financial_nb')); ?>,
            least_one_item = <?php echo json_encode(CommonLanguage::getMessage('least_one_item')); ?>,
            Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
            Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
    $(function () {

        $("body").addClass("NoSearch")
        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("#search_Customer").autocomplete({
            source: 'xhr/ajaxCustomer',
            minLength: 2,
            select: function (event, ui) {
                var Content = "";
                Content += "<strong><span class='Name'>" + ui.item.Customer_Name + "</span></strong>";
                Content += "<div><strong>" + CompanyLang + ": </strong><span class='Company'>" + ui.item.Customer_Company + "</span></div>";
                Content += "<div><strong>" + EmailLang + ": </strong><span class='Address'>" + ui.item.Customer_Email + "</span></div>";
                Content += "<div><strong>" + PhoneLang + ": </strong><span class='Phone'>" + ui.item.Customer_Phone + "</span></div>";
                Content += "<div><strong>" + AddressLang + ": </strong><span class='Discount'>" + ui.item.Customer_Address + "</span></div>";
                Content += "<div><strong>" + CountryLang + ": </strong>" + ui.item.Country_Name + "</div>";
                Content += "<div><strong>" + FinancialNbLang + ": </strong>" + ui.item.Account_Code + "</div>";
                $("#CustomerInfoContent").html(Content)
                $("#Customer_ID-error").remove()
                $("#Customer_ID").removeClass("error").val(ui.item.Customer_ID);
            }
        })
                .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>").html("<table cellspacing='0' cellpadding='0'><tr><td class='Column1'><i class='fa fa-file-o'></i></td><td><strong>" + item.Customer_Name + "</strong></td></tr></table>").appendTo(ul)
        }
        $("#search_Customer").autocomplete("instance")._resizeMenu = function (ul, items) {
            this.menu.element.outerWidth($("#search_Customer").width() + parseFloat($("#search_Customer").css("padding-left")) + parseFloat($("#search_Customer").css("padding-right")) + 2);
        }
        $("#Sales_Order_Date").datepicker({autoclose: true}).on("changeDate", function (e) {
            $(this).keyup();
        })
        $("#OrderTable").delegate(".Quantity", "blur keyup", function (e) {
            var me = $(this), TR = me.parents("tr");
            if (TR.index() < $("#OrderTable tbody").children().length - 1) {
                if ($.trim(me.val()).match(/^\s*?([\d]+(\.\d+)?|\.\d{1,2})\s*$/) == null) {
                    me.addClass("wrong")
                    me.attr("Placeholder", "Enter a number");
                } else {
                    me.removeClass("wrong")
                    me.attr("Placeholder", "");
                }
            }
        });
        $('#OrderTable tbody tr ').each(function () {
            $(this).on('keyup', 'input.Quantity', function () {
                if ($.trim($(this).val()).match(/^\s*?([\d]+(\.\d+)?|\.\d{1,2})\s*$/) == null) {
                    $("#OrderSubmitButton").attr("disabled", "disabled")
                } else
                    $("#OrderSubmitButton").removeAttr("disabled", "disabled")
            })
        })
        $("#OrderSubmitButton").on("click", ApplyPostMethod);
    })
    function ApplyPostMethod() {
        $("#OrderSuccess").attr("class", "hidden");
        if ($("#OrderForm").valid()) {
            var IsValid = false;
            var IsValidated = false,
                    Data = {
                        products: []
                    };
            Data.Customer_ID = $("#Customer_ID").val();
            Data.Sales_Order_Date = $("#Sales_Order_Date").val();
            Data.Zone_ID = $("#Zone_ID").val();
            Data.products = [];


//			var row = $("#OrderTable").dataTable().fnGetNodes();

            $("#OrderTable tbody tr").each(function () {
                var me = $(this);
                for (var i = 0; i < me.length; i++) {
                    if (me.find(".Quantity").val() != 0) {
                        IsValid = true
                        Data.products.push({
                            Product_Quantity: me.find(".Quantity").val(),
                            Product_ID: me.attr("data-id")
                        })
                    }
                }
            })
            //            if(!IsValidated)return;
            if (!IsValid) {
                $(document.body).animate({scrollTop: 0}, 800)
                $("#OrderSuccess").attr("class", "alert alert-danger").html(least_one_item)
                return
            }
            $("#OrderDisabler").show();
            console.log(Data)
            $.ajax({
                url: "InventoryAjax/salesOrderAjax",
                method: "POST",
                data: Data,
                complete: function (v1, v2) {
                    if (v2 == "success" && v1.responseText === 'ok') {
                        $("#OrderSuccess").attr("class", "alert alert-success").html(Submitted_Successfully)
                    } else {
                        $("#OrderSuccess").attr("class", "alert alert-danger").html(Failed_Submit)
                    }
                    $(document.body).animate({scrollTop: 0}, 800)
                    $("#OrderDisabler").hide();
                }
            })
        } else {
            $(document.body).animate({scrollTop: 0}, 800)
        }
    }
    //
    //	var menu = '<div class="block-area" id="custom-select">'
    //	+'<div class="row">'
    //	+'<div class="col-md-2 m-b-15">'
    //	+'<select class="select">'
    //	+'<option value="10">10</option>'
    //	+'<option value="20">20</option>'
    //	+'<option value="30">30</option>'
    //	+'<option value="50">50</option>'
    //	+'<option value="100">100</option>'
    //	+'<option value="200">200</option>'
    //	+'</select>'
    //	+'</div>'
    //	+'</div>'
    //	+'</div>'
</script>
