
<style>
    .input-group-addon.complete {
        background-color:#4c0870;
        color: #ffffff;
    }
    .form-control{
        background-color: #eee;
        border: none;
        text-align: center;

    }
    #ChangeImage{
        width:25%;
        overflow:hidden;
        position:relative;
    }

    #ChangeImage > input,#ChangeImage > input{
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        opacity:0.01;
        cursor:pointer;
    }


</style>
<div class="container-fluid container-fixed-lg">
    <div class="panel panel-default">
        <div class="panel-body invoice">
            <h4 class="bold"> <?php print CommonLanguage::getMessage('edit_expense');?></h4>
            <form id="EditExpenses">
                <div class=" 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">


                                <button class="btn btn-complete" id="ChangeImage"><i class="fa fa-file-image-o"></i> <?php print CommonLanguage::getMessage('change');?><input type="file" data-target="#ChangeImage" onchange="window.ChangeImageExpense=event.target.files;ValidateForchangeprofilePhoto(this,'Picture')" name="image_user" value="Upload" onload="$(this).data('loaded', 'loaded');"></button>


                                <div>
                                    <div class="clearfix"></div>
                                </div>
                                <br>
                            </div>
                            <div class="col-md-4 col-sm-height col-bottom sm-no-padding sm-p-b-20" style="vertical-align: top;">
                                <div  class="form-group form-group-default input-group">
                                    <label><?php print CommonLanguage::getMessage('Date');?></label>
                                    <input id="UpdateExpenseDate" style="text-align:left" name="Expense_Date" class="form-control" value="<?php echo ($Viewexpenses_accounts[0]["Expense_Date"]); ?>" />
                                    <input type="hidden" id="Expense_ID" name="Expense_ID" class="form-control" value="<?php echo ($Expense_ID); ?>" />
                                    <span class="input-group-addon complete"><i class="fa fa-calendar"></i></span>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="position:relative;margin-bottom: 15px;">
                        <table class="table" id='UpdateExpenses'>
                            <thead>
                                <tr>
                                    <th style="width:10%"  ><?php print CommonLanguage::getMessage('Code');?></th>
                                    <th style="text-align:center;width:30%" class="hidden-xs"><?php print CommonLanguage::getMessage('Description');?></th>
                                    <th style="text-align:center;width:10%;"><?php print CommonLanguage::getMessage('Quantity');?></th>
                                    <th style="text-align:center;width:10%"><?php print CommonLanguage::getMessage('unit_price');?></th>
                                    <th style="text-align:center;width:10%"><?php print CommonLanguage::getMessage('total');?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td ><input type="text" class="form-control" style="width:50%" name="Account_Code" id="Account_Code" value="<?php echo $Viewexpenses_accounts[0]['Account_Code'];?>"></td>
                                    <td ><input type="text" class="form-control" name="Expense_Description" id="Expense_Description" data-desc="<?php echo $Viewexpenses_accounts[0]['Expense_Description'];?>" value="<?php echo $Viewexpenses_accounts[0]['Expense_Description'];?>"></td>
                                    <td class="TQuantity" style="text-align:center"><input type="text" class="form-control Quantity" name="Expense_Item_Quantity" id="Expense_Item_Quantity" value="<?php echo $Viewexpenses_accounts[0]['Expense_Item_Quantity'];?>"></td>
                                    <td class="TUnit"style="text-align:center"><input type="text" class="form-control Unit" name="Expense_Unit_Price" id="Expense_Unit_Price" value="<?php echo $Viewexpenses_accounts[0]['Expense_Unit_Price'];?>"></td>
                                    <td class="TotalPrice" style="text-align:center"><input type="text" class="form-control Total" name="Expense_Total_Price" id="Expense_Total_Price" data-old = "<?php echo $Viewexpenses_accounts[0]['Expense_Total_Price'];?>" value="<?php echo $Viewexpenses_accounts[0]['Expense_Total_Price'];?>"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="container-sm-height" >
                        <div class="col-sm-8 col-sm-height col-middle clearfix sm-p-b-15">
                            <input id="Expense_Note" name="Expense_Note" value="<?php echo $Viewexpenses_accounts[0]['Expense_Note'];?>" class="form-control " placeholder="<?php print CommonLanguage::getMessage('enter_note');?>" style="text-align:left;height:100px" />
                        </div>
                    </div>
                    <div class="container-sm-height" >
                        <button class=" btn btn-complete btn-cons m-b-10 pull-right " id="SubmitUpdateExpense"  style="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>
            </form>
        </div>
    </div>
</div>
<script>
    var Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields'));?>,
        Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit'));?>,
        is_hidden = <?php echo json_encode($Viewexpenses_accounts[0]['Is_Hidden']);?>,
        currency_id = <?php echo json_encode($Viewexpenses_accounts[0]['Expense_Currency']);?>,
        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>")
        $("#UpdateExpenseDate").datepicker( { autoclose: true }).on("changeDate",function(e) {
            $(this).keyup();
        })



        function UpdateTotal(){
            $("#UpdateExpenses tbody ").each(function(){
                var me              = $(this),
                    Single_Price    = parseFloat(me.find(" .TUnit >.Unit").val()) || 0,
                    Qty             = parseFloat(me.find(" .TQuantity >.Quantity ").val()) || 0,
                    Total           = Single_Price * Qty;
                me.find(".TotalPrice >.Total").val(Total);

            })
        }
        $("#UpdateExpenses tbody").on("keyup blur",UpdateTotal);


        $("#SubmitUpdateExpense").on("click",function(){
            $("#UpdateExpenseValidationAlert").remove();
            var AlertBox = $('<div id="UpdateExpenseValidationAlert" class="WizardValidationAlert alert"></div>');
            AlertBox.insertAfter($(".invoice").find("h4"))
            $("#UpdateExpensetIsBusy").remove();
            $(".invoice").append('<div id="UpdateExpensetIsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:0"><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>');
            $("#UpdateExpensetIsBusy").animate({opacity:1});
            //            var Data={
            //                url                      :'',
            //                Expense_ID               :$("#Expense_ID").val(), 
            //                Expense_Date             :$("#UpdateExpenseDate").val(), 
            //                Account_Code             :$("#Account_Code").val(),
            //                Expense_Description      :$("#Expense_Description").val(),
            //                Expense_Item_Quantity    :$("#Expense_Item_Quantity").val(),
            //                Expense_Unit_Price       :$("#Expense_Unit_Price").val(),
            //                Expense_Total_Price      :$("#Expense_Total_Price").val(),
            //                Expense_Note             :$("#Expense_Note").val()
            //            };
            var Data = new FormData(document.getElementById("EditExpenses"));
            if($("#ChangeImage > input").prop("files").length > 0){
                $.each(window.ChangeImageExpense, function(key, value){
                    Data.append(key, value);
                });
                
            }
            Data.append('old_desc',$("#Expense_Description").attr('data-desc'))
            Data.append('old_total',$("#Expense_Total_Price").attr('data-old'))
            Data.append('Currency_ID',currency_id)
                Data.append('is_hidden',is_hidden)
            $.ajax({
                url:"ACCAjax/editExpense",
                method:"POST",
                data:Data,
                processData: false,
                contentType: false,
                complete:function(v1,v2){
                    if(v2 == 'success' && v1.responseText === "success"){
                        $("#UpdateExpensetIsBusy").remove();
                        $("#UpdateExpenseValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                    }else{
                        $("#UpdateExpenseValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                    }
                    $("#UpdateExpensetIsBusy").remove();
                    $(document.body).animate({scrollTop:0},800)

                }
            })
        });



        $("#UpdateExpenses tbody ").each(function(){
            var me              = $(this),
                Single_Price    = parseFloat(me.find(" .TUnit >.Unit").val()) || 0,
                Qty             = parseFloat(me.find(" .TQuantity >.Quantity ").val()) || 0,
                Total           = Single_Price * Qty;
            me.find(".TotalPrice >.Total").val(Total);

        })


    })




    function ValidateForchangeprofilePhoto(input){
        var IsFileOK = false;
        if (input.files && input.files[0]){
            var FileName = $.trim(input.files[0].name)
            var FileType = FileName.substring(FileName.lastIndexOf("."));
            if(FileType){
                FileType = FileType.toLowerCase();
                if(FileType == ".png" || FileType == ".jpg" || FileType == ".jpeg" ||  FileType ==".pdf" ){IsFileOK = true;}



            }
            $("#ChangeImage,#NewImage").hide()
            $("#NewUserFilewarning2").remove()
            if(IsFileOK == false){
                $("#NewImage").show()
                $("<span id='NewUserFilewarning2' style='color:#f00;display: block;text-align: center;'> [File not Supported]</span>").insertAfter($(input))
                return false;
            }else{
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("#ChangeImage").attr('src', e.target.result).show();
                }
                reader.readAsDataURL(input.files[0]);
                return true;
            }
        }
        return false;
    }




</script>