
 
<div class="Hrow Hpadd-2per">
	
    <div  class="Hpadd-15 Hbg-white Hround-10 Hform-med" style="max-width:700px;" name="frm" action="" method="post" enctype="text/plain" >
        @{if model.name || model.fam}
            <h3 clas="Hrow" style="padding-right:2%">ثبت | ویرایش  &nbsp; &nbsp;شبکه های ارتباطی @{if model.name}@{!model.name}@{fi}&nbsp; @{if model.fam}@{!model.fam}@{fi}</h3>     
        @{else}
            <h3 clas="Hrow" style="padding-right:2%">ثبت | ویرایش  &nbsp; &nbsp;شبکه های ارتباطی  @{!model.username}</h3>
        @{fi}
         <div class="Hrow Hpadd-1per">
                 <label class="Hrow HpaddR-10 HpaddB-10" data-color="#424750">لینک ها :</label>
                 <button class="trans0_25 Hbtn Hbtn-skyblue addFirst" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fa fa-plus" style="position:relative;top:1px;cursor:pointer"></b></button>
                 <div class="Hrow HpaddT-10 HpaddB-10 HmarB-20" id="addslist">
                     @{if model.media} 
                     @{foreach m in model.media}
                     <div class="Hrow usermedia">
                        <div class="user-view-media">
                            <div class="Hcol-xlg-1 Hcol-lg-1 Hcol-xmd-1 Hcol-md-1 Hcol-xsm-1 Hcol-sm-2 Hcol-xs-4 Hcol-xss-4 Hpadd-3" >
                                <button class="Hround-50per trans0_25 Hbtn Hbtn-skyblue addAfter" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fa fa-plus" style="position:relative;top:1px;cursor:pointer"></b></button>
                            </div>
                            <div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-10 Hcol-xs-8 Hcol-xss-8 Hpadd-3 Htxt-left" >
                                <button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button>
                                <button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button>
                            </div>
                            <div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-12 Hcol-xs-12 Hcol-xss-12" >
                            </div>
                            <div class="Hcol-xlg-9 Hcol-lg-8 Hcol-xmd-8 Hcol-md-8 Hcol-xsm-8 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12  Hpadd-7 data Htxt-right" title="@{!m.link}">
                                <b class="@{!m.icon}"></b> <span class="title HpaddR-5 Hfloat-R">@{!m.title}</span> : <span class="link"> @{!m.link}</span>
                            </div>
                            <div class="Hcol-xlg-2 Hcol-lg-3 Hcol-xmd-3 Hcol-md-3 Hcol-xsm-3 Hhide-sm Hhide-xs Hhide-xss Hpadd-3 Htxt-left" >
                                <button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button>
                                <button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button>
                            </div>
                        </div>

                        <div class="Hrow Hpadd-5 usermedia-form" >
                            <div class="Hrow Htxt-center Hpadd-3 icon">
                                <label class="Hrow Htxt-right" data-color="#424750">ایکن:</label>
                                <b class="@{!m.icon}"></b>
                            </div>
                            <div class="Hrow Htxt-center Hpadd-3">
                                <label class="Hrow Htxt-right" data-color="#424750">عنوان :</label>
                                <input class="Hrow Htxt-center" name="title" type="text" value="@{!m.title}"/>
                            </div>
                            <div class="Hrow Htxt-center Hpadd-3">
                                <label class="Hrow Htxt-right" data-color="#424750">لینک شبکه ارتباطی :</label>
                                <input class="Hrow Htxt-center" name="link" type="text" value="@{!m.link}"/>
                            </div>
                            <div class="hrow Hpadd-3" >
                                <button class="trans0_25 Hbtn Hbtn-lightGreen upsertme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	far fa-check-circle" style="position:relative;top:1px;cursor:pointer"></b> اعمال تغییرات</button>
                                <button class="trans0_25 Hbtn Hbtn-redwhite cancleme Hfloat-L" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="far fa-times-circle" style="position:relative;top:1px;cursor:pointer">انصراف</b></button>
                            </div>
                        </div>
                        <div class="deletedBox">
                            <small class="Hrow" style="color:#f33">حذف شده از شبک های ارتباطی</small>
                            <button class="trans0_25 Hround-5 Hbtn Hbtn-white backme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fas fa-undo" style="position:relative;top:1px;cursor:pointer"></b> بازگردانی </button>
                        </div>
                     </div>
                     
                    @{end}
                    @{fi}
    
                 </div>
                <button style="display:none" type="button" id="mdad2" data-selector="#modal_icon" data-target="Hmodal" data-action="">  </button>
                <button class="Hrow trans0_25 Hbtn Hbtn-lightGreen Hfloat-L"  type="button" id="updmedia"   style="font-size:14px;">ذخیره تغییرات</button>
                 <small data-color="#f55" class="Hrow">* جهت اعمال تغییرات در شبکه های ارتباطی لازم است دکمه ی بالا کلیک شود </small>
         </div> 
         
    </div>
    
    
    
    </div>
     
    <div class="Hmodal" id="modal_icon"> 
      <div class="Hmodal-sm Hcards" style="background:#fff;border-radius:5px;">
        <div class="Hcards-header">
          <div class="close"  style="background:#ff3333;border-radius:4px;"></div>
        </div>
        <div class="Hcards-content Hpadd-10">
            <input class="Hrow" style="border:1px solid #ddd" type="text" id="iconSearch" placeholder="جستجوی آیکن ..."/>
            <div class="Hrow HmarT-10 HmarB-10 listShow-N3" id="iconsBox">
                <div><b class="fab fa-instagram"></b> <span class="Hfloat-L">اینستاگرام - instagram</span></div>
                <div><b class="fab fa-telegram-plane"></b> <span class="Hfloat-L">تلگرام - telegram</span></div>
                <div><b class="fab fa-telegram"></b> <span class="Hfloat-L">تلگرام - telegram</span></div>
                <div><b class="fab fa-whatsapp"></b> <span class="Hfloat-L">واتس آپ - whatsapp</span></div>
                <div><b class="fab fa-whatsapp-square"></b> <span class="Hfloat-L">واتس آپ  - whatsapp</span></div>
                <div><b class="fab fa-skype"></b> <span class="Hfloat-L">اسکایپ - skype</span></div>
                <div><b class="fab fa-youtube"></b> <span class="Hfloat-L">یوتوب - youtube</span></div>
                <div><b class="far fa-envelope-open"></b> <span class="Hfloat-L">ایمیل - email</span></div>
                <div><b class="fab fa-linkedin"></b> <span class="Hfloat-L">لینکدین - linkedin</span></div>
                <div><b class="fab fa-linkedin-in"></b> <span class="Hfloat-L">لینکدین - linkedin</span></div>
                <div><b class="fab fa-github"></b> <span class="Hfloat-L">گیتهاب - github</span></div>
                <div><b class="fas fa-globe"></b> <span class="Hfloat-L">وبسایت - website</span></div>
                <div><b class="fas fa-blog"></b> <span class="Hfloat-L">بلاگ - blog</span></div>
                <div><b class="fab fa-facebook-f"></b> <span class="Hfloat-L">فیسبوک - facebook</span></div>
                <div><b class="fab fa-facebook"></b> <span class="Hfloat-L">فیسبوک - facebook</span></div>
                <div><b class="fab fa-facebook-square"></b> <span class="Hfloat-L">فیسبوک - facebook</span></div>
                <div><b class="fab fa-twitter"></b> <span class="Hfloat-L">توییتر - twitter</span></div>
                <div><b class="fab fa-discord"></b> <span class="Hfloat-L">دیسکورد - discord</span></div>
                <div><b class="fas fa-link"></b> <span class="Hfloat-L">سایر - link</span>   </div>             
            </div>
            <div id="selectedIcon" class="HmarT-15 HmarB-15" >
                <h3 data-color="#444">آیکن انتخاب شده</h3>
                <div class="Hpadd-10" data-bgcolor="#ccc"></div>
            </div>
            <button class="Hrow trans0_25 Hbtn Hbtn-yellow2 Hfloat-L"  type="button" id="updicon"   style="font-size:14px;">تغییر آیکن</button>
            <small data-color="#f33">برای اتمام مراحل انتخاب ایکن باید روی دکمه بالا کلیک کنید</small>
        </div>
        
      </div>
    </div>
    
    
    @{section footer}
      <script type="text/javascript">
    
    
    
    function show_res2(result){
        switch(result.status){
         case 200:
                $("#modal_icon .close").trigger("click");
                document.getElementById("frm").reset();
                Hnotification({status:"success",Cstyle:[{color:"#000000"}],Ctext:result.data});
          break;
            default:
                Hnotification({status:"warning",Cstyle:[{color:"#000000"}],Ctext:result.data});
          break;
        }
    }
 
    var opensubmit=[0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,1];
     
    $(document).ready(function(){
    
        // need to change 
        $(document).on("click",".addAfter",function(){
            var obj='<div class="Hrow usermedia"><div class="user-view-media"><div class="Hcol-xlg-1 Hcol-lg-1 Hcol-xmd-1 Hcol-md-1 Hcol-xsm-1 Hcol-sm-2 Hcol-xs-4 Hcol-xss-4 Hpadd-3" ><button class="Hround-50per trans0_25 Hbtn Hbtn-skyblue addAfter" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fa fa-plus" style="position:relative;top:1px;cursor:pointer"></b></button></div><div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-10 Hcol-xs-8 Hcol-xss-8 Hpadd-3 Htxt-left" ><button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button><button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button></div><div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-12 Hcol-xs-12 Hcol-xss-12" ></div><div class="Hcol-xlg-9 Hcol-lg-8 Hcol-xmd-8 Hcol-md-8 Hcol-xsm-8 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12  Hpadd-7 data Htxt-right" title=""><b class="fas fa-link"></b> <span class="title HpaddR-5 Hfloat-R">عنوان</span> : <span class="link">آدرس شما</span></div><div class="Hcol-xlg-2 Hcol-lg-3 Hcol-xmd-3 Hcol-md-3 Hcol-xsm-3 Hhide-sm Hhide-xs Hhide-xss Hpadd-3 Htxt-left" ><button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button><button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button></div></div><div class="Hrow Hpadd-5 usermedia-form" ><div class="Hrow Htxt-center Hpadd-3 icon"><label class="Hrow Htxt-right" data-color="#424750">ایکن:</label><b class="fas fa-link"></b></div><div class="Hrow Htxt-center Hpadd-3"><label class="Hrow Htxt-right" data-color="#424750">عنوان :</label><input class="Hrow Htxt-center" name="title" type="text" value=""/></div><div class="Hrow Htxt-center Hpadd-3"><label class="Hrow Htxt-right" data-color="#424750">لینک شبکه ارتباطی :</label><input class="Hrow Htxt-center" name="link" type="text" value=""/></div><div class="hrow Hpadd-3" ><button class="trans0_25 Hbtn Hbtn-lightGreen upsertme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	far fa-check-circle" style="position:relative;top:1px;cursor:pointer"></b> اعمال تغییرات</button><button class="trans0_25 Hbtn Hbtn-redwhite cancleme Hfloat-L" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="far fa-times-circle" style="position:relative;top:1px;cursor:pointer">انصراف</b></button></div></div><div class="deletedBox"><small class="Hrow" style="color:#f33">حذف شده از شبک های ارتباطی</small><button class="trans0_25 Hround-5 Hbtn Hbtn-white backme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fas fa-undo" style="position:relative;top:1px;cursor:pointer"></b> بازگردانی </button></div></div>';
            $(this).parent().parent().parent().after(obj);

        });
        // need to change 
        $(document).on("click",".addFirst",function(){
            var obj='<div class="Hrow usermedia"><div class="user-view-media"><div class="Hcol-xlg-1 Hcol-lg-1 Hcol-xmd-1 Hcol-md-1 Hcol-xsm-1 Hcol-sm-2 Hcol-xs-4 Hcol-xss-4 Hpadd-3" ><button class="Hround-50per trans0_25 Hbtn Hbtn-skyblue addAfter" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fa fa-plus" style="position:relative;top:1px;cursor:pointer"></b></button></div><div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-10 Hcol-xs-8 Hcol-xss-8 Hpadd-3 Htxt-left" ><button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button><button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button></div><div class="Hhide-xlg Hhide-lg Hhide-xmd Hhide-md Hhide-xsm Hcol-sm-12 Hcol-xs-12 Hcol-xss-12" ></div><div class="Hcol-xlg-9 Hcol-lg-8 Hcol-xmd-8 Hcol-md-8 Hcol-xsm-8 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12  Hpadd-7 data Htxt-right" title=""><b class="fas fa-link"></b> <span class="title HpaddR-5 Hfloat-R">عنوان</span> : <span class="link">آدرس شما</span></div><div class="Hcol-xlg-2 Hcol-lg-3 Hcol-xmd-3 Hcol-md-3 Hcol-xsm-3 Hhide-sm Hhide-xs Hhide-xss Hpadd-3 Htxt-left" ><button class="trans0_25 Hround-50per Hbtn Hbtn-white deletethis HmarL-10" style="padding:5px 15px;color:red;" type="button" style="font-size:14px;"><b class=" 	far fa-trash-alt" style="position:relative;top:1px;cursor:pointer"></b></button><button class="trans0_25 Hround-50per Hbtn Hbtn-white editthis" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	fas fa-pencil-alt" style="position:relative;top:1px;cursor:pointer"></b></button></div></div><div class="Hrow Hpadd-5 usermedia-form" ><div class="Hrow Htxt-center Hpadd-3 icon"><label class="Hrow Htxt-right" data-color="#424750">ایکن:</label><b class="fas fa-link"></b></div><div class="Hrow Htxt-center Hpadd-3"><label class="Hrow Htxt-right" data-color="#424750">عنوان :</label><input class="Hrow Htxt-center" name="title" type="text" value=""/></div><div class="Hrow Htxt-center Hpadd-3"><label class="Hrow Htxt-right" data-color="#424750">لینک شبکه ارتباطی :</label><input class="Hrow Htxt-center" name="link" type="text" value=""/></div><div class="hrow Hpadd-3" ><button class="trans0_25 Hbtn Hbtn-lightGreen upsertme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class=" 	far fa-check-circle" style="position:relative;top:1px;cursor:pointer"></b> اعمال تغییرات</button><button class="trans0_25 Hbtn Hbtn-redwhite cancleme Hfloat-L" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="far fa-times-circle" style="position:relative;top:1px;cursor:pointer">انصراف</b></button></div></div><div class="deletedBox"><small class="Hrow" style="color:#f33">حذف شده از شبک های ارتباطی</small><button class="trans0_25 Hround-5 Hbtn Hbtn-white backme" style="padding:5px 15px;" type="button" style="font-size:14px;"><b class="fas fa-undo" style="position:relative;top:1px;cursor:pointer"></b> بازگردانی </button></div></div>';
            $("#addslist").prepend(obj);
        });
     












        $(document).on("click",".deletethis",function(){
            var obj=$(this).parent().parent().parent();
            (!obj.hasClass("deactive"))?obj.addClass("deactive"):"";
        });
        
        $(document).on("click",".backme",function(){
            $(this).parent().parent().removeClass("deactive");
        });
        

        $(document).on("click",".usermedia .icon b",function(){
            $("#activeIconInput").attr("id","");
            $("#iconSearch").val("");
            $("#iconSearch").trigger('keyup');
            $(this).attr("id","activeIconInput");
            var cls=$(this).attr("class");
            cls = cls.split(/\s+/);
            var a="";
            $.each(cls, function(index, value){
                a=a+"."+value;
            });
            $("#iconsBox div b"+a).parent().trigger("click");
            $("#mdad2").trigger("click");
        });

        
        $("#iconSearch").keyup(function(){
            var val=$(this).val();
            val=val.replaceAll(" ","");
            $("#iconsBox>div").each(function(){
                var txt=$(this).text();
                txt=txt.replaceAll(" ",""); 
                var regexp = new RegExp(val, "gi");
                var result = txt.search(regexp);
                (result>=0)?$(this).css("display","block"):$(this).css("display","none");
            });
        });
        
        $("#iconsBox div").click(function(){
            $("#selectedIcon> div").html($(this).html());
        });
        
        $("#updicon").click(function(){
            var cls=$("#selectedIcon>div>b").attr("class");
            $("#activeIconInput").attr("class",cls);
            $("#modal_icon .close").trigger("click");
        });


        $(document).on("click",".usermedia .editthis",function(){
            var obj=$(this).parent().parent().next();
            if(obj.hasClass("open")){
                obj.removeClass("open");
            }else{
                var obj2=$(this).parent().prev();
                var icon=obj2.children().eq(0).attr("class");
                var title=obj2.children().eq(1).text();
                var link=obj2.children().eq(2).text();
                $(this).parent().parent().next().find(".icon").eq(0).children().filter("b").eq(0).attr("class",icon);
                $(this).parent().parent().next().find("div>input[name='link']").eq(0).val(link);
                $(this).parent().parent().next().find("div>input[name='title']").eq(0).val(title);
                obj.addClass("open");
            }
        });

        $(document).on("click",".usermedia .cancleme",function(){
            var obj=$(this).parent().parent().removeClass("open");
        });


        
        $(document).on("click",".usermedia .upsertme",function(){
            var obj=$(this).parent().parent();
            var icon=obj.find(".icon").eq(0).children().filter("b").eq(0).attr("class");
            var link=obj.find("div>input[name='link']").eq(0).val();
            var title=obj.find("div>input[name='title']").eq(0).val();
            if(icon!="" && link!="" && title!=""){
                obj.prev().children().filter('.data').eq(0).children().eq(0).attr("class",icon);
                obj.prev().children().filter('.data').eq(0).children().eq(1).text(title);
                obj.prev().children().filter('.data').eq(0).children().eq(2).text(link);
                obj.prev().children().filter('.data').eq(0).attr("title",link);
                $(this).next().trigger("click");
            }else{
                Hnotification({status:"warning",Cstyle:[{color:"#000000"}],Ctext:"لطفا اطلاعات را کامل پر کنید !"});
            }
        });
        
    });
    
    </script>
    
    
    @{end}