<div class="col-md-12">    
    <div class="panel panel-white">
        <div class="panel-heading clearfix">
            <h4 class="panel-title"> <?php echo $title ?></h4>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Date') ?></label>
                    <input id="From_To_Date" type="text" class="form-control" name="From_To_Date" >
                </div>
                <!--                <div class="col-md-12 ">-->
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('products') ?></label>
                    <input type="hidden" name="product" class="full-width select_value" id="product_id" />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('supplier') ?></label>
                    <input type="hidden" name="supplier" class="full-width select_value" id="supplier_id" />
                </div>

                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Depot') ?></label>
                    <input type="hidden" name="depot_id" class="full-width " id="depot_id" />
                </div>
                <!--                </div>-->
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('Category') ?></label>
                    <input type="hidden" name="category_id" class="full-width " id="category_id" />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('brand') ?></label>
                    <input type="hidden" name="brand_id" class="full-width " id="brand_id" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('lot_nb') ?></label>
                    <input type="hidden" name="lot_nb" class="full-width " id="lot_nb" />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('serial_nb') ?></label>
                    <input type="hidden" name="serial_nb" class="full-width " id="serial_nb" />
                </div>

            </div>
            <div class="row m-t-10">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table  table-bordered inventory" id="tableWithSearch">
                            <thead>
                                <tr>
                                    <th><?php echo CommonLanguage::getMessage('purchase_id') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('supplier') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('Item') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('description') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('Date') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('Depot') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('quantity') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('unit_price') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('discount') ?></th>
                                    <th><?php echo CommonLanguage::getMessage('total') ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th><div class="text-center"><span id="total"></span>&nbsp;<span id="currency_symbol"><?php echo smc_session()['local_currency_symbol'] ?></span></div></th>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var title = <?php echo json_encode(CommonLanguage::getMessage('Purchase Detailed Report Per Item')) ?>;
    var today = <?php echo json_encode($today) ?>;
    var startDate = today, endDate = today;
    var is_actual = <?php echo json_encode($is_actual); ?>;
    $(function () {
        build_select2($('#product_id'), 'xhr/ProductSearch');
        build_select2($('#supplier_id'), 'xhr/supplierSearch');
        build_select2($('#depot_id'), 'xhr/depotSearch');
        build_select2($("#category_id"), "xhr/catSearch");
        build_select2($("#brand_id"), "xhr/CommonSearch?col_id=brand_id&col_name=brand_name&table=tbl_brand_products")

        build_select2($("#lot_nb"), "xhr/CommonSearch?col_id=lot_nb&col_name=lot_nb&table=tbl_inventory_purchase_items")
        build_select2($("#serial_nb"), "xhr/CommonSearch?col_id=serial_nb&col_name=serial_nb&table=tbl_inventory_purchase_items")

        changeRequestAjax();
        $("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");
            changeRequestAjax();
        });
        $('#product_id,#supplier_id,#depot_id,#category_id,#brand_id,#serial_nb,#lot_nb').on('change', function () {
            changeRequestAjax();
        });
        function changeRequestAjax() {
            var currentDate = {
                supplier: $('#supplier_id').val(),
                product: $('#product_id').val(),
                from_date: startDate,
                to_date: endDate,
                is_actual: is_actual,
                depot_id: $("#depot_id").val(),
                category_id: $("#category_id").val(),
                brand_id: $("#brand_id").val(),
                serial_nb: $("#serial_nb").val(),
                lot_nb: $("#lot_nb").val(),
            };
            $.ajax({
                url: "InventoryAjax/get_total_purchased_items",
                data: currentDate,
                complete: function (v1, v2) {
                    if (v2 == "success") {
                        var response = v1.responseText;
                        RebuildDataTable(title, [0, 1, 2, 3, 4, 5, 6], 'InventoryAjax/detailed_purchase_report_request', currentDate);
                        $("#total").html(response);
                    }
                }
            });
        }
    });
</script>
