@extends('layouts.header')
@section('content')
<!-- <br> -->
@php
//print_r($moduleIds);
$PrimaryModuleId=$moduleIds['PrimaryModuleId'];
$SecondaryModuleId=$moduleIds['SecondaryModuleId'];

@endphp

<div class="page-header">
	<div class="breadcrumb-four">
		<ul class="breadcrumb">
			<li><a href="{{url('dashboard')}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li>

		</ul>
	</div>
</div>
<div class="row">
	<div class="col-lg-12 col-md-12 layout-spacing">
		<div class="statbox widget box box-shadow"> 
			<div class="row">
				<div class="col-md-4">
					<label>Primary Module</label>
					<select class="form-control" name="PrimaryModule" id="PrimaryModule" onchange="GetFields('primary')">
						<option value="">--Select--</option>
						@foreach($Modules as $module)
						@php
						$selected="";
						if($module['ModuleId']==$PrimaryModuleId)
						{
							$selected="selected";
						}
						@endphp
						<option value="{{$module['ModuleId']}}" {{$selected}}>{{$module['ModuleName']}}</option>
						@endforeach
					</select>
				</div>
				<div class="col-md-4">
					<label>Secondary Module</label>
					<select class="form-control" name="SecondaryModule" id="SecondaryModule" onchange="GetFields('secondary')">
						<option value="">--Select--</option>
						@foreach($Modules as $module)
						@php
						$selected="";
						if($module['ModuleId']==$SecondaryModuleId)
						{
							$selected="selected";
						}
						@endphp
						<option value="{{$module['ModuleId']}}" {{$selected}}>{{$module['ModuleName']}}</option>
						@endforeach
					</select>
				</div>
			</div>
			<div class="row form-group">
				<div class="col-md-12">
					<ul class="nav nav-tabs  mb-3 mt-3" id="simpletab" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="primary-tab" data-toggle="tab" href="#primary" role="tab" aria-controls="primary" aria-selected="true">Primary Module</a>
						</li>

						<li class="nav-item">
							<a class="nav-link" id="secondary-tab" data-toggle="tab" href="#secondary" role="tab" aria-controls="secondary" aria-selected="false">Secondary Module</a>
						</li>
					</ul>

					<div class="tab-content" id="simpletabContent">
						<div class="tab-pane fade show active" id="primary" role="tabpanel" aria-labelledby="primary-tab">
							<div id="primaryModuleList"></div>
						</div>
						<div class="tab-pane fade" id="secondary" role="tabpanel" aria-labelledby="secondary-tab">
							<div id="secondaryModuleList"></div>
						</div>					
					</div>

				</div>
				
				

			</div>
		</div>
	</div>
</div>
@endsection

<script>

	window.addEventListener('DOMContentLoaded',function(){

		setTimeout(()=>{
			GetFields('primary',1);
			GetFields('secondary',1);
		},100);
	});

	GetFields=async(moduleType,load)=>{
		ModuleId="";
		if(moduleType=="primary")
		{
			ModuleId=$('#PrimaryModule :selected').val();
			
		}
		else
		{
			ModuleId=$('#SecondaryModule :selected').val();
			
		}

		if(ModuleId=="")
		{
			confirmStatus=confirm('Are you sure to remove?');

			if(confirmStatus)
			{
				try{
					result=await UpdateModuleType(moduleType,ModuleId)
				}catch(e){}
			}
		}

		if(!load)
		{
			try{
				result=await UpdateModuleType(moduleType,ModuleId)
			}catch(e){}
		}

		

		$.ajax({
			type:"post",
			url:"{{url('GetPrimaryModulesList')}}",
			data:{moduleType,ModuleId},
			beforeSend:()=>{

				if(moduleType=="primary")
				{
					$('#primaryModuleList').html("<div class='loader dual-loader mx-auto'></div>");
				}
				else
				{
					$('#secondaryModuleList').html("<div class='loader dual-loader mx-auto'></div>");
				}
			},
			success:response=>{

				if(moduleType=="primary")
				{
					$('#primaryModuleList').html(response);
				}
				else
				{
					$('#secondaryModuleList').html(response);
				}

				// console.log("moduleid",ModuleId);
			}
		});
		// console.log(ModuleId);
	}

	UpdateModuleType=(moduleType,ModuleId)=>{
		return new Promise((resolve,reject)=>{
			$.ajax({
				type:"post",
				url:"{{url('UpdateModuleType')}}",
				data:{moduleType,ModuleId},
				beforeSend:()=>{},
				success:response=>{
					res=JSON.parse(response);

					if(res.type=="success")
					{

						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
						});
						resolve(res.msg);
					}
					else
					{
						Snackbar.show({
							text: res.msg,
							pos: 'top-right',
							actionTextColor: '#fff',
							backgroundColor: '#e7515a'
						});
						reject(res.msg);
					}

					console.log(response);
				}
			});
		});
	}

	updateConfiguration =(demographyCongifId,listType,moduleType,column)=>
	{
		ModuleId="";
		if(moduleType=="primary")
		{
			ModuleId=$('#PrimaryModule :selected').val();
		}
		else
		{
			ModuleId=$('#SecondaryModule :selected').val();
		}
		value=0;


		if($(column).is(' :checked'))
		{
			value=1;
		}

		$.ajax({
			type:'post',
			url:"{{url('UpdatePopUpConfiguration')}}",
			data:{ModuleId,demographyCongifId,value,listType},
			beforeSend:()=>{},
			success:response=>{
				console.log(response);
				res=JSON.parse(response);
				if(res.type=="error")
				{
					Snackbar.show({
						text: res.msg,
						pos: 'top-right',
						actionTextColor: '#fff',
						backgroundColor: '#e7515a'
					});
				}
				else
				{
					Snackbar.show({
						text: res.msg,
						pos: 'top-right'
					});
				}
				
			}
		});

	}
</script>