<style>
    #tableWithSearch tbody>tr>td>div.Arrow {
        cursor: pointer;
    }

    #tableWithSearch tbody>tr>td>div.Arrow:before {
        content: "\f054";
        display: inline-block;
        margin-right: 8px;
        font-family: 'FontAwesome';
        -webkit-transition: all 0.12s linear;
        transition: all 0.12s linear;
    }

    #tableWithSearch tbody>tr.shown>td>div.Arrow:before {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .table thead tr>th {
        background-color: #4c0870;
        color: #fff;
    }

    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }

    .table tbody tr td {
        color: #000;
    }

    .bg-master-lighter {
        border: none;
        background-color: #fff;
        border-top: 1px solid #ddd;
    }

    .table-responsive {
        overflow-x: visible;
    }

    .dropdown-menu li:hover {
        background-color: #eee;
    }

    .dropdown-menu {
        width: auto;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0.1);
        left: 4px;
    }

    .dropdown-menu>li {
        padding: 5px 0 !important;
    }

    .dropdown-menu>li>a {
        text-align: center;
    }

    .complete,
    .btn-group .active {
        background-color: #4c0870 !important;
        color: #fff !important;
    }

    .MonthPicker,
    .YearPicker {
        display: none;
    }

    .dropdown-menu>li>a {
        opacity: 1;
    }

    .btn-default {
        border: none;
    }

    .btn-default:hover {
        background-color: #4c0870 !important;
        color: #fff;
        border: none;
    }

    .HideMe {
        display: none !important;
        position: absolute;
        top: -1000px;
    }

    .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;
    }

    .datepicker thead tr .datepicker-switch {
        color: #4c0870 !important;
        font-size: 13px;
    }

    .datepicker table tr td span.active {
        background-color: #4c0870 !important;
    }

    .datepicker table tr td span:hover {
        background-color: #4c0870 !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;
    }

    #tableWithSearch_filter {
        display: none;
    }

    .btn-default {
        border: none;
        background-color: #eee;
    }

    .btn-default:hover {
        background-color: #4c0870 !important;
        color: #fff;
        border: none;
    }
</style>
<div class="wrapper">
    <div class="panel invoice">
        <div class="panel-heading">
            <div class="panel-title">
                <h4 class="bold"><?php echo CommonLanguage::getMessage($title); ?> </h4>
            </div>
            <div class="row form-group">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('type'); ?></label>
                    <div id="ViewMode">
                        <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>
                <div id="Date_Group" class=" col-md-3">
                    <label class=""><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <div class="input-group">
                        <span class="input-group-addon bg-primary"><i class="fa fa-calendar"></i></span>
                        <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 HideMe" 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 HideMe" data-date-format="yyyy" value="<?php echo ($year); ?>" aria-required="true" aria-invalid="false">
                    </div>
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('choose_customer') ?></label>
                    <input id="customer_id" value="<?php echo isset($_GET['customer_id']) ? $_GET['customer_id'] : ''; ?>" type="hidden" data-select-name="<?php echo !empty($_GET['customer_name']) ? $_GET['customer_name'] : ''; ?>" class="full-width" name="customer_id">
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('product') ?></label>
                    <input id="product_id" value="<?php echo !empty($_GET['product_id']) ? $_GET['product_id'] : ''; ?>" type="hidden" data-select-name="<?php echo !empty($_GET['product_name']) ? $_GET['product_name'] : ''; ?>" class="full-width" name="product_id">
                </div>

            </div>
            <div class="row form-group">
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('created_by'); ?></label>
                    <input type="hidden" name="created_by_id" id="created_by_id" class="full-width" />
                </div>
                <div class="col-md-2">
                    <label><?php echo CommonLanguage::getMessage('salesman'); ?></label>
                    <input type="hidden" name="sales_man_id" id="sales_man_id" class="full-width" />
                </div>
                <div class=" col-md-2">
                    <label><?php print CommonLanguage::getMessage('branch'); ?></label>
                    <input id="branch_id" type="hidden" name="branch_id" class="full-width">
                </div>
                <div class=" col-md-2">
                    <label><?php print CommonLanguage::getMessage('Category'); ?></label>
                    <input id="category_id" type="hidden" name="category_id" class="full-width">
                </div>
                <div class=" col-md-2">
                    <label><?php print CommonLanguage::getMessage('brand'); ?></label>
                    <input id="brand_id" type="hidden" name="brand_id" class="full-width">
                </div>
                <div class=" col-md-2">
                    <label><?php print CommonLanguage::getMessage('customer_group'); ?></label>
                    <input type="hidden" name="customer_group_id" id="customer_group_id" class="full-width" />
                </div>
            </div>

            <div class="row form-group <?php echo  $permissions->hasPermission('effect_qty_link_product') == 0     ? 'hidden' : ''; ?>">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('item_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-2 hidden " id="customer_branch_div">
                    <label><?php print CommonLanguage::getMessage('customer_branch'); ?></label>
                    <input type="hidden" name="customer_branch_id" id="customer_branch_id" class="full-width"/>
                </div>


            </div>

        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12" id="MyTable">
                    <table class="table table-hover demo-table-search" id="tableWithSearch">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:5%"><?php print CommonLanguage::getMessage('invoice_nb'); ?></th>
                                <th class="text-center" style="width:5%"><?php print CommonLanguage::getMessage('customer_name'); ?></th>
                                <th class="text-center" style="width:5%"><?php print CommonLanguage::getMessage('product_name'); ?></th>
                                <th class="text-center" style="width:5%"><?php print CommonLanguage::getMessage('description'); ?></th>
                                <th class="text-center" style="width:5%"><?php print CommonLanguage::getMessage('time'); ?></th>
                                <?php if($permissions->hasPermission('effect_qty_link_product') == 1){ ?>
                                <th class="text-center  " style="width:5%"><?php print CommonLanguage::getMessage('date'); ?></th>
                                <th class="text-center  " style="width:5%"><?php print CommonLanguage::getMessage('diesel'); ?></th>
                                <th class="text-center  " style="width:5%"><?php print CommonLanguage::getMessage('customer_branch'); ?></th>
                                <?php } ?>
                                <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('quantity'); ?></th>
                                <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('Depot'); ?></th>
                                <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('unit_price'); ?></th>
                                <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('discount'); ?></th>
                                <th class="text-center" style="width:10%"><?php print CommonLanguage::getMessage('Price'); ?></th>

                            </tr>
                        </thead>
                        <tbody>

                        </tbody>

                    </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($('#category_id'), 'xhr/CommonSearch?col_id=Cat_ID&col_name=Cat_Name&table=tbl_product_cat');
        build_select2($('#customer_id'), 'xhr/customerSearch');
        build_select2($('#product_id'), 'xhr/ProductSearch');
        build_select2($('#sales_man_id'), 'xhr/employeeSearch');
        build_select2($('#created_by_id'), 'xhr/CommonSearch?col_id=User_ID&col_name=User_Name&table=tbl_common_users');
        build_select2($("#branch_id"), "xhr/CommonSearch?col_id=branch_id&col_name=branch_name&table=tbl_organization_branches");
        build_select2($("#brand_id"), "xhr/CommonSearch?col_id=brand_id&col_name=brand_name&table=tbl_brand_products")
        build_select2($("#customer_group_id"), "xhr/general_group_Search?group_type=cust");

        $('#customer_id').on('change', function() {
            
            $('#customer_branch_div').removeClass('hidden');
            build_select2($('#customer_branch_id'), 'xhr/searchCustomerBranch?customer_id=' + $("#customer_id").val());
            var freq = $("#ViewMode label.active> input").val();
            ActualAjax();
        });
        $('#customer_branch_id').on('change', function() {
            var freq = $("#ViewMode label.active> input").val();
            ActualAjax();
        });



        //        var Current = {};
        //        Current.freq = $("#ViewMode label.active> input").val();
        //        Current.Date = $("#Daily_Date").val();
        //        Current.customer_id = $("#customer_id").val();
        //        Current.product_id = $("#product_id").val();
        //        Current.is_actual = is_actual;
        //        RebuildDataTable(title, [0, 1, 2, 3, 4], "InventoryAjax/DetailedInvoiceProductReportAjax", Current)
        ActualAjax();


        $("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'));
            ActualAjax();
        });
        $("input[name=From_To_Date]").on('cancel.daterangepicker', function (ev, picker) {
            window.startDate = ''
            window.endDate = ''
            $(this).val('');
            ActualAjax();
        });



        //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("HideMe") //to show daily datepicker
                    $("#Month_Date").addClass("HideMe") //to hide monthly datepicker
                    $("#Year_Date").addClass("HideMe") //to hide yearly datepicker

                } else //freq Condition for monthly with id 2
                    if (freq == 2) {
                        $("#Daily_Date").addClass("HideMe") //to hide daily datepicker
                        $("#Month_Date").removeClass("HideMe") //to show monthly datepicker
                        $("#Year_Date").addClass("HideMe") //to hide yearly datepicker

                    } else //freq condition for yearly with id 3
                        if (freq == 3) {
                            $("#Daily_Date").addClass("HideMe") //to hide daily datepicker
                            $("#Month_Date").addClass("HideMe") //to hide monthly datepicker
                            $("#Year_Date").removeClass("HideMe") //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
        $('#product_id,#created_by_id,#sales_man_id,#branch_id,#category_id,#brand_id,#customer_group_id').on('change', function() {
            var freq = $("#ViewMode label.active> input").val();
            ActualAjax();
        });

    })

    function ActualAjax(freq) {


        var freq = parseInt($("#ViewMode input:checked").val());

        MyCurrentDate(freq); //return current date

        var CurrentDate = {
            freq: freq,
            Date: MyDate,
            from_date: window.startDate,
            to_date: window.endDate,
            is_actual: is_actual,
            customer_branch_id: $('#customer_branch_id').val(),
            product_id: $('#product_id').val(),
            customer_id: $('#customer_id').val(),
            created_by_id: $('#created_by_id').val(),
            sales_man_id: $('#sales_man_id').val(),
            category_id: $('#category_id').val(),
            branch_id: $("#branch_id").val(),
            brand_id: $("#brand_id").val(),
            customer_group_id: $("#customer_group_id").val(),
        };



        RebuildDataTable(title, [0, 1, 2, 3, 4], "InventoryAjax/DetailedInvoiceProductReportAjax", CurrentDate)

    }
    /******************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>