@extends('layouts.header')
@section('content')
@php
$results_obj = json_decode($results);
$pass_array=array("ModuleId"=>$ModuleId,"RowId"=>$RowId);
// added on 28th April '21
$userdetails = Auth::user();
$LoggedUser = $userdetails->name;
$DateFormat = $userdetails->DateFormat;
$TimeZone = $userdetails->TimeZone;
$TimeFormat = $userdetails->TimeFormat;
$ModuleName = $module_name;
$AssignedToList1=json_encode($AssignedToList);
$RelatedModuleListArray=json_encode($RelatedModuleListArray);
$EmailTemplatesList=json_encode($EmailTemplatesList);
$ContactModules=json_encode($ContactModules);
$loggedInUser=Auth::user()->RefId;
$todayDate=date('Y-m-d');
$DefaultValue=date('Y-m-d h:i a');
echo "<pre>";
    //print_r($RelatedModulesList);
     //print_r($header);
    //print_r($DepChildOpList);
    //print_r($RelateModules);
    //print_r($RelatedModules);
    //print_r($results_obj);
    //print_r($displayPanels);
echo "</pre>";
$DateTime=date('Y-m-d h:i a');
$DateTime= date('Y-m-d h:i a', strtotime('+30 minutes',strtotime($DateTime)));
$DateTime= date('Y-m-d h:i a', strtotime('+5 hour',strtotime($DateTime)));


$myIp=$_SERVER['REMOTE_ADDR'];

if($myIp=="157.51.151.16")
{
    //print_r($tempFiles);
}
// added {{$modules[AssociationType]}} on 29th Jul '21


// added on 20th Oct '21
$RoleAccess_c="1264d300-9915-11eb-948a-56b1773fd56f";   // None 8eca7f5f-9914-11eb-948a-56b1773fd56f
$RoleAccess_l="1264d300-9915-11eb-948a-56b1773fd56f";   // All
$RoleAccess_e="1264d300-9915-11eb-948a-56b1773fd56f";   // All
$RoleAccess_d="1264d300-9915-11eb-948a-56b1773fd56f";   // All


if(!empty($ModulesAccess))
{
    foreach($ModulesAccess['Actions'] as $ActionName)
    {
        if($ActionName['ActionName']=="Create")
        $RoleAccess_c=$ActionName['RoleAccess'];

        if($ActionName['ActionName']=="List")
        $RoleAccess_l=$ActionName['RoleAccess'];

        if($ActionName['ActionName']=="Edit")
        $RoleAccess_e=$ActionName['RoleAccess'];

        if($ActionName['ActionName']=="Delete")
        $RoleAccess_d=$ActionName['RoleAccess'];
        
    }
}

@endphp
<!-- <div class="row"> -->
    <style>

        .displaynone{
            /*display:none !important;*/
        }
        .displayblock{
            /*display: inherit !important;*/
        }
    </style>
    <div class="page-header">
        <div class="breadcrumb-four">
            <ul class="breadcrumb">
                @php
                $Dashboard=url('dashboard');
                $Listurl=url('ListView',$ModuleId);
                $Createurl=url('CreateView',$ModuleId);
                @endphp
                <li><a href="{{$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>
                @if($RoleAccess_l!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
                <li>
                  <a href="{{$Listurl}}" title="List {{$ModuleName}}">
                    <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-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>List {{$ModuleName}}</a>
                </li>
                @endif
                @if($RoleAccess_c!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
                <li>
                  <a href="{{$Createurl}}" title="Create {{$ModuleName}}">
                    <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-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>Create {{$ModuleName}}</a>
                </li>
                @endif
            </ul>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12 col-md-12 layout-spacing">
            <div class="statbox widget box box-shadow">

             <ul class="nav nav-tabs  mb-3 mt-3" id="simpletab" role="tablist">
                @php
                $ActiveTab="1";
                @endphp
                @foreach($displayPanels as $displayPanel)

                @php
                $displayPanelId=$displayPanel['PanelId'];
                @endphp

                @if($ActiveTab==1)
                <li class="nav-item">
                    <a class="nav-link active" id="tabName{{$displayPanel['PanelId']}}" data-toggle="tab" href="#tab{{$displayPanel['PanelId']}}" role="tab" aria-controls="home" aria-selected="true" >{{$displayPanel['PanelName']}}</a>
                </li>
                @else
                <li class="nav-item">
                    <a class="nav-link" id="tabName{{$displayPanel['PanelId']}}" data-toggle="tab" href="#tab{{$displayPanel['PanelId']}}" role="tab" aria-controls="home" aria-selected="false" >{{$displayPanel['PanelName']}}</a>
                </li>
                @endif
                @php
                $ActiveTab='0';
                @endphp
                @endforeach
            </ul>
            <input type="hidden" name="folder" id="folder" value="{{$page['folder']}}" >
            <input type="hidden" name="RowId" id="RowId" value="{{$RowId}}" >
            <input type="hidden" name="ModuleId" id="ModuleId" value="{{$ModuleId}}" >
            <div class="tab-content" id="simpletabContent">

                @csrf
                <!-- <div class='row'> -->

                    @php
                    $loopcount=1;
                    $closediv=0;
                    $i=0;
                    $h=0;
                    $OldPanelId='';
                    $closePreviousTab="0";
                    $firsttab="show active";
                    $countHeader=count($header);
                    @endphp
                    @foreach($header as $fieldList)
                    @php
                    $h++;
                    $field_name=$fieldList['FieldName'];
                    $DisplayName=$fieldList['DisplayName'];
                    $DisplayType=$fieldList['DisplayType'];
                    $DemographyConfigId=$fieldList['DemographyConfigId'];
                    $InLineEdit=$fieldList['InLineEdit'];

                    $DependentFieldPanelType=$fieldList['DependentFieldPanelType'];
                    $DependentFieldPanelId=$fieldList['DependentFieldPanelId'];

                    $PanelId=$fieldList['PanelId'];

                    if(!array_key_exists(0,$results_obj))
                    {
                        $LabelValue='';
                    }
                    else
                    {   
                        $LabelValue = $results_obj[0]->$field_name;
                    }

                    $DropDownNameId=$fieldList['DropDownNameId'];
                    $ParentModuleId=$fieldList['ParentModuleId'];
                    @endphp


                    @if($closePreviousTab=="1" && $PanelId!=$OldPanelId)
                </div>
                @endif

                @if($PanelId!=$OldPanelId)

                @php
                if($firsttab)
                {
                    $className="displayblock";
                }
                else
                {
                    $className="displaynone";

                }

                @endphp
                <div class="tab-pane fade {{$firsttab}}  {{$className}}" id="tab{{$PanelId}}" role="tabpanel">
                  @php
                  $OldPanelId=$PanelId;
                  $closePreviousTab=1;
                  $firsttab="";
                  @endphp
                  @endif
                  @php

                  if($DisplayType==2 || $DisplayType==26)
                  {
                    if(empty($ListBoxNamesIDs) || $DropDownNameId=='')
                    {
                        $LabelValue="";
                        //$LabelValue=$GetDropdownLists[$LabelValue];
                    }
                    else
                    {
                        $ListBoxNamesIDVal=$DropDownNameId;

                        if(array_key_exists($ListBoxNamesIDVal,$GetDropdownLists))
                        {
                            $listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
                            if(array_key_exists($LabelValue,$listBoxVal))
                            $LabelValue=$listBoxVal[$LabelValue];
                        }

                    }
                }
                if($DisplayType==3)
                {
                    if(empty($ListBoxNamesIDs) || $DropDownNameId=='')
                    {
                        $LabelValue="";
                        //$LabelValue=$GetDropdownLists[$LabelValue];
                    }
                    else
                    {
                        $ListBoxNamesIDVal=$DropDownNameId;

                        if(array_key_exists($ListBoxNamesIDVal,$GetDropdownLists))
                        {
                            $listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
                            $listArray=explode(",",$LabelValue);
                            $LabelValue="";
                            foreach($listArray as $listVal)
                            {
                                if(array_key_exists($listVal,$listBoxVal))
                                $LabelValue.="<li>".$listBoxVal[$listVal]."</li>";


                            }
                        }
                    }

                }
                if($DisplayType==5)
                {
                    if(empty($ListBoxNamesIDs) || $DropDownNameId=='')
                    {
                        $LabelValue="";
                        //$LabelValue=$GetDropdownLists[$LabelValue];
                    }
                    else
                    {
                        $ListBoxNamesIDVal=$DropDownNameId;

                        if(array_key_exists($ListBoxNamesIDVal,$GetDropdownLists))
                        {
                            $listBoxVal=$GetDropdownLists[$ListBoxNamesIDVal];
                            if(array_key_exists($LabelValue,$listBoxVal))
                            $LabelValue=$listBoxVal[$LabelValue];
                        }
                    }
                }
                if($DisplayType==4 && $DateFormat!="" && $LabelValue!="")
                {
                    // added on 28th April '21
                    //echo $LabelValue;
                    if($LabelValue=="0000-00-00" || $LabelValue=="0000-00-00 00:00:00")
                    $LabelValue="";
                    else
                    $LabelValue = date("$DateFormat", strtotime($LabelValue));
                }

                if($DisplayType==14 && $DateFormat!="" && $TimeFormat!="" && $LabelValue!="")
                {
                    // updated on 16th Sept '21
                    if($LabelValue=="0000-00-00 00:00:00")
                    {
                        $LabelValue="";
                    }
                    else
                    {
                        // added on 29th April '21
                        $datetime = new DateTime($LabelValue);
                        $datetime->format("$DateFormat $TimeFormat");
                        $la_time = new DateTimeZone($TimeZone);
                        //$datetime->setTimezone($la_time);
                        $LabelValue = $datetime->format("$DateFormat $TimeFormat");
                    }
                }

                if($DisplayType==8)
                {
                    // RelateTo
                    $passArray=array("ModuleId"=>$LabelValue,"RowId"=>$field_name);
                    $row_id=$LabelValue;

                    if($LabelValue!="")
                    {
                        if(array_key_exists($LabelValue,$RelateModules))
                        {
                            $LabelValue=$RelateModules[$LabelValue];
                        }
                        else
                        {
                          $LabelValue=$LabelValue;
                      }
                  }

              }
              if($DisplayType==23)
              {


                  if(array_key_exists($LabelValue,$getChildDependentRelateToList))
                  {
                      $LabelValue=$getChildDependentRelateToList[$LabelValue];
                  }
                  $LabelValue=$LabelValue;
              }
              if($DisplayType==25)
              {
                // Self RelateTo
                @endphp
                @foreach($selfRelatedList as $selfRelated)
                @php
                if($LabelValue==$selfRelated['key'])
                {
                  $LabelValue=$selfRelated['value'];
              }
              @endphp
              @endforeach
              @php
          }

          if($DisplayType==15 && $LabelValue!="")
          {
            // AssignedTo
            if(array_key_exists($LabelValue,$AssignedToList))
            $LabelValue=$AssignedToList[$LabelValue]['name'];
        }

        if($DisplayType==7 || $DisplayType==10)
        {
            // TextArea OR TextEditor, added on 6th May '21
            $LabelValue=strip_tags($LabelValue);
        }

        @endphp
        @if($loopcount == 1)
        @endif
        @if($DisplayType!=99)
        <div class="col-md-4" style="float: left;min-height: 65px" >
            <div class="form-group">
                <h6>{{$DisplayName}}</h6>
                @else
                
                <div class="" style="float: left">
                    <div class="form-group">
                        @endif
                        @if($DisplayType == 8)
						@if($InLineEdit==1)
                        @php
                        $pass_me=json_encode($passArray); 
                        @endphp
                        <!-- <a href="{{ url('ShowDetailView',$passArray) }}" class="text-info">{{$LabelValue}}</a> -->
						<div id="DisplayRelative{{$h}}">
							<a onclick="popUp('{{$ModuleId}}','{{$row_id}}','{{$DisplayType}}','{{$field_name}}','{{$LabelValue}}')" class="text-info" data-toggle="modal" data-target="#exampleModal">{{$LabelValue}}</a>
						</div>
						<div id="RelativeEdit{{$h}}" onclick="RelativeButtonView({{$h}})">
							<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-edit-2 p-1 br-6 mb-1"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> 
						</div>
						<div id="RelativeField{{$h}}" style="display:none;">
							<button type="button"class="btn btn-info mb-2" onclick="popupSearch('{{$ParentModuleId}}','{{$field_name}}','{{$h}}','{{$DemographyConfigId}}')" style="margin-bottom: 0px!important">
								<svg xmlns="https://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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
							</button>
							<button type="button" class="btn btn-info mb-2"  onclick="clearInput('{{$h}}')"  style="margin-bottom: 0px!important">
								<svg xmlns="https://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-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
							</button>
						</div><br>
						<form id="FormEditable{{$h}}" name="FormEditable{{$h}}">
							<div id="changeNewREditable{{$h}}" name="changeNewREditable{{$h}}" style="display:none;"></div>
							 <input type="hidden"  class="form-control"  id="changeNewREditableName{{$h}}"  value ="">
						</form> 
						<!--End of TextBox-->
						<!--Tick and cancel Button-->
						<div name="saveexitlabelRLabelValue" id="saveexitlabelRLabelValue" style="display:none;">
							<a onclick="submitQuickEdit('{{$ModuleId}}','{{$RowId}}',{{$h}},'{{$DemographyConfigId}}','{{$DisplayType}}')" >
								<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check" style="color:green;"><polyline points="20 6 9 17 4 12"></polyline></svg><span class="icon-name"></span>
							</a>
							<a onclick="dontsavelabelR(,'LabelValue')" >
								<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="color:red;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
							</a>
						</div>
						@else
							<a onclick="popUp('{{$ModuleId}}','{{$row_id}}','{{$DisplayType}}','{{$field_name}}','{{$LabelValue}}')" class="text-info" data-toggle="modal" data-target="#exampleModal">{{$LabelValue}}</a>
						@endif
						<!--End of Tick and cancel Button-->
                        @elseif($DisplayType==9)
                        @if(array_key_exists($LabelValue,$tempFiles))
                        <a href="{{url('DownloadFiles',$tempFiles[$LabelValue][0]['fileId'])}}" title="Click here to Download" target="_blank">
                            <img src="{{$tempFiles[$LabelValue][0]['path']}}" alt="{{$tempFiles[$LabelValue][0]['name']}}" style="width:50px">
                        </a>
                        @endif
                        @elseif($DisplayType==16)
                        @if(array_key_exists($LabelValue,$tempFiles))
                        <a href="{{url('DownloadFiles',$tempFiles[$LabelValue][0]['fileId'])}}" title="Click here to Download" target="_blank">
                            {{$tempFiles[$LabelValue][0]['name']}}
                        </a>
                        @endif
                        @elseif($DisplayType==3)
                        @php
                        echo $LabelValue;
                        @endphp
                        @elseif($DisplayType==20)
                        @php
                        $click_to_call=base64_encode($LabelValue);
                        @endphp
                        <a onclick="Click2Call('{{$ModuleId}}','{{$click_to_call}}',)"  title="Click To Call via Cloud Agent!" class="text-info">
                            <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-phone-outgoing"><polyline points="23 7 23 1 17 1"></polyline><line x1="16" y1="8" x2="23" y2="1"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                            {{$LabelValue}}
                        </a>
                        <span id="Click2Call_Response"></span>
                        @elseif($DisplayType==21)
                        @php
                        $click_to_call=base64_encode($LabelValue);
                        @endphp
                        <a onclick="Click2Call('{{$ModuleId}}','{{$click_to_call}}')"  title="Click To Call this Masked Number via Cloud Agent!"  class="text-danger">
                            <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-phone-outgoing"><polyline points="23 7 23 1 17 1"></polyline><line x1="16" y1="8" x2="23" y2="1"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                            XXXX-XXX-XXX
                        </a>
                        <span id="Click2Call_Response"></span>
                        @elseif($DisplayType==22)
                        <span id="Masked" title="This field is Masked!"  class="text-warning">|*_*|</span>
                        @elseif($DisplayType==12)

                        @php
                        if(!empty($EmailValues))
                        {
                            if(array_key_exists($LabelValue,$EmailValues))
                            {
                                foreach($EmailValues[$LabelValue] as $emailValue)
                                {
                                    @endphp

                                    <li style="cursor:pointer" class="text-primary" onclick="composeMail('{{$emailValue}}')">{{$emailValue}}</li>
                                    @php
                                }
                            }
                        }

                        @endphp
                        @else
							@if($InLineEdit==1)
								 @if($DisplayType!=99)
								<div id="changeEditable{{$h}}" name="changeEditable{{$h}}" onclick="appendEditable('{{$h}}','{{$DemographyConfigId}}','{{$LabelValue}}')"> {{$LabelValue}}</div>
								<form id="FormEditable{{$h}}" name="FormEditable{{$h}}">
									<div id="changeNewEditable{{$h}}" name="changeNewEditable{{$h}}" style="display:none;"></div>
								</form> 
								<div name="saveexitlabelLabelValue" id="saveexitlabelLabelValue" style="display:none;">
									<a onclick="submitQuickEdit('{{$ModuleId}}','{{$RowId}}',{{$h}},'{{$DemographyConfigId}}','{{$DisplayType}}')" >
										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check" style="color:green;"><polyline points="20 6 9 17 4 12"></polyline></svg><span class="icon-name"></span>
									</a>
									<a onclick="dontsavelabel(,'LabelValue')" >
										<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="color:red;"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
									</a>
								</div>
								@endif
							@else
								{{$LabelValue}}
							@endif
                       
                        @endif
                    </div>
                </div>


                @if(($DisplayType=="26") && !empty($results_obj[0]->$field_name) && $DependentFieldPanelType==1)
                @php
                //echo "Dependent Dropdown";
                //echo $results_obj[0]->$field_name;
                @endphp
                <div id="{{$field_name}}" class="col-md-12" style="padding:0px">
                    <script>
                        document.addEventListener("DOMContentLoaded",function(){
                            setTimeout(GetDependentFieldsDetailView,100,'{{$field_name}}','{{$results_obj[0]->$field_name}}');
                        });
                    </script>
                </div>
                @endif

                @if(($DisplayType=="99") && !empty($results_obj[0]->$field_name))
                @php
                //echo "Dependent Dropdown";
                //echo $results_obj[0]->$field_name;
                @endphp
                <div id="{{$field_name}}" class="col-md-12" style="padding:0px">
                    <script>
                        document.addEventListener("DOMContentLoaded",function(){
                            setTimeout(GetDependentFieldsDetailView,100,'{{$field_name}}','{{$results_obj[0]->$field_name}}');
                        });
                    </script>
                </div>
                @endif




                @if($loopcount == 3)
                @php
                $loopcount=1;
                $closediv = 0;
                @endphp
                @else
                @php
                $loopcount = $loopcount+1;
                $closediv = 1;
                @endphp
                @endif
                @php
                $loopcount++;
                $i++;
                @endphp
                @endforeach        
                @if($closediv == 1)
                @endif
            </div>
        </div>
        <div class="row" style="width:100%">
            <div class="col-md-12 text-center">
                <div class="form-group">
                    <br />
                    @if($RoleAccess_e!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
                    <a href="{{ url('ShowEditView',$pass_array) }}" class="btn btn-primary mb-2">Edit</a>
                    @endif
                    @if($RoleAccess_d!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
                    <a onclick="RemoveMe('{{$ModuleId}}','{{$RowId}}','DetailView');" class="btn btn-danger mb-2">Delete</a>
                    @endif
                    <a onclick="AuditLog('{{$ModuleId}}','{{$RowId}}','DetailView');" class="btn btn-info mb-2" data-toggle="modal" data-target="#exampleModal">View Change Log</a>
                    @if($ModuleId == '32f08263-96a5-11eb-948a-56b1773fd56f')
                    <a href="{{ url('Convert-Lead',$RowId) }}" class="btn btn-secondary mb-2">Convert Lead</a>
                    @endif
                    @if($ModuleId == '69772a9d-aa88-4ca1-a701-b7f0c887a770')
                    <a href="{{ url('Download-iCal',$pass_array) }}" class="btn btn-success mb-2">Download iCalendar</a>
                    @endif

                    <a href="" data-toggle="modal" data-target="#RemainderModal" class="btn btn-warning mb-2" onclick="LoadReminders()">Reminder</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
             <div class="form-group">
              <br />
              @if($RoleAccess_e!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
              <button type="button" id="mySubBtn" class="btn btn-success" onclick="duplicatetoCreate()">Duplicate</button>
              @endif
              @if($RoleAccess_e!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
              <button type="button" id="mySubBtn" class="btn btn-success mb-2" onclick="FindDuplicate('FindDuplicates','{{$ModuleId}}')">Find Duplicate</button>
              @endif
          </div>
      </div>
  </div>
</div>
</div>
</div>

</div>

<!-- </div> -->

@if($RelatedModules['Status']=="Success")
@php
$subpanel_loop=0;
@endphp
<div id="icc">
  @foreach($RelatedModules['data'] as $subpanels=>$modules)
  @if($modules['AssociationType']==2 || $modules['AssociationType']==3)
  @php
  $SecondaryModuleId=$modules['SecondaryModuleId'];
  $AssociationType=$modules['AssociationType'];
  $ModuleIcon=$modules['ModuleIcon'];
  $TableCount=$modules['TableCount'];
  $SubPanel_Count=0;  // $modules['AssociationType'];

  if($ModuleIcon=="")
  $ModuleIcon='<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-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>';

  @endphp
  <div class="row">
    <div class="col-lg-12 layout-spacing">
        <div id="iconsAccordion{{$subpanel_loop}}" class="accordion-icons">

            <div class="card">
                <div class="card-header" id="headingThree{{$subpanel_loop}}" onclick="GetSubPanel('{{$module_name}}','{{$SecondaryModuleId}}','{{$subpanel_loop}}','Auto','UpdatedDate','1','{{$AssociationType}}','{{$ModuleId}}')">
                    <section class="mb-0 mt-0">
                        <div role="menu" class="" data-toggle="collapse" data-target="#iconAccordion{{$subpanel_loop}}" aria-expanded="false" aria-controls="iconAccordion{{$subpanel_loop}}">
                            <div class="accordion-icon">
                                <!-- <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-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg> -->
                            @php echo $ModuleIcon @endphp</div>
                            {{$modules['ModuleName']}}
                            @if($SubPanel_Count>0)
                            <span class="badge badge-danger counter">{{$SubPanel_Count}}</span>
                            @endif
                            <div class="icons">
                               @if($TableCount!=0)
                               <span class="badge badge-info">{{$TableCount}}</span>
                               @endif
                               <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
                           </div>
                       </div>
                   </section>
               </div>
               <div id="iconAccordion{{$subpanel_loop}}" class="collapse" aria-labelledby="headingThree{{$subpanel_loop}}" data-parent="#iconsAccordion{{$subpanel_loop}}">
                <div class="card-body">
                    <div class="col-sm-12 col-md-12">
                        <a onclick="QuickCreate('{{$SecondaryModuleId}}','{{$subpanel_loop}}')" class="btn btn-primary mb-2" data-toggle="modal" data-target="#exampleModal">Create</a>
                        <a onclick="PopUpLinking('{{$module_name}}','{{$SecondaryModuleId}}','{{$subpanel_loop}}','Link','UpdatedDate','1','{{$AssociationType}}','{{$ModuleId}}',)" class="btn btn-primary mb-2" data-toggle="modal" data-target="#exampleModal">Link</a>
                    </div>
                </div>

                <div class="card-body" id="SubPanel{{$subpanel_loop}}">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@php
$subpanel_loop++;
@endphp
@endif
@endforeach

</div>
@endif

<input type="hidden" name="ModuleName" id="ModuleName" value="{{$ModuleName}}">

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">BPM360</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" 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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
              </button>
          </div>
          <div class="modal-body" id="response_div">
            <p class="modal-text"></p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
            <!-- <button type="button" class="btn btn-primary">Save</button> -->
        </div>
    </div>
</div>
</div>
<div class="modal fade " id="SearchModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Search</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<svg aria-hidden="true" xmlns="https://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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
				</button>
			</button>
		</div>
		<div class="modal-body">
			<input type="hidden" id="ParentModuleId"  value="">
			<input type="hidden" id="ColumnName"  value="">
			<input type="hidden" id="Holdrowcnt"  value="">
			<input type="hidden"  id="HoldDemoId" value=""> 
			<div class="row">
				<div class="col-lg-12 layout-spacing">
					<div id="iconsAccordion" class="accordion-icons">

						<div class="card">
							<div class="card-header" id="headingThree8">
								<section class="mb-0 mt-0">
									<div role="menu" class="" data-toggle="collapse" data-target="#iconAccordionThree" aria-expanded="false" aria-controls="iconAccordionThree">
										<div class="accordion-icon"><svg xmlns="https://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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
											Search Filters <div class="icons"><svg xmlns="https://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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
										</div>
									</section>
								</div>
								<div id="iconAccordionThree" class="collapse" aria-labelledby="headingThree8" data-parent="#iconsAccordion">
									<div class="card-body">
										<div class="col-xs-12 col-sm-12 col-md-12" name="ShowFields" id="ShowFields">
										</div>
										<input type="button" name="FindTicket" id="FindTicket" value="Search" class="btn btn-primary" onclick="SearchAll()" />
										<input type="button" name="Clear" id="Clear" value="Clear" class="btn btn-primary"  onclick="SearchFilters()" />
										<p id="loading"></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div id="ShowFields">

				</div>
			<!--    <div class="form-group row" >
					<div class="col-md-12"align="center">
						<button class="btn btn-primary" onclick="SearchAll()">Search</button>
					</div>
				</div> -->
				<div class="form-group row">
					<div class="col-md-12">
						<div id="ShowModalResults">
						
						</div>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
			</div>
		</div>
	</div>
</div>
</div>
<!-- remainder Modal -->
<div class="modal fade" id="RemainderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="RemainderModalLabel">Reminders</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" 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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
              </button>
          </div>
          <div class="modal-body" id="RemainderBody_div">
            <div class="col-md-12">
              <!--   <label style="cursor:pointer" onclick="AddRemainder()">Add Remainder&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></label> -->
              <button class="btn btn-primary" onclick="AddRemainder()" style="margin-bottom: 10px">
                Add Reminder
            </button>
            <br>
        </div>

        <div class="col-md-12">

            <div id="iconsAccordion" class="accordion-icons">
                <div class="card">
                    <div class="card-header" id="...">
                        <section class="mb-0 mt-0">
                            <div role="menu" class="collapsed" data-toggle="collapse" data-target="#iconAccordionOne" aria-expanded="true" aria-controls="iconAccordionOne">
                                <div class="accordion-icon"><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-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg></div>
                                Reminders  <div class="icons"><svg> ... </svg></div>
                            </div>
                        </section>
                    </div>

                    <div id="iconAccordionOne" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
                        <div class="card-body">
                            <div id="Remainderslist">

                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <form name="remaindersForm" id="remaindersForm" method="post">
                <input type="hidden" name="remainderIds" id="remainderIds" value="">
                <div id="RemaindersDiv">
                </div>
                <!-- <p class="modal-text"></p> -->
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" onclick="$('#RemaindersDiv').html('')"><i class="flaticon-cancel-12"></i> Discard</button>
                <button type="button" class="btn btn-primary" id='SaveReminderbtn' onclick="SaveReminders()">Save</button>
            </div>
        </form>

    </div>
</div>
</div>
@endsection
@php
$siteurl=$_SERVER['HTTP_HOST'];
//$url=explode(".",$siteurl);   // crm.bpm360.net
@endphp
<link href="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo7/plugins/flatpickr/flatpickr.css" rel="stylesheet" type="text/css">
<link href="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo7/plugins/flatpickr/custom-flatpickr.css" rel="stylesheet" type="text/css">
<script  src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo2/plugins/flatpickr/flatpickr.js"></script>
<script  src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo2/plugins/flatpickr/custom-flatpickr.js"></script>


            <!-- <script  type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/quill.js"></script>
                <script   type="text/javascript" src="https://{{$siteurl}}/cloud/public/cork/HTML/ltr/demo6/plugins/editors/quill/custom-quill.js"></script> -->

                <script type="text/javascript">
                    setTimeout(function(){
                       $('#icc').sortable();
                   },1500);

                    function FindDuplicate(source,ModuleId){
                      var RowId = $('#RowId').val();
                      var url="../../"+source+"/"+ModuleId+"/"+RowId+"";
                      var href="{{'"+url+"'}}";
                      window.location.href = url;
                  }
                  function duplicatetoCreate()
                  {
                      var RowId = $('#RowId').val();
                      var ModuleId = $('#ModuleId').val();
                      var formData = {
                          ModuleId: ModuleId,
                          RowId: RowId,
                      };
                      swal({
                          title: 'Are you sure?',
                          text: "You want to Duplicate this Record!",
                          type: 'warning',
                          showCancelButton: true,
                          confirmButtonText: 'Duplicate',
                          padding: '2em'
                      }).then(function(result) {
                          if (result.value) 
                          {
                           $.ajax({
                            type: "POST",
                            url: "{{url('CreateDuplicate')}}",
                            data: formData,
                            beforeSend:function()
                            {
                            },
                            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                            dataType: 'json',
                            success: function () {
                            },
                            complete: function (response) {
                              var txt = response.responseJSON;
                              if(txt.Status=="Success"){
                                Snackbar.show({
                                 text: txt.Message,
                                 pos: 'top-right',
                             });
                                var RowId=txt.RowId;
                                var url="../../ShowEditView/"+ModuleId+"/"+RowId+"";
                                var href="{{'"+url+"'}}";
                                window.location.href = url;

                            }
                            else if(txt.Status=="Fail")
                            {
                                Snackbar.show({
                                 text: txt.Message,
                                 actionTextColor: '#fff',
                                 backgroundColor: '#e2a03f',
                                 pos: 'top-right',
                             });
                            }
                        },
                        error: function (data) {
                         console.log(data);
                     }
                 }); 
                       }
                       else{
                           RowId="817541b5-f4a4-4f52-ac58-2fe6367fb925";

                           Snackbar.show({
                            text: 'Warning',
                            actionTextColor: '#fff',
                            backgroundColor: '#e2a03f',
                            text: 'You have not Duplicate this Record!',
                            pos: 'top-right',
                        });
                       }
                   });
                  }
				  function appendEditable(rowcnt,DemographyConfigId,display_name)
				  {
					  var ModuleId = $('#ModuleId').val();
						var type = "POST";
						var ajaxurl = "{{url('AppendDemographyFields')}}";
						$.ajax({
							type: type,
							url: ajaxurl,
							data:{DemographyConfigId,display_name,ModuleId},
							success: function (result) 
							{
								document.getElementById("changeNewEditable"+rowcnt).style.display = "block";
								document.getElementById("changeEditable"+rowcnt).style.display = "none";
							   $("#changeNewEditable"+rowcnt).html(result);
							   displayoptions(rowcnt,'LabelValue'); 
							}
						 });
				  }
				  function displayoptions(loopcount,field_name){
						//alert("ID : "+idval);
						var saveexitlabel_name = "saveexitlabel"+field_name+""+loopcount;
						//alert(saveexitlabel_name);
						document.getElementById(saveexitlabel_name).style.display = "block";
					}
					function dontsavelabel(rowcnt,label){
						document.getElementById("saveexitlabelLabelValue"+rowcnt).style.display = "none";
						document.getElementById("changeNewEditable"+rowcnt).style.display = "none";
						document.getElementById("changeEditable"+rowcnt).style.display = "block";
						//response="kabali";
						//$("#changeEditable"+rowcnt).html(response);
					}
					submitQuickEdit=(ModuleId,RowId,rowcnt,DemographyId,DisplayType)=>
					{
						//formData=document.getElementById("FormEditable"+rowcnt);
						formData=JSON.stringify($("#FormEditable"+rowcnt).serializeArray());
						formDataValue=$("#FormEditable"+rowcnt).serializeArray();
						var NewValue=formDataValue[0].value;
					   // var EditForm = JSON.stringify(formData.serializeArray());
					   
						var formData = {
							ModuleId: ModuleId,
							RowId: RowId,
							source: "Edit",
							data: formData,
						};
						console.log(formData);
						$.ajax({
							type:"post",
							url:"{{url('SaveQuickEditView')}}",
							data:formData,
							beforeSend:function(){
							   // $('#mySubBtn'+UniqId).prop("disabled",true);
							},
							success:function(response){
								console.log(response);
								res=JSON.parse(response);

								if(res.Status=="Success")
								{
								 Snackbar.show({
									text: res.Message,
									pos: 'top-right',
								});
								if(DisplayType == '8')
								{
									document.getElementById("RelativeField"+rowcnt).style.display = "none";
									document.getElementById("changeNewREditable"+rowcnt).style.display = "none";
									document.getElementById("changeNewREditableName"+rowcnt).style.display = "none";
									document.getElementById("saveexitlabelRLabelValue"+rowcnt).style.display = "none";
									document.getElementById("RelativeEdit"+rowcnt).style.display = "block";
									getSavedField(ModuleId,RowId,rowcnt,DemographyId,DisplayType);
								}
								else
								{
									document.getElementById("changeNewEditable"+rowcnt).style.display = "none";
									document.getElementById("saveexitlabelLabelValue"+rowcnt).style.display = "none";
									document.getElementById("changeEditable"+rowcnt).style.display = "block";
									getSavedField(ModuleId,RowId,rowcnt,DemographyId,DisplayType);
								}
								
								// $("#changeEditable"+rowcnt).html(NewValue);
							 }
								// $('#mySubBtn'+UniqId).prop("disabled",false);

							}   
						});

						// console.log(UniqId);

						// console.log("ModuleId",ModuleId);
						// console.log("RowId",RowId);
					}
					function getSavedField(ModuleId,RowId,DivId,DemoId,DisplayType)
					{
							var type = "POST";
							var ajaxurl = "{{url('GetSingleFieldValue')}}";
							$.ajax({
								type: type,
								url: ajaxurl,
								data:{ModuleId,RowId,DemoId},
								success: function (result) 
								{
									if(DisplayType==8)
									{
										$("#DisplayRelative"+DivId).html(result);
										 document.getElementById("changeNewREditableName"+DivId).type="hidden"; 
									}
									else
									{
										$("#changeEditable"+DivId).html(result);
									}
									
								}
							 });
					}
					function RelativeButtonView(rowcnt){ 
						document.getElementById("RelativeField"+rowcnt).style.display = "block";
						document.getElementById("RelativeEdit"+rowcnt).style.display = "none";
						//response="kabali";
						//$("#changeEditable"+rowcnt).html(response);
					}
					function popupSearch(ParentModuleId,ColumnName,rowcnt,demographyId)
					{
						$('#SearchModal').modal("show");
						//$('#ParentModuleId').val(ParentModuleId);
					   // $('#ColumnName').val(ColumnName);
						ModuleId=ParentModuleId;
						SearchFilters(ModuleId);
						SearchAllModal(ModuleId,ColumnName,rowcnt,demographyId);
					}
					function SearchAllModal(ModuleId,ColumnName,rowcnt,demographyId)
					{

						// return false;
						// console.log("Loading Results...");

						//var ModuleId = $('#ParentModuleId').val();
						//var page_num = $('#page_num').val();
						//var total_records = $('#total_records').val();
						var limit = $('#limit').val();
						var field_name = ColumnName;
						var sort_order = $('#sort_order').val();
						var page_num = $('#page_num').val();
						var mode='RelatedSearch';
						//var page_num=1;

						$("#SearchMode").val(mode);   // on 24th April '21

						if(limit==undefined || limit=="")
							limit=10;

						if(page_num==undefined || page_num=="")
							page_num=1;

						if(sort_order==undefined || sort_order=="")
							sort_order="DESC";

						if(field_name==undefined || field_name=="")
							field_name="CreatedDate";

						var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

						var formData = {
							data: searchForm,
							source: ModuleId,
							ModuleId: ModuleId,
							page_num: page_num,
							limit: limit,
							field_name: field_name,
							sort_order: sort_order,
							mode: mode
						};

						//var ajax_url = "FindMe";
						var ajax_url = "{{ url('FindMePagination') }}";
						$.ajax({
							url: ajax_url,
							type: 'POST',
							data: formData,
							headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
							beforeSend:function() {
								$('#loading').html("<div class='loader dual-loader mx-auto'></div>");
							},
							success: function(result) {
								// console.log("Success...");
								$('#loading').html('');
								$('#ShowModalResults').html(result);
								document.getElementById("Holdrowcnt").value = rowcnt;
								document.getElementById("HoldDemoId").value = demographyId;
							}, 
							error: function (data) {
								$('#ShowModalResults').html("");
							}
						});
					}
					SelectMe2=(RowId,ModuleId)=>
					{
						// console.log(RowId);
						MainModuleId=$('#ModuleId').val();
						Holdrowcnt=$('#Holdrowcnt').val();
						HoldDemoId=$('#HoldDemoId').val();
						$.ajax({
							type:"POST",
							url:"{{url('GetRelatedName')}}",
							data:{RowId,ModuleId,MainModuleId},
							beforeSend:function(){},
							success:function(response)
							{
								// console.log(response);
								result1=JSON.parse(response);
								result=result1.result;
								rowId=result.RowId;
								CountofMap=result1.CountofMap;
								GetFetechedMappedFields=result1.GetFetechedMappedFields;
								document.getElementById("changeNewREditable"+Holdrowcnt).style.display = "block";
								//document.getElementById("changeEditable"+Holdrowcnt).style.display = "none";
								displayVal=result.DisplayName;
								appendEditableforR(Holdrowcnt,HoldDemoId,rowId,displayVal);
							  //document.getElementById("changeNewREditableName"+Holdrowcnt).value=displayVal;
							   
							   //$("#changeNewREditableName"+Holdrowcnt).value=$displayVal;
							   //$("#changeNewREditable"+Holdrowcnt).html(GetFetechedMappedFields);
							  //  ColumnName=$('#ColumnName').val();
							   
							  //  displayVal=result.DisplayName;
							  //  $('#'+ColumnName).val(rowId);
							   // $('#'+ColumnName+"Display").val(displayVal);
								Snackbar.show({
									text: "Selected", 
									pos: 'top-right',
								});
								console.log();
								$('#SearchModal .close').click();

							}
						});
					}
					function appendEditableforR(rowcnt,DemographyConfigId,display_name,displayVal){
						var ModuleId = $('#ModuleId').val();
						var type = "POST";
						var ajaxurl = "{{url('AppendDemographyFields')}}";
						$.ajax({
							type: type,
							url: ajaxurl,
							data:{DemographyConfigId,display_name,ModuleId},
							success: function (result) 
							{
								//document.getElementById("changeNewREditableName"+Holdrowcnt).style.display = "block";
								 $("#changeNewREditable"+rowcnt).html(result);
								 document.getElementById("changeNewREditable"+rowcnt).style.display = "none";
								 document.getElementById("changeNewREditableName"+rowcnt).type="text"; 
								 document.getElementById("changeNewREditableName"+rowcnt).value=displayVal;
							   displayoptionsforR(rowcnt,'RLabelValue'); 
							}
						 });
						//response="kabali";
						//$("#changeEditable"+rowcnt).html(response);
					}
					function displayoptionsforR(loopcount,field_name){
						//alert("ID : "+idval);
						var saveexitlabel_name = "saveexitlabel"+field_name+""+loopcount;
						//alert(saveexitlabel_name);
						document.getElementById(saveexitlabel_name).style.display = "block";
					}
                  function GetSubPanel(module_name,SecondaryModuleId,subpanel_loop,mode,field_name,page_num,AssociationType,PrimaryModuleId){

                   var RowId = $('#RowId').val();
                   console.log( "Getting ListView Data... "+RowId+" = "+module_name+" -> "+SecondaryModuleId+" | "+subpanel_loop+" / "+mode);

                   if(mode=='Auto')
                   {
                    var limit=5;
                    var sort_order="DESC";
                }
                else
                {

                    var limit = $('#limit').val();

                    var sort_order=mode;

                }

                var ajax_url = "{{ url('GetSubPanel') }}";
                var formData = {

                 RowId: RowId,
                 module_name: module_name,
                 SecondaryModuleId: SecondaryModuleId,
                 page_num: page_num,
                 limit: limit,
                 field_name: field_name,
                 sort_order: sort_order,
                 subpanel_loop: subpanel_loop,
                 mode: mode,
                 PrimaryModuleId: PrimaryModuleId,
                 AssociationType: AssociationType
             };
             $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
             $.ajax({
                url: ajax_url,
                type: 'POST',
                data: formData,
                beforeSend:function() {
                    $('#SubPanel'+subpanel_loop).html("<div class='loader dual-loader mx-auto'></div>");
                },
                success: function(result) {
                    console.log("Success...");

                    $('#SubPanel'+subpanel_loop).html(result);
                },
                error: function (data) {
                    console.log("Error:"+data);
                    var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
                $('#SubPanel'+subpanel_loop).html(na);  // 'Not Available!'
            }
        });
         }

         function RemoveMe(ModuleId,RowId,Source){
            swal({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              type: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Delete',
              padding: '2em'
          }).then(function(result) {
              if (result.value) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                    }
                });
                var formData = {
                    ModuleId: ModuleId,
                    RowId: RowId,
                    Source: Source,
                };
                var type = "POST";
                var ajaxurl = "{{ url('DeleteMe') }}";
                $.ajax({
                    type: type,
                    url: ajaxurl,
                    data: formData,
                    dataType: 'json',
                    success: function () {

                    },
                    complete: function (result) {
                        var obj = result.responseJSON;
                        var msg=obj.Message;

                        Snackbar.show({
                            text: msg,
                            pos: 'top-right',
                        });

                    // redirect to listview
                    var url="../../ListView/"+ModuleId+"";
                    var href="{{'"+url+"'}}";
                    window.location.href = url;
                },
                error: function (data) {
                    console.log(data);
                }
            });
                swal(
                  'Deleted!',
                  msg,
                  'success'
                  )
            }
            else
            {
                Snackbar.show({
                    text: 'Warning',
                    actionTextColor: '#fff',
                    backgroundColor: '#e2a03f',
                    text: 'You have not deleted this record!',
                    pos: 'top-right',
                });
            }
        })

      }


      function AuditLog(ModuleId,RowId,Source){
        $('#response_div').text("");
        $('#exampleModalLabel').text("View Change Log");
        console.log( "Getting Audit Data... "+RowId+" = "+ModuleId);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        var formData = {
            ModuleId: ModuleId,
            RowId: RowId,
            Source: Source,
        };
    // var web_route="ViewChangeLog/"+ModuleId+"/"+RowId;
    // var ajaxurl = "{{ url('ViewChangeLog/"+ModuleId+"/"+RowId+"') }}";
    var ajaxurl = "../../ViewChangeLog/"+ModuleId+"/"+RowId+"";
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: formData,
        success: function (response) {
            $('#response_div').html(response);
        },
        complete: function () {
        },
        error: function (data) {
            console.log(data);
        }
    });

}


function open_me(obj){
    var ModuleId=obj.ModuleId;
    var RowId=obj.RowId;
    var url="../../ShowDetailView/"+ModuleId+"/"+RowId;
    var href="{{'"+url+"'}}";
    console.log("Opening "+url);
    window.location.href = url;
}

function popUp(ModuleId,row_id,display_type,field_name,LabelValue){
        // added on 6th May '21
        $('#response_div').text("");
        $('#exampleModalLabel').text(LabelValue);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });
        var form_Data = {
            Source: 'DetailView'
        };
        var ajax_url = "../../PopUpView/"+ModuleId+"/"+row_id+"/"+display_type+"/"+field_name;
    // var ajax_url = "./PopUpView/"+ModuleId+"/"+row_id+"/"+display_type+"/"+field_name;
    $.ajax({
        type: 'POST',
        url: ajax_url,
        data: form_Data,
        success: function (response) {
            $('#response_div').html(response);
        },
        complete: function () {
        },
        error: function (data) {
            console.log(data);
        }
    });
}

downloadDoc=(src)=>
{
    var link=document.createElement('a');
    document.body.appendChild(link);
    link.href= src;
    link.download = '';
    link.click();
}

function QuickCreate(SecondaryModuleId,subpanel_loop)
{
    moduleID=$('#ModuleId').val();
    RowId='{{$RowId}}';
    // alert(SecondaryModuleId);
    // return false;
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        type:"POST",
        data:{ModuleId:SecondaryModuleId,RowId:RowId,subpanel_loop:subpanel_loop,PrimaryModuleId:moduleID},
        url:"{{url('GetQuickCreateFields')}}",
        success:function(response)
        {
            $('#response_div').html(response);
            $('#exampleModalLabel').html("Create "+$('#ModuleName').val());
            // alert(JSON.stringify(response));
        }

    });
    // alert(moduleID);
}

    // added on 17th Aug '21
    function PopUpLinking(module_name,SecondaryModuleId,subpanel_loop,mode,field_name,page_num,AssociationType,PrimaryModuleId)
    {
    // moduleID=$('#ModuleId').val();
    // SecondaryModuleId=$('#SecondaryModuleId').val();
    // RowId='{{$RowId}}';

    // $.ajaxSetup({
    //     headers:{
    //         'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
    //     }
    // });
    // $.ajax({
    //     type:"POST",
    //     data:{ModuleId:ModuleId,SecondaryModuleId:SecondaryModuleId,RowId:RowId,AssociationType:AssociationType},
    //     url:"{{url('GetQuickLinking')}}",
    //     success:function(response)
    //     {
    //         $('#response_div').html(response);
    //         $('#exampleModalLabel').html("Create"+$('#ModuleName').val());
    //         // alert(JSON.stringify(response));
    //     }

    // });

    var ModuleName=$('#ModuleName').val();
    var ModuleName_txt="Associate Records to "+ModuleName;
    $('#exampleModalLabel').text(ModuleName_txt);
    var RowId = $('#RowId').val();

    var limit=5;
    var sort_order="DESC";

    console.log( "Popup... "+RowId+" = "+module_name+" -> "+SecondaryModuleId+" | "+subpanel_loop+" / "+mode);

    // var ajax_url = "{{ url('GetSubPanel') }}";
    var ajax_url = "{{ url('GetQuickLinking') }}";

    var formData = {
        RowId: RowId,
        module_name: module_name,
        PrimaryModuleId: PrimaryModuleId,
        SecondaryModuleId: SecondaryModuleId,
        page_num: page_num,
        limit: limit,
        field_name: field_name,
        sort_order: sort_order,
        subpanel_loop: subpanel_loop,
        mode: mode,
        AssociationType: AssociationType
    };
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: formData,
        beforeSend:function() {
            $('#response_div').html("<div class='loader dual-loader mx-auto'></div>");
        },
        success: function(result) {
            console.log("Via PopUp");
            $('#response_div').html(result);
        },
        error: function (data) {
            console.log("Error:"+data);
            var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
                $('#SubPanel'+subpanel_loop).html(na);  // 'Not Available!'
            }
        });
}

function LinkMe(PrimaryModuleId, SecondaryModuleId, UniqueId, AssociationType, Source, subpanel_loop,mode,field_name,page_num){
    swal({
      title: 'Are you sure?',
      text: "Do you want to link this record?",
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Associate',
      padding: '2em'
  }).then(function(result) {
      if (result.value) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });

        var module_name=$('#ModuleName').val();
        var RowId = $('#RowId').val();
        var formData = {
            UniqueId: RowId,
            PrimaryModuleId: PrimaryModuleId,
            SecondaryModuleId: SecondaryModuleId,
            RowId: UniqueId,
            AssociationType: AssociationType,
            Source: Source,
        };
        var type = "POST";
        var ajaxurl = "{{ url('LinkSaveAssociation') }}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data: formData,
            dataType: 'json',
            success: function () {

            },
            complete: function (result) {

                var obj = result.responseJSON;
                var msg=obj.Message;
                var Success=obj.Status;

                Snackbar.show({
                    text: msg,
                    pos: 'top-right',
                });

                    // redirect to listview
                // var url="../../ListView/"+ModuleId+"";
                // var href="{{'"+url+"'}}";
                // window.location.href = url;
                    // on 18th Aug '21
                    if(Success=='Success')
                    {
                        $('#exampleModal').modal('hide');
                        GetSubPanel(module_name,SecondaryModuleId,subpanel_loop,'Auto','UpdatedDate','1',AssociationType,PrimaryModuleId);
                    }

                },
                error: function (data) {
                    console.log(data);
                }
            });
        swal(
          'Associated!',
          msg,
          'success'
          )
    }
    else
    {
        Snackbar.show({
            text: 'Warning',
            actionTextColor: '#fff',
            backgroundColor: '#e2a03f',
            text: 'You have not linked this record!',
            pos: 'top-right',
        });
    }
})

}


    // added on 19th Aug '21
    function Click2Call(ModuleId,click_to_call)
    {
        var RowId = $('#RowId').val();
        var ajaxurl = "{{ url('ClickToCall') }}";
        var form_Data = {
            ModuleId: ModuleId,
            RowId: RowId,
            click_to_call: click_to_call,
            Source: 'DetailView'
        };

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: form_Data,
            dataType: 'json',
            beforeSend:function() {
                $('#Click2Call_Response').html("<div class='loader dual-loader mx-auto'></div>");
            },
            success: function () {
                $('#Click2Call_Response').html("");
            },
            complete: function (result) {
                var obj = result.responseJSON;
                var Success_text=obj.Status;
                var msg_text=obj.Message;

                Snackbar.show({
                    text: msg_text,
                    pos: 'top-right',
                });

                $('#Click2Call_Response').html(msg_text);
            },
            error: function (data) {
                console.log("Error:"+data);
                var na='<div class="alert alert-arrow-right alert-icon-right alert-light-danger mb-4" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-dismiss="alert" 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-x close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button><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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg><strong>Not Available!</strong></div>';
                $('#Click2Call_Response').html(na);
            }
        });
    }


    GetDateFields=(ModuleId,RowId)=>{

        return new Promise((resolve,reject)=>{
            $.ajax({
                type:"POST",
                url:"{{url('GetDateFields')}}",
                data:{ModuleId,RowId},
                success:response=>{
                    // console.log(response);
                    resolve(response);
                }
            });


        });
        
    }

    AddRemainder=async()=>{

        // today='';
        var currentdate = new Date(); 
        var datetime = currentdate.getFullYear() + "-"
        + (currentdate.getMonth()+1)  + "-" 
        +currentdate.getDate() + " "
        + currentdate.getHours() + ":"  
        + currentdate.getMinutes();


        var DateTimeDisplay=currentdate.getDate()+"-"
        + (currentdate.getMonth()+1)  + "-" 
        + currentdate.getFullYear() + " "
        + currentdate.getHours() + ":"  
        + currentdate.getMinutes();

        ModuleId=$('#ModuleId').val();
        RowId=$('#RowId').val();
        AssignedToList=JSON.parse('');
        RelatedModuleListArray=JSON.parse('');
        EmailTemplatesList=JSON.parse('');
        ContactModules=JSON.parse('');

        AllRelatedModules=[];
        // console.log(ContactModules);


        try{
            DateFields=await GetDateFields(ModuleId,RowId);
            // console.log(DateFields);
        }
        catch(e)
        {
            console.log("error",e);
        }
        
        // return false;
        var uniqId = (new Date()).getTime();
        RemainderIds=[];
        RemainderIdvals=$('#remainderIds').val();
        if(RemainderIdvals)
        {
           RemainderIds=RemainderIdvals.split(",");
       }



       DateFields=JSON.parse(DateFields);
       dateoptions='';
       for(let [key,value] of Object.entries(DateFields))
       {
        dateoptions+=`<option value="${value}">${key}</option>`
    }

    AssignedToOptions='<option value="">Select User</option>';
    loggeduserMail='{{$userdetails->email}}';
    for(let [key,value] of Object.entries(AssignedToList))
    {   
        selected='';
        if(loggeduserMail==value.email)
        {
            selected="selected";
        }
        AssignedToOptions+=`<option value="${value.email}" ${selected}> ${value.name} </option>`;
    }

    RelatedModuleListArray.forEach((RelatedModuleList)=>{
            // console.log(RelatedModuleList.ModuleName);
            key=RelatedModuleList.SecondaryModuleId;
            value=RelatedModuleList.ModuleName;
            AllRelatedModules[key]=value;
        });
    EmailTemplateOptions='<option value="">Select Template</option>';
    EmailTemplatesList.forEach((EmailTemplate)=>{
        EmailTemplateOptions+=`
        <option value="${EmailTemplate.EmailTemplatesId}">${EmailTemplate.Name}</option>
        `;
    });

    for(let [key,value] of Object.entries(ContactModules))
    {
        AllRelatedModules[key]=value;
    }
    AllRelatedModulesList='';
    for(let [key,value] of Object.entries(AllRelatedModules))
    {
        AllRelatedModulesList+=`<option value="${key}">${value}</option> `;
    }
    // console.log(AllRelatedModulesList);
    RemainderIds.push(uniqId);
    $('#remainderIds').val(RemainderIds);

    const div=
    `<div class="from-group row" id="RemDiv${uniqId}" style="margin-top:10px;border: 1px solid #e0e6ed;padding: 5px 0px;border-radius: 5px">
    <div class="col-md-12"style="margin:10px 0px">
    <div class="icon-container" style="float: right;cursor:pointer" onclick="RemoveRemainder('${uniqId}')">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg><span class="icon-name"></span>
    </div>
    </div>
    <div class="col-md-12"style="margin:10px 0px">

    <div class="col-md-3" style="float:left !important">
    <label>Invite type</label>
    <select name="InviteType${uniqId}" name="InviteType${uniqId}" id='InviteType${uniqId}' class="form-control" onchange="DisplayInviteType('${uniqId}',this.value)">
    <option value="1" selected>Assigned To</option>
    <option value="2">Relate To</option>
    
    </select>
    </div>

    <div class="col-md-3" style="float:left !important" id='AssignedToValDiv${uniqId}'>
    <label style="">Assigned To</label>
    <select name="invitee${uniqId}" id='invitee${uniqId}' class="form-control" onchange="DisplayEmailsList(${uniqId})">
    ${AssignedToOptions}
    </select>
    </div>

    <div class="col-md-3" style="float:left !important;display:none" id='RelatedModuleDiv${uniqId}'>
    <label>Related Module</label>
    <select name="RelatedModule${uniqId}" name="RelatedModule${uniqId}" id='RelatedModule${uniqId}' class="form-control" onchange="GetRelatedRows('${uniqId}')">
    <option value="">Select Module</option>
    ${AllRelatedModulesList}
    </select>
    </div>

    

    <div class="col-md-3" style="float:left !important;" id='EmailTemplatesDiv${uniqId}'>
    <label>Email Templates
    <div class="icon-container" style="cursor:pointer;display: inline-block;margin-top: -18px;" onclick="createEmailTEmplate()">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg><span class="icon-name"></span>
    </div>
    </label>
    <select name="EmailTemplates${uniqId}" id='EmailTemplates${uniqId}' class="form-control emailtemplate" onchange="">
    ${EmailTemplateOptions}
    </select>
    </div>



    </div>

    <div class="col-md-12" id="relatemodal${uniqId}" style="display:none">
    <!------------------------------------------------->

    <div class="col-lg-12 layout-spacing">
    <div id="iconsAccordion" class="accordion-icons">

    <div class="card">
    <div class="card-header" id="headingThree8">
    <section class="mb-0 mt-0">
    <div role="menu" class="" data-toggle="collapse" data-target="#iconAccordionThree" aria-expanded="false" aria-controls="iconAccordionThree">
    <div class="accordion-icon"><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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    Search Filters <div class="icons"><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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></div>
    </div>
    </section>
    </div>
    <div id="iconAccordionThree" class="collapse" aria-labelledby="headingThree8" data-parent="#iconsAccordion">
    <div class="card-body">
    <div class="col-xs-12 col-sm-12 col-md-12" name="ShowFields${uniqId}" id="ShowFields${uniqId}">
    </div>
    <input type="button" name="FindTicket" id="FindTicket" value="Search" class="btn btn-primary" onclick="SearchAll('${uniqId}')" />
    <input type="button" name="Clear" id="Clear" value="Clear" class="btn btn-primary"  onclick="SearchFilters('${uniqId}')" />
    <p id="loading"></p>
    </div>

    <div class="col-md-12">
    <div id="ShowResults${uniqId}">
    </div>
    </div>

    </div>
    </div>
    </div>

    </div>
    
    <!------------------------------------------------->
    </div>
    <!------------Table content------------------------------------->

    <div class="col-md-12" style="margin-top: 10px;padding-left: 30px;" id="EmailPhoneDiv${uniqId}">

    <table class="table table-bordered table-hover">
    <thead>
    <tr>
    <th>Names</th><th>E-mail Ids</th><th>Phone Numbers</th>
    </tr>

    <thead>
    <tbody id="EmailPhoneTable${uniqId}">
    </tbody>
    </table>
    </div>


    <!-------------------------------------------------------------->


    <div class="col-md-12"style="margin:10px 0px">
    <div class="col-md-3" style="float:left !important">
    <label>Date type</label>
    <select name="DateField${uniqId}" id='DateField${uniqId}' class="form-control" onchange="SetReminderDate(this.value,'${uniqId}')">
    <option value="">Select Date</option>
    ${dateoptions}
    </select>
    </div>
    <div class="col-md-3" style="float:left !important">
    <label style="">Date</label>



    <div class="form-group mb-0">
    <input name="RemDate${uniqId}" id="RemDate${uniqId}" value="${datetime}" class="form-control flatpickr flatpickr-input active" type="text" readonly="readonly" onclick="removeSelectPicker()"onchange="updateTime('${uniqId}')">
    </div>
    </div>
    
    <div class="col-md-3" style="float:left !important">
    <label style="">Time</label>
    <select class="form-control" name="RemTime${uniqId}" id='RemTime${uniqId}' onchange="calculateReminderTime('${uniqId}')">
    <option value="">Select Time</option>
    <option  value="60" >1 minute prior</option>
    <option  value="300">5 minutes prior</option>
    <option  value="600">10 minutes prior</option>
    <option  value="900">15 minutes prior</option>
    <option value="1800">30 minutes prior</option>
    <option  value="3600">1 hour prior</option>
    <option  value="7200">2 hours prior</option>
    <option  value="10800">3 hours prior</option>
    <option  value="18000">5 hours prior</option>
    <option  value="86400">1 day prior</option>
    <option  value="604800">1 week prior</option>
    <option  value="1209600">2 weeks prior</option>
    <option  value="2592000">1 month prior</option>
    </select>
    </div>

    <div class="col-md-3" style="float:left !important">
    <label style="">Reminder Time</label>
    <input type="" class="form-control" name="ReminderTime${uniqId}" id='ReminderTime${uniqId}' readonly value="${DateTimeDisplay}">
    </div>

    </div>



    <div class="col-md-12">

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="popup${uniqId}" id="popup${uniqId}">
    <span class="new-control-indicator"></span>Popup
    </label>
    </div>

    </div>

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="desktop${uniqId}" id="desktop${uniqId}">
    <span class="new-control-indicator"></span>Desktop
    </label>
    </div>
    </div>

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="email${uniqId}" id="email${uniqId}">
    <span class="new-control-indicator"></span>E-Mail
    </label>
    </div>
    </div>

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="sms${uniqId}" id="sms${uniqId}" >
    <span class="new-control-indicator"></span>SMS
    </label>
    </div>
    </div>

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="whatsapp${uniqId}" id="whatsapp${uniqId}">
    <span class="new-control-indicator"></span>WhatsApp
    </label>
    </div>
    </div>

    <div class="col-md-2" style="float:left !important">
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" id="mobileapp${uniqId}" name="mobileapp${uniqId}">
    <span class="new-control-indicator"></span>MobileApp
    </label>
    </div>
    </div>

    </div>

    

    <!--<div class="col-md-12" style="margin-top: 10px;padding-left: 30px;" align="center">
    <button class="btn btn-danger" onclick="RemoveRemainder('${uniqId}')">Remove Reminder</button>
    </div>-->
    </div>`;
    $('#RemaindersDiv').append(div);
    var f2 = flatpickr(document.getElementById('RemDate'+uniqId), {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        minDate: datetime,
        minuteIncrement:1
    });

    DisplayEmailsList(uniqId);


}

RemoveRemainder=(id)=>{
    var elem = document.getElementById('RemDiv'+id);
    elem.parentNode.removeChild(elem);

    RemainderIds=$('#remainderIds').val().split(",");

    newremainderIds=RemainderIds.filter((remid)=>{
        return remid!=id;
    });

    RemainderIds=$('#remainderIds').val(newremainderIds);
}

SetReminderDate=(value,uniqid)=>{

    if(value=='')
    {
      var currentdate = new Date(); 
      var value = currentdate.getFullYear() + "-"
      + (currentdate.getMonth()+1)  + "-" 
      +currentdate.getDate() + " "
      + currentdate.getHours() + ":"  
      + currentdate.getMinutes();
  }
  // alert(value);

    // dateValues=value.split(" ");

    // dateFields=dateValues[0];
    // timeFields=dateValues[1];

    // console.log(dateFields);

    // Datearray=dateFields.split("-");


    $('#RemDate'+uniqid).val(value);

    $('#RemDate'+uniqid).trigger("change");

    $('#RemTime'+uniqid).val('').change();
    // console.log(DateValue);
}

SaveReminders=()=>{
 ModuleId=$('#ModuleId').val();
 RowId=$('#RowId').val();
 remaindersForm=document.getElementById('remaindersForm');
 formData=new FormData(remaindersForm);
 formData.append("ModuleId",ModuleId);
 formData.append("RowId",RowId);
 $.ajax({
    type:"post",
    url:"{{url('SaveReminders')}}",
    data:formData,
    processData:false,
    cache:false,
    contentType: false,
    beforeSend:()=>{
        $('#SaveReminderbtn').attr("disabled",true);
    },
    success:response=>{
        // console.log(response);
        res=JSON.parse(response);
        if(res.type=="success")
        {
            swal({
                title: 'Reminders',
                text: res.status,
                type: 'success',
                padding: '2em'
            })
        }
        else
        {
         swal({
            title: 'Reminders',
            text: res.status,
            type: 'error',
            padding: '2em'
        })
     }
     $('#remainderIds').val('');
     $('#SaveReminderbtn').attr("disabled",false);
     $('#RemaindersDiv').html('');
     $('#RemainderModal .close').click();
 }

});
}

GetRelatedRows=(reminderId)=>{

    if($('#RelatedModule'+reminderId+' :selected').val()=='')
    {
        $('#relatemodal'+reminderId).css("display","none");
    }
    else
    {
        $('#relatemodal'+reminderId).css("display","block");
    }
    $('#relatedNameVal'+reminderId).val('');
    $('#relatedName'+reminderId).val('');
    SearchFilters(reminderId);
}

function SearchFilters(reminderId)
{

    var ModuleId = $('#RelatedModule'+reminderId+' :selected').val();
    console.log("Getting Filters...");
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });

    var formData = {
        ModuleId: ModuleId,
        source: "Search", //"Search",
    };
    var type = "POST";
    var urls = "{{ url('SearchGetFields') }}";  // GetDemographyFields calls Controller
    $.ajax({
        type: type,
        url: urls,
        data: formData,
        beforeSend:function() {
            $('#ShowFields'+reminderId).html("<div class='loader dual-loader mx-auto'></div>");
        },
        success: function (results) {
            console.log("Recieved Filter!");
            //alert("results"+results);
            $('#ShowFields'+reminderId).html(results);
        },
        error: function (data) {
            console.log("Error: "+data);
            $('#ShowFields').html("");
        }
    });
}

function SearchAll(reminderId)
{
    console.log("Loading Results...");

    var ModuleId = $('#RelatedModule'+reminderId+' :selected').val();
    //var page_num = $('#page_num').val();
    //var total_records = $('#total_records').val();
    var limit = $('#limit').val();
    var field_name = $('#field_name').val();
    var sort_order = $('#sort_order').val();
    var page_num = $('#page_num').val();
    var mode='RelatedReminderSearch';
    var RemId=reminderId;
    //var page_num=1;

    // $("#mode").val(mode);   // on 24th April '21

    if(limit==undefined || limit=="")
        limit=10;

    if(page_num==undefined || page_num=="")
        page_num=1;

    if(sort_order==undefined || sort_order=="")
        sort_order="DESC";

    if(field_name==undefined || field_name=="")
        field_name="CreatedDate";

    var searchForm = JSON.stringify( $('#SearchForm').serializeArray() );

    var formData = {
        data: searchForm,
        source: ModuleId,
        ModuleId: ModuleId,
        page_num: page_num,
        limit: limit,
        field_name: field_name,
        sort_order: sort_order,
        mode: mode,
        RemId:RemId
    };

    //var ajax_url = "FindMe";
    var ajax_url = "{{ url('FindMePagination') }}";
    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: formData,
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        beforeSend:function() {
            $('#loading').html("<div class='loader dual-loader mx-auto'></div>");
        },
        success: function(result) {
            console.log("Success...");
            $('#loading').html('');
            $('#ShowResults'+reminderId).html(result);
        },
        error: function (data) {
            $('#ShowResults'+reminderId).html("");
        }
    });
}

function Select_me(result,reminderId)
{

    rowId=result.RowId;
    displayVal=result.DisplayName;
    $('#relatedNameVal'+reminderId).val(rowId);
    $('#relatedName'+reminderId).val(displayVal);
    Snackbar.show({
        text: "Selected", 
        pos: 'top-right',
    });
    $('#relatemodal'+reminderId).css("display","none");
}


DisplayInviteType=(reminderId,value)=>
{
    if(value=="1")
    {
        $('#AssignedToValDiv'+reminderId).css("display","block");
        $('#RelatedModuleDiv'+reminderId).css("display","none");
        $('#RelatedModuleValDiv'+reminderId).css("display","none");
        $('#RelatedModule'+reminderId).val('').change();
    }
    else
    {
        $('#AssignedToValDiv'+reminderId).css("display","none");
        $('#RelatedModuleDiv'+reminderId).css("display","block");
        $('#RelatedModuleValDiv'+reminderId).css("display","block");
    }
    $('#EmailPhoneTable'+reminderId).html('');

    if(value=="1")
    {
        DisplayEmailsList(reminderId);

    }
    
}
DisplayEmailsList=(reminderId)=>{

    emailids=$("#invitee"+reminderId+" :selected").val();
    emailName=$("#invitee"+reminderId+" :selected").html();
    Emails=`
    <div class="n-chk">
    <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
    <input type="checkbox" class="new-control-input" name="Emails${reminderId}" value='${emailids}' checked readonly>
    <span class="new-control-indicator"></span>${emailids}
    </label>
    </div>
    `;

    if(emailids!='')
    {
       $('#EmailPhoneTable'+reminderId).html(`<tr class="tr${ModuleId}${reminderId}"><td>${emailName}</td><td>${Emails}</td><td></td></tr>`);
   }
   else
   {
    $('#EmailPhoneTable'+reminderId).html('');

}
}

GetEmailPhone=(ModuleId,RowId,RemId)=>{
    if($('#'+ModuleId+RowId+RemId).is(" :checked"))
    {
        // console.log("checked");
        $.ajax({
            type:"post",
            url:"{{url('GetEmailPhone')}}",
            data:{ModuleId,RowId,RemId},
            success:response=>{
                // console.log(response);
                emailPhone=JSON.parse(response);
                // console.log(emailPhone.Phone);
                phoneArray=emailPhone.Phone;
                EmailArray=emailPhone.emails;
                ReFerenceFieldValue=emailPhone.ReFerenceFieldValue;
                Emails='';
                Phones='';
                EmailArray.forEach((emailId)=>
                {
                   Emails+=`
                   <div class="n-chk Emails${ModuleId}${RowId}${RemId}">
                   <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
                   <input type="checkbox" class="new-control-input" name="Emails${RemId}[]" value='${emailId},${ModuleId},${RowId}' checked readonly>
                   <span class="new-control-indicator"></span>${emailId}
                   </label>
                   </div>
                   `;
               });
                // if()
                // {
                //     $('#EmailsDiv'+RemId).append(Emails);
                // }

                phoneArray.forEach((PhoneNum)=>
                {
                   Phones+=`
                   <div class="n-chk Phones${ModuleId}${RowId}${RemId}">
                   <label class="new-control new-checkbox checkbox-info" style="padding-left:0px">
                   <input type="checkbox" class="new-control-input" name="Phones${RemId}[]" value='${PhoneNum},${ModuleId},${RowId}' checked readonly>
                   <span class="new-control-indicator"></span>${PhoneNum}
                   </label>
                   </div>
                   `;
               });
                // if()
                // {
                //     $('#PhoneDiv'+RemId).append(Phones);
                // }

                if(phoneArray.length!=0 || EmailArray.length!=0)
                {
                    $('#EmailPhoneTable'+RemId).append(`<tr class="tr${ModuleId}${RowId}${RemId}"><td>${ReFerenceFieldValue}</td><td>${Emails}</td><td>${Phones}</td></tr>`);
                }
            }
        });
    }
    else
    {
        $(`.tr${ModuleId}${RowId}${RemId}`).remove();
        // $(`.Phones${ModuleId}${RowId}${RemId}`).remove();
    }
    
}

updateTime=(uniqId)=>{

    currentValue=$('#RemDate'+uniqId).val();

    newDate=currentValue.split(" ");



    DatesArray=newDate[0].split("-");
    console.log(DatesArray);


    TimeArray=[];
    if(newDate[1]===undefined)
    {
        TimeArray[0]=00;
        TimeArray[1]=00;
    }
    else
    {
       TimeArray=newDate[1].split(":");
   }


   dispDate=DatesArray[2];
   dispMonth=DatesArray[1];
   dispyear=DatesArray[0];

   DispHour=TimeArray[0];
   DispMin=TimeArray[1];

   DispDateTime=dispDate+"-"+dispMonth+"-"+dispyear+" "+DispHour+":"+DispMin;

// DispDateTime=String(DispDateTime);

console.log(DispDateTime);
dateField=document.getElementById("ReminderTime"+uniqId);
dateField.value=DispDateTime;
    // $('#ReminderTime'+uniqId).val(DispDateTime);
}

calculateReminderTime=(uniqId)=>
{
// new Date(year, month, day, hours, minutes, seconds, milliseconds)
// var theMinutes = new Date().getTime() / 1000 ;to seconds

RemTime=$('#RemTime'+uniqId+" :selected").val();

if(RemTime=='')
{
    RemTime=0;
}
currentValue=$('#RemDate'+uniqId).val();

newDate=currentValue.split(" ");

DatesArray=newDate[0].split("-");

TimeArray=[];
if(newDate[1]===undefined)
{
    TimeArray[0]=00;
    TimeArray[1]=00;
}
else
{
   TimeArray=newDate[1].split(":");
}

dispDate=DatesArray[2];
dispMonth=DatesArray[1];
dispyear=DatesArray[0];

DispHour=TimeArray[0];
DispMin=TimeArray[1];

myRemDate= new Date(dispyear, dispMonth-1, dispDate, DispHour, DispMin, 0, 0);
myRemDate=myRemDate.getTime()/1000;
// console.log("before sub"+myRemDate+"\n");

myRemDate=(Number(myRemDate)-Number(RemTime))*1000;
// console.log("after sub"+myRemDate+"\n");


myNewRemtime=new Date(myRemDate);

updateNewTime(myNewRemtime,uniqId);
}

updateNewTime=(currentdate,uniqId)=>
{
 var datetime = currentdate.getFullYear() + "-"
 + (currentdate.getMonth()+1)  + "-" 
 +currentdate.getDate() + " "
 + currentdate.getHours() + ":"  
 + currentdate.getMinutes();
 $('#RemDate'+uniqId).val(datetime);

 var DateTimeDisplay=currentdate.getDate()+"-"
 + (currentdate.getMonth()+1)  + "-" 
 + currentdate.getFullYear() + " "
 + currentdate.getHours() + ":"  
 + currentdate.getMinutes();
 $('#ReminderTime'+uniqId).val(datetime);

}


checkparent=(fieldname,fieldValue)=>
{
     // alert(fieldValue);
     // $('#LeadChild').empty();
     if(fieldValue=="")
     {
        return false;
    }
    var ModuleId = $('#ModuleId').val();


    console.log(`fieldname${fieldname},fieldValue${fieldValue},ModuleId${ModuleId}`);

     // return false;
     $.ajax({
        type:"post",
        url:'{{url("verifyChildExists")}}',
        data:{fieldname:fieldname,fieldValue:fieldValue,ModuleId:ModuleId},
        headers:{'X-CSRF_TOKEN':$('meta[name="csrf-token"]').attr('content')},
        dataType: "json",
        success:function(response)
        {
            if(response.field!="")
            {
                $('#'+response.field).empty();
                $('#'+response.field).append(response.dropdown);
                // alert(response.dropdown);
            }
            else
            {
                // alert("no child");
            }
            
        },
        error:function(error)
        {
            alert("error:"+JSON.stringify(error));;
        }
    });

 }
 createEmailTEmplate=()=>{

    url="{{url('Create-EmailTemplates')}}"+"?source=Reminder";
    new_window=window.open(url,"","left=100,top=100,width=800,height=800");

    new_window.onbeforeunload = function()
    { 

        $.ajax({
            type:"post",
            url:"{{url('GetEmailTemplates')}}",
            beforeSend:()=>{

            },
            success:(response)=>{
                // console.log(response);
                templatesList=JSON.parse(response);
                templateOptionsList='<option value="">Select Template</option>';
                templatesList.forEach((template)=>{

                    templateOptionsList+=`<option value="${template.EmailTemplatesId}"> ${template.Name}</option>`;
                }); 
                // console.log(templateOptionsList);

                $('.emailtemplate').each(function(){

                    $(this).empty();
                    $(this).append(templateOptionsList);
                });

            }
        });
        // alert("closed");
    }
}

LoadReminders=()=>{
    RowId=$('#RowId').val();
    ModuleId=$('#ModuleId').val();
    // alert(RowId);
    $.ajax({
        type:"post",
        url:"{{url('RemindersList')}}",
        data:{ModuleId,RowId},
        beforeSend:()=>{

        },
        success:(response)=>{
            reminders=`<table class="table table-bordered table-h0ver">
            <thead>
            <tr>
            <th>Slno</th>
            <th>Phone/E-mail</th>
            <th>Reminder Type</th>
            <th>Template</th>
            <th>Date & Time</th>
            <th>Delete</th>
            </tr>
            </thead>
            `;

            var currentdate = new Date(); 
            var datetime = currentdate.getFullYear() + "-"
            + (currentdate.getMonth()+1)  + "-" 
            +currentdate.getDate() + " "
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes();
            EmailTemplatesList=JSON.parse('');

            Notification=["PopUp","Desktop","E-mail","SMS","WhatsApp","MobileApp"];
            // console.log(response);
            reminderOptions="";
            res=JSON.parse(response);
            slno=0;
            res.forEach(function(Reminder){
                slno++;
                // console.log(Reminder.ReminderId);

                reminderType=Reminder.Type;
                i=0;
                reminderOptions=`<select class="form-control" onchange="UpdateReminderType('${Reminder.ReminderId}',this.value)">`;
                Notification.forEach(function(noti){
                    i++;
                    if(i==reminderType)
                    {
                        selected="selected";
                    }
                    else
                    {
                        selected="";
                    }
                    reminderOptions+=`<option value="${i}" ${selected}>${noti}</option>`;
                        // console.log(noti);
                    });
                reminderOptions+="</select>"

                EmailTemplateOptions=`<select name="RemTemplate" id="RemTemplate" class="form-control" onchange="UpdateReminderTemplate('${Reminder.ReminderId}',this.value)">`;
                EmailTemplatesList.forEach((EmailTemplate)=>{

                   if(EmailTemplate.EmailTemplatesId==Reminder.TemplateId)
                   {
                    selected="selected";
                }
                else
                {
                    selected="";
                }

                EmailTemplateOptions+=`
                <option value="${EmailTemplate.EmailTemplatesId}" ${selected}>${EmailTemplate.Name}</option>
                `;
            });
                EmailTemplateOptions+="</select>";
                reminders+=`
                <tr>
                <td>${slno}</td>
                <td>${Reminder.NotifyTo}</td>
                <td>${reminderOptions}</td>
                <td>${EmailTemplateOptions}</td>
                <td>
                <div class="form-group mb-0">
                <input name="RemDate" id="RemDate" value="${Reminder.NotifyOn}" class="form-control flatpickr flatpickr-input active remtime" type="text" readonly="readonly" onchange="UpdateReminderTime('${Reminder.ReminderId}',this.value)">
                </div>
                </div>
                </td>
                <td>
                <div class="icon-container" style="text-align: center;" onclick="DeleteReminder('${Reminder.ReminderId}')">
                <svg  style="cursor:pointer" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg><span class="icon-name"></span>
                </div>
                </td>
                </tr>
                `;

            });
            reminders+=`</table>`;
            $('#Remainderslist').html(reminders);

            $('.remtime').each(function(){
                picker=$(this);
                var timePicker = flatpickr(picker, {
                    enableTime: true,
                    dateFormat: "Y-m-d H:i",
                    minDate: datetime,
                    minuteIncrement:1
                });
            });


        }
    });
}
UpdateReminderType=(id,value)=>
{
    $.ajax({
        type:"POST",
        url:"{{url('UpdateReminderType')}}",
        data:{id,value},
        success:(response)=>{
            // console.log(response);
            res=JSON.parse(response);
            swal({
                title: 'Reminders',
                text: res.type,
                type: 'error',
                padding: '2em'
            });
        }   
    });

}
UpdateReminderTemplate=(id,value)=>
{
 $.ajax({
    type:"POST",
    url:"{{url('UpdateReminderTemplate')}}",
    data:{id,value},
    success:(response)=>{
        // console.log(response);
        res=JSON.parse(response);
        swal({
            title: 'Reminders',
            text: res.type,
            type: 'error',
            padding: '2em'
        });
    }   
});
}
DeleteReminder=(id)=>
{
 swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Delete',
  padding: '2em'
}).then(function(result) {
  if (result.value) {

   $.ajax({
    type:"POST",
    url:"{{url('UpdateReminderTime')}}",
    data:{id},
    success:(response)=>{
        console.log(response);
        res=JSON.parse(response);
        swal({
            title: 'Reminders',
            text: res.type,
            type: 'error',
            padding: '2em'
        });
        LoadReminders();
    }   
});


}
});

}
UpdateReminderTime=(id,value)=>
{

    // console.log(value);
    $.ajax({
        type:"POST",
        url:"{{url('UpdateReminderTime')}}",
        data:{id,value},
        success:(response)=>{
            // console.log(response);
            res=JSON.parse(response);
            swal({
                title: 'Reminders',
                text: res.type,
                type: 'error',
                padding: '2em'
            });
        }   
    });
}

composeMail=(EmailId)=>{
    // console.log(EmailId);
    $('#m-to').val(EmailId);

    $('#ComposeMailModal').modal("show");
    $('.ql-toolbar').remove();
    try{
        $('#m-form').select2('destroy');
    }
    catch(e){}
    var quill = new Quill('#editor-container', {
      modules: {
        toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
        ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow'
});

    getDraftEmail();
}

getDraftEmail=()=>
{
    document.querySelector('.ql-editor').addEventListener("blur",UpdateEmailContent);
    const draftId=$('#draftId').val();
    if(draftId=='')
    {
        CreateDraft();
    }
    else
    {
        getDraftContents();
    }
    // console.log("draftid=",draftId);
}

getDraftContents=()=>
{
    draftId=$('#draftId').val();

    // alert(draftId);
    if(draftId!='')
    {
        var type = "POST";
        var ajaxurl = "{{url('GetDraft')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{draftId},
            success: function (result) 
            {
                // alert(result);

                res=JSON.parse(result);
                to=res.ToAddress;
                cc=res.CcAddress;
                Subject=res.Subject;
                content=res.ContentTags;
                tempto=$('#m-to').val();
                if(to!=tempto)
                {
                    $('#draftId').val('');
                    CreateDraft();
                    return false;
                }
                $('#m-to').val(to);
                $('#m-cc').val(cc);
                $('#m-subject').val(Subject);
                $('.ql-editor').removeClass('ql-blank');
                $('.ql-editor').html(content);
                // console.log(result);


            }
        });
    }
}

UpdateMailFrom=()=>{
    draftId=$('#draftId').val();
    from=$('#m-form').val();
    if(from!='')
    {
        var type = "POST";
        var ajaxurl = "{{url('UpdateMailFrom')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{from,draftId},
            success: function (result) 
            {
                console.log(result);
            }
        });
    }

}
UpdateToCCId=()=>
{

    toCCId=$('#m-cc').val();
    draftId=$('#draftId').val();
    if(toCCId!='')
    {
        var type = "POST";
        var ajaxurl ="{{url('UpdateToCCId')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{toCCId,draftId},
            success: function (result) 
            {
                console.log(result);
            }
        });
    }
}
UpdateEmailContent=()=>
{
    draftId=$('#draftId').val();
    messagetype = $('.ql-editor').html();
    message=$('.ql-editor').text();

    // alert(message);
    if(message!='')
    {
        var type = "POST";
        var ajaxurl = "{{url('UpdateMailContent')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{message,messagetype,draftId},
            success: function (result) 
            {
                console.log(result);
            }
        });
    }
}

getDraftEmail=()=>
{
    document.querySelector('.ql-editor').addEventListener("blur",UpdateEmailContent);
    const draftId=$('#draftId').val();
    if(draftId=='')
    {
        CreateDraft();
    }
    else
    {
        getDraftContents();
    }
}

CreateDraft=()=>
{
    from=$('#m-form :selected').val();
    var type = "POST";
    var ajaxurl ="{{url('SaveDraft')}}";
    $.ajax({
        type: type,
        url: ajaxurl,
        data:{from},
        success: function (result) 
        {
            $('#draftId').val(result);
            UpdateToMailId();
        }
    });
}
UpdateToMailId=()=>
{

    toMailId=$('#m-to').val();
    draftId=$('#draftId').val();
    if(toMailId!='')
    {
        var type = "POST";
        var ajaxurl = "{{url('UpdateToMailId')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{toMailId,draftId},
            success: function (result) 
            {
                console.log(result);
            }
        });
    }
}

UpdateMailSubject=()=>
{
    subject=$('#m-subject').val();
    draftId=$('#draftId').val();
    if(subject!='')
    {
        var type = "POST";
        var ajaxurl ="{{url('UpdateMailSubject')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{subject,draftId},
            success: function (result) 
            {
                console.log(result);
            }
        });
    }
}

SaveEmail=()=>
{
    to=$('#m-to').val();
    cc=$('#m-cc').val();
    subject=$('#m-subject').val();
    messagetype = $('.ql-editor').html();
    message=$('.ql-editor').text();

    if(to=="" || subject=="" || message=="")
    {
        swal({
            title: 'Error',
            text: "Please fill all the fields!",
            padding: '2em'
        })
        return false;
    }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
        }
    });


    const draftId=$('#draftId').val();
    var type = "POST";
    var ajaxurl = "{{url('SaveEmail')}}";
    $.ajax({
        type: type,
        url: ajaxurl,
        data:{ to,cc,subject,messagetype,message,draftId},
        success: function (result) 
        {
            swal({
                title: 'Email!',
                text: "Saved Successfully!",
                type: 'success',
                padding: '2em'
            });
            $('#ComposeMailModal .close').click();

            $('#draftId').val('');
        },
        
    });
}

DiscardMail=()=>
{
    draftId=$('#draftId').val();

    var type = "POST";
    var ajaxurl = "{{url('DiscardMail')}}";
    $.ajax({
        type: type,
        url: ajaxurl,
        data:{draftId},
        success: function (result) 
        {
            // alert(result);
            swal({
                title: 'Email!',
                text: result,
                type: 'success',
                padding: '2em'
            });
            draftId=$('#draftId').val('');

        }
    });
}

UpdateSendMail=()=>
{
    draftId=$('#draftId').val();
    var type = "POST";
    var ajaxurl = "{{url('UpdateSendMail')}}";

    to=$('#m-to').val();
    cc=$('#m-cc').val();
    subject=$('#m-subject').val();
    messagetype = $('.ql-editor').html();
    message=$('.ql-editor').text();


    if(to=="")
    {
        swal({
            title: 'Error',
            text: "Please fill To mail address!",
            padding: '2em'
        })
        return false;
    }

    if(subject=="")
    {
        swal({
            title: 'Error',
            text: "Please fill mail Subject!",
            padding: '2em'
        })
        return false;
    }

    if(message=="")
    {
        swal({
            title: 'Error',
            text: "Please fill mail Content!",
            padding: '2em'
        })
        return false;
    }

    // return false;
    $.ajax({
        type: type,
        url: ajaxurl,
        data:{draftId},
        success: function (result) 
        {
            swal({
                title: 'success',
                text: result,
                padding: '2em'
            });
            // alert(result);
            $('#draftId').val('');
            $('#AttachmentsList').html('');
            $('#ComposeMailModal .close').click();
            templateId=$('#template :selected').val();
            $('#template').val('').change();
            // alert(templateId);
            SendNewMail(draftId,templateId);
        }
    });
}

SendNewMail=(draftId,templateId='')=>
{
    // console.log(draftId);
    source="compose";
    $.ajax({
        type: "post",
        url: "{{url('SendNewMail')}}",
        data:{draftId,templateId,source},
        success: function (result) 
        {
            swal({
                title: 'success',
                text: result,
                padding: '2em'
            });
            // alert(result);
            $('#draftId').val('');

            // console.log(result);
        }
    });

}

ShowTimeInput=()=>
{
    to=$('#m-to').val();
    cc=$('#m-cc').val();
    subject=$('#m-subject').val();
    messagetype = $('.ql-editor').html();
    message=$('.ql-editor').text();

    if(to=="")
    {
        swal({
            title: 'Error',
            text: "Please fill To mail address!",
            padding: '2em'
        })
        return false;
    }

    if(subject=="")
    {
        swal({
            title: 'Error',
            text: "Please fill mail Subject!",
            padding: '2em'
        })
        return false;
    }

    if(message=="")
    {
        swal({
            title: 'Error',
            text: "Please fill mail Content!",
            padding: '2em'
        })
        return false;
    }
    $('#timePickerDiv').css("display","block");
    // alert("ShowTimeInput");
}

SendLater=()=>{
    draftId=$('#draftId').val();
    sendDate=$('#MailTime').val();
    $.ajax({
        type: "post",
        url: "{{url('SendMailLater')}}",
        data:{draftId,sendDate},
        success: function (result) 
        {
            swal({
                title: 'success',
                text: result,
                padding: '2em'
            });
            $('#draftId').val('');
        }
    });
    $('#ComposeMailModal .close').click();
    $('#timePickerDiv').val("");
    $('#timePickerDiv').css("display","none");

}

UpdateDraftId=(draftId)=>
{
    $('#draftId').val(draftId);
}

uploadAttachments=(attachmentsFile)=>{

    EmailForm=new FormData;
    draftId=$('#draftId').val();
    for(i=0;i<attachmentsFile.files.length;i++)
    {
        EmailForm.append("Attachments"+i,attachmentsFile.files[i]);
    }
    EmailForm.append("DraftId",draftId);
    
    $.ajax({
        url:"{{url('UploadAttachments')}}" ,
        type: 'POST',
        data: EmailForm,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        beforeSend:function()
        {
            $('#btn-send1').attr("disabled",true);
        },
        success:function(response)
        {
            // console.log(response);

            attachmenstDiv='';
            res=JSON.parse(response);
            // console.log(res);

            res.forEach((attch)=>{
                console.log(attch.fileName);

                attachmenstDiv+=`
                <a href="${attch.path}" target="_blank">${attch.fileName}</a>-<span style="cursor:pointer;margin-right:10px" onclick="RemoveAttachment('${attch.fileId}')">X</span>\t\t
                `;
            });

            $('#AttachmentsList').html(attachmenstDiv);
            $('#mail_File_attachment').val('');
            $('#btn-send1').attr("disabled",false);

            // console.log(attachmenstDiv);

        }
    });
    
}

RemoveAttachment=(id)=>
{
    draftId=$('#draftId').val();
    swal({
        title: 'Are you sure to Remove Attachment?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Remove',
        padding: '2em'
    }).then(function(result){

        if (result.value) 
        {

            $.ajax({
                url: "{{url('RemoveAttachments')}}" ,
                type: 'POST',
                data: {id,draftId},
                beforeSend:function()
                {
                },
                success:function(response)
                {
                    console.log(response);

                    attachmenstDiv='';
                    res=JSON.parse(response);
                    res.forEach((attch)=>
                    {
                        console.log(attch.fileName);
                        attachmenstDiv+=`
                        <a href="${attch.path}" target="_blank">${attch.fileName}</a>-<span style="cursor:pointer;margin-right:10px" onclick="RemoveAttachment('${attch.fileId}')">X</span>`;
                    });
                    $('#AttachmentsList').html(attachmenstDiv);

                }
            });

        }

        
    });

}

removeSelectPicker=()=>{
    // console.log("ready");
    // $('.flatpickr-monthDropdown-months').select2('destroy');   
}

GetDependentFieldsDetailView=(FieldName,DependentFieldId)=>
{
    ModuleId=$('#ModuleId').val();
    RowId=$('#RowId').val();

    $.ajax({
        type:"post",
        url:"{{url('GetDependentFieldsDetailView')}}",
        data:{ModuleId,RowId,DependentFieldId},
        beforeSend:function(){},
        success:function(response)
        {
            $('#'+FieldName).html(response);
            console.log(response);
        }
    });
}

</script>

<!-- compose mail modal -->
<!-- Modal -->
<input type="hidden" id="draftId" value=''>
<div class="modal fade" id="ComposeMailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <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-x close" data-dismiss="modal"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                <div class="compose-box">
                    <div class="compose-content">
                        <form id="Emailform">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="d-flex mb-4 mail-form">
                                        <p>From:</p>
                                        <select class="form-control" id="m-form" onchange="UpdateMailFrom()">
                                            @foreach($fromMailAddress as $fromMailAddres)
                                            <option value="{{$fromMailAddres['FromAddress']}}" title="{{$fromMailAddres['FromAddress']}}"> 
                                                {{$fromMailAddres['FromName']}} ({{$fromMailAddres['FromAddress']}})
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex mb-4 mail-to">
                                        <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-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                        <div class="">
                                            <input type="email" id="m-to" placeholder="To" class="form-control" onblur="UpdateToMailId()">
                                            <span class="validation-text"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="d-flex mb-4 mail-cc">
                                        <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-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg>
                                        <div>
                                            <input type="text" id="m-cc" placeholder="Cc" class="form-control"  onblur="UpdateToCCId()">
                                            <span class="validation-text"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex mb-4 mail-subject">
                                <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-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                                <div class="w-100">
                                    <input type="text" id="m-subject" placeholder="Subject" class="form-control" onblur="UpdateMailSubject()">
                                    <span class="validation-text"></span>
                                </div>
                            </div>



                            <div class="d-flex">
                                <input type="file" class="form-control-file" id="mail_File_attachment" multiple="multiple" onchange="uploadAttachments(this);">
                            </div>

                            <div class="d-flex" id='AttachmentsList'>

                            </div>
                            <br>

                            <div id="editor-container">

                            </div>

                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <div class="col-md-12" id='timePickerDiv' style="display:none">
                    <input type="date" name="MailTime" id="MailTime" class="form-control" placeholder="Mail Time"  value="" onchange="SendLater()">
                </div>
                <!-- <button id="btn-save" class="btn float-left" onclick="SaveEmail(event)"> Save</button> -->
                <button id="btn-save1" class="btn float-left btn-success" onclick="SaveEmail()"> Save</button>
                <button class="btn" data-dismiss="modal" onclick="DiscardMail();"> <i class="flaticon-delete-1"></i> Discard</button>
                <button id="btn-send1" class="btn btn-primary" onclick="UpdateSendMail()"> Send</button>
                <button id="btn-send1" class="btn btn-primary" onclick="ShowTimeInput()"> Send Later</button>
            </div>
        </div>
    </div>
</div>

</div>


</div>
<!-- compose mail modal -->