<style>
    #tableWithSearch thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    #tableWithSearch thead tr th[class*='sorting_'] {
        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 $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-complete"><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 class="current_customer_id full-width" id="current_customer_id" name="current_customer_id" type="hidden" value="" data-select-name='' required />
                </div> 
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:10%" >#</th>
                                <th class="text-center" style="width:10%" > <?php print CommonLanguage::getMessage('customer_name'); ?></th>
                                <th class="text-center" style="width:15%" > <?php print CommonLanguage::getMessage('Date'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('start_date'); ?></th>
                                <th class="text-center" style="width:5%" > <?php print CommonLanguage::getMessage('total'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('nb_bills'); ?></th> 
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('paid_amount'); ?></th>
                                 <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('remaining_amount'); ?></th>
                                <th class="text-center" style="width:10%"> <?php print CommonLanguage::getMessage('bill_desc'); ?></th>
                                <th class="text-center no-print" style="width:5%"><?php print CommonLanguage::getMessage('Action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var is_actual = <?php echo $is_actual ? "true" : "false" ?>,today = <?php echo json_encode($today) ?>;
    $(function () {
        build_select2($("#current_customer_id"), ("xhr/customerSearch"))
        var data_session = get_storage_element(page_link);
        if (data_session.bill_date_from != undefined && data_session.bill_date_to != undefined) {
            window.startDate = data_session.bill_date_from;
            window.endDate = data_session.bill_date_to;
            $("input[name=From_To_Date]").val(data_session.bill_date_from+' - '+data_session.bill_date_to)
        }
        if (data_session.customer_name) {
            $("#current_customer_id").val(data_session.customer_id).attr("data-select-name", data_session.customer_name)
        }
        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')]
            }
        }, function (start, end, label) {
            window.startDate = start.format("YYYY-MM-DD");
            window.endDate = end.format("YYYY-MM-DD");
            ChangeTable();
        });
        $("#current_customer_id").on('change',function(){
            ChangeTable();  
        });

        $("#tableWithSearch").on("click", ".delete", function () {
            var entry_value = $(this).parents('.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {bill_id:entry_value}, function () {
                ChangeTable();
            }, "ACCAjax/deleteScheduleBills");
        });
    });

    function ChangeTable() {
        var Date = {
            is_actual: is_actual ? 1 : 0,
            bill_date_from: (window.startDate ? window.startDate : today),
            bill_date_to: (window.endDate ? window.endDate : today),
            customer_id:$('#current_customer_id').val(),
            customer_name:($("#current_customer_id").select2('data') == null ? '' : $("#current_customer_id").select2('data').text),
        };
        set_storage_element(page_link, Date)
        RebuildDataTable($('.panel-title h4').html(), [0, 1, 2, 3, 4, 5, 6, 7], 'ACCAjax/scheduleBillsList', Date)
    }
</script>
