@{section header}
@{end}


<div class="Hrow HmarT-80 ">
        <div class="Hcontainer Hpadd-20 Hbg-white  Hround-5 shadowFaid-light " style="max-width:700px;">
                <select class="Hcontainer Hbg-white Htxt-center Hround-5 HmarB-10" name="selectLang" id="selectLang"  style="box-shadow:0px 0px 5px #eee;border:1px solid var(--white-v3)" >
                        <option value="fa" @{if repository.plang=='fa'}selected@{fi}>persian (فارسی)</option>
                        <option value="en" @{if repository.plang=='en'}selected@{fi}>english (انگلیسی)</option>
                        <option value="ar" @{if repository.plang=='ar'}selected@{fi}>arabic (عربی)</option>
                        <option value="tr" @{if repository.plang=='tr'}selected@{fi}>turkish (ترکی)</option>
                    </select>
                <button class="Hrow HpaddTB-10 Hbtn Hbtn-blue-v3 trans0_25 Hround-5" id="md1" data-selector="#mod1" data-target="Hmodal">افزود بنر</button>
                <div class="Hrow HpaddTB-10">
                        @{foreach b of model}
                                <div class="Hcol-xlg-6 Hcol-lg-6 Hcol-xmd-6 Hcol-md-6 Hcol-xsm-6 Hcol-sm-6 Hcol-xs-12 Hcol-xss-12 Hpadd-10">
                                        <div class="Hrow HbannerBox shadowFaid">
                                                <a href="@{!b.value}"  style="background-image: url('/images/banners/mb_@{b.key}.jpg');"></a>
                                                <span class="removeMe  Htxt-center fas fa-times" index="@{b.key}"></span>
                                        </div>
                                </div>
                        @{end}
                </div>
        </div>
</div>

<div class="Hmodal" id="mod1" > 
        <div class="Hmodal-md Hcards HpaddTB-15 HpaddLR-20" style="border-radius:5px;background: #fff;" >
                <div class="Hcards_header">
                        <div class="close" style="background:#ff3333;border-radius:4px;"></div>
                </div>
                <div class="Hcards-content">
                        <form name="frm" id="frm" enctype="multipart/form-data">
                        <div class="Hcol-xlg-12 Hcol-lg-12 Hcol-xmd-12 Hcol-md-12 Hcol-xsm-12 Hcol-sm-12 Hcol-xs-12 Hcol-xss-12 Image-upload HmarT-10 HmarB-20">
                                <div class="img-box" style="padding-top:35%;">
                                        <input type="file" class="upload"  name="ax" value="" style="display:none;"/>
                                        <div class="showax" >
                                                <span>
                                                <i class="fas fa-plus"></i>
                                                افزودن عکس
                                                </span>
                                        </div>
                                        <b class="fas fa-times-circle remove-img show-btn trans0_25"></b>
                                </div>
                        </div>
                        <input type="text" name="bannerUrl" class="Hcontainer Hcontainer-90 HpaddLR-10 HpaddTB-3 Hcenter Hltr Htxt-center" style="border:1px solid #ddd" placeholder="http://..."/>
                        <input class="Hcontainer Hcontainer-90 Hround-5 HmarT-50 Hbtn Hbtn-green-v3 Hcenter trans0_25" id="updBanner" style="padding:10px 70px;" type="button" value="افزودن بنر"/>
                        </form>
                </div>
        </div>
</div>

@{section footer}
<script src="../../../script/upload_viewer2.js"></script>

<script>
        var lang=`@{repository.lang}`;

        function show_res2(result){
                switch(result.status){
                case 200:
                        window.location.reload(true);
                        Hnotification({status:"success",Cstyle:[{color:"#ffffff"}],Ctext:result.data});
                        break;
                default:
                        Hnotification({status:"warning",Cstyle:[{color:"#000000"}],Ctext:result.data});
                break;
                }
        }

        

   
        $(document).on("click",".removeField",function(){
                $(this).parent().remove();
        });

        $("#updBanner").click(async function(){
                var formdata=new FormData(frm);
                var result=await jqajax(`/updBannerSlider/${$("#selectLang").val()}`,formdata,"post","loader");
                show_res2(result);
        });

        $(".removeMe").click(async function(){
                var result=await jqajax(`/delBannerSlider/${$("#selectLang").val()}`,`index=${$(this).attr("index")}`,"get","loader");
                show_res2(result);
        });

        $(".remove-img").click(function(){
            $(this).removeClass("show-btn");
            $(this).addClass("hide-btn");
            $(this).prev().prev().val(undefined);
            $(this).prev().css({"background-image":"url('')"});
            $(this).prev().children().eq(0).css("color","#aaa");
        });

        $("#selectLang").change(function(){
            window.location.assign("/admin/bannerSlider/"+$(this).val());
        });
        $(".remove-img").trigger("click");
    
</script>

@{end}


<!--



-->