<style>
    #category_data{
        padding: 4px !important;
        font-size: 12px !important;
    }
    #tableWithSearch tfoot td{
        font-weight:bold;
    }
    #tableWithSearch tbody tr td:last-child{
        font-weight:bold;
    }
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        min-width: 116px !important;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title">
                <h4 class="bold"><?php echo CommonLanguage::getMessage($title); ?> </h4>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label><?php echo CommonLanguage::getMessage('project_period') ?></label>
                    <input id="period_id" type="hidden" class="full-width" name="period_id" >
                </div> 
                <div class="col-md-2 pull-right m-t-25">
                    <button  class="btn btn-complete full-width pull-right " id="generate" ><?php echo CommonLanguage::getMessage('generate') ?></button>
                </div>
            </div>
        </div>
        <div class="panel-body hidden">
            <div class="row ">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered" id="tableWithSearch" >
                        <thead>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button  class="btn btn-complete pull-right " id="submit_activity_budget" ><?php echo CommonLanguage::getMessage('Save') ?></button>
                </div>
            </div>
        </div>
        <?php echo Forms::ModalLoader('activity_budget_loader'); ?>
    </div>
</div>
<script>
    var budget_id = 0;
    $(function () {
        build_select2($('#period_id'), 'ACCAjax/searchProjectPeriod');

        $('#generate').on('click', function () {
            if($('#period_id').val()){
                $('.panel-body').removeClass('hidden');
                ChangeTable();
            }else{
                $('.panel-body').addClass('hidden');
            }
        });
        $('#tableWithSearch').on('click','.is_partner',function(){
            var parent = $(this).parents("tr");
            if($(this).is(":checked")){
                $('input.detail',parent).val('').attr('readonly',true);
            }else{
                $('input.detail',parent).attr('readonly',false);  
                $('input.total_budget',parent).trigger('input');
            }
        });

        $('#tableWithSearch').on('input','.total_budget',function(){
            var parent = $(this).parents("tr"),
                is_partner_checked = $('input.is_partner',parent).is(":checked") ? 1 : 0,
                period_detail_length = $('input.detail',parent).length;
            if(is_partner_checked == 0){
                $('input.detail',parent).val(parseFloat($(this).val())/period_detail_length);
            }
        }); 
        $('#tableWithSearch').on('input','.detail',function(){
            var parent = $(this).parents("tr"),
                total_detail =0;
            $('input.detail',parent).each(function(){
                if($(this).val())
                    total_detail += parseFloat($(this).val());
            });
            $('input.total_budget',parent).val(total_detail);
        });
        $('#submit_activity_budget').on('click',function(){
            var activty_budget = [], row = $("#tableWithSearch").dataTable().fnGetNodes();
            if(row.length == 0){
                return;
            }
            console.log('row.length')
            console.log(row.length)

            for (var i = 0; i < row.length; i++) {
                var parent = $(row[i]),total_budget = $('input.total_budget',parent).val();
                if(total_budget){
                    if($('input.is_partner',parent).is(":checked")){
                        activty_budget.push({detail_id:'',
                                             activity_id:$('input.is_partner',parent).attr('data-activity-id'),
                                             total:total_budget }); 
                    }else{
                        $('input.detail',parent).each(function(){
                            activty_budget.push({detail_id:$(this).attr('data-detail-id'),
                                                 activity_id:$(this).attr('data-activity-id'),
                                                 total:$(this).val() });  
                        });
                    }
                }
            }
            $("#activity_budget_loader").removeClass('hidden');
            var data = {
                activty_budget : activty_budget,
                project_id:$('#period_id').select2('data').project_id,
                currency_id:$('#period_id').select2('data').currency_id,
                period_id:$('#period_id').val(),
                budget_id : budget_id
            };
            console.log('data')
            console.log(data)
            $.ajax({
                url: "ACCAjax/submit_activity_budget",
                method: "POST",
                data: data,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    console.log('jqXHR.responseJSON')
                    console.log(jqXHR.responseJSON)
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            toastr.success(jqXHR.responseJSON[0]);
                            ChangeTable();
                        }else{
                            toastr.error(jqXHR.responseJSON[0]);
                        }
                    }
                    $("#activity_budget_loader").addClass('hidden');
                }
            });
        });
        //        ChangeTable();
    });
    function ChangeTable() {
        var Data = {
            period_id: $("#period_id").val()
        }
        $('#activity_budget_loader').removeClass('hidden');
        $.ajax({
            url: "ACCAjax/activity_budget",
            data: Data,
            dataType:"json",
            complete: function (v1, v2) {
                console.log('v1')
                console.log(v1)
                if (v2 == "success") {
                    var response = v1.responseJSON;
                    //                    console.log(response);
                    var header = '<tr>';
                    $.each(response['header'],function(index){
                        header += '<th>'+response['header'][index]['name']+'</th>';
                    });
                    header += '</tr>';
                    if ($.fn.DataTable.isDataTable( '#tableWithSearch' ) ) {
                        $("#tableWithSearch").DataTable().destroy();
                    }
                    $("#tableWithSearch thead").empty().html(header);
                    $("#tableWithSearch tbody").empty().html(response['body']);
                    RebuildDataTable($('#panel-heading .panel-title').html(), [], "", Data, '','','',false);
                    var row = $("#tableWithSearch").dataTable().fnGetNodes();
                    $('#activity_budget_loader').addClass('hidden');
                    budget_id=response['budget_id'];
                }
            }
        });
    }
</script>