<style>
    .btn.btn-default.active{
        background-color: #6d5baf;
        color:white;
    }
</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 " id="ViewMode">
                    <span style="margin:0 13px"><?php print CommonLanguage::getMessage('type'); ?></span>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                            <input type="radio" name="ViewType" value="1" checked=""><?php print CommonLanguage::getMessage('Daily'); ?>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="ViewType" value="2"><?php print CommonLanguage::getMessage('monthly'); ?>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="ViewType" value="3"><?php print CommonLanguage::getMessage('yearly'); ?>
                        </label>
                    </div>
                </div>
                <div class="col-md-2 ">
                    <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-2 ">
                    <label><?php print CommonLanguage::getMessage('customer_branch'); ?></label>
                    <input type="hidden" name="customer_branch_id" id="customer_branch_id" class="full-width"/>
                </div>
                <div class="col-md-5 input-group m-b">
                    <div id="Date_Group" class="form-group form-group-default input-group col-md-4 pull-right " >
                        <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                        <input id="Daily_Date" name="Daily_Date" class="form-control"  value="<?php echo($today); ?>" aria-required="true" aria-invalid="false">
                        <input id="Month_Date" name="Month_Date" class="form-control hidden" data-date-format="yyyy-mm" value="<?php echo($year . '/' . $monthName); ?>" aria-required="true" aria-invalid="false">
                        <input id="Year_Date" name="Year_Date" class="form-control hidden" data-date-format="yyyy" value="<?php echo($year); ?>" aria-required="true" aria-invalid="false">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12 table-responsive" id="MyTable" >
                    <table class="table table-bordered inventory" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center" style="width:5%" >#</th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('Date'); ?></th>
                                <th class="text-center" style="width:10%" ><?php print CommonLanguage::getMessage('total'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th>
                                <div class="text-center">
                                    <strong>
                                        <span id="total"></span>&nbsp;<span id="currency_symbol"><?php echo smc_session()['local_currency_symbol'] ?></span>
                                        <br>
                                        <span <?php echo smc_session()['default_setting']['activate_second_currency'] == 1 ? '':'hidden'; ?> id="second_total"></span>&nbsp;<span <?php echo smc_session()['default_setting']['activate_second_currency'] == 1 ? '':'hidden'; ?> id="currency_symbol"><?php echo smc_session()['second_currency']['symbol'] ?></span>
                                    </strong>
                                </div>
                            </th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var ViewLang = <?php echo json_encode(CommonLanguage::getMessage('view')); ?>;
    var title = <?php echo json_encode(CommonLanguage::getMessage('invoice_per_time')); ?>;
    var is_actual = <?php echo json_encode($is_actual);?>;
    $(function () {
        build_select2($('#customer_id'), 'xhr/customerSearch');
        build_select2($('#customer_branch_id'), 'xhr/searchCustomerBranch?customer_id='+$("#customer_id").val());
        var freq = $("#ViewMode label.active> input").val();
        ActualAjax(freq);
        //Setting Daily datepicker
        $("#Daily_Date").datepicker({autoclose: true})
        //Setting Monthly datepicker
        $("#Month_Date").datepicker({autoclose: true,
                                     viewMode: "months",
                                     minViewMode: "months"})
        //Setting Yearly datepicker
        $("#Year_Date").datepicker({autoclose: true,
                                    viewMode: "years",
                                    minViewMode: "years"})
        $("#ViewMode label").on("click", function () {
            setTimeout(function () {
                var freq = $("#ViewMode label.active> input").val();
                if (freq == 1) {
                    $("#Daily_Date").removeClass("hidden")//to show daily datepicker
                    $("#Month_Date").addClass("hidden")//to hide monthly datepicker
                    $("#Year_Date").addClass("hidden")//to hide yearly datepicker
                } else//freq Condition for monthly with id 2
                    if (freq == 2) {
                        $("#Daily_Date").addClass("hidden")//to hide daily datepicker
                        $("#Month_Date").removeClass("hidden")//to show monthly datepicker
                        $("#Year_Date").addClass("hidden")//to hide yearly datepicker
                    } else//freq condition for yearly with id 3
                        if (freq == 3) {
                            $("#Daily_Date").addClass("hidden")//to hide daily datepicker
                            $("#Month_Date").addClass("hidden")//to hide monthly datepicker
                            $("#Year_Date").removeClass("hidden")//to show yearly datepicker
                        }
                ActualAjax(freq);
            }, 200)
        })
        /**********************************************************************Begining of onChange datepicker*************************************/
        $("#Daily_Date,#Month_Date,#Year_Date").on("changeDate", function (e) {
            setTimeout(function () {
                var freq = $("#ViewMode label.active> input").val();
                ActualAjax(freq);//Rebuild table based on selected date
            }, 200)
        })//End of onChange datepicker
        $('#customer_id').on('change', function () {
            $('#customer_branch_id').val('')
            build_select2($('#customer_branch_id'), 'xhr/searchCustomerBranch?customer_id='+$("#customer_id").val());
            setTimeout(function () {
                var freq = $("#ViewMode label.active> input").val();
                ActualAjax(freq);//Rebuild table based on selected date
            }, 200)
        });
        $('#customer_branch_id').on('change',function(){
            setTimeout(function () {
                var freq = $("#ViewMode label.active> input").val();
                ActualAjax(freq);//Rebuild table based on selected date
            }, 200);
        });
    })
    function ActualAjax(freq) {
        var freq = parseInt($("#ViewMode input:checked").val());
        MyCurrentDate(freq);//return current date
        var CurrentDate = {};
        CurrentDate.freq = freq;
        CurrentDate.Date = MyDate;
        CurrentDate.is_actual = is_actual;
        CurrentDate.customer_id = $('#customer_id').val();
        CurrentDate.customer_branch_id = $('#customer_branch_id').val();
        $.ajax({
            url: "InventoryAjax/get_total_sales_invoices",
            data: CurrentDate,
            dataType:'json',
            complete: function (v1, v2) {
                if (v2 == "success") {
                    RebuildDataTable(title, [0, 1, 2, 3], "InventoryAjax/invoiceReportPerTime", CurrentDate);
                    $("#total").html(v1.responseJSON['net_total']);
                    $("#second_total").html(v1.responseJSON['second_net_total']);
                }
            }
        })
    }
    /******************Function to return Current Date based on selected frequency**************************************************/
    function MyCurrentDate(freq) {
        var MyDate;
        if (freq == 1) {
            window.MyDate = $("#Daily_Date").val()
        } else
            if (freq == 2) {
                window.MyDate = [moment($("#Month_Date").val()).format("YYYY"), moment($("#Month_Date").val()).format("MM"), moment($("#Month_Date").val()).format("DD")]
            } else
                if (freq == 3) {
                    window.MyDate = [moment($("#Year_Date").val()).format("YYYY"), moment($("#Year_Date").val()).format("MM"), moment($("#Year_Date").val()).format("DD")]
                }
    }
</script>