<style type="text/css">
    .table thead tr >th{
        background-color: #4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #FFFFFF;
    }
    #tableWithSearch tbody tr td input{
        padding: 0px;
        width:100%;
        margin:0;
        border: 1px solid rgba(0,0,0,0.02);
        background-color:#e5e5e5;
    }
    #tableWithSearch tbody tr td {
        padding:3px 1px;
        position:relative;
    }
    #tableWithSearch tbody tr:first-child td{
        padding-top:10px;
    }
    #InvoiceDiscountInput{
        display: inline-block;
        width: 40px;
        padding: 3px;
        line-height: 20px;
        background: rgb(250, 250, 250);
        min-height: 12px;
        text-align: center;
        height: 25px;
        font-size: 12px;
        top: -2px;
        position: relative;
        margin: 0 3px;
    }
    #tableWithSearch .Hint{
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
        bottom: 2px;
        right: 4px;
        color: rgb(153, 153, 153);
    }
    #tableWithSearch .TotalTD{
        width: auto;
        display: inline-block;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    #tableWithSearch .Disc{
        width:70px;
    }
    #tableWithSearch input.wrong{
        border: 1px solid rgba(255, 0, 0, 0.2);
        background: rgba(255, 0, 0, 0.05);
        /*        width:100%;*/
    }
    .DropDownForForms > .dropdown-menu{
        width:100%;
        height:200px;
        max-height:200px;
        overflow-y:scroll;
    }
    .DropDownForForms > .dropdown-menu{
        height:auto;
        cursor: pointer;
        overflow-y:auto;
    }
    .DropDownForForms > button{
        position:relative;
        z-index:999;
    }
    .DropDownForForms > button > input{
        position: absolute;
        left:5;
        top: 0;
        width:90%;
        cursor: pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        user-select:none;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .Disabled{
        cursor:default;
        opacity:0.5;
    }
    #AdvanceValue{
        width: 102px;
        display: inline-block;
    }
    .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;*/
    }
    #InvoicePaymentSetup .nav.nav-tabs a {
        padding: 7px 14px;
        font-size: 11px;
    }
    .InputSpinner{
        width: 60px;
    }
    .InputSpinner > .form-control{
        border-color: rgb(221, 221, 221);
        height:36px;
        margin:0;
        padding:0;
        text-align: center;
        /*
        -webkit-border-radius: 3px 0px 0px 3px !important;
        -moz-border-radius: 3px 0px 0px 3px !important;
        border-radius: 3px 0px 0px 3px !important;
        */
    }
    .InputSpinner > .input-group-btn-vertical {
        position: relative;
        white-space: nowrap;
        width: 25px;
        vertical-align: middle;
        display: table-cell;
    }
    .InputSpinner > .input-group-btn-vertical > .btn {
        height:19px;
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 8px;
        margin-left: -1px;
        position: relative;
        border-radius: 0;
    }
    .InputSpinner > .input-group-btn-vertical > .btn:first-child {
        border-top-right-radius: 4px;
    }
    .InputSpinner > .input-group-btn-vertical > .btn:last-child {
        margin-top: -2px;
        border-bottom-right-radius: 4px;
    }
    .InputSpinner > .input-group-btn-vertical i{
        position: absolute;
        top: 50%;
        left: 6px;
        margin-top:-9px;
        font-size: 18px;
    }
    .InputSpinner .input-group-btn-vertical .btn.btn-default{
        font-size: 10px;
        padding: 6px 10px;
    }
    #InvoicePaymentSetup .table tbody > tr:last-child > td{
        border:0;
    }
    #TruckSelect .select2-container,#ClassSelect .select2-container{
        width:100% !important;
    }
    .dataTables_length{
        margin-left:6px;
    }
    .container-sm-height{
        margin-left:-14px;
    }
    .select2-results .select2-disabled {
        background: #ed9421 ;
        color:#fff;
    }
    #ClassSelect{
        margin-left: 18px;
    }
</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-8 col-sm-height sm-no-padding" >
                                <h2 class="font-montserrat all-caps hint-text"><?php print CommonLanguage::getMessage('loading_order'); ?></h2>
                                <div>
                                    <div class="input-group  col-md-8 center-margin pull-left" style="margin-left: -16px;">
                                        <div class="col-md-12">
                                            <div class="col-md-4" ><label class="labelText"><?php print CommonLanguage::getMessage('select_truck'); ?></label><span class="red-star">*</span>
                                                <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Garage/VehicleList?is_pop=1" style="color:#8a7dbe;cursor:pointer"></span>
                                            </div>
                                            <div class="col-md-4" ><label class="labelText"><?php print CommonLanguage::getMessage('pricing_class'); ?></label><span class="red-star">*</span>
                                                <span class="fa fa-plus-circle m-l-5 openFrame" data-src="Inventory/GeneralSetting?is_pop=1" style="color:#8a7dbe;cursor:pointer"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="col-md-4" id="TruckSelect">
                                                
                                                <input required id="Truck_ID" name="Truck_ID" class="full-width Truck_ID" type="hidden"/>
                                                
                                                
                                          
                                            </div>
                                            <div class="col-md-4 input-group">
                                                <input required id="Class_ID" name="Class_ID" class="full-width Class_ID" type="hidden"/>
                                            </div> 
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="col-md-4 col-sm-height col-bottom sm-no-padding sm-p-b-20 pull-right" style="vertical-align: top;">
                                        <div  class="form-group form-group-default input-group pull-right">
                                            <label><?php print CommonLanguage::getMessage('Date'); ?></label>
                                            <input id="LoadingInvoiceDate" name="LoadingInvoiceDate" class="form-control" value="<?php echo ($today); ?>" />
                                            <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                                        </div>
                                        <br>
                                    </div>
                                    <div class="col-md-6 ">
                                        <input type="hidden" name="Zone_ID" id="Zone_ID" />
                                        <input type="hidden" name="DriverID" id="DriverID" />
                                        <input type="hidden" name="SalesManID" id="SalesManID" />
                                        <div id="TruckInfoContent">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="table-responsive" style="padding:20px;">
                        <table class="table table-bordered" id='tableWithSearch'>
                            <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>
                    <hr>
                    <div>
                        <span class="m-l-20 text-black sm-pull-right"><?php echo $org_details[0]['Organization_Legal_Name']; ?></span>
                        <span class="m-l-20 text-black sm-pull-right"><?php echo $org_details[0]['Organization_Province']; ?> <?php echo $org_details[0]['Organization_Country']; ?> - <?php echo $org_details[0]['Organization_City']; ?></span>
                        <span class="m-l-20 text-black sm-pull-right">CR: <?php echo $org_details[0]['Organization_Commercial_Registry']; ?></span>
                        <span class="m-l-20 text-black sm-pull-right"><?php print CommonLanguage::getMessage('Phone'); ?>: <?php echo $org_details[0]['Organization_Phone']; ?></span>
                        <span class="m-l-40 text-black sm-pull-right"><?php print CommonLanguage::getMessage('Email'); ?>: <?php echo $org_details[0]['Organization_Email']; ?></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    var DriverLang = <?php echo json_encode(CommonLanguage::getMessage('driver')); ?>,
        SalesManLang = <?php echo json_encode(CommonLanguage::getMessage('salesman')); ?>,
            TruckNbLang = <?php echo json_encode(CommonLanguage::getMessage('truck_number')); ?>,
                TypeNameLang =<?php echo json_encode(CommonLanguage::getMessage('type_name')); ?>,
                    ModelLang = <?php echo json_encode(CommonLanguage::getMessage('model')); ?>,
                        ZoneLang = <?php echo json_encode(CommonLanguage::getMessage('zone')); ?>,
                            least_one_item = <?php echo json_encode(CommonLanguage::getMessage('least_one_item')); ?>,
                                Required_Truck = <?php echo json_encode(CommonLanguage::getMessage('Required_Truck')); ?>,
                                title = <?php echo json_encode(CommonLanguage::getMessage('loading_order')); ?>,
                                    Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
                                      
                                        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>;
                                        $(function () {

                                        RebuildDataTable(title,[0, 1, 2],'InventoryAjax/LoadOrderWithoutSalesORderRequest')
                                            build_select2($(".Class_ID"),"xhr/PricingClassSearch")
                                            build_select2($(".Truck_ID"),"xhr/TruckSearch")
                                            $("#Truck_ID").on("change", function () {
                                                var ID = {
                                                    Truck_ID: $('#Truck_ID').val()
                                                }
                                                $.ajax({
                                                    url: "InventoryAjax/LoadOrderWithoutSalesORderRequest",
                                                    data: ID,
                                                    dataType: "json",
                                                    complete: function (v, vv) {
                                                        if (vv = "success") {
                                                            result = (v.responseJSON);
                                                            console.log(result);
                                                            var Content = "";
                                                            Content += "<div><strong>" + DriverLang + " : </strong>" + result[0]['Driver_Name'] + "<br/></div>";
                                                            Content += "<div><strong>" + SalesManLang + ": </strong>" + [!result[0]['Sales_Man_Name'] ? '-- --' : result[0]['Sales_Man_Name']] + "<br/></div>";
                                                            Content += "<div><strong>" + TruckNbLang + ": </strong>" + result[0]['Vehicle_Registration_Number'] + "<br/></div>";
                                                            Content += "<div><strong>" + TypeNameLang + ":</strong>" + result[0]['Vehicle_Type_Name'] + "<br/></div>";
                                                            Content += "<div><strong>" + ModelLang + ": </strong>" + result[0]['Model_Name'] + "<br/></div>";
                                                            Content += "<div><strong>" + ZoneLang + ": </strong>" + result[0]['Zone_Name'] + "<br/></div>";
                                                            $("#TruckInfoContent").html(Content);
                                                            var ZoneID = result[0]['Zone_ID']
                                                            var DriverID = result[0]['Driver_ID']
                                                            var SalesManID = result[0]['Sales_Man_ID']
                                                            $("#Zone_ID").val(ZoneID);
                                                            $("#DriverID").val(DriverID);
                                                            $("#SalesManID").val(SalesManID);
                                                        }
                                                    }
                                                })
                                            })
                                            $('#tableWithSearch input.QtyVal').on('keyup', 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() {
        var TruckID = $("#Truck_ID").val(),
            ClassID = $('#Class_ID').val();
        if (TruckID != 0 && ClassID != 0) {
            $("#OrderSuccess").attr("class", "hidden");
            if ($("#OrderForm").valid()) {
                var IsValid = false;
                var IsValidated = true,
                    Data = {
                        products: []
                    };
                Data.Vehicle_ID = TruckID;
                Data.Driver_ID = $("#DriverID").val(),
                    Data.Sales_Man_ID = $("#SalesManID").val(),
                    Data.Loading_Order_Date = $("#LoadingInvoiceDate").val(),
                    Data.Class_ID = ClassID,
                    Data.products = [];
                $("#tableWithSearch 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.find(".Quantity").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();
                $.ajax({
                    url: "InventoryAjax/LoadOrderWithoutSalesORderRequest",
                    method: "POST",
                    data: Data,
                    complete: function (v1, v2) {
                        if (v2 == "success") {
                            $("#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)
            }
        } else {
            $("#OrderSuccess").attr("class", "alert alert-warning").html(Required_Truck)
            //        alert('Please select Truck and Class')
            $(document.body).animate({scrollTop: 0}, 800)
        }
    }
    function UpdateSubmitButtonStatus() {
        var DoDisable = false;
        $('#tableWithSearch input.QtyVal').each(function () {
            var me = $(this)
            if ($.trim(me.val()).match(/^\s*?([\d]+(\.\d+)?|\.\d{1,2})\s*$/) == null) {
                DoDisable = true;
            } else {
                DoDisable = false;
            }
        })
        //            if($.trim($("#CurrencyDropDown > button > input").val()) == "")DoDisable = true;
        if (DoDisable) {
            $("#OrderSubmitButton").addClass("disabled")
        } else {
            $("#OrderSubmitButton").removeClass("disabled")
        }
    }
</script>
