{{#Name=Multi Feature}}
{{#Description=Displays features from multiple devices}}
{{#Version=1.0}}
{{#Author=HomeSeer}}
{{#CanBeDeleted=False}}
{{#SaveList=save_title_size,save_title_color,save_title_background_color,save_title_bold,save_feature_size,save_feature_color,save_feature_bold,save_display_on_off_only,save_use_switch,save_include_location,save_include_device,save_include_feature,save_include_status_icon}}

{{includefileraw Dashboards/Cards/Custom/Common/CommonHeader.html}}

	
{{#get all saved values for easy reference}}
	
{{sections[index]="Title"}}
{{title=get_value 'save_title' 'Change Me' 'Name' 'text'}}
{{title_size=get_value 'save_title_size' '18' 'Size' 'text'}}
{{title_color=get_value 'save_title_color' '#000000' 'Color' 'color'}}
{{title_bold=get_value 'save_title_bold' '' 'Bold' 'toggle'}}
{{title_background_color=get_value 'save_title_background_color' '#FFFFFF' 'Background Color' 'color'}}

{{sections[index]="Feature"}}
{{icon_width=get_value 'save_icon_width' '32' 'Icon Width' 'text'}}
{{icon_height=get_value 'save_icon_height' '32' 'Icon Height' 'text'}}
{{feature_size=get_value 'save_feature_size' '14' 'Size' 'text'}}
{{feature_color=get_value 'save_feature_color' '#000000' 'Color' 'color'}}
{{feature_bold=get_value 'save_feature_bold' '' 'Bold' 'toggle'}}
{{include_location_val=get_value 'save_include_location' '' 'Include Location' 'toggle'}}
{{include_device_val=get_value 'save_include_device' '' 'Include Device Name' 'toggle'}}
{{include_feature_val=get_value 'save_include_feature' 'on' 'Include Feature Name' 'toggle'}}
{{include_status_icon_val=get_value 'save_include_status_icon' '' 'Include Status Icon' 'toggle'}}	

{{sections[index]="Control Options"}}
{{hide_controls_val=get_value 'save_hide_controls' 'on' 'Hide Controls' 'toggle'}}
{{include_all_control_val=get_value 'save_include_all_control' '' 'Include All Control' 'toggle'}}
{{on_off_only_val=get_value 'save_display_on_off_only' 'on' 'On/Off Only' 'toggle'}}
{{use_switch_val=get_value 'save_use_switch' 'on' 'Use Switch' 'toggle'}}

{{# this section is not neccessay, it just makes the code cleaner by converting toggle values to boolean}}
{{# toggle values can still be checked by checking if the saved value is the text "on"}}
{{if hide_controls_val=='on'
	hide_controls=true
else
	hide_controls=false
end}}
{{if on_off_only_val=='on'
	on_off_only=true
else
	on_off_only=false
end}}
{{if use_switch_val=='on'
	use_switch=true
else
	use_switch=false
end}}
{{if include_location_val=='on'
	include_location=true
else
	include_location=false
end}}
{{if include_device_val=='on'
	include_device=true
else
	include_device=false
end}}
{{if include_feature_val=='on'
	include_feature=true
else
	include_feature=false
end}}
{{if include_all_control_val=='on'
	include_all_control=true
else
	include_all_control=false
end}}
{{if include_status_icon_val=='on'
	include_status_icon=true
else
	include_status_icon=false
end}}

{{#get all the reference ID's used on this card, returns a dictionary of saved_value_name,value}}
{{ values=get_saved_values widget_id }}
{{refs=''}}
{{refsarray=[]}}
{{index=0}}
{{for key in values
	if key.key | string.starts_with 'save_feature_item'
		value = key.value
		# check if a dup ref
		if value | string.contains ','
			karray = value | string.split ','
			value = karray[0]
		end
		refsarray[index]=value
		index=index+1
		refs=refs | string.append value | string.append ','
	end
end}}

{{#See if all the controls are ON}}
{{#key.value is device ref}}
{{#key.key is the name of the saved variable, always starts with "save_"}}

{{all_on_checked='checked'}}	{{#assume all are on}}
{{for ref in refsarray
	if is_off ref
		all_on_checked=''
	end
end}}


	<style>
	
	.title{{w.id}} {
		color: {{title_color}};
		font-size: {{title_size}}px;
		font-weight: {{if title_bold=='on'}}bold{{else}}normal{{end}};
		border-bottom: 1px solid #ccc;
		margin-bottom: 10px;
		background-color: {{title_background_color}};
	}
    
    .sticky-top.title{{w.id}} {
	    z-index: 1019 !important; /* Just below Bootstrap's dropdown z-index so navbar menus display over the top of this */
	    position: sticky;
	    top: 0;
    }
	
	.feature{{w.id}} {
		color: {{feature_color}};
		font-size: {{feature_size}}px;
		font-weight: {{if feature_bold=='on'}}bold{{else}}normal{{end}};
	}
	
	.item {
      padding: 4px;
      margin: 4px;
      border: 1px solid #ccc;
    }
    .drag-over {
      border: 2px dashed #000;
    }
	.feature_move {
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		border: 0;
	}	
	
	.container{{w.id}} {
		overflow-y: none;
		{{if w.height > 0}}
		height:{{w.height}}px
		{{end}}
	}
	
	.switch-col{{w.id}} {
		padding-right: 0px !important;
	}
	
	.switch-col{{w.id}} .switch label .lever {
		margin: 0px !important;
	}
	</style>
	
<div class="p-2">
	
	<div class="container{{w.id}}">
	<div class="row no-gutters title{{w.id}} sticky-top">
		<div class="col-8 justify-content-center align-content-center text-left">
			{{title}}                    
		</div>
		{{if include_all_control}}
		<div class="col-4 justify-content-center align-content-center text-right">
			<span class="switch">
			  <label>									
					<input type="checkbox" id="allonoff{{id_unique}}" name="allonoff" refs="{{refs}}" {{all_on_checked}}>
					<span class="lever"></span>
			  </label>
			</span>	
		</div>
		{{end}}
	</div>
	
    	
	{{for ref in refsarray}}
		{{#the saved feature refs are saved under the name 'save_feature_itemREF}}						
		{{dev=device_by_ref ref}}		
		{{dev_primary=device_by_ref dev.primary_ref}}
		{{primary_name=dev_primary.name}}			
		
		{{if include_location}}
			{{if location1_display_first}}
				{{loc=dev.location | string.append '-' | string.append dev.location2}}
			{{else}}
				{{loc=dev.location2 | string.append '-' | string.append dev.location}}
			{{end}}
			{{loc=loc | string.append "-"}}
		{{else}}
			{{loc=''}}
		{{end}}		
				
		{{if include_status_icon}}
			{{img_file = status_image_file dev.ref}}
		{{end}}
		<div class="row no-gutters mb-2 mr-2" id="{{ref}}">		
			{{if use_switch && dev.has_controls && !hide_controls}}
				<div class="col-auto justify-content-center align-content-center">
				{{if img_file != '' && include_status_icon}}
					<img class='p-1' src='{{img_file}}' width='{{icon_width}}' height='{{icon_height}}'>
				{{end}}
				</div>
				<div class="feature{{w.id}} col justify-content-start align-content-center text-left">
				{{loc}}{{if include_device}}{{primary_name}}{{end}}{{if include_feature}}{{if include_device || include_location}}-{{end}}{{dev.name}}{{end}}
				</div>
				<div class="col-auto justify-content-center align-content-center text-right switch-col{{w.id}}">
					 <span class="switch">
					  <label>									
							<input type="checkbox" class="onoff{{id_unique}}" name="onoff" ref="{{ref}}" {{if is_on ref}}checked{{end}}>
							<span class="lever"></span>
					  </label>
					</span>	
				</div>
			{{else}}
				<div class="col-auto justify-content-start align-content-center">
				{{if img_file != '' && include_status_icon}}
					<img class='p-1' src='{{img_file}}' width='{{icon_width}}' height='{{icon_height}}'>
				{{end}}
				</div>
				<div class="feature{{w.id}} col justify-content-start align-content-center text-left">
				{{loc}}{{if include_device}}{{primary_name}}{{end}}{{if include_feature}}{{if include_device || include_location}}-{{end}}{{dev.name}}{{end}}
				</div>							
				<div style="color: {{feature_color}};font-size: {{feature_size}}px;" class="col-auto 1ml-auto align-content-center text-right">						
					{{status_text dev.ref }}
				</div>					
			{{end}}
		</div>
		{{if on_off_only || hide_controls}}
		{{else}}
			{{row1 = controls_row ref 1 use_switch }}   
			{{if row1 != ''}}
				<div id='controls_row1_{{ref}}' class="row no-gutters justify-content-end align-items-center">
					{{row1}}
				</div>
			{{end}}
			
			{{row2 = controls_row ref 2 use_switch}}
			{{if row2 != ''}}
				<div id='controls_row2_{{ref}}' class="row no-gutters justify-content-end align-items-center">
					{{row2}}
				</div>
			{{end}}

			{{row3 = controls_row ref 3 use_switch}}
			{{if row3 != ''}}                        
				<div id='controls_row3_{{ref}}' class="row no-gutters justify-content-end align-items-center">
					{{row3}}
				</div>                        
			{{end}}   
		{{end}}
	{{end}}
 </div>
 </div>
	
{{#if we are not in edit mode, don't bother including the edit mode content}}
{{if dbs.edit_mode}}

{{# card settings dialog}}
{{#this dialog has 2 tabs, one for formatting the card, the other for card content}}
{{# w=widget class, dashboard=dashboard name}}


{{# w=widget class, dashboard=dashboard name, d=device}}
<div id="dialogs{{w.id}}">
<div class="modal pg-show-modal" id="edit_custom_card{{w.id}}" tabindex="-1" role="dialog" aria-hidden="true"> 
   <div class="modal-dialog cascading-modal"> 
	   <div class="modal-content">   
            <form id="add_to_dashboard">
            <div class="modal-c-tabs">
                <ul class="nav md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#panel{{w.id}}2" role="tab"><i class="fas fa-edit mr-1"></i>
						Display</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#panel{{w.id}}1" role="tab"><i class="fas fa-border-all mr-1"></i>
						Format</a>
					</li>
                </ul>
                <div class="tab-content mt-n4">
                    <div class="tab-pane fade" id="panel{{w.id}}1" role="tabpanel">
                        <div class="modal-body">
                            {{includefileraw Dashboards/Cards/Internal/card_appearance_settings.html}}
                        </div>
                    </div>
		                    
                    <div class="tab-pane fade in show active" id="panel{{w.id}}2" role="tabpanel">      
                        <div class="modal-body">                     
			                <p>
				               {{# Second tab which contains settings for this card only}}
							   {{# Starting here, add custom settings HTML for this card }}
								<div style="width:100%" class="streakhs grey lighten-2">
									Features
								</div>								
								<div class="row mb-1">						
									<div class="col-12 justify-content-center align-content-center text-center">
										<select class="mdb-select md-form mx-2" id="feature_select{{w.id}}" name="feature_add" multiple searchable="Search for a device here...">
										{{roots=root_devices_by_location}}
										<option disabled name="test" value="0">Select Feature</option>
										{{ for dev in (roots) }}
											{{if location1_display_first}}
												<optgroup label="{{dev.location}}-{{dev.location2}}-{{dev.name}}">												
											{{else}}
												<optgroup label="{{dev.location2}}-{{dev.location}}-{{dev.name}}">												
											{{end}}						
											{{if location1_display_first}}
												<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location}}-{{dev.location2}}-{{dev.name}}</option>
											{{else}}
												<option name="feature_device" value="{{dev.ref}}">&nbsp;&nbsp;&nbsp;{{dev.location2}}-{{dev.location}}-{{dev.name}}</option>
											{{end}}   
																	
											{{for child in dev.features}}
												{{selected=''}}								
												{{#if child.ref==item.value.dv_ref}}
													{{#selected='selected'}}
												{{#end}}	
												{{if location1_display_first}}
													<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location}}-{{child.location2}}-{{dev.name}}-{{child.name}}</option>
												{{else}}
													<option name="feature" value="{{child.ref}}">&nbsp;&nbsp;&nbsp;{{child.location2}}-{{child.location}}-{{dev.name}}-{{child.name}}</option>
												{{end}}
											{{end}} 
											</optgroup>
										{{end}}
										</select>
																				                    
									</div>						
								</div>
							   <div id="feature_list{{w.id}}" class="ui-sortable">	
								{{for ref in refsarray}}									
									<div draggable="true" class="item hs-bg-blue-l4 row no-gutters {{if !is_mobile_browser}}fa-grabbing{{end}}" id="feature_list_item{{ref}}">
										<div class="col-9 justify-content-center align-content-center">
										{{#save the feature under the save name "save_feature_item" with the ref appended to make it unique when saved}}
										<input type="hidden" name="save_feature_item{{ref}}" value="{{ref}}"></input>{{device_name_full ref true}}
										</div>
										<div class="col-3 controls justify-content-center align-content-center text-right">
											<i class="fas fa-trash-alt fa-point mr-1" style="font-size:14px" onclick="removeFeature{{id_unique}}('feature_list_item{{ref}}');" ></i>
											<i class="fas fa-grabbing fa-fw fa-grip-vertical mr-4"></i>
										</div>
									</div>									
								{{end}}
								</div>
							   
							   {{# This section autogenerates settings, do not modify }}
                                {{index=0}}
                                {{for sn in save_names}}
								{{if sections[index] != null}}
									<div style="width:100%" class="streakhs grey lighten-2">
										{{sections[index]}}
									</div> 
								{{end}}
                                <div class="row no-gutters">                                    
                                    {{if control_types[index] == 'color'}}
									<div class="col-md justify-content-center align-content-center">
										{{titles[index]}}                        
									</div>
									<div class="md-form input-group col-md justify-content-center text-center"> 
										<input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
									</div>
                                    <div class="md-form input-group col-md-2 justify-content-center text-center"> 
                                        <button onclick="ShowColorPickerDialog('#{{sn}}-{{w.id}}','{{current_values[index]}}','#{{sn}}_{{w.id}}');" type="button" id="{{sn}}-{{w.id}}" class="color-square-btn" style="background-color:{{current_values[index]}};"></button>
                                    </div>									
                                    {{else if control_types[index] == 'toggle'}}									
										<div class="col-md-9">
											{{titles[index]}}                    
										</div>
										<div class="col-md-3">
											<span class="switch">
											  <label>	
													<input type="checkbox" name="{{sn}}" {{if current_values[index]=="on"}}checked{{end}}>
													<span class="lever"></span>
											  </label>
											</span>						
										</div>			
									{{else if control_types[index] == 'text'}}
                                    <div class="col-md justify-content-center align-content-center">
                                        {{titles[index]}}               
                                    </div>
                                    <div class="col-md md-form input-group justify-content-center text-center"> 
                                        <input type="text" id="{{sn}}_{{w.id}}" class="form-control" name="{{sn}}" value="{{current_values[index]}}">
                                    </div>
                                    {{end}}                                   					
                                </div>
                                {{index=index+1}}
                                {{end}}						  
                            </p>
				        </div>
                    </div>			        
			   
                    {{save_action='save_custom_card_edits'}}
					{{includefileraw includes/dashboard_dialogs_footer.html}}
                </div>			   
			                         
			</div>	 
            </form>                                 
        </div>                 
    </div>
</div>



</div>

{{includefileraw Dashboards/Cards/Custom/Common/CommonScript.html}}

<script>
// this part of the script is run only if the dashboard is in edit mode

// When the feature picker dialog is closed it removes the class "model-open" from the body and therefore the settings modal loses focus
// So we detect when the feature dialog closes and then restore the "model-open" class to the body
//$('#feature_picker{{w.id}}').on('hidden.bs.modal', function (e) {
//	const multiSelect = document.querySelector('#feature_select{{w.id}}');
//	$(multiSelect).find('option:selected').prop('selected', false);
//	$(multiSelect).materialSelect();
//})



$(document).ready(function () {
	setSort{{id_unique}}();	
	
	resetMultiSelect{{id_unique}}();
	const multiSelect = $('#feature_select{{w.id}}');
	multiSelect.materialSelect();

	// for the multiselect, a button needs to be added so the droplist can be closed
	// bootstrap includes a tag "btn-save" but this submits the form, not what we want
	// the following function adds our own button and simply closes the list
	// addCloseButtonToActiveDropdown{{id_unique}}()
	// this is more complicated than it should be, but other methods like simply adding
	// the button html to the list do not work since bootstrap is not allowing handlers on the select

	// this is the best way to detect if the select list is open
    setInterval(function() {
		// Check for open dropdowns
		const openDropdowns = $('.dropdown-content.active, .select-dropdown.active');
		if (openDropdowns.length > 0) {
			addCloseButtonToActiveDropdown{{id_unique}}();
		}
	}, 300);
	
}); 

function addCloseButtonToActiveDropdown{{id_unique}}() {
    // First check if our modal is visible
    if (!$('#edit_custom_card{{w.id}}').is(':visible')) {
        return; // Our modal isn't visible, so don't do anything
    }
    // Find all active dropdowns
    const activeDropdowns = $('.select-dropdown.active');

    // If no active dropdowns, exit
    if (activeDropdowns.length === 0) {
        return;
    }

    activeDropdowns.each(function() {
        const $dropdown = $(this);

        // Skip if it already has our button
        if ($dropdown.find('.close-btn-item{{w.id}}').length > 0) {
            return true; // Continue to next dropdown
        }

        // Check if this dropdown is in our modal
        if ($('#edit_custom_card{{w.id}}').find($dropdown.closest('.select-wrapper')).length > 0) {
		    // Create the close button
		    var closeBtn = $('<button type="button" class="btn btn-sm btn-primary close-btn-item{{w.id}}">Add</button>');
		    $dropdown.append(closeBtn);
		
		    // Add mousedown handler (captures before click)
		    closeBtn.on('mousedown', function(e) {
			    e.preventDefault();
			    e.stopPropagation();
			    return false;
		    });
		    // Add click handler
		    closeBtn.on('click', function(e) {
			    e.preventDefault();
			    e.stopPropagation();
			
			    // Close the dropdown						
			    $(document.body).trigger('click');
			
			    // Restore modal focus
			    $('body').addClass('modal-open');
			
			    addFeature{{id_unique}}();
			    resetMultiSelect{{id_unique}}();
			
			    return false;
		    });
	    }
    });
}

// clear the multiselect so the user can select more items if needed
function resetMultiSelect{{id_unique}}() {
    // Get reference to the select element
    const multiSelect = $('#feature_select{{w.id}}');
    
    // Deselect all options
    multiSelect.find('option:selected').prop('selected', false);
    
    // Destroy and reinitialize the materialSelect to update the UI
    multiSelect.materialSelect({destroy: true });
    multiSelect.materialSelect();
}

// add a feature to the HTML so it is included when the dialog is saved
function addFeature{{id_unique}}() {
	var values = $('#feature_select{{w.id}}').val();
	var options = $('#feature_select{{w.id}}').find('option:selected');	

	if(values.length > 0) {
		var div = document.getElementById("feature_list{{w.id}}");
		for (var i = 0; i < values.length; i++) {
			var ref = values[i];
			var txt = options[i].text.trim();
			if(ref != 0) {
				div.innerHTML += '<div draggable="true"class="item hs-bg-blue-l4 row no-gutters fa-grabbing" id="feature_list_item'+ref+'">' +
				'<div class="col-9 justify-content-center align-content-center">'+
				'<input type="hidden" name="save_feature_item'+ref+'" value="'+ref+'"></input>'+txt+
				'</div>'+
				'<div class="col-3 controls justify-content-center align-content-center text-right">'+
				'<i class="fas fa-trash-alt fa-point mr-1" style="font-size:14px" onclick="removeFeature{{id_unique}}(\'feature_list_item'+ref+'\');" ></i>'+
				'<i class="fas fa-grabbing fa-fw fa-grip-vertical mr-4"></i>'+
				'</div>'+
				'</div>';
			}
		}
	}
	$("body").addClass("modal-open");	
}

// remove a feature from the HTML, ref is the device reference number
function removeFeature{{id_unique}}(ref) {
	document.getElementById(ref).remove();
}

function setSort{{id_unique}}()
{
	var el = document.getElementById('feature_list{{w.id}}');
	var sortable = new Sortable(el, {
		draggable: ".item",	
		onStart: function (evt) {
			evt.oldIndex;  // element index within parent
			var itemEl = evt.item;
			$("#"+itemEl.id).addClass("feature_move");
			$(".controls.").hide();
		},
		onEnd: function (evt) {
			var itemEl = evt.item;
			$("#"+itemEl.id).removeClass("feature_move");
		}
	});
}

</script>

{{else}}
{{# non edit mode script (runtime)}}
<script>

$(document).ready(function () {
	const unregisterCallback = registerDeviceCallback('{{refs}}', function(values, deviceRef) {
		var status=values.status;
		var value=values.value;
		var last_change=values.last_change;
		var last_change_dt=values.last_change_dt;
		var image_file = values.image_file;
		// for now, we update the entire card, but this will be called multiple times if many refs are on the card
		// TODO: update just the divs on the card, icon, status
		AjaxPost("action=update_custom_card&forcelayout=false&widget_id={{widget_id}}","dashboard.html");
	});
});


$('.onoff{{id_unique}}').change(function() {	
	var ref=$(this).attr('ref');

	if(this.checked) {
		AjaxPost("action=control_device_by_controluse&ref="+ref+"&controluse=_On","dashboard.html");
	}
	else {
		AjaxPost("action=control_device_by_controluse&ref="+ref+"&controluse=_Off","dashboard.html");
	}	 
});

$('#allonoff{{id_unique}}').change(function() {
	var refs=$(this).attr('refs');
	var parts=refs.split(',');
	console.log('here');
	parts.forEach(item => {
	
		if(item != null && item != '') {
			if(this.checked) {
				AjaxPost("action=control_device_by_controluse&ref="+item+"&controluse=_On","dashboard.html");
			}
			else {
				AjaxPost("action=control_device_by_controluse&ref="+item+"&controluse=_Off","dashboard.html");
			}
		}
	});	
});





</script>


{{end}}