<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;
    }
</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>
        <div class="panel-body ">
            <div class="row form-group">
                <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-3">
                    <label><?php echo CommonLanguage::getMessage('period') ?></label>
                    <input id="detail_id" type="hidden" class="full-width" name="detail_id"  >
                </div> 

                <div class="col-md-3  <?php echo smc_session()['default_setting']['activate_second_currency'] == 1 ? '':'hidden'; ?>">
                    <label><?php echo CommonLanguage::getMessage('currency') ?></label>
                    <select id="currency_id" class="full-width" name="currency_id" data-init-plugin="select2" >
                        <option value="0"><?php echo CommonLanguage::getMessage('project_currency') ?></option>
                        <option value="1"><?php echo smc_session()['local_currency_name'] ?></option>
                        <option value="2"><?php echo smc_session()['second_currency']['name'] ?></option>
                    </select>
                </div> 
                <div class="col-md-2" style="display:grid;">
                    <label><?php echo CommonLanguage::getMessage('show_activity_alias') ?></label>
                    <input type="checkbox" id="show_alias" name="show_alias" />
                </div>

            </div>
            <div class="row">

                <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 class="row main_div <?php echo ($is_edit && !empty($edit_arr['details'])) ? '' : 'hidden'; ?>">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th><?php echo CommonLanguage::getMessage('number'); ?> .</th>
                                <th><?php echo CommonLanguage::getMessage('budget_line'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('expenditures_reported_now'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('expenditures_reported_earlier'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('expenditures_reported'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('total_funds'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('outstanding_amount'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('approved_budget'); ?></th>
                                <th><?php echo CommonLanguage::getMessage('balance'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <?php echo Forms::ModalLoader('project_period_report_loader'); ?>
    </div>
</div>
<script>
    $(function () {
        build_select2($('#period_id'), 'ACCAjax/searchProjectPeriod');
        build_select2($('#detail_id'), 'ACCAjax/searchProjectPeriodDetails?period_id=' + $('#period_id').val() + '&is_not_linked=1');
        $('#period_id').on('change', function () {
            $('#detail_id').val('').trigger('change');
            build_select2($('#detail_id'), 'ACCAjax/searchProjectPeriodDetails?period_id=' + $('#period_id').val() + '&is_not_linked=1');
            if ($('#period_id').val()) {
                $('#account_id').val($('#period_id').select2('data').account_id);
                $('#currency_id').val($('#period_id').select2('data').currency_id);
                $('#currency_name').val($('#period_id').select2('data').Currency_Name);
            } else {
                $('#account_id').val('');
                $('#currency_id').val('');
                $('#currency_name').val('');
            }
        });

        $('#generate').on('click', function () {
            if ($('#period_id').val() && $('#detail_id').val()) {
                $('.main_div').removeClass('hidden');
                ChangeTable();
            } else {
                $('.main_div').addClass('hidden');
            }
        });
    });
    function ChangeTable() {
        var Data = {
            period_id: $("#period_id").val(),
            detail_id: $("#detail_id").val(),
            currency_id: $("#currency_id").val(),
            show_alias: $("#show_alias").is(':checked') ? 1 : 0,
            start_date: $("#detail_id").select2('data').start_date,
            end_date: $("#detail_id").select2('data').end_date
        }
        $('#project_period_report_loader').removeClass('hidden');
        $.ajax({
            url: "ACCAjax/get_project_period_report",
            data: Data,
            dataType: "json",
            complete: function (v1, v2) {
                if (v2 == "success") {
                    var response = v1.responseJSON;
                     $("#tableWithSearch").DataTable().destroy();
                    $("#tableWithSearch tbody").empty().html(response['body']);
                    RebuildDataTable($('#panel-heading .panel-title').html(), [], "", Data, '', '', '', false);
//                    var row = $("#tableWithSearch").dataTable().fnGetNodes();
                    $('#project_period_report_loader').addClass('hidden');
                }
            }
        });
    }
</script>