{literal}
<script type="text/javascript" charset="utf-8">
    $("[id^='parcode']").live('keypress', function () {
        if (event.which == '10' || event.which == '13') {
            event.preventDefault();
        }
    });
    function getproductbyParcode(e, value)
    {
        //\s means "one space", and \s+ means "one or more spaces".
        value = value.replace(/\s+/g, '');//\s is the regex for "whitespace", and g is the "global" flag, meaning match ALL \s (whitespaces).
        var code = (e.keyCode ? e.keyCode : e.which);
        //to stop the submit of the form
        if (e.which == 13 && value != "")
        {
            if ($('#product').length > 1)
                $('#product').remove();


            var billnameid = 3;
            value = value.replace("ه", "i");//this replacement is for parcode reader
            value = value.replace("÷", "i");//this replacement is for parcode reader
            value = value.replace("/", "i");//this replacement is for parcode reader
            value = value.replace("I", "i");//this replacement is for parcode reader
            //alert(value.charAt(0));
            $.ajax({
                url: 'sellbillAjaxController.php?do=getproductNamebyOnlyParcode&parcode=' + value + '&billnameid=' + billnameid + '',
                async: false,
                success: function (data) {
                    var response = $.parseJSON(data);
                    if ($('#product').length > 0)
                        $("#product").select2('data', {id: response.id, text: response.text});
                    else
                        //manyParents or searchForm it depends
                        $('#manyParents').append('<input type="hidden" name="product" id="product" value="' + response.id + '"/>');

                }
            });
            // }
        }
    }

    $(document).ready(function () {
        $('#example').dataTable({
            "bPaginate": false,
            "bStateSave": true,
            "sDom": 'TCR<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
                    "copy",
                    "print",
                    {
                        "sExtends": "collection",
                        "sButtonText": "حفظ",
                        "aButtons": ["csv", "xls"]
                    }
                ]
            }
        });
    });

</script>
{/literal}
<style>
    .mTop{
        margin-top: 18px;
    }
    .mRight{
        margin-right: 3px;
    }
    .mBottom{
        margin-bottom: 25px;
    }
    .mStyle{
        width: 90px;text-align: center;
    }
    a:link, a:visited, a:hover, a:active{
        text-align: center !important;
    }
    .product-image-overlay {
        /*        position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                z-index: 9999;
                display: none;*/

        position: fixed;
        top: 15%;
        left: 40%;
        /* text-align: center; */
        width: 30%;
        height: 50%;
        background: rgba(4, 0, 0, 0.38);
        z-index: 9999;
        border-radius: 45px;
        display: none;
    }

    .product-image-overlay .product-image-overlay-close {
        display: block;
        position: absolute;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #eee;
        line-height: 35px;
        font-size: 20px;
        color: #eee;
        text-align: center;
        cursor: pointer;
    }

    .product-image-overlay img {
        width: auto;
        max-width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
</style>
<div class="row">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">المنتجات</a></li>
            <li><a href="#">المنتجات </a></li>
            <li class="active">عرض المنتجات</li>
        </ol>
        <div class="panel panel-default panel-m">
            <div class="panel-heading">
                <h3 class="panel-title">عرض المنتجات</h3>
                <a href="{$youtubes[55]->url}" target="_blank" class="hidden-print"><img src="../views/default/assets/img/youtube.png" class="pull-left" alt="Youtube" style="width: 2%;"></a>

            </div>
            <div class="panel-body">

                <!---------- start outputString alert ----------->
                <div id="outputString" class="alert alert-block alert-success fade in" style="display:none">
                    <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <p id="outputStringValue">{$outputString}</p>
                    <div class="clearfix"></div>
                </div>
                <!---------  end outputString alert ------------>
                <form class="form-inline hidden-print" action="productController.php?do=showNew" method="post" id="searchForm">
                    <div class="form-group col-lg-5">
                        <label class="sr-only">تصنيف المنتج</label>
                        <select class="select2 wdt300 productCatt" data-level="0" name="productCatId0" id="productCatId0" >
                            <option value="-1">اختر تصنيف</option>
                            {foreach $catDataReport as $data}
                            <option value="{$data->productCatId}">{$data->productCatName}</option>
                            {/foreach}
                        </select>
                        <input type="hidden" id="level" name="level" value="0">
                    </div>
                    <div id="manyParents">

                    </div>


                    <div class="form-group">
                        <label class="sr-only">الباركود</label>
                        <input type="text" name="parcode" id="parcode" style="width: 150px;" class="form-control" onkeypress="getproductbyParcode(event, this.value);" placeholder="need to press enter">
                    </div>
                    <input type="hidden" name="usergroupname" id="usergroupname" value="{$usergroupname}"/>
                    <button type="submit" class="btn btn-primary">بحث</button>
                </form>
                <br/>
            </div>
            <div class="panel panel-default panel-m">
                <!-- Default panel contents -->
                <div class="panel-heading">{$message}</div>
                <div class="panel-body">
                    <hr />
                    {literal}
                    <form id="form1" name="form1" method="post" action="productController.php?do=executeOperation" onsubmit="if (Spry.Widget.Form.validate(this)) {
                                return countChoosenProducts('productController');
                            } else {
                                return false;
                            }
                          " enctype="multipart/form-data">
                        {/literal}
                        <div class="row">
                            <div class="form-group col-lg-2 mRight">
                                <span>اختر العملية</span>
                            </div>
                            <div class="form-group col-lg-2 mRight">
                                <span>سعر الشراء </span>
                            </div>
                            <div class="form-group col-lg-2 mRight">
                                <span>سعر الجملة </span>
                            </div>
                            <div class="form-group col-lg-2 mRight">
                                <span>سعر نصف الجملة </span>
                            </div>
                            <div class="form-group col-lg-2 mRight">
                                <span>سعر التجزئة </span>
                            </div>
                        </div>
                        <div class="row mBottom">
                            <div class="form-group col-lg-2">

                                <label for="operation"></label>
                                <span id="spryselect1">
                                    <select name="operation" id="operationChange"  data-placeholder="اختر العملية"  class="select2 wdt100">
                                        <option></option>
                                        <option value="1"> نسبة </option>

                                        <option value="2"> مباشر</option>
                                    </select>
                                    <span class="selectRequiredMsg">اختر العملية</span></span>
                            </div>


                            <div class="form-group col-lg-2 mTop">
                                <input type="text" name="buypriceChange"   id="buypriceChange"  />
                            </div>
                            <div class="form-group col-lg-2 mTop">
                                <input type="text" name="allpriceChange"   id="allpriceChange"  />
                            </div>
                            <div class="form-group col-lg-2 mTop">
                                <input type="text" name="halfpriceChange"   id="halfpriceChange"  />
                            </div>
                            <div class="form-group col-lg-2 mTop">
                                <input type="text" name="unitPriceChange"   id="unitPriceChange"  />
                            </div>
                            <div class="form-group col-lg-2 mTop">
                                <button type="button"  class="btn btn-success pull-right changeBtn" disabled="">تنفيذ</button>
                            </div>
                        </div>
                        <div class="table-responsive" id="tableWrap">
                            {if !empty($productsData)}
                            <table class="display table-black" id="example">
                                <!--tfoot>
                                    <tr>
                                             <th class="hidden-print">
                                        <label>
                                          <input type="checkbox" name="checkAll" id="checkAll"/>

                                        </label>
                                      </th>

                                     {if {$Programsettingdata->parcode} eq 0}   <th>الباركود</th>{/if}
                                      <th>اسم المنتج</th>
                                      <th>اسم التصنيف</th>
                                     {if {$Programsettingdata->priceing} eq 0}
                                      <th>سعر الجملة</th>
                                      <th>سعر النصف جملة</th>
                                      <th>سعر التجزئة</th>{/if}
                                      <th class="hidden-print">حذف/إلغاء الحذف</th>
                                      <th class="hidden-print">التعديل</th>
                                    </tr>
                            </tfoot-->
                                <thead>
                                    <tr>
                                        <!--                                        <th class="hidden-print">
                                                                                    <label>
                                                                                        <input type="checkbox" name="checkAll" id="checkAll"/>
                                                                                    </label>
                                                                                </th>
                                                                                <th>الصورة </th>
                                                                                {if {$Programsettingdata->parcode} eq 0}   <th>الباركود</th>{/if}-->
                                        <th style="width: 30%!important">اسم المنتج</th>
                                        <!--<th style="    width: 142px;"> <center>  اسم التصنيف </center></th>-->
                                        {if {$Programsettingdata->priceing} eq 0}
                                        <th {if $userGroupData->hideproductcatid eq 1 } class="hidden" {/if}>سعر الشراء</th>
                                        <th>سعر الجملة</th>
                                        <th>سعر النصف جملة</th>
                                        <th>سعر التجزئة</th>{/if}
                                        <!--                                <th class="hidden-print">
                                                                            حذف <br>
                                                                            الغاء الحذف
                                                                        </th>
                                                                        <th class="hidden-print">التعديل</th>
                                                                        {if {$Programsettingdata->allowfinsldelete} eq 0}
                                                                        <th class="hidden-print">حذف </th>-->
                                        {/if}
                                    </tr>
                                </thead>
                                <tbody>
                                    <!--                                <input name="productCatId" type="text" value="{$productCatId}" />-->
                                    {assign var=i value=1}

                                    {foreach $productsData as $data}
                                    {if {$data->conditions} eq 2}
                                    <!--tr class="danger" style="display:none !important;"-->
                                    {elseif {$data->conditions} eq 0 || $data->conditions eq 1}

                                    <tr>
                                        {/if}
                                        <!--                                        <td class="hidden-print">
                                                                                    <label>
                                                                                        <input type="checkbox" name="choosedItem[]" id="checked{$i}" class="choosenItem" value="{$data->productId}" />
                                                                                    </label>
                                                                                </td>-->
                                        <!--                                        <td>

                                                                                    <img src="../views/default/images/product_image/{$data->logo}" class="moImg"  alt="" width="50" height="30" />
                                                                                </td>-->
                                        <!--{if {$Programsettingdata->parcode} eq 0}  <td> {$data->parcode} </td>{/if}-->
                                        <td>
                                            <label class="hidden hidden-print"> {$data->productName} </label>

                                            <input type="text" name="productName" data-type="nameNew" class="m_productNew mStyle" data-id="{$data->productId}" id="productName" value='{$data->productName}' style="width: 100%!important"/>

                                        </td>
                                        <!--                                        <td>
                                                                                    <label class="hidden hidden-print"> {$data->productCatName} </label>

                                                                                    <select name="productCatId" data-id="{$data->productId}" data-placeholder="" class="select2 wdt100 m_productCat" tabindex="1">
                                                                                        <option value="-1">اختر المنتج الرئيسي</option>
                                                                                        {foreach $alldata as $proData }
                                                                                        <option value="{$proData->productCatId}" {if $proData->productCatId eq $data->productCatId}selected{/if}>{$proData->productCatName}</option>
                                                                                        {/foreach}
                                                                                    </select>

                                                                                </td>-->
                                        {if {$Programsettingdata->priceing} eq 0}
                                        <td {if $userGroupData->hideproductcatid eq 1 } class="hidden" {/if}>
                                            <input type="text" name="buyprice" data-type="buypriceNew" class="mStyle m_productNew buypriceNew buyPrice_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="buypriceNew_{$data->productId}" value='{$data->productBuyPrice}' />
                                            <label class="hidden hidden-print"> {$data->productBuyPrice} </label>

                                        </td>
                                        <td>
                                            <input type="text" name="allprice" data-type="allpriceNew" class="mStyle m_productNew allpriceNew allprice_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="allpriceNew_{$data->productId}" value='{$data->productSellAllPrice}'  data-editOther="{if $Programsettingdata->editAllPrice eq 1}1{else}0{/if}"/>
                                            <label class="hidden hidden-print"> {$data->productSellAllPrice} </label>
                                        </td>
                                        <td>
                                            <input type="text" name="halfprice" data-type="halfpriceNew" class="mStyle m_productNew halfpriceNew halfprice_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="halfpriceNew_{$data->productId}" value='{$data->productSellHalfPrice}' />
                                            <label class="hidden hidden-print"> {$data->productSellHalfPrice} </label>

                                        </td>
                                        <td>
                                            <input type="text" name="unitPrice" data-type="unitPriceNew" class="mStyle m_productNew unitPriceNew unitPrice_{$i}" data-itra="{$i}" data-id="{$data->productId}" id="unitPriceNew_{$data->productId}" value='{$data->productSellUnitPrice}' />
                                            <label class="hidden hidden-print"> {$data->productSellUnitPrice} </label>

                                        </td>{/if}
                                        <!--<td  class="hidden-print "> {if {$data->conditions} eq 0} <a style="margin-right: 22px !important;" href="productController.php?do=tempdelete&id={$data->productId}&optic={$data->isOptic}"  type="button" class="btn btn-default btn-lg removeicon"> </a> {elseif {$data->conditions} eq 1 } <a  href="productController.php?do=returndelete&id={$data->productId}&optic={$data->isOptic}"  type="button" class="btn btn-default btn-lg correcticon"> </a></td>-->
                                        {/if}

                                        <!--                                        {if $data->isOptic == 2}
                                                                                <td  class="hidden-print"><center><a  href="productController.php?do=editoptid&id={$data->productId}" type="button" class="btn btn-default btn-lg editicon"></a></center></td>
                                                                        {else}
                                                                        <td  class="hidden-print"><a href="productController.php?do=edit&id={$data->productId}" type="button" class="btn btn-default btn-lg editicon"></a></td>
                                                                        {/if}


                                                                        {if {$Programsettingdata->allowfinsldelete} eq 0}
                                                                        <td class="hidden-print"><a href="#" name="dd" type="button" class="btn btn-default btn-lg deleteicon conformdel1" data-position="productController.php?do=deleteFinaly&id={$data->productId}&optic={$data->isOptic}" ></a></td>
                                                                        {/if}-->
                                    </tr>
                                    {assign var=i value=$i+1}

                                    {/foreach}


                                </tbody>

                            </table>
                            {/if}

                            <div class="clearfix"></div>
                        </div>
                        <hr />
                        <div  class="hidden-print">
                            <div class="col-lg-12">
                                <div class="well well-sm">
                                    <div class="form-group">
                                        <div class="col-lg-4">
                                            <label for="operation"></label>
                                            <span id="spryselect1">
                                                <select name="operation" id="operation"  data-placeholder="اختر العملية"  class="select2 wdt100">
                                                    <option></option>
                                                    <option value="1">حذف مؤقت</option>

                                                    <option value="2">إلغاء الحذف</option>
                                                </select>
                                                <span class="selectRequiredMsg">اختر العملية</span></span></div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-4">
                                            <input name=""  class="hidden-print btn btn-primary" type="submit" value="تنفيذ"/>
                                        </div>
                                    </div>

                                    <!-----------  start noElementsError alert ------------->
                                    <div class="clearfix"></div>
                                    <div id="noElementsError" class="alert alert-danger fade in" style="display:none;">
                                        <button type="button" class="close pull-left" data-dismiss="alert" aria-hidden="true">×</button>
                                        <p>يجب اختيار العناصر أولاً</p>
                                        <div class="clearfix"></div>
                                    </div>
                                    <!----------  end noElementsError alert -------------->

                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>


                        <!-- Modal -->
                        <div class="hidden-print">
                            <div class="modal fade " id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close pull-left" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title">تأكيد حذف مجموعة</h4>
                                        </div>
                                        <div class="modal-body"> هل تريد حذف هذا المنتج ؟ </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">لا</button>
                                            <button type="button" class="btn btn-primary savemodel1">نعم</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                        </div>
                        <!-- /.modal -->

                        <div  class="hidden-print">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <div class="col-lg-4">
                                        <button type="button" onclick="print_Custom('mycustomheader');" class="btn btn-success pull-right">طباعة</button>

                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </form>
                    <script type="text/javascript">
                        var x = document.getElementById("tableWrap").innerHTML;
                        $(document).ready(function (e) {

                            document.getElementById("data").value = x;

                        });
                    </script>
                    <form name="jazx" id="excel" action="http://localhost/newstorex/untitled.php" method="post">
                        <input type="hidden" name="data" id="data"/>
                        <br /> <!--input type="submit" name="button" id="button" class="btn btn-success pull-right" value="ملف اكسل" /--></form>
                </div>
            </div>
        </div>
    </div>


    <script>
        var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1");

        $('body').on('click', '.moImg', function () {

            $('body').append('<div class="product-image-overlay"><span class="product-image-overlay-close">x</span><img src="" /></div>');
            var productImage = $('img');
            var productOverlay = $('.product-image-overlay');
            var productOverlayImage = $('.product-image-overlay img');

            productImage.click(function () {
                var productImageSource = $(this).attr('src');

                productOverlayImage.attr('src', productImageSource);
                productOverlay.fadeIn(100);
                $('body').css('overflow', 'hidden');

                $('.product-image-overlay-close').click(function () {
                    productOverlay.fadeOut(100);
                    $('body').css('overflow', 'auto');
                });
            });
        });
    </script>