@{section imgCropHeader}

<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>

<style media="screen" type="text/css">
    .ddd{background-color: aquamarine; display: inline-block;width: 50px;height: 30px;margin: 10px;;}
    .imgholder{width: 90%;padding-top: @{!model.padding}%;margin: 0 auto;background-color: blue;background-position: center;background-repeat: no-repeat;background-size: cover;}
    .imgholder>i{color:rgb(240, 50, 50);position: absolute;top:0;left:5%;cursor:pointer;font-size:30px;}
    .imgplus{width: 90%;padding-top: 45%;margin: 0 auto;background-color:rgb(182, 182, 182);}
    .imgplus::before{content:"";position: absolute;top:25%;left:37.5%;cursor:pointer;border:2px solid rgb(51, 51, 51);width:25%;border-radius: 50%;height: 50%;}
    .imgplus::after{content:"+";padding-left: 30%;font-size: 65px;text-align: center;color:rgb(51, 51, 51);position: absolute;top:0;left:5%;cursor:pointer;width:30%;height: 30%;}
    #shower{width:@{!model.width}px;height:@{!model.height}px;background:#fff;border-radius:5px;position:relative;font-size: 35px;}
    #shower>i{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;color:rgb(93, 91, 93);visibility:visible;}
    #shower>b{position: absolute;top:0;right:0;cursor:pointer;color:green;visibility:hidden}
    #shower>#cancleax{color:rgb(224, 74, 74);visibility:hidden;position: absolute;top:18px;left:18px;}
   .croper_picpro {width:@{!model.width}px;height:@{!model.height}px;background-color:rgb(255, 255, 255);border:2px dashed #aaa;} 
   


</style> 
@{end}



@{if model.insert}
<div class="Hrow Hpadd-5per" >
    <form id="frmAX" name="frmAX"   method="post" enctype="multipart/form-data" @{if model.ax.length>=model.limitPic }style="display:none"@{fi}> 
        <input type="hidden" id="id"  name="id" value="@{!model.id}" />
        <input type="hidden" id="regid"  name="regid" value="@{!model.regid}" />
        <input type="hidden" id="caption"  name="caption" value="@{!model.caption}" />
        <div id="shower" >
                <div class="croper_picpro" id="croper_picpro"><img src="" id="image" alt="" style=" display: block; max-width: 100%;"></div>
                <b id="upaxOne" class="fas fa-check-circle"></b>
                <input type="file" id="upload" class="upload"  name="ax" value="" style="display:none;"/>
                <i id="insax" class="fas fas fa-plus-circle inspic"></i>
                <i id="cancleax" class="fas fas fa-times canclepic"></i>
        </div>
    </form>
</div>
@{fi}

<div class="Hrow " id="showlist">
    @{foreach x in model.ax}
    <div class="Hcol-xlg-3 Hcol-lg-3 Hcol-xmd-4 Hcol-md-4 Hcol-xsm-6 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 " >
            <div class="imgholder" style="background-image: url(@{!model.address}@{!model.id}_@{!x}.jpg);">
                  @{if model.delete}<i class="fas fa-times-circle remove-img" data-id="@{!model.id}" data-num="@{!x}"></i>@{fi}
            </div>
    </div>
    @{end}
</div> 


@{section imgCropFooter}
<script type="text/javascript">
    var cropper;
    var uprate=@{!model.uprate};
    var downrate=@{!model.downrate};
    var width_out=@{!model.width_out};
    var height_out=@{!model.height_out};
    var myurl_ins=@{!model.myurl_ins};
    var myurl_del=@{!model.myurl_del};
    function rescrop(url){
            cropper.replace(url);
        }
     
    var cuntpic=$("#showlist").children().length;
    
        
    
    
    
    
    function show_imgcrop(result){
        switch(result.status){
          case 100:
        break;
       case 200:
       
       cuntpic++;
      
       @{if model.update}
                $("#showlist").html(""); 
                cuntpic=0;
            @{fi}
       if(cuntpic>=@{!model.limitPic}){
               document.getElementById("frmAX").style.display="none";
       }
              var arrayBufferView = new Uint8Array(result.data.data);
              let blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
              var urlCreator = window.URL || window.webkitURL;
              var imageUrl = urlCreator.createObjectURL( blob );
              //$("#shower").children().eq(0).children().eq(0).children().eq(1).attr("src",imageUrl);

            var pickin='<div class="Hcol-xlg-3 Hcol-lg-3 Hcol-xmd-3 Hcol-md-6 Hcol-xsm-6 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12"><div class="imgholder" style="background-image: url('+imageUrl+');">';
            @{if model.delete}
                    pickin+='<i class="fas fa-times-circle remove-img" data-id="'+result.id+'" data-num="'+result.num+'"></i>';
            @{fi}
            pickin+='</div></div>';
    
    
    
            
    
                
            $("#showlist").append(pickin); 
            $("#upax").css("visibility","hidden");
            $("#upaxOne").css("visibility","hidden");
            $("#cancleax").css("visibility","hidden");
            $(".inspic").each(function(){
    
              $(this).css("visibility","visible");
            });
            $("#upax").css("cursor","default");
            $("#upaxOne").css("cursor","default");
            cropper.destroy();
            $("#croper_picpro img").attr("src","");
            $("#croper_picpro img").css("background-color","blue");
    //window.location.assign("/melk/new/case");
            //cropper.destroy();
        break;
        case 202:
        break;
        case 202:
        case 203:
        break;
        case 210:
        case 211:
        break;
        case 500:
        break;
        case 505:
        case 506:
        case 507:
        
        break;
        case 700:
        break;
      }
     }
    
    
    
    
    
    
    
    
    
    
    
    
    
    $(document).ready(function(){
        @{if model.delete}
        $(document).on("click", "i.remove-img" ,async function(){
            let x=confirm("آیا اطمینان دارید که می خواهید این تصویر را حذف کنید؟\nدر صورت تایید امکان بازیابی تصویر وجود نخواهد داشت");
            var query="id="+$(this).attr("data-id")+"&num="+$(this).attr("data-num");
            if(x){
                  var resdel=await jqajax(myurl_del,query,"get","loader");
                  if(resdel.status==200){
                          $(this).parent().parent().remove();
                          cuntpic--;
                          if(cuntpic<=@{!model.limitPic}){
                          document.getElementById("frmAX").style.display="block";
                           }
                  }else{
                          alert("مشکلی در حذف تصاویر بوجود آمده است");
                  }
           }
    
        });
        
        @{fi}
    });
    </script>
    @{end}


<!--
/*
{'width':400,'width_out':800,'height':200,'height_out':400,'uprate':4,'downrate':2,'inset':true,'delete':true,"myurl_ins":"'/api/melk/pictuer/update'",'myurl_del':"'/api/melk/pictuer/delete'"
,'address':"../../../../images/melks/thumb_bahar",'padding':45,"limitPic":8,"caption":"",'ax':model.list[0].ax,'id':model.list[0]._id
,'regid':model.list[0]._registerarid
}*/-->