<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">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <h3 class="panel-title">إضافة منتج</h3>
            </div>
            <div class="panel-body">
                <form class="nameToBeChecked form-horizontal" role="form" action="productController.php?do=add"
                    method="post" id="opticproduct-form" enctype="multipart/form-data">
                    <!--<input type="hidden" id="opticproduct" name="opticproduct" value="1"/>-->
                    <input name="productItr" id="productItr" type="hidden" value="1" />
                    <input name="productquantity1" type="hidden" value="0" />
                    <input name="productDate1" type="hidden" value="{$today}" />
                    <input name="expireDate1" type="hidden" value="0">
                    <input name="inMenu1" type="hidden" value="0">
                    <input name="type1" type="hidden" value="0">
                    <input name="isservice1" type="hidden" value="0">
                    <input name="hasSizeAndColor1" type="hidden" value="1">
                    <div class="panel panel-default panel-m">
                        <div class="panel-heading">
                            <h3 class="panel-title">بيانات أساسية</h3>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-6" id="rightpart" style="display: inline">
                                    <div class="form-group">
                                        <label for="parent" class="col-lg-4 control-label">التصنيف</label>
                                        <div class="col-lg-8">
                                            <select class="select2 wdt100" name="productCatId" id="productCatId">
                                                <option value=""></option>
                                                {foreach $allParents as $parent}
                                                <option value="{$parent->productCatId}">{$parent->productCatName}
                                                </option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">الاسم</label>
                                        <div class="col-lg-8">
                                            <span id="sprytextfield1">
                                                <input type="text" name="productName1" id="productName1"
                                                    class="form-control" />
                                                <span class="textfieldRequiredMsg">*</span></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">الحد الأدنى</label>
                                        <div class="col-lg-8">
                                            <input type="text" name="limitamount1" id="limitamount1"
                                                class="form-control positiveNo limit" value="0" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">صورة</label>
                                        <div class="col-lg-8">
                                            <input type="file" name="logo1" id="logo1" accept="image/*">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">التعليق</label>
                                        <div class="col-lg-8">
                                            <textarea class="form-control" rows="2"
                                                name="productDescription1"></textarea>
                                        </div>
                                    </div>

                                    {if $Programsettingdata->addclienttoproduct eq 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">العميل</label>
                                        <div class="col-lg-8">
                                            <input type="hidden" id="clientid1" name="clientid1"
                                                class="wdt100 select2-offscreen clientSelect"
                                                data-placeholder="اختر عميل " tabindex="-1"
                                                style="display: inline-block;" value="1" />
                                        </div>
                                    </div>
                                    {/if}
                                </div>

                                <div class="col-lg-6" id="leftpart" style="display: inline">
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر الشراء</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="productBuyPrice1" id="productBuyPrice1"
                                                    value="0" class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {if $Programsettingdata->showpriceall == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع جملة</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="productSellAllPrice1" id="productSellAllPrice1"
                                                    value="0" class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showpricehalf == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع نصف جملة</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="productSellHalfPrice1"
                                                    id="productSellHalfPrice1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showpriceunit == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع تجزئة</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="productSellUnitPrice1"
                                                    id="productSellUnitPrice1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showprice4 == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع سعر4</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="price4_1" id="price4_1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showprice5 == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع سعر5</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="price5_1" id="price5_1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showprice6 == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع سعر6</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="price6_1" id="price6_1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showprice7 == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع سعر7</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="price7_1" id="price7_1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    {if $Programsettingdata->showprice8 == 1}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">سعر البيع سعر8</label>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" name="price8_1" id="price8_1" value="0"
                                                    class="form-control positivefloat proprice" />
                                                <span class="input-group-addon">{$currency}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {/if}
                                    <div class="form-group">
                                        <label class="col-lg-4 control-label">التصنيع</label>
                                        <div class="col-lg-8">
                                            <label class="color-black">
                                                <input value="1" class="radioR" name="type" type="radio">
                                                نعم </label>

                                            <label class="color-black">
                                                <input value="0" class="noradioR" name="type" checked="checked"
                                                    type="radio">
                                                لا </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-m">
                        <div class="panel-heading">
                            <h3 class="panel-title">الوحدات</h3>
                        </div>
                        <div class="panel-body">
                            <a id="addSizeColorUnit" class="btn btn-primary" style="float: left"> إضافة</a>
                            <table class="table" id="opticUnitsTable">
                                <thead>
                                    <tr>
                                        <th width="50%">اسم الوحدة</th>
                                        <th width="40%">عدد القطع</th>
                                        <th>حذف</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <input type="hidden" id="unitsItr1" name="unitsItr1" value="1" />
                        </div>
                    </div>
                    <div class="panel panel-default panel-m">
                        <div class="panel-heading">
                            <h3 class="panel-title">المقاسات و الالوان</h3>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-5" id="rightpart" style="display: inline">
                                    <label for="sizes" class="col-lg-4 control-label">المقاسات</label>
                                    <select class="select2" name="sizes[]" id="sizes" multiple="multiple">
                                        <option value="-1">كل المقاسات</option>
                                        {foreach $allSizeColor as $data}
                                        {if $data->type == 0}
                                        <option value="{$data->id}">{$data->name}</option>
                                        {/if}
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="col-lg-5" id="leftpart" style="display: inline">
                                    <label for="colors" class="col-lg-4 control-label">الالوان</label>
                                    <select class="select2" name="colors[]" id="colors" multiple="multiple">
                                        <option value="-1">كل الالوان</option>
                                        {foreach $allSizeColor as $data}
                                        {if $data->type == 1}
                                        <option value="{$data->id}">{$data->name}</option>
                                        {/if}
                                        {/foreach}
                                    </select>
                                </div>
                                <div class="col-lg-2" id="leftpart" style="display: inline">
                                    <button type="button" class="btn btn-success pull-left" id="SizeColorQuantity">ادخال
                                        الكميات </button>
                                </div>


                            </div>
                            <div class="clearfix"></div>
                            <br />
                            <div class="row" id="quantity_div" style="display:none">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>الباركود</th>
                                            <th>المقاس</th>
                                            <th>اللون</th>
                                            <th>الكمية</th>
                                            <th>حذف</th>
                                        </tr>
                                    </thead>
                                    <tbody id="SizeColorTB">

                                    </tbody>
                                </table>
                                <input type="hidden" id="sizeColorItr" name="sizeColorItr" value="0" />
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-offset-6 col-lg-4">
                            <button type="button" class="btn btn-primary" id="saveSizeColor">حفظ </button>
                        </div>
                    </div>
                </form>
                <div class="clearfix"></div>
                <br />




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


        <div id="unitsDiv" style="display: none">
            <option></option>
            {foreach $unitsData as $data}
            <option value="{$data->unitId}">{$data->unitName}</option>
            {/foreach}
        </div>



        {literal}
        <script type="text/javascript">
            var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
            //var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2");//, {invalidValue: "-1", isRequired: false}        </script>
        {/literal}
        {literal}
        <script type="text/javascript">
            $('body').on('keyup change', '#productBuyPrice1', function () {
                var val = $(this).val();
                $('#productSellAllPrice1').val(val);
                $('#productSellHalfPrice1').val(val);
                $('#productSellUnitPrice1').val(val);
                $('#price4_1').val(val);
                $('#price5_1').val(val);
                $('#price6_1').val(val);
                $('#price7_1').val(val);
                $('#price8_1').val(val);
            });
            $('body').on('keyup change', '#productSellAllPrice1', function () {
                var val = $(this).val();
                $('#productSellHalfPrice1').val(val);
                $('#productSellUnitPrice1').val(val);
                $('#price4_1').val(val);
                $('#price5_1').val(val);
                $('#price6_1').val(val);
                $('#price7_1').val(val);
                $('#price8_1').val(val);

            });
            $('#saveSizeColor').live('click', function (e) {
                checkProductName($('#productName1').val(), 1);
                if ($('#opticproduct-form').validate().form()) {
                    var myForm = document.getElementById("opticproduct-form");
                    var SS = Spry.Widget.Form.validate(myForm);
                    if (SS == true) {
                        if (!$('#saveSizeColor').hasClass("processing")) {
                            $('#saveSizeColor').addClass("processing");
                            myForm.submit();
                        }
                    }
                } else {
                    e.preventDefault();
                }
            });

        </script>
        {/literal}