<style>
    #category_data{
        padding: 4px !important;
        font-size: 12px !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-3">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <div class="input-group">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                        <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" autocomplete="off" >
                    </div>
                </div> 
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('choose_customer') ?></label>
                    <input id="customer_id" type="hidden" class="full-width" name="customer_id" >
                </div> 
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('paid_type') ?></label>
                    <select name="paid_type" id="paid_type" class="full-width" data-init-plugin="select2">
                        <option value=""><?php echo CommonLanguage::getMessage('All'); ?></option>
                        <option value="0"><?php echo CommonLanguage::getMessage('paid_before'); ?></option>
                        <option value="1"><?php echo CommonLanguage::getMessage('paid_after'); ?></option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label><?php  echo CommonLanguage::getMessage('subscriptions');?></label>
                    <input type="hidden" name="subscription_id" id="subscription_id" class="full-width"/>
                </div>
            </div>
            <div class="row m-t-10">
                <div class="col-md-3">
                    <label><?php  echo CommonLanguage::getMessage('Category');?></label>
                    <input type="hidden" name="category_id" id="category_id" class="full-width"/>
                </div>
                <div class="col-md-3">
                    <label><?php  echo CommonLanguage::getMessage('main_block');?></label>
                    <select id="main_block_id" name="main_block_id" data-init-plugin="select2" class="full-width">
                        <option value=""><?php echo CommonLanguage::getMessage('select');?></option>
                        <?php  $main_blocks = explode(",",smc_session()['block_ids']);  foreach($main_block as $block){
                        if(empty(smc_session()['block_ids']) || in_array($block['block_id'],$main_blocks)){ ?>
                        <option value="<?php echo $block['block_id'];?>"><?php echo $block['block_name'];?></option>
                        <?php } }?>
                    </select>
                </div>
                <div class="col-md-3 hidden">
                    <label><?php  echo CommonLanguage::getMessage('block');?></label>
                    <input type="hidden" name="block_id" id="block_id" class="full-width"/>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row ">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered inventory" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('block_name'); ?></th> 
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('total'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('paid'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('remaining'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td></td>
                                <td id="total"></td>
                                <td id="paid"></td>
                                <td id="remaining"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <?php echo Forms::ModalLoader('fees_list_loader'); ?>
    </div>
</div>
<script>
    $(function () {
        build_select2($('#customer_id'), 'xhr/customerSearch?is_customer_group=1');
        build_select2($('#subscription_id'), 'xhr/commonSearch?table=tbl_subscription&col_id=subscription_id&col_name=subscription_name');
        build_select2($('#category_id'), 'xhr/commonSearch?table=tbl_subscription_category&col_id=category_id&col_name=category_name');
          build_select2($('#block_id'), 'xhr/searchSubscriptionBlocks?main_block_id='+$('#main_block_id').val());
        $('#main_block_id').on('change',function(){
            $('#block_id').val('');
            build_select2($('#block_id'), 'xhr/searchSubscriptionBlocks?main_block_id='+$('#main_block_id').val());
        });
        ChangeTable();
        $("input[name=From_To_Date]").daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }, locale: {
                cancelLabel: 'Clear'
            }, allowEmpty: false,
            autoUpdateInput: false
        });
        $("input[name=From_To_Date]").on('apply.daterangepicker', function (ev, picker) {
            window.startDate = picker.startDate.format('YYYY-MM-DD'),
                window.endDate = picker.endDate.format('YYYY-MM-DD');
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
            ChangeTable();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            ChangeTable();
        });
        $('#customer_id,#paid_type,#subscription_id,#category_id,#main,#main_block_id,#block_id').on('change', function () {
            ChangeTable();
        });
    });
    function ChangeTable() {
        var Data = {
            is_actual: 0,
            customer_id: $('#customer_id').val(),
            Date: $("input[name=From_To_Date]").val(),
            paid_type: $("#paid_type").val(),
            subscription_id: $("#subscription_id").val(),
            category_id: $("#category_id").val(),
            main_block_id: $("#main_block_id").val(),
            block_id: $("#block_id").val(),
            from_date: window.startDate,
            to_date: window.endDate
        }
        $.ajax({
            url: "InventoryAjax/subscription_block_report",
            data: Data,
            dataType:"json",
            complete: function (v1, v2) {
                if (v2 == "success") {
                    $("#tableWithSearch").DataTable().destroy();
                    $("#tableWithSearch tbody").empty().html(v1.responseJSON[0]);
                    $("#total").html(v1.responseJSON[1]['main_total']);
                    $("#remaining").html(v1.responseJSON[1]['remaining_total']);
                    $("#paid").html(v1.responseJSON[1]['paid_total']);
                    RebuildDataTable($('#panel-heading .panel-title').html(), [], "");
                }
            }
        });
    }
</script>