@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');

$AllTeams=json_decode($AllTeams,true);
echo "<pre>";
    //print_r($RelatedModulesList);
    // print_r($header);
    //print_r($DepChildOpList);
   // print_r($RelateModules);
    //print_r($RelatedModules);
    //print_r($results_obj);
    //print_r($displayPanels);
    // print_r($EmailsList);
    //print_r($DropDownColors);
    // print_r($AssignedTeams);
    // print_r($AllTeams);
echo "</pre>";

try
{
    $AgentPhoneNo=Auth::user()->PhoneNo;     
}
catch(\Exception $e)
{
    $AgentPhoneNo="";        
}

$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;*/
        }
        .select2-container {z-index: 10000;}

        .unread
        {
          font-weight:bold !important;
      }
  </style>
  <br>
  <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}}"> -->
                  <a href="{{$Listurl}}" title="List {{$ModuleConfig->DisplayNamePlural}}">
                    <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 {{$ModuleConfig->DisplayNamePlural}}</a>
                </li>
                @endif
                @if($RoleAccess_c!="8eca7f5f-9914-11eb-948a-56b1773fd56f")
                <li>
                  <!-- <a href="{{$Createurl}}" title="Create {{$ModuleName}}"> -->
                      <a href="{{$Createurl}}" title="Create {{$ModuleConfig->DisplayNameSingular}}">
                        <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}} --> {{$ModuleConfig->DisplayNameSingular}}</a>
                    </li>
                    @endif
                </ul>
            </div>
        </div>
        <br>
        <div class="row">
			<div class="widget-content widget-content-area simple-tab">
            <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'];

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

                        $PanelId=$fieldList['PanelId'];

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

                        $displayColor="#888ea8";

                        if(array_key_exists($LabelValue,$DropDownColors))
                        {
                            $displayColor=$DropDownColors[$LabelValue];
                        }

                        $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)
            if($DisplayType==7 )
            {
                // TextArea OR TextEditor, added on 6th May '21
                $LabelValue=strip_tags($LabelValue);
            }

            //if($DisplayType==10)
            //{
            //}

            @endphp
            @if($loopcount == 1)
            @endif

            @if($DisplayType==10)
            <div class="col-md-12" style="float: left;min-height: 65px" >
               <div class="form-group">
                <h6>{{$DisplayName}}</h6>

                @elseif($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)
                                @php
                                $pass_me=json_encode($passArray); 
                                @endphp
                                <!-- <a href="{{ url('ShowDetailView',$passArray) }}" class="text-info">{{$LabelValue}}</a> -->
                                <a onclick="popUp('{{$ModuleId}}','{{$row_id}}','{{$DisplayType}}','{{$field_name}}','{{$LabelValue}}')" class="text-info" data-toggle="modal" data-target="#exampleModal">{{$LabelValue}}</a>
                                @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
                                @elseif($DisplayType==29)
                                <a href="{{$LabelValue}}" target="_blank" class="text-primary">{{$LabelValue}}</a>
                                @elseif($DisplayType==30)
                                @php
                                $mcubeApiKey="f155247a2c1d343e0d3edeecfe4108bf";//for crm
                                @endphp

                                <a href="javascript:void(0)" onclick="Mcube_Click2Call('{{$LabelValue}}','{{$AgentPhoneNo}}','{{$mcubeApiKey}}')" 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>
                                @else

                                @if($DisplayType==10)

                                <div class="col-md-12">
                                    <textarea id="{{$field_name}}Editor">{{$LabelValue}}</textarea>

                                    <script>
                                        // alert('{{$field_name}}');
                                        document.addEventListener('DOMContentLoaded', function(event){
                                            CKEDITOR.replace("{{$field_name}}Editor");
                                            // alert('ckeditor added')
                                        });
                                    </script>

                                </div>
                                @elseif($DisplayType!=99)
                                <span style="color:{{$displayColor}}">{{$LabelValue}}</span>
                                @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>
                <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> -->

      <!-- </div> -->
<br>
      @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 accordion">

                    <div class="card">
                        <div class="card-header" id="headingThree{{$subpanel_loop}}" onclick="GetSubPanelfromdetailview('{{$module_name}}','{{$SecondaryModuleId}}','{{$subpanel_loop}}',3,'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>
                                    {{$ModulesConfig[$SecondaryModuleId]['DisplayNamePlural']}}
                                    <!-- {{$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 id="iconsAccordion" class="accordion-icons accordion">
        <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" title="Compose Mail" style="cursor:pointer" onclick="composeMail('','manual')" 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>
                        <span class="text-primary">Emails</span>  <div class="icons">
                           @if(sizeof($EmailsList))
                           <span class="badge badge-info">{{sizeof($EmailsList)}}</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="iconAccordionOne" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
                <div class="card-body">

                    @if(sizeof($EmailsList))
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Slno</th>
                                <th>Subject</th>
                                <th>From Address</th>
                                <th>Date</th>
                                <th>View</th>
                            </tr>
                        </thead>

                        @php
                        $m=0;
                        @endphp    
                        @foreach($EmailsList as $em)
                        @php
                        if($em['EmailStatus']=="Unread")
                        {
                            $fontStyle="unread";
                        }
                        else
                        {
                            $fontStyle="";
                        }

                        $m++;
                        @endphp 
                        <tr class="font{{$em['EmailId']}} {{$fontStyle}}">
                         <td>{{$m}}</td>
                         <td>{{$em['EmailSubject']}}</td>
                         <td>{{$em['FromAddress']}}</td>
                         <td>@php echo date('d-m-Y',strtotime($em['CreatedDate'])) @endphp</td>

                         <td>
                            <!-- <a href="{{url('List-Emails')}}" title="View Email"> -->

                                @php
                                $EmailID=$em['EmailId'];
                                @endphp
                                <span style="cursor:pointer" class="text-primary" title="View Mail"  onclick="ViewMail('{{$EmailID}}')" data-toggle="modal" data-target="#ComposeMailModal">

                                    <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-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                </span>
                                <!-- </a> -->
                            </td>
                        </tr>     
                        @endforeach
                    </table>
                    @else
                    <center>No Emails!</center>
                    @endif

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

    </div>

</div><!-------email accordian Ends--->


<br>

<div id="TeamsAccordion" class="accordion-icons accordion">
    <div class="card">
        <div class="card-header" id="...">
            <section class="mb-0 mt-0">
                <div role="menu" class="collapsed" data-toggle="collapse" data-target="#TeamAccordionOne" aria-expanded="true" aria-controls="TeamAccordionOne">
                    <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-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>


                    <span class="text-primary">Teams</span>  <div class="icons">
                       @if(sizeof($AssignedTeams))
                       <span class="badge badge-info">{{sizeof($AssignedTeams)}}</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="TeamAccordionOne" class="collapse" aria-labelledby="..." data-parent="#iconsAccordion">
            <div class="card-body">

                <table class="table table-bordered">
                  @if(sizeof($AssignedTeams))
                  <thead>
                    <tr>
                        <th>Slno</th>
                        <th>Teams</th>
                    </tr>
                </thead>

                @php
                $tc=0;
                @endphp

                @foreach($AllTeams as $Team)
                @if(in_array($Team['TmTeamID'],$AssignedTeams))

                @php
                $tc++;
                @endphp
                <tr>
                    <td>{{$tc}}</td>
                    <td>{{$Team['TeamName']}}</td>
                </tr>
                @endif
                @endforeach

                
                @else
                <tr>
                    <td><center>Teams Not Assigned</center></td>
                </tr>
                @endif
            </table>

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

</div>

</div><!-------Teams accordian Ends--->

@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>
<!-- 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-bs-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-bs-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


<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.fire({
                        title: 'Are you sure?',
                        text: "You want to Duplicate this Record!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Duplicate',
                    }).then((result) => {
                        if (result.isConfirmed) {

                         $.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 GetSubPanelfromdetailview(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==3)
                 {
                    var limit=5;
                    var sort_order="DESC";
                }
                else
                {

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

                    var sort_order=mode;

                }

                var ajax_url = "{{ url('GetListViewPagination') }}";
                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,
                   ModuleId: 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-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-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.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {


                    $.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);
                }
            });
                    swalWithBootstrapButtons.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        '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-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-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.fire({
        title: 'Are you sure?',
        text: "Do you want to link this record?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Associate!',
        cancelButtonText: 'No, cancel!',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {

            $.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');
                        GetSubPanelfromdetailview(module_name,SecondaryModuleId,subpanel_loop,'Auto','UpdatedDate','1',AssociationType,PrimaryModuleId);
                    }

                },
                error: function (data) {
                    console.log(data);
                }
            });
            swalWithBootstrapButtons.fire(
                'Associated!',
                'Associated Successfully!',
                '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-bs-dismiss="alert" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" data-bs-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")
        {
           swalWithBootstrapButtons.fire(
            'Reminders',
            res.status,
            'success'
            )
       }
       else
       {

           swalWithBootstrapButtons.fire(
            'Reminders',
            res.status,
            'error'
            )
       }
       $('#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);

            swalWithBootstrapButtons.fire(
                'Reminders',
                res.type,
                'error'
                )
        }   
    });

}
UpdateReminderTemplate=(id,value)=>
{
   $.ajax({
    type:"POST",
    url:"{{url('UpdateReminderTemplate')}}",
    data:{id,value},
    success:(response)=>{
        // console.log(response);
        res=JSON.parse(response);
        swalWithBootstrapButtons.fire(
            'Reminders',
            res.type,
            'error'
            )
    }   
});
}
DeleteReminder=(id)=>
{


 Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, cancel!',
    reverseButtons: true
}).then((result) => {
    if (result.isConfirmed) {
       $.ajax({
        type:"POST",
        url:"{{url('UpdateReminderTime')}}",
        data:{id},
        success:(response)=>{
            // console.log(response);
            res=JSON.parse(response);
            swalWithBootstrapButtons.fire(
                'Reminders',
                res.type,
                'error'
                )
            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);

            swalWithBootstrapButtons.fire(
                'Reminders',
                res.type,
                'error'
                )
        }   
    });
}

composeMail=async (EmailId,source)=>{
    $('#m-to').empty();
    $('#m-to').append(`<option value="${EmailId}" selected>${EmailId}</option>`);


    $('#ComposeMailModal').modal("show");

    if ($('#m-form').data('select2'))
    {
        $('#m-form').select2('destroy');
    }

    CKEDITOR.replace("editor-container");
    CKEDITOR.instances['editor-container'].on('blur',UpdateEmailContent);

    $('#viewMailsDiv').css("display","none");
    $('#viewMailsDiv2').css("display","block");

    try
    {
        DraftMail=await getDraftEmail();

        try{
            await getDraftContents();
        }
        catch(e)
        {
            await CreateDraft();
        }
    }
    catch(e){

        try
        {  
            await CreateDraft();
            $('#m-to').empty();
            $('#m-cc').empty();
        }catch(e){}
    }


    try{

        RowId=$('#RowId').val();
        await UpdateEmailData('RowId',RowId);
        if(source)
        {
            await CustomMailData();
        }
        await UpdateToMailId();
        // alert("upodate row id");
    }catch(e){}
}


CustomMailData=()=>
{
    return new Promise((resolve,reject)=>{
      RowId=$('#RowId').val();
      ModuleId=$('#ModuleId').val();

      if(ModuleId=="806867ab-96a5-11eb-948a-56b1773fd56f")//tickets
      {
        $.ajax({
            type:"post",
            url:"{{url('GetResult')}}",
            data:{RowId,ModuleId},
            beforeSend:()=>{},
            success:response=>{
                // console.log(response);
                $('#m-subject').val(response);
                UpdateMailSubject();
                resolve();
            }
        });
    }

})
}

getDraftEmail=()=>
{
    return new Promise((resolve,reject)=>{
        CKEDITOR.instances['editor-container'].on('blur',UpdateEmailContent);
        const draftId=$('#draftId').val();

        if(draftId=='')
        {
            reject();
            
        }
        else
        {
            resolve();
        }
    });
}

getDraftContents=()=>
{
    return new Promise((resolve,reject)=>{
       draftId=$('#draftId').val();
       if(draftId!='')
       {
        var type = "POST";
        var ajaxurl = "{{url('GetDraft')}}";
        $.ajax({
            type: type,
            url: ajaxurl,
            data:{draftId},
            success: function (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('');
                    reject();
                    return false;
                }
                $('#m-to').val(to);
                $('#m-cc').val(cc);
                $('#m-subject').val(Subject);
                CKEDITOR.instances['editor-container'].setData(content);
                resolve();
            }
        });
    }
});
}

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();
    toCCId=[];

    $('#m-cc :selected').each(function(){

        toCCId.push($(this).val());

    });


    toCCId=toCCId.join(",");

    console.log("toCCId",toCCId);

    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);
            }
        });
    }
}


UpdateToBCCId=()=>{
    toBCCId=[];

    $('#m-bcc :selected').each(function(){

        toBCCId.push($(this).val());

    });


    toBCCId=toBCCId.join(",");

    console.log("toBCCId",toBCCId);

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

UpdateEmailContent=()=>
{
    draftId=$('#draftId').val();
    messagetype = CKEDITOR.instances['editor-container'].getData();
    message=CKEDITOR.instances['editor-container'].editable().getText();
    // alert('message '+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);
            }
        });
    }
}


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

}
UpdateToMailId=()=>
{
    return new Promise((resolve,reject)=>{
       toAddress=[];
       $('#m-to :selected').each(function(){
        toAddress.push($(this).val());
    });
       toMailId=toAddress.join(',');

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

}

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();

    messagetype = CKEDITOR.instances['editor-container'].getData();
    message=CKEDITOR.instances['editor-container'].editable().getText();

    to=[];
    cc=[];
    $('#m-to :selected').each(function(){

        to.push($(this).val());

    });
    $('#m-cc :selected').each(function(){

        cc.push($(this).val());

    });
    to=to.join(',');
    cc=cc.join(',');

    if(to=="" || subject=="" || message=="")
    {

     swalWithBootstrapButtons.fire(
        'Error',
        "Please fill all the fields!",
        'error'
        )
     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) 
    {
       swalWithBootstrapButtons.fire(
        'Email!',
        "Saved Successfully!",
        'success'
        )

       $('#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);


             swalWithBootstrapButtons.fire(
                'Email!',
                result,
                'success'
                )
        
            draftId=$('#draftId').val('');

        }
    });
}

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

    // to=$('#m-to').val();
    // cc=$('#m-cc').val();

    to=[];
    cc=[];
    $('#m-to :selected').each(function(){
        to.push($(this).val());
    });
    $('#m-cc :selected').each(function(){
        cc.push($(this).val());

    });
    to=to.join(',');
    cc=cc.join(',');

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

    messagetype = CKEDITOR.instances['editor-container'].getData();
    message=CKEDITOR.instances['editor-container'].editable().getText();

    if(to=="")
    {
       Swal.fire({
        icon: 'error',
        title: 'Please fill To mail address!',
    });

       return false;
   }

   if(subject=="")
   {
     Swal.fire({
        icon: 'error',
        title: 'Please fill mail Subject!',
    });
     return false;
 }

 if(message=="")
 {
  Swal.fire({
    icon: 'error',
    title: 'Please fill  mail Content!',
});

  return false;
}

    // return false;
    $.ajax({
        type: type,
        url: ajaxurl,
        data:{draftId},
        success: function (result) 
        { 
            Swal.fire({
                icon: 'success',
                title: result,
            });

            // alert(result);

            // getDraftContents();

            $('#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.fire({
            icon: 'success',
            title: result,
        });
            // alert(result);
            $('#draftId').val('');

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

}

ShowTimeInput=()=>
{
    // to=$('#m-to').val();
    // cc=$('#m-cc').val();


    to=[];
    cc=[];
    $('#m-to :selected').each(function(){

        to.push($(this).val());

    });
    $('#m-cc :selected').each(function(){

        cc.push($(this).val());

    });
    to=to.join(',');
    cc=cc.join(',');


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

    messagetype = CKEDITOR.instances['editor-container'].getData();
    message=CKEDITOR.instances['editor-container'].editable().getText();

    if(to=="")
    {
       Swal.fire({
        icon: 'error',
        title: "Please fill To mail address!",
    });

       return false;
   }

   if(subject=="")
   {

       Swal.fire({
        icon: 'error',
        title: "Please fill mail Subject!",
    });
       return false;
   }

   if(message=="")
   {
       Swal.fire({
        icon: 'error',
        title:"Please fill mail Content!",
    });

       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.fire({
            icon: 'success',
            title:result
        });

           $('#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.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Remove'
    }).then((result) => {
        if (result.isConfirmed) {
            $.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);
        }
    });
}


ViewMail= (draftId)=>{
  $.ajax({
    type:"post",
    url:"{{url('GetDraft')}}",
    data:{draftId},
    beforeSend:function(){
        $(`.font${draftId}`).removeClass('unread');
    },
    success:async function(response)
    {
        $('#LinkedMailId').val(draftId);

        $('#draftId').val('');
        $('#viewMailsDiv').css("display","block");
        $('#viewMailsDiv2').css("display","none");

        mail=JSON.parse(response);

        // console.log("mail response",mail.ContentTags);

        Content=mail.ContentTags;
        FromAddress=mail.FromAddress;

        To=mail.ToAddress;
        Subject=mail.Subject;
    //     $('.ql-toolbar').remove();
    //     var quill = new Quill('#editor-container', {
    //       modules: {
    //         toolbar: [
    //         [{ header: [1, 2, false] }],
    //         ['bold', 'italic', 'underline'],
    //         ['image', 'code-block']
    //         ]
    //     },
    //     placeholder: 'Compose an epic...',
    //     theme: 'snow'
    // });





    $('#m-subject').val(Subject);

        // $('.ql-editor').html('');
        console.log("draftId",draftId);

        // var container = $('.ql-editor').get(0);
        // const delta = quill.clipboard.convert(Content)
        // quill.setContents(delta, 'silent')

        CKEDITOR.replace("editor-container");

        CKEDITOR.instances['editor-container'].setData(Content);

        try{
            await getDraftEmail();
        }
        catch(e)
        {
           await CreateDraft();
       }


   }
});
}


getToMailAddress=(type)=>{
    draftId=$('#LinkedMailId').val();
    $.ajax({
        type:"post",
        url:"{{url('GetDraft')}}",
        data:{draftId},
        beforeSend:function(){

        },
        success:response=>{

            res=JSON.parse(response);

            // return false;
            toAddress=[];
            ccAddress=[];

            if(type=="reply")
            {
                // $('#m-to').val(res.FromAddress);
                toAddress.push(res.FromAddress);

                $('#m-subject').val(`RE : ${res.Subject}`);
            }
            else if(type=="replyAll")
            {

                toAddress=[];
                if(res.FromAddress!='')
                {
                    toAddress.push(res.FromAddress);
                }

                if(res.CcAddress!='')
                {
                    ccAddress=res.CcAddress.split(",");
                 // ccAddress.push(res.CcAddress);
             }

             if(res.SentToAddress!='')
             {
                SentTo=res.SentToAddress.split(",");
                SentTo.map(function(mailAdresss){
                    ccAddress.push(mailAdresss);
                });
            }

               // console.log(toAddress);
               // $('#m-to').val(toAddress.join(","));

               $('#m-subject').val(`RE : ${res.Subject}`);

           }
           else if(type=="forward")
           {
               // $('#m-to').val('');
               $('#m-subject').val(`FWD : ${res.Subject}`);

               LoadMailAttachments();

           }

           mailAddressList=``;
           ccAddressList=``;
           $('#m-to').empty();
           $('#m-cc').empty();

           toAddress.map((to)=>{
            mailAddressList+=`<option selected>${to}</option>`;
        });

           ccAddress.map((to)=>{
            ccAddressList+=`<option selected>${to}</option>`;
        });


           $('#m-to').append(mailAddressList);
           $('#m-cc').append(ccAddressList);

           // $("#m-to").select2('destroy').select2();
            // console.log(response);
            UpdateEmailContent();
            UpdateToMailId();
            UpdateToCCId();
            UpdateMailSubject();
        }
    });
}

document.addEventListener("DOMContentLoaded",()=>{
    setTimeout(()=>{
        // $('select').select2('destroy')
        $("#ComposeMailModal").on('hidden.bs.modal',()=> {
            // DiscardMail();
        });
        $("#m-to").select2({
            tags: true,
        });

        $("#m-cc").select2({
            tags: true,
        });
        $("#m-bcc").select2({
            tags: true,
        });

    },200);
})


displayMailAddresses=()=>{

    mails=[];
    $('#mailaddressess :selected').each(function(){

        mails.push($(this).val());
        console.log(this);

    });
    console.log(mails);
}

LoadMailAttachments=()=>{
    LinkedMailId=$('#LinkedMailId').val();
    draftId=$('#draftId').val();
    $.ajax({
        type:"post",
        url:"{{url('LoadEmailAttachments')}}",
        data:{LinkedMailId,draftId},
        beforeSend:()=>{  console.log("Loading Attachments");},
        success:response=>{
            console.log("mail respoonse",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('');
        }
    });

}


Mcube_Click2Call=(phoneNumber,exenumber,apiKey)=>{  

    // phoneNumber="7975080539";//pg
    // phoneNumber="9110881840";//alben

    url1="{{url('')}}"+"/api/Mcube_Click2Call";


    url=`https://mcube.vmc.in/api/outboundcall?apikey=${apiKey}&exenumber=${exenumber}&custnumber=${phoneNumber}&url=${url1}`;

    if(isNaN(phoneNumber) || phoneNumber.length!=10)
    {
        Snackbar.show({
            text: 'Invalid Phone Number',
            pos: 'top-right',
            actionTextColor: '#fff',
            backgroundColor: '#e7515a'
        });

        return false;
    }

    if(isNaN(exenumber) || exenumber.length!=10)
    {
        Snackbar.show({
            text: 'Invalid Executive Number',
            pos: 'top-right',
            actionTextColor: '#fff',
            backgroundColor: '#e7515a'
        });

        return false;
    }
    
    $.ajax({
        type:"get",
        url:url,
        beforeSend:()=>{
            console.clear();
        },
        success:response=>{
            console.log(response);
        }
    });
}


UpdateEmailData=(ColumnName,ColumnValue)=>{
    return new Promise((resolve,reject)=>{
        const draftId=$('#draftId').val();
        $.ajax({
            type: "post",
            url: "{{url('UpdateEmailData')}}",
            data:{draftId,ColumnName,ColumnValue},
            beforeSend:()=>{},
            success:response=>{
                // alert("in UpdateEmailRowId success");
                if(ColumnName=="EmailTemplatesId")
                {
                    res=JSON.parse(response);

                    if(ColumnValue)
                    {
                        MailTemplateContent=res.MailTemplateContent;

                        TemplateContent=MailTemplateContent.DescriptionHtml;
                        TemplateSubject=MailTemplateContent.Name;
                        console.clear();
                        console.log('Email Rowid',TemplateContent);
                        CKEDITOR.instances['editor-container'].setData(TemplateContent);
                        $('#m-subject').val(TemplateSubject);
                    }
                    else
                    {
                        CKEDITOR.instances['editor-container'].setData('');
                        $('#m-subject').val('');
                    }
                    setTimeout(()=>{
                        UpdateEmailContent();
                        UpdateMailSubject();
                    },250)

                }

                resolve();
                // console.log('Email Rowid',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  modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title add-title" id="notesMailModalTitleeLabel">Compose</h5>
                <button type="button" class="btn-close" data-bs-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">
            <div class="compose-box">
                <div class="compose-content">
                    <form id="Emailform">
                        <div class="row">
                         <div class="col-md-12 mail-to" style="margin-bottom: 10px;">
                            <p><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> From:</p>
                            <div class="">
                                <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-12">
                            <div class="mail-to">
                                <p><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> To:</p>
                                <div class="">
                                 <select  class="form-control"id="m-to" multiple onchange="UpdateToMailId()">
                                 </select>
                                 <span class="validation-text"></span>
                             </div>
                         </div>
                     </div>
                 </div>

                 <div class="row">
                     <div class="col-md-12">
                        <div class="mail-cc">
                          <p><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> CC:</p>
                          <div>
                            <select  class="form-control"id="m-cc" multiple onchange="UpdateToCCId()">
                            </select>
                            <span class="validation-text"></span>
                        </div>
                    </div> 

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mail-cc">
                                <p><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> BCC:</p>
                                <div>
                                   <select  class="form-control"id="m-bcc" multiple onchange="UpdateToBCCId()">
                                   </select>
                                   <span class="validation-text"></span>
                               </div>
                           </div>
                       </div>
                   </div>

                   <div class="mb-4 mail-subject">
                      <p><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> Subject:</p>
                      <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="">
                  <p><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-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg> Upload Attachment:</p>
                  <input class="form-control file-upload-input" type="file" id="mail_File_attachment" multiple="multiple" onchange="uploadAttachments(this);">
              </div>

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



              <div class="col-md-12">
                  <div class="mb-4 mail-to" style="margin-top: 10px;">
                    <p><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> Email Templates:</p>
                    <div class="" id='temlatesList'>
                        <select class="form-control" name="EmailTemplate" id="template" onchange="UpdateEmailData('EmailTemplatesId',this.value)">
                            <option value="">Select Template</option>
                            @foreach($EmailTemplates as $EmailTemplate)
                            <option value="{{$EmailTemplate['TemplateId']}}">{{$EmailTemplate['TemplateName']}}</option>

                            @endforeach
                        </select>
                    </div>


                </div>
            </div>



            <br>

            <!-- <div id="editor-container"> </div> -->
            <textarea id="editor-container"></textarea>

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

    <div id="viewMailsDiv" style="display: none">

        <input type="hidden" id="LinkedMailId" value="">
        <!-- <button class="btn" data-bs-dismiss="modal" onclick="DiscardMail();"> <i class="flaticon-delete-1"></i> Discard</button> -->

        <button class="btn btn-primary mb-2 mr-2" data-bs-dismiss="modal" onclick="DiscardMail();"><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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>


        <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('reply');"><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-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></button>

        <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('replyAll');"><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-corner-up-left"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg> All </button>

        <button class="btn btn-primary mb-2 mr-2" onclick="getToMailAddress('forward');"><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-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></button>

        <button class="btn btn-primary mb-2 mr-2" onclick="UpdateSendMail();"><svg style="transform: rotate(45deg);" 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-send"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg></button>


        <!-- <button id="btn" class="btn" onclick="UpdateSendMail()"> Send</button> -->


    </div>


    <div id="viewMailsDiv2" >

        <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-bs-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>


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


<!-- view mails Modal  -->








<!-- view mails Modal  Ends-->