<?php
$this->load->view("main/admin/header");
?>
<style>
	.folder{
	   width: 130px;
	   height: 130px;
	   padding: 10px;
	   border: 1px solid #ddd;
	   float: right;
	   margin-left:15px;
	   cursor: pointer;
	   border-radius: 5px;
	   margin-bottom:10px;
}
.folder:hover{
	   border: 1px solid rgb(112,146,190);
	   color: rgb(112,146,190) !important;
}.folder i {
	   font-size: 85px;
	   text-align: center;
	   margin-right:23px;
}
.add i
{
	   margin-right:20px !important;
}
.folder span{
	   width: 100%;
	   display: block;
	   text-align: center;
	   font-size: 12px;
}
.folder img{
	   width: 100%;
	   height: 90px;
}
.tellb{
	background: url("<?php echo base_url();?>assets/main/img/tellb.jpg");
	height: 730px;
	padding: 0 !important;
	position: relative;
	border: 15px solid #000;
	border-radius: 10px;
	box-shadow:2px 2px 2px #ccc;
	margin-top:10px;
	
}
.tellb .botton-holder{
	height:  250px;
	background: #eee;
	width: 100%;
	float: left;
	overflow:overlay;
}
.tellb .tel_tb{
	height:  50px;
	 background-image:   url("<?php echo base_url();?>assets/main/img/teltextbox.png");
    background-size:     cover;                   
    background-repeat:   no-repeat;
    background-position: center center;
	width: 100%;
	float: left;
}
.botton-holder-glass{
	width: 100%;
	float: left;
	height: 400px;
}
.botton-holder-glass .button-holder{
	width: 50%;
	position: absolute;
	bottom:320px;
	left: 10px;
	font-size: 12px;
}
.botton-holder-glass .button{
	width: 100%;
	height: 30px;
	float: left;
	background: rgba(0,0,0,0.5);
	border-radius: 2px;
	text-align: center;
	color: #fff;
	line-height: 30px;
}
.half{
	width: 48% !important;
	margin-right:4%;
}
.halfn{
	width: 47% !important;
	margin-right:4%;
}
.one_third{
	width: 31% !important;
}

.last{
	margin-right:0 !important;
}
.lastt{
	margin-right:1% !important;
}
.botton-holder .buttoncreate,.botton-holder .button{
	width: 96%;
	height: 30px;
	margin-right: 2%;
	border-radius: 3px;
	background: #bbb;
	margin-top:5px;
	text-align: center;
	color: #000;
	line-height: 30px;
	float: right;
	font-size:12px;
}
.col-lg-12{
	float: left;
}
.form-control{
	padding: 0px;
}
.add_bottom , .add_form{
	   width: 100%;
	   height: 100%;
	   position: fixed;
	   top: 0;
	   left: 0;
	   z-index: 3000;
	   background: rgba(0,0,0,0.5);
}
aside{
	width: 100%;
}
.button i{
	color: #f00;
    float: left;
    line-height: 30px;
    margin-left: 5px;
    font-size: 15px;
	cursor: pointer;
}
</style>
<div class="col-lg-12">
	<div class="add_bottom" style="display: none;">
	   <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                <h4 class="modal-title">ایجاد دکمه</h4>
                                            </div>
                                            <div class="modal-body">
												 <input type="hidden" id="hidden_path" name="path" value="" />
												
												<div class="add_zone">
												 <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" checked="checked" class="optionsRadios1" value="option1">
                                                  دکمه ی معمولی
                                             
                                                </label>
                                            </div>
										   <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" class="optionsRadios1" value="option2">
                                                دکمه ی شیشه ای
                                             
                                                </label>
                                            </div>
										   <div class="radio">
                                                <label>
                                                    <input type="radio" name="optionsRadios" class="optionsRadios1" value="option3">
                                                دکمه ی دائمی
                                             
                                                </label>
                                            </div>
										   </div>
										   <div id="folder">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">نام دکمه</label>
                                                        <input type="text" name="foldername" class="form-control" id="exampleInputEmail3">
                                                    </div>
													 <div class="form-group">
                                                        <label for="exampleInputEmail1">نوع دکمه</label>
                                                        <select class="form-control" id="typeofbottom">
															<option>متصل به منو</option>
															<option>نمایش تصویر</option>
															<option>نمایش متن و تصویر</option>
															<option>نمایش متن</option>
															<option>متصل به تابع</option>
															<option class="galss_link" style="display: none">متصل به لینک</option>
														</select>
                                                    </div>
													 <div class="form-group func" style="display: none;">
                                                        <label for="exampleInputEmail1">نام تابع</label>
                                                        <input type="text" id="func" class="form-control">
                                                    </div>
													 <div class="form-group galss_url" style="display: none;">
                                                        <label for="exampleInputEmail1">آدرس لینک</label>
                                                        <input type="text" id="glass_url" class="form-control">
                                                    </div>
														 <div class="form-group menubot">
                                                        <label for="exampleInputEmail1">نام منو اتصال</label>
                                                        <select class="form-control" id="form_for_bottom">
															<option value="main_menu">منوی اصلی</option>
															
														</select>
                                                    </div>
														 <div class="add_zone">
														  <div class="form-group menubot2">
                                                        <label for="exampleInputEmail1">داخل منوی زیر ایجاد شود</label>
                                                        <select class="form-control" id="button_sub_form">
															<option value="main_menu">منوی اصلی</option>
															
														</select>
                                                    </div>
													  <div class="form-group">
                                                        <label for="exampleInputEmail1">سطح دکمه</label>
                                                        <select class="form-control level">
															<option value="1">سطح 1</option>
															<option value="2">سطح 2</option>
															<option value="3">سطح 3</option>
															<option value="4">سطح 4</option>
															<option value="5">سطح 5</option>
															<option value="6">سطح 6</option>
															<option value="7">سطح 7</option>
															<option value="8">سطح 8</option>
															<option value="9">سطح 9</option>
															<option value="10">سطح 10</option>
														</select>
													 </div>
														 </div>
                                                   </div>
										  
                                                    <button type="submit" class="btn btn-default" id="button_creator">ایجاد</button>
													<button type="submit" class="btn btn-danger" id="button_edit" style="display: none;">ویرایش</button>
                                            </div>
                                        </div>
                                    </div>
</div>
	<div class="add_form" style="display: none;">
	   <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                                                <h4 class="modal-title">ایجاد منو</h4>
                                            </div>
                                            <div class="modal-body">

                                             
												
												
												 <div id="folder">
                                                    <div class="form-group">
                                                        <label for="exampleInputEmail1">نام منو</label>
                                                        <input type="text" name="foldername" class="form-control" id="menuname">
                                                    </div>
													<div class="alert alert-block alert-danger fade in" style="display: none;">
                                    <strong>خطا!</strong> برای نام گذاری منو شما نمیتوانید از حروف فارسی استفاده کنید،همچنین شما نمیتوانید از عدد در اول اسم منو و یا عدد به عنوان اسم استفاده کنید.
                             
                                </div>
													<button type="submit" class="btn btn-default btn-menu" >ایجاد</button>
													  
                                                   </div>
												
                                            </div>
                                            </div>
                                        </div>
                                    </div>
</div>
	<section class="panel">
        <header class="panel-heading">ایجاد ربات تلگرام</header>
                                                 <div class="panel-body">
							<div id="folder_hold_er">
							<div class="folder buttoncreate" data_type="folder"><i class="icon-hand-up"></i><span>ایجاد دکمه</span></div>
							</div>
							<div id="folder_hold_er">
							<div class="folder menu" data_type="folder" ><i class="icon-list" style="margin-right:11px"></i><span>ایجاد منو</span></div>
							
							</div>
							<div class="col-lg-12">
								<div class="form-group">
                                                        <label for="exampleInputEmail1">نام گروه</label>
                                                      <input type="text" class="form-control" name="dd" id="groupname" style="padding:5px;">
                                                    </div>
								<select class="form-control" id="namefolderkeeper">
									<option value="main_menu">منوی اصلی</option>
								</select>
								<button class="btn menu_delete" style="margin-top:10px;background:#ff6c60;color:#fff"><i class="icon-remove"></i> حذف منو</button>
							</div>
							<div class="main_menu tellface">
							<div class="col-lg-4">
							</div>
							<div class="col-lg-4 tellb">
								<span class="botton-holder-glass">
									
									
								</span>
								<span class="tel_tb"></span>
								<span class="botton-holder">
					
								</span>
							</div>
							<div class="col-lg-4">
								
							</div>
							</div>
												 </div>
			<div class="col-lg-12" style="background: #fff;padding-bottom: 10px;">
				<button class="btn btn-info">ذخیره</button>
			</div>
			
	</section>
</div>
<?php
$this->load->view("main/admin/footer");
?>
<script>
	$xml_data = "";
	function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}

</script>
<script>
function cleanArray(actual) {
  var newArray = new Array();
  for (var i = 0; i < actual.length; i++) {
    if (actual[i]) {
      newArray.push(actual[i]);
    }
  }
  return newArray;
}
	
</script>
<script>
	$json = {
		"main_menu":[]
	}
	$(".close").click(function(){
			  $(".add_bottom").css({"display":"none"});
			  $(".add_form").css({"display":"none"});
			  $(".alert-danger").css({"display":"none"});
			  });
	$(".buttoncreate").click(function(){
		$("#button_creator").css({"display":"block"});
		$("#button_edit").css({"display":"none"});
		$(".add_bottom").css({"display":"block"});
		$(".add_zone").css({"display":"block"});
		});
	$(".menu").click(function(){
		$(".add_form").css({"display":"block"});
		});
</script>
<script>
	$(".radio").change(function(){
		$type = $("input[type='radio']:checked").val();
		if ($type == "option2") {
			$(".galss_link").css({"display":"block"});
		}else{
			$(".galss_link").css({"display":"none"});
		}
		
		});
	$(".btn-menu").click(function(){
		$name = $("#menuname").val();
		if(!/^([a-zA-Z]{1}[a-zA-Z0-9]{1,})$/.test($name)){
			$(".alert-danger").css({"display":"block"});
			return false;
		}
		
		$json[$name] = [];
		$classname=makeid();
		$("#namefolderkeeper").append('<option value="'+$name+'">'+$name+"</option>");
		$("#form_for_bottom").append('<option value="'+$name+'">'+$name+"</option>");
		$("#button_sub_form").append('<option value="'+$name+'">'+$name+"</option>");
		$menu_createtor ='<div class="'+$name+' tellface" style="display:none">';
		$menu_createtor +='<div class="col-lg-4">';
		$menu_createtor +='</div>';
		$menu_createtor += '<div class="col-lg-4 tellb">';
		$menu_createtor += 	'<span class="botton-holder-glass">';
		$menu_createtor += 	'</span>';
		$menu_createtor += 	'<span class="tel_tb"></span>';
		$menu_createtor += '<span class="botton-holder">';
		$menu_createtor += 	'</span>';
		$menu_createtor += 	'</div>';
		$menu_createtor +='<div class="col-lg-4">';
		$menu_createtor +='</div>';
		$menu_createtor +='</div>';
		$(".panel-body").append($menu_createtor);
		$(".add_form").css({"display":"none"});
		$(".alert-danger").css({"display":"none"});
		});
	$("#namefolderkeeper").change(function(){
		$value = $(this).val();
		$(".tellface").css({"display":"none"});
		$("."+$value).css({"display":"block"});
		});
	$("#typeofbottom").change(function(){
		if ($(this).val() == "متصل به تابع") {
			$(".menubot").css({"display":"none"});
			$(".func").css({"display":"block"});
			$(".galss_url").css({"display":"none"});
		}else if ($(this).val() == "متصل به منو") {
			$(".menubot").css({"display":"block"});
			$(".func").css({"display":"none"});
			$(".galss_url").css({"display":"none"});
		}else if ($(this).val() == "متصل به لینک") {
			$(".galss_url").css({"display":"block"});
			$(".menubot").css({"display":"none"});
			$(".func").css({"display":"none"});
		}
		
	else{
			$(".menubot").css({"display":"none"});
			$(".func").css({"display":"none"});
			$(".galss_url").css({"display":"none"});
		}
		});
	
	$("#button_creator").click(function(){
		$checked =$("input[type='radio']:checked").val();
			$name = $("#exampleInputEmail3").val();
			$type= $("#typeofbottom").val();
			$menu = $("#button_sub_form").val();
			$linkmenu = $("#form_for_bottom").val();
			$level = $(".level").val();
			if ($type == "متصل به منو") {
				$type ="0";
				$fname ="null"
			}else if ($type == "نمایش تصویر") {
				$type="1";
				$fname = makeid();
			}else if ($type == "نمایش متن") {
				$type = "2";
				$fname = makeid();
			}else if ($type == "متصل به تابع") {
				$type="3";
				$fname = $("#func").val();
			}else if ($type == "نمایش متن و تصویر") {
				$type = "4";
				$fname = makeid();
			}else if ($type == "متصل به لینک") {
				$type = "5";
				$fname = $("#glass_url").val();
			}
			
			
		if ($checked == "option1") {
			if ($("."+$menu+" aside[data_level='"+$level+"']").length == 1) {
				$insitdbutton = $("."+$menu+" aside[data_level='"+$level+"']").find(".button").length;
				if ($insitdbutton == 1) {
					$json[$menu][$json[$menu].length] = {"name":$name,"btype":$type,"bpos":$menu,"blink":$linkmenu,"bfunc":$fname,"bmatrial":$checked,"level":$level};
					$("."+$menu+" aside[data_level='"+$level+"']").find(".button").addClass("halfn");
					$crete_button = '<div class="button halfn" data_menu="'+$menu+'">'+$name+'<i class="icon-remove-circle"></i> <i class="icon-edit-sign"></i></div>';
					$("."+$menu+" aside[data_level='"+$level+"']").append($crete_button);
				}else if ($insitdbutton == 2) {
					$json[$menu][$json[$menu].length] = {"name":$name,"btype":$type,"bpos":$menu,"blink":$linkmenu,"bfunc":$fname,"bmatrial":$checked,"level":$level};
					$("."+$menu+" aside[data_level='"+$level+"']").find(".button").addClass("one_third").removeClass("halfn");
					
					$crete_button = '<div class="button one_third lastt" data_menu="'+$menu+'">'+$name+'<i class="icon-remove-circle"></i> <i class="icon-edit-sign"></i></div>';
					$("."+$menu+" aside[data_level='"+$level+"']").append($crete_button);
				}else{
					alert("شما بیشتر از 3 تا دکمه در یک ردیف نمیتوانید داشته باشید.");
				}
				
			}else{
                $json[$menu][$json[$menu].length] = {"name":$name,"btype":$type,"bpos":$menu,"blink":$linkmenu,"bfunc":$fname,"bmatrial":$checked,"level":$level};
				$crete_button = '<aside data_level='+$level+'><div class="button"  data_menu="'+$menu+'">'+$name+'<i class="icon-remove-circle"></i><i class="icon-edit-sign"></i></div>';
				$("."+$menu+" .botton-holder").append($crete_button);
			}
		}
		if ($checked == "option2") {
			$pos = ((Number($level)-1) * 40)+320;
			$pos = $pos + "px";
			if ($("."+$menu+" .button-holder[data_level='"+$level+"']").length == 1) {
				
				$insitdbutton = $("."+$menu+" .button-holder[data_level='"+$level+"']").find(".button").length;
				
				if ($insitdbutton == 1) {
				$json[$menu][$json[$menu].length] = {"name":$name,"btype":$type,"bpos":$menu,"blink":$linkmenu,"bfunc":$fname,"bmatrial":$checked,"level":$level};	
					$("."+$menu+" .button-holder[data_level='"+$level+"']").find(".button").addClass("half");
            $crete_button = '<div class="button half last"  data_menu="'+$menu+'">'+$name+'<i class="icon-remove-circle"></i> <i class="icon-edit-sign"></i></div>';
			$("."+$menu+" .button-holder[data_level='"+$level+"']").append($crete_button);
				}else{
					alert("شما بیشتر از دو دکمه ی شیشه ای در یک ردیف نمیتوانید داشته باشید.");
				}
			}else{
				$json[$menu][$json[$menu].length] = {"name":$name,"btype":$type,"bpos":$menu,"blink":$linkmenu,"bfunc":$fname,"bmatrial":$checked,"level":$level};
				 $crete_button = '<div class="button-holder" style="bottom:'+$pos+';" data_level="'+$level+'"><div class="button"  data_menu="'+$menu+'">'+$name+'<i class="icon-remove-circle"></i> <i class="icon-edit-sign"></i></div>';
				$("."+$menu+" .botton-holder-glass").append($crete_button);
			}
			
			
			
		}
		$(".add_bottom").css({"display":"none"});
		});
	$(".btn-info").click(function(){
		$.post("<?php echo base_url(); ?>admin/json_controler",{nameid:makeid()+makeid(),name:$("#groupname").val(),jsonfile:JSON.stringify($json)},function(e){
			if(e == "File written!done"){
				window.location.href = "<?php echo base_url(); ?>/admin/group_list";
			}
			});
		});
	$(document).on('click','.icon-remove-circle',function(){
		$button = $(this).parent().parent().find(".button");
		$number_of_button = $(this).parent().parent().find(".button").length;
		if ($number_of_button == 3) {
		$button.removeClass("one_third").addClass("halfn");
		
		}else if($number_of_button == 2){
			$button.removeClass("halfn").removeClass("half").removeClass("last");
		}		
		$menu = $(this).parent().attr("data_menu");
		$name = $(this).parent().text();
		$json[$menu].forEach(function(item, $i){
			if ($json[$menu][$i]["name"] == $name) {
				delete $json[$menu][$i];
				$json[$menu].splice($i,1);
			}
			})
			
			
			//alert($json[$menu][$i]["name"]);
		
		//$json["main_menu"] = cleanArray($json["main_menu"]);
		//alert($json["main_menu"]);
		if($number_of_button == 1){
			$(this).parent().parent().remove();
		}else{
		$(this).parent().remove();	
		}
		
		});
	$(document).on('click','.icon-edit-sign',function(){
		$(".add_zone").css({"display":"none"});
		$("#button_creator").css({"display":"none"});
		$("#button_edit").css({"display":"block"});
		$(".add_bottom").css({"display":"block"});
		$menu = $(this).parent().attr("data_menu");
		$nameofitem = $(this).parent().text();
		$nameofitem = $nameofitem.trim();
		$valueforedit = $(this).parent();
		
		$json[$menu].forEach(function(item, $i){	
			if ($json[$menu][$i]["name"] == $nameofitem) {
			$("#button_edit").attr({"menu":$menu,"count":$i,"name":$nameofitem});
			$('.add_bottom input[type="text"]').eq(0).val($nameofitem);
			if ($json[$menu][$i]["btype"] == "0") {
				$("#typeofbottom").val("متصل به منو");
				$("#typeofbottom").change();
				$("#form_for_bottom").val($json[$menu][$i]["blink"]);
			}else if ($json[$menu][$i]["btype"] == "1") {
				$("#typeofbottom").val("نمایش تصویر");
				$("#typeofbottom").change();
			}else if ($json[$menu][$i]["btype"] == "2") {
				$("#typeofbottom").val("نمایش متن");
				$("#typeofbottom").change();
				
			}else if ($json[$menu][$i]["btype"] == "3") {
				$("#typeofbottom").val("متصل به تابع");
				$("#typeofbottom").change();
				$("#func").val($json[$menu][$i]["bfunc"]);
			}else if ($json[$menu][$i]["btype"] == "4"){
				$("#typeofbottom").val("نمایش متن و تصویر");
				$("#typeofbottom").change();
			}
			}
			})
		});
	$(".btn-danger").click(function(){
		$checked =$("input[type='radio']:checked").val();
			$name = $("#exampleInputEmail3").val();
			$type= $("#typeofbottom").val();
			$menu =  $(this).attr("menu");
			$linkmenu = $("#form_for_bottom").val();
			$valueforedit.html($name+'<i class="icon-remove-circle"></i><i class="icon-edit-sign"></i>');
			$level = $(".level").val();
			if ($type == "متصل به منو") {
				$type ="0";
				$fname ="null"
			}else if ($type == "نمایش تصویر") {
				$type="1";
				$fname = makeid();
			}else if ($type == "نمایش متن") {
				$type = "2";
				$fname = makeid();
			}else if ($type == "متصل به تابع") {
				$type="3";
				$fname = $("#func").val();
			}else if ($type == "نمایش متن و تصویر") {
				$type = "4";
				$fname = makeid();
			}else if ($type == "متصل به لینک") {
				$type = "5";
				$fname = $("#glass_url").val();
			}
		$json[$("#button_edit").attr("menu")][$("#button_edit").attr("count")]["name"] = $name;
		$json[$("#button_edit").attr("menu")][$("#button_edit").attr("count")]["btype"] = $type;
		$json[$("#button_edit").attr("menu")][$("#button_edit").attr("count")]["bpos"] = $menu;
		$json[$("#button_edit").attr("menu")][$("#button_edit").attr("count")]["blink"] = $linkmenu;
		$json[$("#button_edit").attr("menu")][$("#button_edit").attr("count")]["func"] = $fname;
		$(".add_bottom").css({"display":"none"});
		});
	
</script>
<script>
	$(".menu_delete").click(function(){
		$menu_value = $("#namefolderkeeper").val();
		if($menu_value == "main_menu"){
			alert("خطا: شما نمیتوانید منوی اصلی را حذف کنید");
		}else{
		if (confirm(" آیا مطمعن هستید که میخواهید منوی"+$menu_value+" را حذف کنید؟")) {
				delete $json[$menu_value];
			$('#namefolderkeeper option[value="'+$menu_value+'"]').remove();
			$("#namefolderkeeper").change();
			}
		}
		});
</script>
