{% extends 'templates/callluge/site_layout.html' %} {% block content %}
<script type="text/javascript">
	$(document).ready(function() {
		$('div#thedialog').dialog({ autoOpen: false })
		$('#thelink').click(function(){ $('div#thedialog').dialog('open'); });
		$('.menuEdit').click(function(){
			var menu_id = $(this).attr('menu-val');
			$.ajax({
			    type: "POST",
			    url: "/menu-management/get-menu-details/",
			    data: {'menu_id': menu_id, 'csrfmiddlewaretoken': '{{ csrf_token }}'},
				success: function(data) {					
					$('div#thedialog').dialog('open');
					$('#hid_menuid').val(data.id);
					$('#menu_name').val(data.name);
					$('#menu_url').val(data.url);
					
					console.log(data.menu_show)
					for (key in data.menu_show) {
						$('#show_'+data.menu_show[key]).attr("checked",true);	
					}

					if(data.mainmenu_id != 0){
						$('#chk_sub').attr("checked",true);				
						$('#hid_mainmenu').show();
						$('#mainmenu_sel').val(data.mainmenu_id);						
					}					
				},
				error: function() {
				    //alert('error handing here');
				}
		    });
			
		});

		$('#chk_sub').click(function(){
			if ($('input#chk_sub').is(':checked')) {
				//$("#mainmenu_sel").val($("#mainmenu_sel option:first").val())
				$('#hid_mainmenu').show();
			}else{				
				$('#hid_mainmenu').hide();
			}		
		})

		$('#submit').click(function() {
		    var data = $('#form_addmenu').serializeArray();
		    console.log(data)
		    if(ValidateShow() == false){
		    	alert('Please Check atleast one Previlage')
		    	return false
		    }

		    if($('#menu_name').val() != '' && $('#menu_url').val() != ''){
			    $.ajax({
				    type: "POST",
				    url: "/menu-management/add-menu/",
				    data: data,
					success: function(data) {					
						//if(data.status == 1){
						alert('Menu added successfully.');						
							//window.parent.location = "/menu-management/menu_list";
						// }else{
						// 	alert('Something went wrong. Please try again later.')
						// }					
					},
					error: function() {
					    //alert('error handing here');
					}
			    });
			}
		})
	})

function ValidateShow()
{
	if( ($("#show_1").is(":checked")) || ($("#show_2").is(":checked")) || ($("#show_3").is(":checked")) )
	{
		return true;
	}
	else
	{
		return false
	}
}	

</script>
<style type="text/css">
	.ui-widget-header{
		background: none !important;
		color: #000;
	}

	.ui-widget-content{
		width: 600px !important;
	}
</style>
<div>
	<div style="text-align: left;">
		<h2> Menu List</h2>
	</div>
	<div id="thelink" style="float:left; text-align: right; width: 90%;">
		<a href="javascript:void(0)">Add Menu</a>
<!-- 		<p><a href="/menu-management/add-items/">Home</a></p>  -->
	</div>
	<div style="float: left;">
		<table width="90%" border="1" style="text-align: center;">
			<th width="10%">#</th>
			<th width="20%">Name</th>
			<th width="30%">Url</th>
			<th width="20%">Main menu</th>
			<th width="10%">Action</th>			
			{% if menu|length > 0%}
				{% for m in menu %}
					<tr>
						<td width="10%">{{forloop.counter }}</td>
						<td width="20%">{{m.name }}</td>
						<td width="30%">
							{% if m.url is None %}
								--
							{% else %}
								{{m.url}}
							{% endif %}
						</td>
						<td width="20%">
							{% if m.mainmenu is None %}
								--
							{% else %}
								{{m.mainmenu}}
							{% endif %}
						</td>
						<td width="10%"><a href="javascript:void(0)" menu-val="{{m.id}}" class="menuEdit">Edit</a></td>
					</tr>
				{% endfor %}
			{% else %}
				<tr>
					<td colspan="5" style="text-align: center;">
						<span style="color: red;">No records found</span>
					</td>
				</tr>						
			{% endif %}
			</tr>
		</table>
	</div>

</div>

<div id="thedialog" title="Add Menu">
	<form id="form_addmenu" name="form_addmenu" method="post">
	{% csrf_token %}
	<input type="hidden" name="hid_menuid" id="hid_menuid" value=""/>
    <div>
    	<div style="width: 200px; float: left;">Name</div>
    	<div style="width: 350px; float: left;">: <input type="text" id="menu_name" name="menu_name" value="" required="required" /></div>
	</div>
	<div style="margin-left: 210px"> 
			SuperAdmin<input type="checkbox" name="show" value="1" id="show_1">&nbsp;&nbsp;
			Agency<input type="checkbox" name="show" value="2" id="show_2">&nbsp;&nbsp;
			Client<input type="checkbox" name="show" value="3" id="show_3">&nbsp;&nbsp;
	</div>
	<div>
    	<div style="width: 200px; float: left;">URL</div>
    	<div style="width: 350px; float: left;">: <input type="text" id="menu_url" name="menu_url" value="" required="required" /></div>
	</div>
	{% if menu|length > 0%}
		<div>
			<div style="width: 200px; float: left;"> Select main menu</div>
			<div style="width: 350px; float: left;">: <input type="checkbox" value="1" name="chk_sub" id="chk_sub"/></div>
		</div>
		<div id="hid_mainmenu" style="display: none; margin: 5px 0px;">
			<div style="width: 200px; float: left;"> Main Menu</div>
			<div style="width: 350px; float: left;">: 
			<select id="mainmenu_sel" name="mainmenu_sel">
				{% for m in menu %}
					{% if m.mainmenu is None%}
						<option value="{{m.id}}">{{m.name}}</option>
					{% endif %}
				{% endfor %}
			</select>
			</div>
		</div>
	{% endif %}
	<div style="margin-top: 10px; text-align: center;">
		<button name="submit" id="submit">Submit</button>
		<button name="cancel" formnovalidate>Cancel</button>
	</div>
	</form>
</div>

{% endblock %}