@{title('تنظیمات عنوان')}

@{section header}
    <style>
        #brandsList span{display:inline-block;margin:5px 7px;}
    </style>
@{end}

<div class="Hrow">
    <div class="Hcontainer Hcontainer-1000 Hpadd-1per" >
        <div class="Hrow Hbg-white Hpadd-30 Hround-10" style="box-shadow:0px 0px 7px #ccc">
            <h3 class="Hrow HmarB-20" data-color="#666" style="border-bottom: 1px solid #aaa;"><b class=" HmarL-10 fas fa-circle Hcoral" style="position:relative;top:3px"></b> تنظیمات عنوان</h3>
            <div class="Hrow">
                <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-7">
                    <label>عنوان  : </label>
                    <input class="Hrow Htxt-center" style="border:1px solid #aaa;" type="text" value="" name="brandTitle" id="brandTitle"/>    
                </div>
                <div class="Hrow Hpadd-7">
                    <span class="Hbtn HpaddT-3 HpaddB-3 HpaddR-40 HpaddL-40 Hbg-lightgreen" id="addBrand" data-color="#fff">افزودن</span>
                </div>
            </div>
            <h2 class="Hrow">لیست عناوین </h2>
            <div class="Hrow" id="brandsList">
                @{foreach x in model}
                    <span class="HmarL-10 HpaddR-10 HpaddL-10 Hround-40 brands" style="border:1px solid #aaa" v="@{x}"> &nbsp; @{x} <small class="HmarR-15 far fa-trash-alt Hcursor-poi brandDel" data-color="#f00"></small></span>
                @{end}
            </div>
            <form class="Hrow" action="/api/settings/brands" method="post" enctype="multipart/form-data" class="HpaddT-3per">
                <input type="hidden" value="" name="brands" id="brands"/>
                <span class="HmarT-50 Hbtn Hbtn-yellow2 Hfloat-L trans0_25" id="changedata" data-color="#333" style="padding:10px 70px;">اعمال تغییرات</span>
                <input style="display: none;" id="sendData" type="submit" value="اعمال تغییرات"/>
            </form>
        </div>    
    </div>
</div>

<p>&nbsp;</p>


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

<script>



    $(document).on("click", ".brandDel" ,async function(){
        x=await Hconfirm({Ctext:"آیا مطمئن هستید که میخواهید این عنوان را حذف کنید ؟!"});
        if(x){
            $(this).parent().remove();
        }
    });

    $(document).ready(function(){  
        $("#addBrand").click(function(){
            var title=$("#brandTitle").val();
     
            if(title.replace(/\s/g, '')==""){
                Hnotification({status:"red",Ttext:"خطا : ",Ctext:"نام عنوان نمیتواند خالی باشد "});
                return false;
            }
            
            var obj='<span class="HpaddR-10 HpaddL-10 Hround-40 brands" style="border:1px solid #aaa"  v="'+title+'">&nbsp; '+title+'<small class="HmarR-15 far fa-trash-alt Hcursor-poi brandDel" style="color:#f00"></small></span>'; 
            $("#brandsList").append(obj);
        });

        $("#changedata").click(function(){
            var lstData=[];
            $(".brands").each(function(){
                lstData.push($(this).attr('v'));
            });
            $("#brands").val(lstData);
            $("#sendData").trigger("click");
        });
        
    });
</script>
@{end}