
<style type="text/css">
    
    #TransferTransactionsTable td{
        position:relative;
        vertical-align:middle;
    }
    #TransferTransactionsTable .Quantity,#TransferTransactionsTable .Total,#TransferTransactionsTable .UnitPrice{
        text-align:center;
    }
    .EditRow{
        font-size:20px;
        cursor:pointer;
    }
    .EditRow:hover{
        color: rgb(0, 144, 217);
    }
    .table-responsive{
        overflow:visible;
        -webkit-transform: perspective(100px);
        -moz-transform: perspective(100px);
        transform: perspective(100px);
    }
    #TransferTransactionsTable tr{
        -webkit-transition:-webkit-transform 0.2s linear;
        -moz-transition:-moz-transform 0.2s linear;
        transition:transform 0.2s linear;
    }
    #TransferTransactionsTable tr.Edit{
        -webkit-transform: scale(1.1) rotate(0);
        -moz-transform: scale(1.1) rotate(0);
        transform: scale(1.1) rotate(0);
    }
    #TransferTransactionsTable tr.Faded > td{
        opacity:0.5;
        cursor:default;
    }
    #TransferTransactionsTable tr.Faded,#TransferTransactionsTable tr.Faded > td{
        background-color:#fff !important;
    }
    #TransferTransactionsTable tr.Edit > td{
        background-color:#eee !important;
    }
    #TransferTransactionsTable .Hint{
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
        bottom: 2px;
        right: 4px;
        color: rgb(153, 153, 153);
    }
    .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;
color:#ed9421 !important;    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870 !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870!important;
color:#ed9421 !important;    }
    .datepicker table tr td span:hover {
        background-color: #4c0870!important;
color:#ed9421 !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;
    }
</style>
<form method="POST" action="" onsubmit="return false" id="ReturnItemForm">
    <div class="container-fluid container-fixed-lg">
        <div class="panel panel-default">
            <div class="panel-body">
                <h4 class="bold"><?php print CommonLanguage::getMessage('transfer_jv_to_actual');?></h4>
                <div id="TransferJVSuccess" class="alert alert-success 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">
                                <div>
                                    <div class="input-group  col-md-4 center-margin pull-left" >
                                        <span class="input-group-addon  bg-complete" style="color:#fff">
                                            <?php print CommonLanguage::getMessage('jv');?> #
                                        </span>
                                        <input type="text" id="JV_ID" class="form-control" placeholder="<?php print CommonLanguage::getMessage('jv');?> #" >
                                    </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="sm-m-t-20">
                                    <h4><?php print CommonLanguage::getMessage('actual_jv');?> # <?php if(empty($JVNumber)){echo 1;}else{echo $JVNumber;} ?></h4>
                                </div>
                                <div  class="form-group form-group-default input-group">
                                    <label><?php print CommonLanguage::getMessage('Date');?></label>
                                    <input id="Transfer_Date" name="Transfer_Date" class="form-control" value="<?php echo ($today); ?>" />
                                    <span class="input-group-addon bg-complete"><i class="fa fa-calendar"></i></span>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <div>
                    </div>
                    <div class="table-responsive" style="position:relative;margin-bottom: 15px;">
                        <div ID="TransferJVTableLoader" style="display:none;position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:999"><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>
                        <table class="table table-hover" id='TransferTransactionsTable'>
                            <thead>
                                <tr>
                                    <th><?php print CommonLanguage::getMessage('Type');?></th>
                                    <th><?php print CommonLanguage::getMessage('account_name');?></th>
                                    <th><?php print CommonLanguage::getMessage('account_code');?></th>
                                    <th><?php print CommonLanguage::getMessage('amount');?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div class="container-sm-height" >
                        <div class="row row-sm-height b-a b-grey">
                            <div class="col-sm-8 col-sm-height col-middle clearfix ">
                                <textarea id="Transfer_Description" name="Transfer_Description" class="form-control NoteTextArea" placeholder="<?php print CommonLanguage::getMessage('enter_note')?>" style="height:100% !important;"></textarea>
                            </div>
                            <div class="col-sm-4 text-right bg-menu col-sm-height padding-15">
                                <h3 class="font-montserrat all-caps small no-margin hint-text text-white bold"><?php print CommonLanguage::getMessage('total_credit');?></h5>
                                <h3 class="no-margin text-white Credit"><span class="CurrencyIndicator"></span>&nbsp;<span id="totalCredit">0</span></h1>
                                <h3 class="font-montserrat all-caps small no-margin hint-text text-white bold"><?php print CommonLanguage::getMessage('total_debit');?></h5>
                                <h3 class="no-margin text-white Debit"><span class="CurrencyIndicator"></span>&nbsp;<span id="totalDebit">0</span></h1>
                            
                                <h3 class="font-montserrat all-caps small no-margin hint-text text-white bold"><?php print CommonLanguage::getMessage('Balance');?></h5>
                                <h3 class="no-margin text-white Total"><span class="CurrencyIndicator"></span>&nbsp;<span id="totalBalance">0</span></h1>
                        
                            </div>
                        </div>
                    </div>
                    <div class="container-sm-height" >
                        <button class=" btn btn-complete btn-cons m-b-10 pull-right disabled" id="TransferSubmitButton" 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>
            </div>
        </div>
    </div>
</form>
<script>
    var Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit'));?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully'));?>;
    var CurrentCurrencySymbol = "",
            CurJVID,
            CurrentInvoiceDiscount = 0,
            UpdateTableTimeout,TransferTransactionsTableBody = $("#TransferTransactionsTable tbody");
    $(function(){
        $("body").addClass("NoSearch")
        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("#Transfer_Date").datepicker({autoclose:true}).on("changeDate",function(e){
            $(this).keyup();
        });
    });
    $("#JV_ID").on("keyup",function(e){
        clearTimeout(UpdateTableTimeout);
        if(e.which == 13){
            ChangeTransfer();
            return;
        }
        UpdateTableTimeout = setTimeout(function(){
            ChangeTransfer();
        },1000)
    });
    $("#TransferSubmitButton").on("click",function(){
        
        $("#TransferJVSuccess").addClass("hidden")
        
        $("#TransferJVTableLoader").show().appendTo("#ReturnItemForm .panel-body")
        var transfer_array = {
            JVID : $("#JV_ID").val(),
            TransferDate : $("#Transfer_Date").val(),
            DescTransfer:$("#Transfer_Description").val()
        };

        $.ajax({
            url:"ACCAjax/transferJVToActualAjax",
            method:"post",
            data:transfer_array,
            complete:function(v,vv){
                if(vv == "success" && v.responseText == 'OK'){
                    $(document.body).animate({scrollTop:0})
                    $("#TransferJVSuccess").removeClass("hidden").empty().removeClass("alert-danger").addClass("alert-success").html(Submitted_Successfully)

                }else{
                     $(document.body).animate({scrollTop:0})
                    $("#TransferJVSuccess").removeClass("hidden").empty().removeClass("alert-success").addClass("alert-danger").html(Failed_Submit)
                }
                $("#TransferJVTableLoader").hide().insertBefore("#TransferTransactionsTable")
            }
        })



    })
    function ChangeTransfer(){
        var ID = parseInt($("#JV_ID").val());
        if(ID == CurJVID){
            return
        }
        TransferTransactionsTableBody.empty();
        if(!isNaN(ID)){
            CurJVID = ID;
            $("#TransferJVSuccess").addClass("hidden")
            $("#TransferJVTableLoader").css({display:"block",opacity:0}).animate({opacity:1});
            $("#ReturnTotalDetails").text(CurrentCurrencySymbol + " 0");
            $("#TransferSubmitButton").addClass("disabled")
            $.ajax({
                url:"ACCAjax/transferJVToActualAjax",
                data:{JV_ID:ID},
                dataType:"json",
                complete:function(v,vv){
                    
                    var Transactions = v.responseJSON,
                        PrLength =Object.keys(Transactions).length

                    $("#TransferJVTableLoader").hide()
                    if(Transactions.length == 0)return
                    CurrentCurrencySymbol = Transactions[0]["Currency_Symbol"];
                    for(var x=0;x<PrLength-3;x++){
                        var 
                            TR = "<tr>";
                        
                        TR += "<td >"+Transactions[x]["Transaction_Type"]+"</td>"
                        TR += "<td >"+Transactions[x]["Account_Name"]+"</td>"
                        TR += "<td >"+Transactions[x]["Transaction_Account"]+"</td>"
                        TR += "<td >"+CurrentCurrencySymbol+" "+Transactions[x]["Transaction_Amount"]+"</td>"
                        
                        TR += "</tr>";
                        TR = $(TR);
                        TransferTransactionsTableBody.append(TR);
                    }
                    $(".CurrencyIndicator").html(CurrentCurrencySymbol)
                    $("#totalCredit").html(Transactions["Total_Credits"])
                    $("#totalDebit").html(Transactions["Total_Debits"])
                    $("#totalBalance").html(Transactions["Balance"])
                    $("#TransferSubmitButton").removeClass("disabled")
                    

                }
            })
        }
    }
    
</script>
