<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('product_recipe') ?></div>
            <div class="row">
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('product'); ?></label>
                    <span class="fa fa-pencil-square-o m-l-5 fa-2x openFrame hidden" style="color:#8a7dbe;cursor:pointer"></span>
                    <input  id="product_id" name="product_id" type="hidden" class="full-width product_id " />
                </div>
                <div class="col-md-3">
                    <label><?php echo CommonLanguage::getMessage('pricing_class'); ?></label>
                    <input  id="class_id" name="class_id" type="hidden" class="full-width class_id " />
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered inventory" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th><?php print CommonLanguage::getMessage('product_name') ?></th>
                            <th><?php print CommonLanguage::getMessage('produced_qty') ?></th>
                            <th><?php print CommonLanguage::getMessage('product_name') ?></th>

                            <th><?php print CommonLanguage::getMessage('recipe_qty') ?></th>
                            <?php if ($permissions->hasPermission('show_cost')) { ?>
                                <th ><?php print CommonLanguage::getMessage('recipe_cost') ?></th>
                                <th ><?php print CommonLanguage::getMessage('cost') ?></th>
                            <?php } ?>
                            <th ><?php print CommonLanguage::getMessage('Price') ?></th>
                            <th ><?php print CommonLanguage::getMessage('profit') ?></th>

                        </tr>
                    </thead>
                    <tbody></tbody>
<!--                    <tfoot>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th><div class="text-center"><strong><span id="total">0</span>&nbsp;<span id="currency_symbol"><?php echo smc_session()['local_currency_symbol'] ?></span></strong></div></th>

                    </tfoot>-->
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var price_lang =<?php echo json_encode(CommonLanguage::getMessage('Price')); ?>;

    $(function () {
        build_select2($("#product_id"), "xhr/recipeProductSearch");
        build_select2($("#class_id"), "xhr/PricingClassSearch?type=0");
        change_table()
        $("#product_id,#class_id").on('change', function () {
            change_table()
        });

    });

    function change_table() {
        if ($("#product_id").val() == '') {
            $('span.openFrame').removeAttr('data-src');
            $('span.openFrame').addClass('hidden');
        } else {
            $('span.openFrame').removeClass('hidden');
            $('span.openFrame').attr('data-src', 'Inventory/ViewProduct/' + $("#product_id").val() + '?is_pop=1&modal=1');
        }
//        if($("#class_id").val()!='')
//            $("#tableWithSearch thead tr").append(' <th class="price_th">' + price_lang + '</th>')
//        else
//            $("th.price_th").remove()

        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2], 'InventoryAjax/product_recipe', {product_id: $("#product_id").val(), class_id: $("#class_id").val()}, '', [0, 1, 4, 5, 6, 7]);
    }
</script>