
<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>

<script src="<?php echo JS_PATH; ?>Chart.min.js"></script>
<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_graph'); ?></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-mm" /> 
                    </div>
                    <div class="col-md-2">
                        <label><?php print CommonLanguage::getMessage('end_date'); ?></label><span class="red-star">*</span>
                        <input type="text" class="form-control to_date" id="to_date" autocomplete="off"  data-date-format="yyyy-mm" /> 
                    </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="col-md-12 m-t-20" id="GraphPerDate">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div id="canvasBox">
                            <canvas id="YearChart" height="226" width="485" ></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<script>
    var is_actual = <?php echo json_encode($is_actual) ?>;
    $(function () {
        $("#from_date,#to_date").datepicker({autoclose: true, viewMode: 'months', minViewMode: 'months'});
        $('#generate_report').on('click', function () {
            $('#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['end_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() || 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_graph',
                data: Data,
                method: 'POST',
                dataType: 'JSON',
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        $('#YearChart').remove();

                        if (v1.responseJSON['month_year'].length > 0) {
                            $('#canvasBox').append(' <canvas id="YearChart"></canvas>');
                            UpdateGraphDataPerYear(v1.responseJSON['month_year'], v1.responseJSON['net_total']);
                        }
                    }
                }
            });
        });
        /**
         * [[Line OF Chart]]
         * @param {labelArray[1,2,3,4]}, GraphDataPerYear [[Dispaly The SoldQuantity of Product In line Chart Per Year]]
         */
        function UpdateGraphDataPerYear(labelArray, GraphDataPerYear) {
            var lineData = {
                labels: labelArray,
                datasets: [
                    {
                        fill:false,
                        label: "Total Sales",
                        borderColor: "#4c0870",
                        backgroundColor: "#4c0870",
                        data: GraphDataPerYear
                    }
                ]
            };
            var lineOptions = {
                scaleShowGridLines: true,
                scaleGridLineColor: "rgba(0,0,0,.05)",
                scaleGridLineWidth: 1,
                bezierCurve: true,
                bezierCurveTension: 0.4,
                pointDot: true,
                pointDotRadius: 4,
                pointDotStrokeWidth: 1,
                pointHitDetectionRadius: 20,
                datasetStroke: true,
                datasetStrokeWidth: 2,
                datasetFill: true,
                responsive: true
            };
            var ctx = document.getElementById("YearChart").getContext("2d");
            window.YearmyLineChart = new Chart(ctx, {
                type: 'line',
                data: lineData,
                options: lineOptions
            });
            window.YearmyLineChart.update();
        }
    });
</script>
