@{section header}
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"></script> -->
<title>مونگو دی بی - بروزرسانی</title>
<style>
    .listShow-N2 ul{list-style-type:none;padding-left:45px;display:none;}
    .listShow-N2 table{border:none;margin-left:45px;}
    .listShow-N2 table tr:nth-child(odd){background-color:#ccc;}
    .listShow-N2 table tr:nth-child(even){background-color:#ddd;}
    .listShow-N2 table td{padding:0 45px 0 5px;margin:0px;}
</style>
@{end}
<div class="Hrow">
	<div class="Hcontainer Hcontainer-1200 Hpadd-2per">
        <h2>مونگو دی بی - بروزرسانی در مجموعه  &nbsp; @{!model.collection} - موضوع شماره @{!model.data[0]._id}</h2>
<div id="list" class="listShow-N2 Hltr">
        <form id="delfrm" name="delfrm" action="" method="post" enctype="multipart/form-data" >
<!--
            <input type="hidden" name="collection" value="@{!model.collection}"/>
              <input type="hidden" name="id"  value="@{!model.data[0]._id}"/>
-->
        <div class="Hrow Hpadd-10 Hltr"  >
       <b style="padding-left:10px;" id="id" class="name">_id : @{!model.data[0]._id}</b> 
       <table>@{repository.i=0}
        @{foreach k in model.data[0]}
            @{if k.key!="_id"}
            @{repository.sel1=""}
            @{repository.sel2=""}
            @{repository.sel3=""}
            @{repository.sel4=""}
            @{repository.sel5=""}
            @{repository.k=k.value}
            @{if typeof k.value =="string"}@{repository.sel1="selected"}@{fi}
            @{if !isNaN(k.value*1)}@{repository.sel2="selected"}@{fi}
            @{if typeof k.value =="boolean"}@{repository.sel3="selected"}@{fi}
            @{if typeof k.value =="object"}
                @{repository.k=""}
                @{if k.value =="[object Object]"}
                    @{repository.sel5="selected"}
                    @{foreach l in k.value}
                        @{if repository.k!=""}@{repository.k+=","}@{fi}
                        @{repository.k+=l.key+':\"'+l.value+'\"'}
                    @{end}
                @{else} 
                    @{repository.sel5="selected"}
                    @{foreach l in k.value}
                        @{if repository.k!=""}@{repository.k+=","}@{fi}
                            @{if typeof l=="string"}
                                @{repository.k+='\"'+l+'\"'}
                            @{else}
                                @{repository.k+=l}
                            @{fi}
                    @{end}
                @{fi}
            @{fi}
            <!--JSON.stringify-->
            <tr>
                <td><input type="hidden" name="up@{++repository.i}" value=""/>
                <b  class="fas remove-feild Hbtn-mini fa-close Hbg-digired" data-color="#fff"></b>
                <input type="hidden" name="up@{++repository.i}" value="@{!k.key}"/>
                <input type="text" name="up@{++repository.i}" value="@{!k.key}"/>
                </td>
                <td><input type="text" name="up@{++repository.i}" value="@{repository.k}"/></td>
                <td>
                <select name="up@{++repository.i}">
                    <option value="string" @{!repository.sel1}>String</option>
                    
                    <option value="num"  @{!repository.sel2}>Nummber</option>
                    <option value="bool"  @{!repository.sel3}>Boolean</option>
                    <option value="array"  @{!repository.sel4}>Array</option>
                    <option value="object"  @{!repository.sel5}>Object</option>
                </select>
                </td>
            </tr>
            @{fi}
        @{end}
       
       </table>
       <table id="darj">
        </table>
       <b id="insert-jsfeild"  class="fas  Hbtn-mini fa-plus Hbg-green" data-color="#fff"></b>
      </div>
       <input type="hidden" name="count" value="@{!repository.i}"/>
       <input type="hidden" id="countlist" name="countlist" value=""/>
            <input type="submit" class="Hfloat-L Hbtn Hbtn-auto Hbtn-yellow2" value="بروز رسانی"/>

         </form>

   </div>


	</div>
</div>

@{section footer}


    <script type="text/javascript">
var cunter=@{!repository.i};
alert(cunter);
function remove_jsfeild(itm){
    document.getElementById("countlist").value=document.getElementById("countlist").value.replace("-"+itm.nextElementSibling.name.replace("up",""),"");
    itm.parentElement.parentElement.remove();
}
$(document).ready(function(){
    $(".remove-feild").click(function(){
        if($(this).attr("class")=="fas remove-feild Hbtn-mini fa-close Hbg-digired"){
            $(this).prev().val($(this).next().next().val()); 
            $(this).next().next().attr("disabled",true); 
            $(this).parent().next().children().eq(0).attr("disabled",true); 
            $(this).parent().next().next().children().eq(0).attr("disabled",true); 
           $(this).removeClass("fa-close");
            $(this).removeClass("Hbg-digired");
            $(this).addClass("fa-undo");
            $(this).addClass("Hbg-blue");
        }else{
            $(this).prev().val(""); 
            $(this).next().next().attr("disabled",false); 
            $(this).parent().next().children().eq(0).attr("disabled",false); 
            $(this).parent().next().next().children().eq(0).attr("disabled",false); 
            $(this).removeClass("fa-undo");
            $(this).removeClass("Hbg-blue");
            $(this).addClass("fa-close");
            $(this).addClass("Hbg-digired");

        }
    });

    $("#insert-jsfeild").click(function(){
        $("#countlist").val($("#countlist").val()+"-"+(cunter+1));
        alert($("#countlist").val());
    var n='<tr><td><b  class="fas  Hbtn-mini fa-close Hbg-digired" onclick="remove_jsfeild(this);" data-color="#fff"></b>'
        +'<input type="text" name="up'+ ++cunter+'" value=""/>'
        +'</td><td><input type="text" name="up'+ ++cunter+'" value=""/></td><td><select name="up'+ ++cunter+'"><option value="string" selected>String</option>'
        +'<option value="num">Nummber</option><option value="bool">Boolean</option><option value="array">Array</option><option value="object">Object</option></select></td></tr>';
   $("#darj").append(n);
    });
});
</script>
@{end}