<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>    
<script src="/public/lib/multiselect/js/jquery.multi-select.js" type="text/javascript"></script>
<link href="/public/lib/multiselect/css/multi-select.dist.css" rel="stylesheet" type="text/css"/>

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header"><?= $pageTitle ?></h1>
    </div>
</div>
<div class="row">

        <form action="/admin/ajax/addEditCategoryDetails/<?=$caId?>" class="form" id="validation" method="post" enctype="multipart/form-data">
           <div class="col-md-6">
   
            <input type="hidden" value="<?= $id ?>" name="id" />
            <?php if($categoryId > 0){ ?>
                <input type="hidden" value="<?= $categoryId?>" name="categoryId" />
               <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("the_title",$adminLang)?> </h3>
                 <input class="form-control" type="text" disabled="categoryName" value="<?= $categoryName ?>" name="categoryName" placeholder="<?=$this->Get_Lang->gl("the_title",$adminLang)?>"/>
               </div>

            <?php } else { ?>
                <div class="form-group">
                    <h3><?=$this->Get_Lang->gl("select_category",$adminLang)?></h3>
                    <select id="categoryId" name="categoryId" class="form-control">
                            <option value=""><?=$this->Get_Lang->gl("select_category",$adminLang)?>...</option>
                        <?php foreach ($categories as $key => $value) { ?>
                            <option value="<?=$value->caId?>"><?=$value->theTitle?></option>
                        <?php } ?>
                    </select>    
                </div>
                
            <?php } ?>     
                
                <div class="form-group">
                    <h3><?=$this->Get_Lang->gl("select_brand",$adminLang)?></h3>
                    <select id="markaId" name="markaId" class="form-control">
                            <option value=""><?=$this->Get_Lang->gl("select_brand",$adminLang)?>...</option>
                        <?php foreach ($marka as $key => $value) { ?>
                            <option value="<?=$value->brId?>"><?=$value->theTitle?></option>
                        <?php } ?>
                    </select>    
                </div>
                             
                
            <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("the_price",$adminLang)?> $</h3>
                 <input class="form-control" type="number"  id="thePrice" name="thePrice" placeholder="<?=$this->Get_Lang->gl("the_price",$adminLang)?> $"/>
            </div>
                
            <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("sale",$adminLang)?> %</h3>
                 <input class="form-control" type="number" id="sale" name="sale" placeholder="<?=$this->Get_Lang->gl("sale",$adminLang)?>"/>
            </div>
                
            <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("Quantity",$adminLang)?> </h3>
                 <input class="form-control" type="number" id="quantity" name="quantity" placeholder="<?=$this->Get_Lang->gl("Quantity",$adminLang)?>"/>
            </div>
                
            <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("select_colors",$adminLang)?> </h3>                
                <select class="form-control" id="colorId" name="colorId[]"  multiple="multiple">
                    <?php foreach ($colors as $key => $value) { ?>
                     <option value="<?=$value->coId?>" 
                             <?php if($theColorsId){ if(in_array($value->coId, $theColorsId)) { ?> selected <?php } } ?>><?=$value->theTitle?></option>
                    <?php } ?>
                </select>
            </div>
                
            <div class="form-group">
                 <h3><?=$this->Get_Lang->gl("select_sizes",$adminLang)?> </h3>                
                <select class="form-control" id="sizeId" name="sizeId[]"  multiple="multiple">
                    <?php foreach ($sizes as $key => $value) { ?>
                     <option value="<?=$value->siId?>" 
                             <?php if($theSizesId){ if(in_array($value->siId, $theSizesId)) { ?> selected <?php } } ?>><?=$value->theTitle?></option>
                    <?php } ?>
                 
                </select>
            </div>
          
                
              <div class="form-group">
                    <h3><?=$this->Get_Lang->gl("select_tags",$adminLang)?></h3>
                    <select id="tagsId" name="tagsId" class="form-control">
                            <option value=""><?=$this->Get_Lang->gl("select_tags",$adminLang)?>...</option>
                        <?php foreach ($tags as $key => $value) { ?>
                            <option <?php if($tagCategId == $value->taId ){echo 'selected';}?> value="<?=$value->taId?>"><?=$value->theTitle?></option>
                        <?php } ?>
                    </select>    
                </div>

                <div class="form-group getTagData">
                <?php if($getTagData){ ?>
                <h3><?=$this->Get_Lang->gl("select_tags",$adminLang)?> </h3>                
                <select class="form-control" id="tagId" name="tagId[]"  multiple="multiple">
                    <?php foreach ($getTagData as $key => $value) { ?>
                     <option value="<?=$value->taId?>" 
                             <?php if($theTagsId){ if(in_array($value->taId, $theTagsId)) { ?> selected <?php } } ?>><?=$value->theTitle?></option>
                    <?php } ?>                 
                </select><script>jQuery(function (){jQuery("#tagId").multiSelect();});</script>
                <?php } ?>
                    
                </div>     
                
            
            <?php foreach ($databaseLang as $key => $value) { ?>    
<!--            <div class="form-group">
                <h3><?=$this->Get_Lang->gl("page_title",$adminLang)?> - <?=$value->theName?></h3>
                <input id="pageTitle<?=$value->laId?>" name="pageTitle<?=$value->laId?>" class="form-control" placeholder=" <?=$this->Get_Lang->gl("page_title",$adminLang)?> - <?=$value->theName?>"/>
            </div>     -->
            <?php } ?>
                
            <?php foreach ($databaseLang as $key => $value) { ?>    
<!--            <div class="form-group">
                <h3><?=$this->Get_Lang->gl("page_description",$adminLang)?> - <?=$value->theName?></h3>
                <textarea id="pageDesc<?=$value->laId?>" name="pageDesc<?=$value->laId?>" class="form-control"> </textarea>
            </div>-->
            <?php } ?>
    
            <!--    <div class="form-group">
                <h3>Page Trace Code</h3>
                <textarea id="traceCode" name="traceCode" class="form-control"> </textarea>
            </div>
            -->
            
        <?php foreach ($databaseLang as $key => $value) { ?>
            <div class="form-group">
                <h3><?=$this->Get_Lang->gl("additional_info",$adminLang)?> - <?=$value->theName?></h3>
                <textarea id="text<?=$value->laId?>" name="text<?=$value->laId?>" class="form-control"></textarea>
            </div>    
    <?php } ?>
            
        </div>
        
    <div class="col-md-6">
    
     <?php foreach ($databaseLang as $key => $value) { ?>
            <div class="form-group">
                <h3><?=$this->Get_Lang->gl("the_text",$adminLang)?> - <?=$value->theName?></h3>
                <textarea id="theText<?=$value->laId?>" name="theText<?=$value->laId?>" class="form-control"></textarea>
            </div>    
    <?php } ?>
    

        
    </div>
            
            <div class="form-group col-md-12">
                <button id="saveBtn" class="btn btn-primary pull-left" type="submit"><?=$this->Get_Lang->gl("save",$adminLang)?></button>
            </div>            

        </form>

</div>
<script src="/public/lib/validation/jquery.validate.js"></script>
<script src="/public/js/jquery.form.js"></script>
<script src="/public/lib/validation/localization/messages_<?=$tlang?>.js" type="text/javascript"></script>
<script src="/public/lib/validation/localization/messages_<?=$tlang?>.min.js" type="text/javascript"></script>

<script>
jQuery(function () {
  jQuery("#colorId").multiSelect();
});
jQuery(function () {
  jQuery("#sizeId").multiSelect();
});
//jQuery(function () {
//  jQuery("#tagId").multiSelect();
//});
        $(".nav>li>a.categories<?=$theParentId?>").addClass("active");
        $(".sidebar-dropdown.two").addClass("active");
        $(".sidebar-wrapper .sidebar-menu ul li a.categories<?=$theParentId?>").addClass("active");
        $(".sidebar-dropdown.two .sidebar-submenu").fadeIn();
                
                
$("#tagsId").on("change", function(){
    var tagId = $(this).val();
    
    $.post("/admin/ajax/getTagsData", { tagId: tagId }, function( data ) {
        var obj = JSON.parse(data);
        $(".getTagData").empty();
        var options = "";
        $.each( obj, function( key, value ) {
               options +='<option value="'+value.taId+'">'+value.theTitle+'</option>';
              });
        $(".getTagData").append('<h3><?=$this->Get_Lang->gl("select_tags",$adminLang)?> </h3>'+
                '<select class="form-control" id="tagId" name="tagId[]"  multiple="multiple">'+
                options+'</select><script>jQuery(function (){jQuery("#tagId").multiSelect();});<\/script>');
                
    });
});               
        <?php foreach ($databaseLang as $key => $value) { ?>        
                CKEDITOR.replace("theText<?=$value->laId?>", {
                        height: '280px',
//                        skin: 'bootstrapck',
                        removePlugins: 'elementspath',
                        resize_enabled: false,
                        
                        extraPlugins : 'uploadimage',
                        filebrowserBrowseUrl : '/public/lib/kcfinder-3.12/browse.php',
                        filebrowserImageBrowseUrl : '/public/lib/kcfinder-3.12/browse.php?type=Images',
                        filebrowserUploadUrl : '/public/lib/kcfinder-3.12/upload.php',
                        filebrowserImageUploadUrl : '/public/lib/kcfinder-3.12/upload.php?type=Images',
                        filebrowserUploadMethod : 'form'
                    });
        <?php } ?>
        <?php foreach ($databaseLang as $key => $value) { ?>        
                CKEDITOR.replace("text<?=$value->laId?>", {
                        height: '280px',
//                        skin: 'bootstrapck',
                        removePlugins: 'elementspath',
                        resize_enabled: false,
                        
                        extraPlugins : 'uploadimage',
                        filebrowserBrowseUrl : '/public/lib/kcfinder-3.12/browse.php',
                        filebrowserImageBrowseUrl : '/public/lib/kcfinder-3.12/browse.php?type=Images',
                        filebrowserUploadUrl : '/public/lib/kcfinder-3.12/upload.php',
                        filebrowserImageUploadUrl : '/public/lib/kcfinder-3.12/upload.php?type=Images',
                        filebrowserUploadMethod : 'form'
                    });
        <?php } ?>
                    
                    $(".form").each(function () {
                        $(this).validate({
                            highlight: function (element) {
                                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                            },
                            unhighlight: function (element) {
                                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                            },
                            ignore: [],
                            rules: {
                                'thePrice': {required: true, number : true},                                  
                                'colorId': {required: true, number : true},                                  
                                'sizeId': {required: true, number : true},                                  
                                'quantity': {required: true, number : true},                                  
                                <?php foreach ($databaseLang as $key => $value) { ?>
                                'theText<?=$value->laId?>': {
                                    required: function () {
                                        CKEDITOR.instances.theText<?=$value->laId?>.updateElement();
                                    }
                                },
                                <?php } ?>
                                <?php foreach ($databaseLang as $key => $value) { ?>
                                'text<?=$value->laId?>': {
                                    required: function () {
                                        CKEDITOR.instances.text<?=$value->laId?>.updateElement();
                                    }
                                },
                                <?php } ?>
                                
                            },
                            errorPlacement: function (error, element) {
                                error.insertAfter(element);
                            }
                        });
                    });


                    $(".form").ajaxForm({
                        beforeSubmit: function (arr, $form, options) {
                            $activeForm = $form;
                            if (!$form.valid())
                                return false;
                        },
                        complete: function (xhr) {
                            var response = xhr.responseText;
                            if (response == 1) {

                                
                                $("#saveBtn").prop('disabled', true);
                                $('#thePrice').val('');
                                $('#sale').val('');
                                $('#quantity').val('');
                                <?php foreach ($databaseLang as $key => $value) { ?>
                                CKEDITOR.instances.theText<?=$value->laId?>.setData('');
                                <?php } ?>
                                <?php foreach ($databaseLang as $key => $value) { ?>
                                CKEDITOR.instances.text<?=$value->laId?>.setData('');
                                <?php } ?>
                                setTimeout(function () {
                                    $("#saveBtn").prop('disabled', false);
                                }, 3000);

                                common.showAlert("<?=$this->Get_Lang->gl('job_done_successfully',$adminLang)?>", "success", 3);
                                window.open("/admin/category_details/<?=$caId?>", "_self");
                            } else {
                                common.showAlert("<?=$this->Get_Lang->gl('error',$adminLang)?>", "success", 3);
                            }
                        }
                    });



                    function fillTheForm(frm, data) {
                        $.each(data, function (key, value) {
                            var $ctrl = $('[name=' + key + ']', frm);
                            if ($('[name=' + key + ']').length > 0){
                            switch ($ctrl.attr("type"))
                            {
                                case "text" :
                                case "hidden":
                                    $ctrl.val(value)
                                    break;
                                case "radio" :
                                case "checkbox":
                                    $ctrl.each(function () {
                                        if ($(this).attr('value') == value) {
                                            $(this).attr("checked", value);
                                        }
                                    });
                                    break;
                                default:
                                    if (!$ctrl.length)
                                    {
                                        var array = $.map(value, function (v, i) {
                                            return [v];
                                        });
                                        if (array.length > $("[name='" + key + "[]']", frm).length)
                                        {
                                            addCount = array.length - $("[name='" + key + "[]']", frm).length;
                                            for (var i = 0; i < addCount; i++) {
                                                $("[name='" + key + "[]']", frm).parents(".exercise-type-div").find(".addNew").trigger("click");
                                            }
                                        }
                                        $("[name='" + key + "[]']", frm).each(function (index) {
                                            $(this).val(array[index]);
                                        });
                                    } else {
                                        $ctrl.val(value);
                                    }
                            }
                            $ctrl.change();
                        }
                        });
                    }
<?php if ($id && $id != 0) { ?>
                        var Vdata =<?= $values ?>;
                        fillTheForm($('.form'), Vdata);
<?php } ?>

</script>
