
<style>
    .report_details{
        background-color:#4c0870;
        color:#fff;
    }
    .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;
    }
    .btn-group  .active{
        background-color:#4c0870!important;
        color:#fff;
    }
    .Customer,#TablePerCustomer,#SoldQuantiyPerCustomer,#SupplierInfo,#GraphPerCusotmer {

    }
    .HideMe{
        visibility:hidden;
        position:absolute;
        top:-1000px;
    }
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }


</style>

<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <h4><?php print CommonLanguage::getMessage('monthly_year_sales_list'); ?></h4>
            </div>
        </div>
        <div class="panel-body">
            <div  id="alert_error"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-2">
                        <label><?php print CommonLanguage::getMessage('start_date'); ?></label><span class="red-star">*</span>
                        <input type="text" class="form-control from_date" id="from_date" autocomplete="off" data-date-format="yyyy" /> 
                    </div>
                    <div class="col-md-2">
                        <label><?php print CommonLanguage::getMessage('end_date'); ?></label>
                        <input type="text" class="form-control to_date" id="to_date" autocomplete="off"  data-date-format="yyyy" /> 
                    </div>
                    <div class="col-md-2 <?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" data-init-plugin="select2">
                            <option value="1"><?php echo smc_session()['local_currency_name'] . ' - ' . smc_session()['local_currency_symbol'] ?></option>
                            <option value="2"><?php echo smc_session()['second_currency']['name'] . ' - ' . smc_session()['second_currency']['symbol'] ?></option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-primary m-t-25" id="generate_report"> <?php print CommonLanguage::getMessage('generate'); ?></button>
                    </div>
                </div>
            </div>
            <div class="row m-t-20">
                <div class="table-responsive">
                    <table class="table table-bordered inventory" id="tableWithSearch" >
                        <thead>
                            <tr><th class='text-center'><?php echo CommonLanguage::getMessage('year') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('jan') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('feb') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('mar') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('apr') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('may') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('jun') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('jul') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('aug') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('sep') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('oct') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('nov') ?></th>
                                <th class='text-center'><?php echo CommonLanguage::getMessage('dec') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>

                    </table>



                </div>


            </div>


        </div>
        <div class="clearfix"></div>
    </div>
</div>
<script>
    var is_actual = <?php echo json_encode($is_actual) ?>,
            title = <?php echo json_encode(CommonLanguage::getMessage('monthly_year_sales_list')); ?>;
    $(function () {
        $("#from_date,#to_date").datepicker({autoclose: true, viewMode: 'years', minViewMode: 'years'});
        $('#generate_report').on('click', function () {

            $('#tableWithSearch').DataTable().destroy();
            $("#tableWithSearch  tbody").empty();
            $('#alert_error').addClass('hidden');
            var Data = {
                start_date: $('#from_date').val(),
                end_date: $('#to_date').val(),
                currency_id: $('#currency_id').val(),
                is_actual: is_actual
            }
            var d1 = new Date(Data['start_date']),
                    d2 = new Date(Data['end_date']);
            if (Data['start_date'] == '' || Data['currency_id'] == '') {
                $('#alert_error').removeClass('hidden');
                $('#alert_error').addClass('alert alert-danger').html('<?php echo (CommonLanguage::getMessage('Required_Fields')); ?>');
                return;
            }
            if (d1.getTime() > d2.getTime()) {
                $('#alert_error').removeClass('hidden');
                $('#alert_error').addClass('alert alert-danger').html('Start Date Must Be Less than End Date Or End Date Must Be Greater Than Start Date');
                return;
            }
            $.ajax({
                url: 'InventoryAjax/monthly_year_sales_list',
                data: Data,
                method: 'POST',
                dataType: 'JSON',
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        var year_arr = v1.responseJSON['years'];
                        var data_arr = v1.responseJSON['data'];
                        var tableTbody = '';
                        for (var i = 0; i < year_arr.length; i++) {
                            var tmp_year = year_arr[i];
                            tableTbody += '<tr><th class="text-center">' + tmp_year + '</th>';
                            for (var j = 1; j <= 12; j++) {
                                var month_year = tmp_year + '-' + ((j < 10 ? '0' : '') + j);
                                tableTbody += '<td class="text-center">' + (data_arr[month_year] ? data_arr[month_year] : 0) + '</td>';
                            }
                            tableTbody += '</tr>';
                        }
                        $('#tableWithSearch tbody').empty().append(tableTbody);
                        RebuildDataTable(title, [], '', [], '#tableWithSearch');

                    }
                }
            });
        });

    });
</script>
