import React, { useEffect, useRef, useState } from 'react';
import { Accordion, Button, Card, Col, Container, Dropdown, FloatingLabel, Form, ListGroup, Modal, Placeholder, Row, SSRProvider, Table } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import {TabulatorFull as Tabulator} from 'tabulator-tables';
import {data, getBarchartData, getSearchResults, predefinedRanges, tableData, tableData1, wordcloudData} from "./Components/TabulatorData";
import { DatePicker, RangeSlider, SelectPicker } from 'rsuite';
import { CheckPicker } from 'rsuite';
import './jqueryloader'
import { DateRangePicker } from 'rsuite';
import { Checkbox, CheckboxGroup } from 'rsuite';
import { Radio, RadioGroup } from 'rsuite';
import ReactEcharts from "echarts-for-react"; 
import { getPieChartData } from './Components/TabulatorData';
import axios from 'axios';
import * as anychart from 'anychart'
import Link from 'next/link';
import { confirmAlert } from "react-confirm-alert";

const data1 = ['A', 'B', 'C', 'D'];
var table;
let option1;
var app = {};
var tablePaymentsGrid = '';
var toggleValue = '';
// export svg
const exportcsv = '/images/contacts/Excel.svg';
const gridEditIcon = '/images/refine_by_icons/edit.svg';
const gridDeleteIcon = '/images/cross_gray.svg';
const microview = '/images/microview_active.svg';
const key_icon = '/images/primary_indication.svg';

export default function Home() {
  
    // Custom tabulator start
    function ActionFormatter(){
      return(
        `<div class="gridActionIcon">
            <span>
              <img src=${gridEditIcon} alt="edit" width="18" height="18"/>
              <img src=${gridDeleteIcon} alt="edit" width="18" height="18"/>
            </span>
        </div>`
      ); 
    }
    function microViewFormat(){
      return(
        `<img src=${microview} alt="micro" width='25' height='20'/>`
      )
    }
    function keyViewFormat(){
      return(
        `<img src=${key_icon} alt="key" width='25' height='20'/>`
      )
    }
    function idViewFormat(){
      return(
        `<a href='#' class='text-decoration-none'>#</a>`
      )
    }
    const customTabulator = () =>{
      var table = new Tabulator("#customTabulator", {
          height:"311px",
          data:tableData,
          layout:window?.innerWidth > 800 ? "fitColumns" : "fitData",
          resizableColumnFit:true,
          addRowPos:"top",
          initialSort:[
            {column:"name", dir:"asc"},
          ],
          filterMode:"local",
          pagination:true,
          paginationMode:"local",
          paginationSize:10,
          paginationSizeSelector:[10, 25, 50, 75],
          columns:[
          {title:"#", field:"id", headerSort:false, titleFormatter:idViewFormat, width:50},
          {title:"&nbsp;", field:"id", headerSort:false, formatter:microViewFormat, width:50},
          {title:"&nbsp;", field:"id", headerSort:false, formatter:keyViewFormat, width:50},
          {title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search', tooltip:tooltipValue, width:200},
          {title:"Age", field:"age", hozAlign:"left", sorter:"number", headerFilter:true, headerFilterPlaceholder:'Search', width:70},
          {title:"Gender", field:"gender", headerFilter:true, headerFilterPlaceholder:'Search', width:90},
          {title:"Height", field:"height", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Color", field:"col", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Date Of Birth", field:"dob", hozAlign:"left", sorter:"date", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Cheese", field:"cheese", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Action", field:"name", hozAlign:"left", formatter: ActionFormatter},
          ],
          ajaxResponse:function(url, params, response){
              return response.data; 
          },
      });
      return table;
    }    
    // Custom tabulator end

   // Tabulator Collapse start
    //Title Formatter
    var titleCustomization = function(cell, formatterParams, onRendered){
    var column_title = cell.getValue();
    var response = checkBGforblock(column_title);
    onRendered(function(){
    var buttonFor = '';
    switch(cell.getValue()){
        case 'Events Total': 		buttonFor = 'eventsCollapse';		break;
        case 'Affiliations Total': 	buttonFor = 'affiliationsCollapse'; break;
        case 'Publications Total': 	buttonFor = 'publicationsCollapse'; break;
        case 'Referral Total': 		buttonFor = 'referralCollapse'; 	break;
      }
      if(buttonFor != ""){
        $(cell.getElement()).parent("div").parent("div").append('<div class="tabulator-custom-button" id="'+buttonFor+'"><i class="bi bi-skip-forward"></i></div>');	
      }			
      $(cell.getElement()).parent("div").parent("div").parent("div").addClass(response);

      switch(buttonFor){
          case 'eventsCollapse': 	
              $("#eventsCollapse").click(function(event){
                table.toggleColumn('numspc');
                table.toggleColumn('numocc');
                var type = $(this).attr("toggle-type");
                if(type == "" || type == "collapse"){
                  $(this).attr("toggle-type", "collapsed");
                  $(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");		
                }else{
                  $(this).attr("toggle-type", "collapse");
                  $(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
                }	
                event.stopPropagation();
                }); 
          break;
          case 'affiliationsCollapse': 	
              $("#affiliationsCollapse").click(function(event){
                table.toggleColumn('numia');
                table.toggleColumn('numas');
                table.toggleColumn('numeb');
                table.toggleColumn('numec');
                table.toggleColumn('numgc');
                var type = $(this).attr("toggle-type");
                if(type == "" || type == "collapse"){
                  $(this).attr("toggle-type", "collapsed");
                  $(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");		
                }else{
                  $(this).attr("toggle-type", "collapse");
                  $(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
                }
                event.stopPropagation();
                }); 
          break;
          case 'publicationsCollapse': 	
              $("#publicationsCollapse").click(function(event){
                table.toggleColumn('leadc');
                table.toggleColumn('numma');
                table.toggleColumn('numsa');
                table.toggleColumn('numfa');
                table.toggleColumn('numla');
                var type = $(this).attr("toggle-type");
                if(type == "" || type == "collapse"){
                  $(this).attr("toggle-type", "collapsed");
                  $(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");		
                }else{
                  $(this).attr("toggle-type", "collapse");
                  $(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
                }	
                event.stopPropagation();
                }); 
          break;
          case 'referralCollapse': 	
              $("#referralCollapse").click(function(event){
                table.toggleColumn('kref');
                table.toggleColumn('oref');
                var type = $(this).attr("toggle-type");
                if(type == "" || type == "collapse"){
                  $(this).attr("toggle-type", "collapsed");
                  $(this).children("i").removeClass("bi-skip-backward").addClass("bi-skip-forward");		
                }else{
                  $(this).attr("toggle-type", "collapse");
                  $(this).children("i").removeClass("bi-skip-forward").addClass("bi-skip-backward");
                }	
                event.stopPropagation();
                }); 
          break;
      } 	
      });
      return cell.getValue();
      };

    //Cell Formatter
    var cellCustomization = function(column, formatterParams, onRendered){
    var column_field 	= column.getField();
    var response 		= checkBGforblock(column_field);
    $(column.getElement()).addClass(response); 
    return column.getValue();
    };
    function checkBGforblock(column_value){
        switch(column_value){
            case 'Events Total': case 'numevc': var class_name = 'eventsBgPrimary';  break;
            case 'Speaking': case 'numspc': var class_name = 'eventsBgSecondary';  break;
            case 'Organizing Committee': case 'numocc': var class_name = 'eventsBgTertiary';  break;    	
            case 'Affiliations Total': case 'numed': var class_name = 'affiliationsBgPrimary';  break;    	
            case 'Industry': case 'numia': var class_name = 'affiliationsBgSecondary';  break;    	
            case 'Associations': case 'numas': var class_name = 'affiliationsBgSecondary';  break;
            case 'Editorial Boards': case 'numeb': var class_name = 'affiliationsBgSecondary';  break;
            case 'Univ/Hospital': case 'numec': var class_name = 'affiliationsBgTertiary';  break;
            case 'Guidelines': case 'numgc': var class_name = 'affiliationsBgfourth';  break;
            case 'Publications Total': case 'nump': var class_name = 'publicationsBgPrimary';  break;
            case 'Lead Author': case 'leadc': var class_name = 'publicationsBgSecondary';  break;
            case 'Contributng Author': case 'numma': var class_name = 'publicationsBgTertiary';  break;
            case 'Single Author': case 'numsa': var class_name = 'publicationsBgTertiary';  break;
            case 'First Author': case 'numfa': var class_name = 'publicationsBgTertiary';  break;
            case 'Last Author': case 'numla': var class_name = 'publicationsBgTertiary';  break;
            case 'Trails Total': case 'numtc': var class_name = 'trailBgPrimary';  break;
            case 'Referral Total': case 'ref': var class_name = 'referralBgPrimary';  break;
            case 'HCP': case 'kref': var class_name = 'referralBgSecondary';  break;
            case 'HCO': case 'oref': var class_name = 'referralBgSecondary';  break;
            case 'Previous Tier (2014-2018)': case 'prev_tier': var class_name = 'prev_tierBg';  break; 
            case 'Current Tier (2015-2019)': case 'current_tier': var class_name = 'current_tierBg';  break; 
            case 'Status': case 'status': var class_name = 'statusBg';  break;    	
        }
        return class_name;	
    }
    var addSelectAllBox = function(cell, formatterParams, onRendered){
        return '<div class="custom-control custom-checkbox custom-control-inline"><input type="checkbox" class="custom-control-input" name="export_opts" value="" /><label class="custom-control-label widget-label"></label></div>';
    };
    var nameCustomization = function(column, formatterParams, onRendered){
        return '<a href="" class="link">'+column.getValue()+'</a>'
    };
    var tooltipValue = function formatTooltip(e, cell, onRendered) {
      let data = cell.getData()['name']    
      return data;
    }
    //microprofile view icon
    var viewMicroIcon = function(cell, formatterParams){ 
        return '<div class="tooltip-demo tooltop-right microViewIcon Male" onclick="viewKolMicroProfile(4140,this); return false;"><a href="" class="tooltipLink" rel="tooltip" data-original-title="Profile Snapshot"></a></div>';
    };
    const getData = () =>{
          table = new Tabulator('#collapsibleTabulator', {
              selectable:true,
              height:475,
              data:tableData1,
              layout:"fitDataStretch",    
              addRowPos:"top",
              initialSort:[
                {column:"name", dir:"asc"},
              ],
              filterMode:"local",
              pagination:true,
              paginationMode:"local",
              paginationSize:50,
              paginationSizeSelector:[10, 25, 50, 75],
              placeholder:"No Data Available",
            columns:[
                {title:"", formatter:'rownum',hozAlign:'center',headerSort:false,tooltip:false,frozen:true,width:10},
                {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
                  cell.getRow().toggleSelect();
                }},
                // {title:"",formatter:viewMicroIcon, headerSort:false, hozhozAlign:"center",titleFormatter:addSelectAllBox, frozen:true,width:10},            
                {title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search',hozAlign:"left", formatter:nameCustomization,frozen:true, tooltip:tooltipValue},
                {title:"Tier", field:"tier", hozAlign:"center",width:70},
                {title:"Rank", field:"rank", hozAlign:"center",width:70},
                {title:"Score", field:"score",hozAlign:"center",width:70},
                {title:"Events Total", field:"numevc",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Speaking", field:"numspc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Organizing Committee", field:"numocc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                      {title:"Affiliations Total", field:"numed",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                {title:"Industry", field:"numia",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Associations", field:"numas",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                {title:"Editorial Boards", field:"numeb",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Univ/Hospital", field:"numec",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                {title:"Guidelines", field:"numgc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                  {title:"Publications Total", field:"nump",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                {title:"Lead Author", field:"leadc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Contributng Author", field:"numma",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:100},
                {title:"Single Author", field:"numsa",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"First Author", field:"numfa",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Last Author", field:"numla",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Trails Total", field:"numtc",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"Referral Total", field:"ref",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"HCP", field:"kref",hozAlign:"center",titleFormatter:titleCustomization, formatter:cellCustomization, width:90},
                {title:"HCO", field:"oref",hozAlign:"center", titleFormatter:titleCustomization, formatter:cellCustomization, width:90}				
                ],
                ajaxResponse:function(url, params, response){
                  return response.data; 
                },
          });
    }
    function addToMyContacts(){
        alert("test");
    }
    // Tabulator Collapse end

    // Forms validation start
      /* Declaring a variable called pswdshow and setting it to false. */
        const [pswdshow, setPswd] = useState(false);

        /* Creating a state variable called confpswdshow and setting it to false. */
        const [confpswdshow, setConfPswd] = useState(false);

        /**
        * If the password is shown, then hide it. If the password is hidden, then show it
        */
        const showPassword = () =>{
        setPswd(pswdshow ? false : true);
        }

        /**
        * If the value of confpswdshow is true, then setConfPswd(false) else setConfPswd(true)
        */
        const showConfirmPassword = () =>{
        setConfPswd(confpswdshow ? false : true);
        }
        const {register, formState: { errors }, reset, watch, getValues, handleSubmit} = useForm();

        const registerUser = (data) =>{
            // console.log(data);
        }
    // Forms validation end
    // fullscreen
    const fullScreen = (e) =>{
      e.preventDefault();
      if (typeof window !== "undefined") {
        var targetelement = document.getElementById("fullscreen");
        const requestFullScreen = targetelement.requestFullscreen || targetelement.webkitRequestFullScreen || targetelement.mozRequestFullScreen || targetelement.msRequestFullScreen;
        requestFullScreen.call(targetelement);
        if (document.fullscreen) { document.exitFullscreen(); }
      }
    }
    // fullscreen end

    // rsuite selectpicker
    const dataset = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
      item => ({ label: item, value: item })
    );
    const [value4, setValue4] = React.useState(null);
    const handleSelectPicker = (value) =>{
      setValue4(value)
    }
    // rsuite selectpicker end
    
    // rsuite check picker 
    const [value3, setValue3] = React.useState([]);
    const handleCheckPicker = (value) =>{
      setValue3(value)
    }
    // rsuite check picker end
    // rsuite daterangepicker 
    const [value, setValue] = useState();
    const handleDateChange = (data) =>{
      setValue(data);
    }
    // rsuite daterangepicker end
    // rsuite range slider
    const [value1, setValue1] = React.useState([10, 50]);
    // rsuite range slider end

    // rsuite checkbox
    const [value2, setValue2] = React.useState(['A', 'C']);
    const handleCheckAll = (value, checked) => setValue2(checked ? data1 : []);
    const handleChange = value => setValue2(value);
    // rsuite checkbox end

    // rsuite radio
    const [value5, setValue5] = React.useState('A');
    // rsuite radio

    // autocomplete search
    const [searchTerm, updateSearchTerm] = useState('');
    const [filteredResults, updateFilteredResults] = useState([]);
    const [searchResults, updateSearchResults] = useState([]);
    const [displayResults, updateDisplayResults] = useState(false);
    const [focusIndex, updateFocusIndex] = useState(-1);
    const linkRefs = [];
    const keys = {
        ENTER: 13,
        UP: 38,
        DOWN: 40
    };

    const updateSearch = e => {
      var input = e.target?.value;
      updateSearchTerm(e.target.value);
      updateFilteredResults(searchResults.filter(result =>{
          if(input?.length >= 3){
              return result.title.match(new RegExp(e.target.value, 'gi'))
          }
      }))
  };

  const hideAutoSuggest = e => {
      e.persist();
      var input = e.target?.value;
      if (e.relatedTarget && e.relatedTarget.className === 'autosuggest-link') {
          return false;
      }
      if(input?.length >= 0){
        $('#search-card-results').css('border-color', 'transparent');
      }
      if(input?.length >= 3){
        updateDisplayResults(false);
      }else{
        updateDisplayResults(true);
        updateFocusIndex(-1);
      }
  };

  const showAutoSuggest = (e) => {
      updateDisplayResults(false);
  };
  const handleInput = (e) =>{
      var input = e.target?.value;
      if(input?.length < 3){
        $('.search-suggestions').css('display', 'none');
      }
      if(input?.length >= 3){
        $('.search-suggestions').removeClass('d-none');
        $('.search-suggestions').css('display', 'block');
        $('.search-suggestions').css('border-color', 'rgba(0, 0, 0, 0.175)')
      }else{
        $('.search-suggestions').css('border-color', 'transparent')
      }
  }
  const handleNavigation = e => {
      switch (e.keyCode) {
          case keys.ENTER:
              if (focusIndex !== -1)  {
                  window.open(linkRefs[focusIndex].href);
              }
              hideAutoSuggest(e);
          break;
          case keys.UP:

              if (focusIndex > -1) {
                  updateFocusIndex(focusIndex - 1);
              }
          break;
          case keys.DOWN:

              if (focusIndex < filteredResults.length - 1) {
                  updateFocusIndex(focusIndex + 1);
              }
          break;
      }
  };

  const SearchResults = () => {
      const Message = ({ text }) => (
          <div className="search-results-message">
              <p>{text}</p>
              <hr />
          </div>
      );

      if (!displayResults) {
          return null;
      }

      if (!searchResults.length) {
          return <Message text="Loading search results" />
      }

      if (!searchTerm) {
          return <Message text="Try to search for something..." />
      }

      if (!filteredResults.length) {
          return <Message text="We couldn't find anything for your search term." />
      }

      return (
          <ul className="search-results">
              {filteredResults.map((article, index) => (
                  <li key={index} className='list-unstyled'>
                      {/* ⚠️ You may want to outsource this part to make the component less heavy */}
                      <Card model={article} id='search-card-results'/>
                  </li>
              ))}
          </ul>
      );
    }
    // autocomplete seacrh end

    // Echarts Pichart 
      const [apiData, setapiData] = useState()
      const option = {
         tooltip: {
           trigger: 'item',
         },
         legend: {  
           type:'scroll',
           orient: "horizontal",
           bottom : "0%",
           legendHoverLink: true,
         },
         series: [
           {
             type: 'pie',
             data: apiData?.map((item, index)=>{
               return(
                       { value: item?.value, name: item?.title }
                   )
             }),
             label: {
               width: 64,
               overflow: "break",
               fontSize: 12,
               fontWeight : 'normal'
             },
             labelLine: {
               width : 1.5,
               length2: 7,
               length: 7
             },
             width: "100%",
             height: "100%",
             center : ['48%', '50%']
           }
         ]
       };
       const onChartClick = (params) => {
       console.log('Chart clicked', params);
       };
    // Echarts Pichart end

    // Echarts Barchart 
    const [apiData1, setapiData1] = useState();
    const series = apiData1?.map((item)=>({
      name: item?.name,
      data: item?.data,
    }))
    app.config = {
      rotate: 67,
      align: 'right',
      verticalAlign: 'middle',
      position: 'bottom',
      distance: 6,
    };
    const labelOption = {
      show: true,
      position: app.config.position,
      distance: app.config.distance,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      rotate: app.config.rotate,
      formatter: '{c}  {name|{a}}',
      fontSize: 12,
      rich: {
        name: {
          color: '#0066cc',
          fontSize: 12,
        },
      }
    };
    
  option1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: series?.map(item => item?.name),
        top:"2%",
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['bar', 'line'] },
          restore: { show: true },
          saveAsImage: {
              type: "png"
            }
        }
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['', '', '', '', ''],
          boundaryGap: true,
          triggerEvent : true
        },
      ],
      yAxis: [
        {
          type: 'value',
        }
      ],
      series: series?.map((item, index) => Object.assign(item, {
        type: 'bar',
        label: labelOption,
      }))
    };
    const onBarChartClick = (params) => {
      console.log('BarChart clicked', params);
    };
    // Echart Barchart end

    // Echarts Bubblechart 
    const [apiData2, setapiData2] = useState()
    const scatterData = apiData2?.map((item)=>({
     name: item?.title,
     value: [item?.id, item?.discountPercentage, item?.title],
     itemStyle: 'blue'
   }));
    const option2 = {
         xAxis: {},
         yAxis: {},
         tooltip: {
             triggerOn: "mousemove",
             alwaysShowContent: true,
             position: 'top'
         },
         series: [
           {
             symbolSize: 20,
             data: scatterData,
             type: 'scatter'
           }
         ]
       };
     const onBubbleChartClick = (params) => {
     console.log('Chart clicked', params);
     };
    // Echarts Bubblechart end
    // Echarts events
    const onEvents = {
      click: onChartClick,
      click: onBarChartClick,
      click: onBubbleChartClick,
    };
    // Echarts events end

    // Filters datepicker
    const [datevalue, setDateValue] = React.useState(new Date());
    const [datevalue1, setDateValue1] = React.useState(new Date());
    const [datevalue2, setDateValue2] = React.useState(new Date());
    const [datevalue3, setDateValue3] = React.useState(new Date());
    // Filters datepicker end

    // Client form modal
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    // Client form modal end

    // Plan new record modal
    const [show1, setShow1] = useState(false);

    const [dateone, setDateOne] = React.useState(new Date());
    const [datetwo, setDateTwo] = React.useState(new Date());
    const [selectedOptions, setSelectedOptions] = useState();
    const optionList = ['Eugenia', 'Bryan', 'Linda', 'Nancy', 'Lloyd', 'Alice', 'Julia', 'Albert'].map(
      item => ({ label: item, value: item })
    );
    // Add Rows
    const [assignProfiles, setAssignProfiles] = useState([{hcpname : "", assignto : "", status : ""}]);
    const hcpnameref = useRef();
    const assigntoref = useRef();
    const statusref = useRef();

    /* It takes the index of the key and the event object, and then it creates a copy of the keys array,
        * changes the value of the key at the given index, and then sets the keys array to the new array
        * @param index - the index of the key in the array
        * @param event - The event that triggered the function.
    */
    const handleFormChange = (index, event) => {
        let data = [...assignProfiles];
        data[index][event.target.name] = event.target.value;
        setAssignProfiles(data);
    }
    const addRow = (e) =>{
        setAssignProfiles([...assignProfiles, {hcpname : "", assignto : "", status : ""}]);
    }
    const removeRow = (index) =>{
        const list = [...assignProfiles];
        list.splice(index, 1);
        setAssignProfiles(list);
    }
    // Add Rows

    function handleSelect(data) {
        setSelectedOptions(data);
    }

    const handleClose1 = () => setShow1(false);
    const handleShow1 = () => setShow1(true);
    const registerPlan = (e) =>{
        e.preventDefault();
        console.log(assignProfiles);
    }
    // Plan new record modal end

    // Accordions
    const icon = '/microview_active.svg';
    const viewsimilar = '/view_similar.svg';
    //Accordions end 

    // confirm alert 
      const submit = () => {
        confirmAlert({
          title: 'Confirm to submit',
          message: 'Are you sure to do this.',
          buttons: [
            {
              label: 'Yes',
              onClick: () => alert('Click Yes')
            },
            {
              label: 'No',
              onClick: () => alert('Click No')
            }
          ]
        });
      };
      const submit1 = () => {
        confirmAlert({
          customUI: ({ onClose }) => {
            return (
              <div className='custom-ui'>
                <h1>Are you sure?</h1>
                <p>You want to delete this file?</p>
                <button className='button' onClick={onClose}>No</button>
                <button className='button'
                  onClick={() => {
                    // handleClickDelete();
                    onClose();
                  }}
                >
                  Yes, Delete it!
                </button>
              </div>
            );
          }
        });
      }
    // confirm alert end

    //group by HCP tabulator
    function toggleKolGrouping(){
      toggleValue = $("#toggleKolGrouping").text();
        if(toggleValue == 'Remove Grouping'){
          tablePaymentsGrid.setGroupBy(false);
          $("#toggleKolGrouping").text("Group By HCP");
        }else{
          tablePaymentsGrid.setGroupStartOpen(false);
          tablePaymentsGrid.setGroupBy("kol_name");
          $("#toggleKolGrouping").text("Remove Grouping");
        }
      }
    function listPayments(){
          //Tabulator Grid parameters 
          var gridFor='payments';
          var gridHeaderText= "Payments"; 
          var gridId= gridFor+'-grid-table';
  
          var actionLink = "<div class='gridActionIcon'><div class='gridEditIcon' onclick=\"editInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Edit\" class=\"tooltipLink\"></a></div></div>";
          actionLink += "<div class='gridActionIcon'><div class='gridDeleteIcon' onclick=\"deleteInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Delete\" class=\"tooltipLink\"></a></div></div>";
    
        //Data for grid to load 
            var tableData2 = [
              {micro:'1',kol_name:'Aaron James Miller',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
              {micro:'2',kol_name:'Aaron James Miller',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
              {micro:'3',kol_name:'Aaron James',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
              {micro:'4',kol_name:'Aaron James',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
            ]
          //Tabulator Gird initialisation 
          tablePaymentsGrid = new Tabulator("#"+gridId, {
          //var tableData = <?php //echo json_encode($arr_users); ?>;
            data:tableData2,
            columns:[
                  {title:"#", formatter:'rownum',align:'center',headerSort:false,tooltip:false, width:"5%"},
                  {title:"", field:"micro",formatter:function(cell, formatterParams, onRendered){
                      return "<div class='microViewIcon' onclick=\"viewPaymentMicroProfile("+ cell.getValue() +"); return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"View Interaction\"></a></div>"; //return the contents of the cell;
                  },headerFilter:false,headerSort:false,align:'center', width:"5%"},
                  {title:"HCP Name", field:"kol_name",formatter:function(cell, formatterParams, onRendered){
                      return "<a href='#' class='label-blue'>" + cell.getValue() + "</a>"; //return the contents of the cell;
                  },headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"42%"},
                  {title:"Date", field:"date",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
                  {title:"Type", field:"type",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
                  {title:"Amount", field:"amount",headerFilter:true, headerFilterPlaceholder:'Search', align:'left',bottomCalc:"sum", width:"10%"},
                  {title:"Status", field:"status",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
                  {title:"Action", field:"act",formatter:function(cell, formatterParams){
                        return actionLink;
                  },headerFilter:false,headerSort:false,width:80,align:'center', width:"8%"}
                ],
              layout:"fitDataStretch",
              tooltips:true,
              ajaxSorting:false,
                ajaxFiltering:false, 
                initialSort:[{column:"date", dir:"desc"}],
                groupClosedShowCalcs:true,
                paginationSize:10, // this option can take any positive integer value (default = 10),possible values 10,20,50,100
                pagination:"local",
                paginationSizeSelector:[10, 20, 50, 100],
                tableBuilt:function(){
              $("#"+gridFor+"-grid-header .grid-header-text").html(gridHeaderText);
              }
            });
      
            var grid_options ='<div style="float:right;" class="excelExportIcon sprite_iconSet tooltip-demo tooltop-left" onclick="exportExcel(\'#listPaymentsResultSet\',\'payments\');"><a href="#" rel="tooltip" data-original-title="Export Payment Details into Excel format">&nbsp;</a></div>';
            grid_options +='<div style="float:right;" class="title-bar-actions"><a onclick="addPayment();" class="grid_new_btn">Add Payments</a></div>';
          $("#"+gridFor+"-grid-header .grid-header-text").append(grid_options);
      }
    // group by HCP tabulator end 

    // training grid tabulator
    var trainingData = [
      {id:1, name:"Billy Bob", degree:"xyz", speciality:"ABC", frame:'NA-1991', type:"Education", },
      {id:2, name:"Mary May", degree:"NOP", speciality:"DEF", frame:'NA-1991', type:"Teaching", },
      {id:3, name:"Christine Lobowski", degree:"PAN", speciality:"GHI", frame:'NA-1991', type:"Educamp", },
      {id:4, name:"Brendon Philips", degree:"BE", speciality:"PQR", frame:'NA-1991', type:"Education", },
      {id:5, name:"Margret Marmajuke", degree:"BED", speciality:"MNO", frame:'NA-1991', type:"Technology", },
    ]
    const trainingGridTabulator = () =>{
      var table = new Tabulator("#trainingGridTable", {
          height:"311px",
          data:trainingData,
          layout:window?.innerWidth > 800 ? "fitColumns" : "fitData",
          resizableColumnFit:true,
          addRowPos:"top",
          initialSort:[
            {column:"name", dir:"asc"},
          ],
          filterMode:"local",
          footerElement:"<a href='#' class='text-center text-danger'>Show more</a>",
          columns:[
          {title:"#", field:"id", headerSort:false, titleFormatter:idViewFormat, width:50},
          {title:"Name", field:"name", headerFilter:true, headerFilterPlaceholder:'Search', tooltip:tooltipValue, width:200},
          {title:"Degree", field:"degree", hozAlign:"left", sorter:"number", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Speciality", field:"speciality", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Frame", field:"frame", hozAlign:"left", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Type", field:"type", headerFilter:true, headerFilterPlaceholder:'Search'},
          {title:"Action", field:"name", hozAlign:"left", formatter: ActionFormatter},
          ],
          ajaxResponse:function(url, params, response){
              return response.data; 
          },
      });
      return table;
    }    
    // training grid tabulator end
    /* useEffect hook */
    useEffect(()=>{
        customTabulator();
        getData();

        // autocomplete search
        const getSearchResult = () => {
          // ⚠️ This is where you should pull data in from your server
          const searchResultsResponse = getSearchResults();
          updateSearchResults(searchResultsResponse);
        };
        getSearchResult();
        // autocomplete search end

        // Echarts Pichart 
        const getPieChartResult = () => {
          // ⚠️ This is where you should pull data in from your server
            const piechartResultsResponse = getPieChartData();
            setapiData(piechartResultsResponse);
         };
        getPieChartResult();
        // Echarts Pichart end

        // Echarts Barchart 
        const getBarChartResult = () => {
          // ⚠️ This is where you should pull data in from your server
            const barchartResultsResponse = getBarchartData();
            setapiData1(barchartResultsResponse);
         };
        getBarChartResult();
        // Echarts Barchart end

        // Echarts Bubble chart
        axios.get('https://dummyjson.com/products')
        .then(res => {
            const values = res?.data?.products;
            setapiData2(values);
        })
        // Echarts Bubble chart end

        // wordcloud anychart
        const getWordCloudResult = () => {
          const wordclouddatas = wordcloudData();
            $('#anychart').empty();
            // create a tag (word) cloud chart
            var chart = anychart.tagCloud(wordclouddatas);
              // set a chart title
            chart.title('15 most spoken languages')
            // display the word cloud chart
            chart.container("anychart");
            chart.draw();
        }
        getWordCloudResult();
        // wordcloud anychart end
        // groupby HCP tabulator
        listPayments();
        // groupby HCP tabulator end
        // training grid tabulator
        trainingGridTabulator();
        // training grid tabulator end
    }, [])
  return (
    <>
      <SSRProvider>
      <Container fluid className='customTabulator'>
          <Row>
              <Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
                  <Card className='no-shadow border-start-0 border-top'>
                      <Card.Header className='border-0'>
                          <span className='grid-header-text fw-bold'>Custom Tabulator</span>
                          <div className='float-end'>
                            <Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Users</Button>
                            <a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>  
                          </div>
                      </Card.Header>
                      <Card.Body>
                          <div id="customTabulator"></div>
                      </Card.Body>
                  </Card>
              </Col>
          </Row>
      </Container>
      <Container fluid className='groupByTabulator'>
          <Row>
              <Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
                  <Card className='no-shadow border-start-0 border-top'>
                      <Card.Header className='border-0'>
                          <span className='grid-header-text fw-bold'>Custom Tabulator</span>
                          <div className='float-end'>
                          <Button variant='link' onClick={toggleKolGrouping} id="toggleKolGrouping">
                          <i className="bi bi-plus-circle"></i>{' '}Group By HCP</Button>
                          <a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>  
                          </div>
                      </Card.Header>
                      <Card.Body>
                          <div id="payments-grid-table" className="customGridWrapper"></div>
                      </Card.Body>
                  </Card>
              </Col>
          </Row>
      </Container>
      <Container fluid className='training-grid-table'>
          <Row>
              <Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
                  <Card className='no-shadow border-start-0 border-top'>
                      <Card.Header className='border-0'>
                          <span className='grid-header-text fw-bold'>Training<span className='text-sm fw-normal'>{' '}(Recent 5 of 10)</span></span>
                          <div className='float-end'>
                            <Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Training</Button>  
                          </div>
                      </Card.Header>
                      <Card.Body>
                          <div id="trainingGridTable"></div>
                      </Card.Body>
                  </Card>
              </Col>
          </Row>
      </Container>
      <Container fluid className='collapsibleTabulator'>
          <Row>
              <Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
                  <Row>
                  <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
                  <Card className='no-shadow border-start-0 border-top' id='fullscreen'>
                      <Card.Header className='border-0'>
                         <span className='grid-header-text fw-bold'>Collapsible Tabulator</span>
                          <div className='float-end'>
                          <Button variant='link'><i className="bi bi-plus-circle"></i>{' '}Add Contacts</Button>
                          <i className="bi bi-arrows-fullscreen" onClick={fullScreen}></i>
                          </div>
                      </Card.Header>
                      <Card.Body>
                          <div id="collapsibleTabulator"></div>
                      </Card.Body>
                  </Card>
                  </Col>
                  </Row>
              </Col>
          </Row>
      </Container>
      <Container fluid className='py-3'>
        <Row>
          <Col>
          <Card className='no-shadow border_left'>
          <Card.Header>
          <span className="new_record_heading p-2 pl-4 pr-4">Record New User</span>
          </Card.Header>
          <Card.Body>
          <Card.Title className='mb-3'><span>User Details</span></Card.Title>
          <Form className='form-section' onSubmit={handleSubmit(registerUser)}>
          <Row>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="salutation" className='mb-3'>
          <Form.Control as="select" type="select" aria-label="select salutation"
          name="salutation" placeholder='select salutation'
          {...register('salutation', {
              required : 'salutation is required'
          })}>
          <option value="">Select Salutation</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Control>
          <label htmlFor="salutation">Salutation<span className='text-danger'>*</span></label>
          {errors.salutation && <p className="text-danger error_message">{errors.salutation.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="email" className="mb-3">
          <Form.Control type="email" placeholder="name@example.com"
          {...register('username', {
              required : 'username is required'
          })}/>
          <label htmlFor="email">Username<span className='text-danger'>*</span></label>
          {errors.username && <p className="text-danger error_message">{errors.username.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="password" className="mb-3">
          <Form.Control type={pswdshow ? "text" : "password"} placeholder="Password" 
          {...register('password', {
              required : true,
              minLength : 6,
              maxLength : 12
          })}/>
          <label htmlFor="password">Password<span className='text-danger'>*</span></label>
          <span className="pview"><i onClick={showPassword} 
          className={pswdshow ? "pi pi-eye" : "pi pi-eye-slash"}></i></span>
          {errors?.password?.type === "required" && <p className="text-danger error_message">password is required.</p>}
          {errors?.password?.type === "minLength" && <p className="text-danger error_message">Password cannot be less than 6 characters.</p>}
          {errors?.password?.type === "maxLength" && <p className="text-danger error_message">Password cannot be greater than 12 characters.</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="confirmpassword" className="mb-3">
          <Form.Control type={confpswdshow ? "text" : "password"} placeholder="Confirm Password" 
          {...register('confirmpswd', {
              required : true
          })}/>
          <label htmlFor="confirmpassword">Confirm Password<span className='text-danger'>*</span></label>
          <span className="pview"><i onClick={showConfirmPassword} 
          className={confpswdshow ? "pi pi-eye" : "pi pi-eye-slash"}></i></span>
          {watch('confirmpswd') !== watch('password') && getValues('confirmpswd') ? (<p className="text-danger error_message">password doesn't match.</p>) : null}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="firstname" className="mb-3">
          <Form.Control type="text" placeholder="First Name"
          {...register('firstname', {
              required : 'firstname is required'
          })}/>
          <label htmlFor="firstname">First Name<span className='text-danger'>*</span></label>
          {errors.firstname && <p className="text-danger error_message">{errors.firstname.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="middlename" className="mb-3">
          <Form.Control type="text" placeholder="Middle Name"/>
          <label htmlFor="middlename">Middle Name</label>
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="lastname" className="mb-3">
          <Form.Control type="text" placeholder="Last Name"
          {...register('lastname', {
              required : 'lastname is required'
          })}/>
          <label htmlFor="lastname">Last Name<span className='text-danger'>*</span></label>
          {errors.lastname && <p className="text-danger error_message">{errors.lastname.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="gender" className='mb-3'>
          <Form.Select aria-label="Select gender" placeholder='select gender'
          {...register('gender', {
              required : 'gender is required'
          })}>
          <option value=''>Select gender</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="gender">Gender<span className='text-danger'>*</span></label>
          {errors.gender && <p className="text-danger error_message">{errors.gender.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="client" className='mb-3'>
          <Form.Select aria-label="Select client" placeholder='select client'
          {...register('client', {
              required : 'client is required'
          })}>
          <option value=''>Select client</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="client">Client<span className='text-danger'>*</span></label>
          {errors.client && <p className="text-danger error_message">{errors.client.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="role" className='mb-3'>
          <Form.Select aria-label="Select role" placeholder='select role'
          {...register('role', {
              required : 'role is required'
          })}>
          <option value=''>Select role</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="role">Role<span className='text-danger'>*</span></label>
          {errors.role && <p className="text-danger error_message">{errors.role.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="landing menu" className='mb-3'>
          <Form.Select aria-label="Select landing menu" placeholder='select landing menu'
          {...register('landing_menu', {
              required : 'landing_menu is required'
          })}>
          <option value=''>Select landing menu</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="landing menu">Landing Menu<span className='text-danger'>*</span></label>
          {errors.landing_menu && <p className="text-danger error_message">{errors.landing_menu.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="country" className='mb-3'>
          <Form.Select aria-label="Select country" placeholder='select country'
          {...register('country', {
              required : 'country is required'
          })}>
          <option value=''>Select country</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="country">Country<span className='text-danger'>*</span></label>
          {errors.country && <p className="text-danger error_message">{errors.country.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>	
          <FloatingLabel id="state" className='mb-3'>
          <Form.Select aria-label="Select State" placeholder='select state'
          {...register('state', {
              required : 'state is required'
          })}>
          <option value=''>Select State</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="state">State<span className='text-danger'>*</span></label>
          {errors.state && <p className="text-danger error_message">{errors.state.message}</p>}
          </FloatingLabel>
          </Col>
          <Col xs={12} md={6} sm={6} lg={3}>
          <FloatingLabel id="city" className='mb-3'>
          <Form.Select aria-label="Select City" placeholder='select city'
          {...register('city', {
              required : 'city is required'
          })}>
          <option value=''>Select City</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          </Form.Select>
          <label htmlFor="city">City<span className='text-danger'>*</span></label>
          {errors.city && <p className="text-danger error_message">{errors.city.message}</p>}
          </FloatingLabel>
          </Col>
          <Form.Group>
          <div className='float-end mb-3'>
          <Button variant='success' type="submit" className='px-3 mx-2' size='sm'>Save</Button>
          <Button variant='outline-success' className='px-3' size='sm'>Cancel</Button>
          </div>
          </Form.Group>
          </Row>
          </Form>
          </Card.Body>
          </Card>
          </Col>
        </Row>
      </Container>
      <Container fluid id={'select_picker'} className='py-3'>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
          <Card className='no-shadow border_left'>
          <Card.Header>
          <span className="new_record_heading p-2 pl-4 pr-4">Form Components</span>
          </Card.Header>
          <Card.Body>
          <Card.Title className='mb-3'><span>Components</span></Card.Title>
          <Form className='form-section'>
            <Row>
              <Col xs={12} md={6} sm={6} lg={3}>
                <FloatingLabel id='users' className='mb-3'>
                  <label htmlFor="users">Users<span className='text-danger'>*</span></label>
                  <SelectPicker value={value4} onChange={handleSelectPicker} data={dataset} placeholder="Select User" placement='auto'/>
                </FloatingLabel>
              </Col>
              <Col xs={12} sm={6} md={6} lg={3}>
              <FloatingLabel id='user' className='mb-3'>
              <label htmlFor="user">Multiple Users<span className='text-danger'>*</span></label>
                <CheckPicker value={value3} onChange={handleCheckPicker} data={data} placeholder="Select User" placement='auto'/>
              </FloatingLabel>
              </Col>
              <Col xs={12} sm={6} md={6} lg={3}>
              <FloatingLabel id='datepicker' className='mb-3'>
              <label htmlFor="datepicker">Datepicker<span className='text-danger'>*</span></label>
              <DateRangePicker
                ranges={predefinedRanges}
                showOneCalendar
                value={value} 
                onChange={handleDateChange} 
                placeholder="Date Picker"
                placement='auto'
              />
              </FloatingLabel>
              </Col>
              <Col xs={12} sm={6} md={6} lg={3} id='slider' className='mb-3'>
              <p className='pb-2'>Range Slider</p>
              <RangeSlider
                progress
                value={value1}
                onChange={value => {
                  setValue1(value);
                }}
              />
              </Col>
              <Col  xs={12} md={6} sm={6} lg={3} className='mb-3'>
              <Dropdown>
                  <Dropdown.Toggle id="dropdown-basic" className='customButton'>
                      Dropdown Button
                  </Dropdown.Toggle>
                  <Dropdown.Menu>
                      <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                      <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                      <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                  </Dropdown.Menu>
              </Dropdown>
              </Col>
              <Col xs={12} md={6} sm={6} lg={4} id='textarea' className='mb-3'>
                <FloatingLabel controlId="floatingTextarea">
                <Form.Control
                as="textarea"
                placeholder="Leave a comment here"
                />
                <label htmlFor="floatingTextarea">Textarea<span className='text-danger'>*</span></label>
                </FloatingLabel>
              </Col>
              <Col xs={12} sm={12} md={12} lg={5} xxl={5} id='checkbox' className='mb-3'>
              <Checkbox
                  indeterminate={value2.length > 0 && value2.length < data1.length}
                  checked={value2.length === data1.length}
                  onChange={handleCheckAll}
              >
                Check all
              </Checkbox>
              <CheckboxGroup inline name="checkboxList" value={value2} onChange={handleChange}>
                {data1.map(item => (
                  <Checkbox key={item} value={item}>
                    Item {item}
                  </Checkbox>
                ))}
              </CheckboxGroup>
              </Col>
              <Col xs={12} sm={12} md={12} lg={5} xxl={5} id='radio' className='mb-3'>
              <RadioGroup inline name="radio-name" value={value5} onChange={(value)=>setValue5(value)}>
                <Radio value="A">Item A</Radio>
                <Radio value="B">Item B</Radio>
                <Radio value="C">Item C</Radio>
              </RadioGroup>
              </Col>
              <Col xs={12} sm={12} md={5} lg={4} xxl={4} id='autocomplete' className='mb-3'>
              <p id='search-header'>Autocomplete Search results for :<span className='text-success'>{searchTerm.length ? ` ${searchTerm}` : null}</span></p>
              <input type="text"
                      placeholder="Search for tutorials..."
                      onKeyUp={updateSearch}
                      onKeyDown={handleNavigation}
                      onBlur={hideAutoSuggest}
                      onFocus={showAutoSuggest}
                      onChange={handleInput} 
                      className='inputclear form-control'/>
              <Card className="search-suggestions d-none">
                <Card.Body>
                {!displayResults && filteredResults.map((article, index) => (
                      <div key={index} className={`list-unstyled ${focusIndex === index} ? 'active' : ${null}`}>
                          <div className="autosuggest-link"
                              ref={link => {linkRefs[index] = link}}>
                              <Highlight tags={searchTerm}>{article.title}</Highlight>
                          </div>
                      </div>
                  ))}
                </Card.Body>
              </Card>
            <SearchResults />
              </Col>
            </Row>
          </Form>
          </Card.Body>
          </Card>
          </Col>
        </Row>
      </Container>
      <Container fluid className='py-3 no-shadow' id='echarts'>
          <Row>
            <Col>
              <span className="new_record_heading p-2 pl-4 pr-4">Echarts Components</span>
            </Col>
          </Row>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
              <div className='chart-title py-3'>
                <span>Pichart</span>
              </div>
              <ReactEcharts option={option} onEvents={onEvents}/>
            </Col>
          </Row>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
              <div className='chart-title py-3'>
                <span>Barchart</span>
              </div>
              <ReactEcharts option={option1} onEvents={onEvents}/>
             </Col>
          </Row>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
              <div className='chart-title py-3'>
                <span>Bubblechart</span>
              </div>
              <ReactEcharts option={option2} onEvents={onEvents}/>
            </Col>
          </Row>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12}>
                <div className='chart-title'>
                  <span>WordCloud Chart</span>
                </div>
                <div id='anychart'></div>
            </Col>
        </Row>
      </Container>
      <Container fluid className='textcolor my-3'>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mt-2 mb-2'>
            <span className='new_record_heading p-2 pl-4 pr-4'>Text Colors</span>
          </Col>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
              <p className="text-primary">text orange- paragraph tag</p>
              <h4 className="text-primary">text orange- header tag(h4)</h4>
              <a href="#">text blue- anchor tag with text underline on hover</a>
          </Col>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
              <p className=''>Placeholder component-(react-bootstrap) :</p>
              <Placeholder animation='glow'>
                  <Placeholder xs={7}/> <Placeholder xs={4} />
              </Placeholder>
              <Placeholder animation='wave'>
                  <Placeholder xs={7}/> <Placeholder xs={4} />
              </Placeholder>
          </Col>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
          <p className='pb-2'>card component-(react-bootstrap) with border blue on top :</p>
          <Card className="no-shadow card-panel">
              <Card.Header className='bg-white border-top-0 border-end-0 border-start-0 border-bottom'>
                  <span className="fw-bold card-header-title">Users</span>
              </Card.Header>
              <Card.Body>
                  <Card.Title></Card.Title>
              </Card.Body>
          </Card>
          </Col>
        </Row>
    </Container>
    <Container fluid className='no-shadow'>
      <Row>
        <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
          <span className='new_record_heading p-2 pl-4 pr-4 my-2'>Filters</span>
        </Col>
        <Col id='datepicker'>
          <Row>
          <Col xs={12} sm={6} md={6} lg={3}>
            <FloatingLabel id='datepicker' className='mb-3'>
              <label htmlFor="datepicker">Date From</label>
              <DatePicker oneTap value={datevalue} onChange={(value)=> setDateValue(value)} placement='auto'/>
            </FloatingLabel>
          </Col>
          <Col xs={12} sm={6} md={6} lg={3}>
            <FloatingLabel id='datepicker' className='mb-3'>
              <label htmlFor="datepicker">Date To</label>
              <DatePicker oneTap value={datevalue1} onChange={(value)=> setDateValue1(value)} placement='auto'/>
            </FloatingLabel>
          </Col>
          <Col xs={12} md={2} sm={2} lg={2} className='mb-2'>
            <div className='my-1'>
              <Button variant='success' className='px-4 btn-sm'>Apply</Button>
            </div>
          </Col>
          </Row>
          <Row>
            <Col xs={12} sm={6} md={6} lg={3}>
              <FloatingLabel id='datepicker' className='mb-3'>
                <label htmlFor="datepicker">Month From</label>
                <DatePicker format="yyyy-MM" value={datevalue2} onChange={(value)=> setDateValue2(value)} placement='auto'/>
              </FloatingLabel>
            </Col>
            <Col xs={12} sm={6} md={6} lg={3}>
              <FloatingLabel id='datepicker' className='mb-3'>
                <label htmlFor="datepicker">Month To</label>
                <DatePicker format="yyyy-MM" value={datevalue3} onChange={(value)=> setDateValue3(value)} placement='auto'/>
              </FloatingLabel>
            </Col>
            <Col xs={12} md={2} sm={2} lg={2} className='mb-2'>
              <div className='my-1'>
                <Button variant='success' className='px-4 btn-sm'>Apply</Button>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
    <Container fluid className='my-3 interactions'>
        <div>
          <span className="view_heading p-2 pl-4 pr-4 mb-2">View Interactions</span>
        </div>
        <Row className='border-left'>
            <Col xs={12} sm={12} md={12} lg={12}>
            <Card className="card-panel no-shadow">
                <Card.Header className='bg-white border-top-0 border-end-0 border-start-0 border-bottom'>
                    <span className="card-form-title">Interaction Details</span>
                </Card.Header>
                <Card.Body>
                    <Form className='form-layout'>
                        <Row>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Interaction Id</Form.Label>
                              <p>VPIN01091</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Interaction Date</Form.Label>
                              <p>08/26/2020</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Interaction Type</Form.Label>
                              <p>Virtual Meeting</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Number of Attendees</Form.Label>
                              <p>1</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Interaction Category</Form.Label>
                              <p>One-to-One</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Interaction Location</Form.Label>
                              <p>Virtual</p>
                            </Form.Group>
                          </Col>
                          <Col xs={12} md={6} sm={6} lg={3}>
                            <Form.Group className='mb-3'>
                              <Form.Label>Employee Name</Form.Label>
                              <p></p>
                            </Form.Group>
                          </Col>
                        </Row>
                    </Form>
                </Card.Body>
            </Card>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12}>
              <div className="form-header mt-3 mb-3">
                <span>discussion type</span>
              </div>
              <Form className='form-layout'>
              <Table striped bordered className='table-panel' responsive="md">
                <thead className='text-center'>
                  <tr>
                    <th>Sl no</th>
                    <th>Product</th>
                    <th>Discussion Type</th>
                    <th>Topic</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td><Link href={'#'} className='label-blue'>Dr. Alexander I Spira</Link></td>
                    <td>Gastroenterology</td>
                    <td>Professor</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td><Link href={'#'} className='label-blue'>Dr. Alton Oliver Sartor</Link></td>
                    <td>Gastroenterology</td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td><Link href={'#'} className='label-blue'>Dr. Abraham S John</Link></td>
                    <td>Advanced Heart Failure And Transplant Cardiology</td>
                    <td>Professor</td>
                  </tr>
                </tbody>
              </Table>         
              </Form>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12}>
              <div className="form-header mt-3 mb-3">
                <span>attendees</span>
              </div>
              <Form className='form-layout'>
              <Table striped bordered className='table-panel' responsive="md">
                <thead className='text-center'>
                  <tr>
                    <th>Sl no</th>
                    <th>HCP Name</th>
                    <th>Specialty</th>
                    <th>Title</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>Product - B</td>
                    <td>Promotional</td>
                    <td>Product Education</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Product - A</td>
                    <td>Non-Promotional</td>
                    <td>Other Topic - 2</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td>Product - C</td>
                    <td>Promotional</td>
                    <td>Product Education</td>
                  </tr>
                </tbody>
              </Table>         
              </Form>
            </Col>
        </Row>
    </Container>
      {/* Client popup form modal */}
      <Container fluid id='clientpopup' className='no-shadow'>
          <Row>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
              <span className='new_record_heading p-2 pl-4 pr-4 my-2'>Client Form Modal Section</span>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
              <Card className='no-shadow border-start-0 border-top'>
                <Card.Header className='border-0'>
                  <span className="grid-header-text">Clients</span>
                  <span onClick={handleShow} role='button' className='text-success float-end'>
                  <i className="bi bi-plus-circle"></i>Add Client</span>
                </Card.Header>
                <Card.Body></Card.Body>
              </Card>
            </Col>
          </Row>
      </Container>
      {/* Modal */}
      <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Create Client</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Row className='form-layout no-shadow py-3 my-1'>
            <Col xs={12} sm={12} md={10} lg={10}>
                <FloatingLabel id="name" className="mb-3">
                    <Form.Control type="text" placeholder="name"/>
                    <label htmlFor="name">UserName<span className='text-danger'>*</span></label>
                </FloatingLabel>
            </Col>
            <Col xs={12} sm={12} md={10} lg={10}>
                <FloatingLabel id="emailname" className="mb-3">
                    <Form.Control type="email" placeholder="email"/>
                    <label htmlFor="email">Support Email<span className='text-danger'>*</span></label>
                </FloatingLabel>
            </Col>
            </Row>
            <Modal.Footer>
                <Button variant="success" type='submit' className='btn-sm'>Save</Button>
                <Button variant="outline-success" className='btn-sm p-1' onClick={handleClose}>
                Close
                </Button>
            </Modal.Footer>
          </Form>
        </Modal.Body>
      </Modal>
      {/* Client popup form modal end */}

      {/* Plan new record modal */}
      <Container fluid className='my-3'>
            <Row>
                <Col>
                <Button variant="primary" onClick={handleShow1}>
                    Plan Modal
                </Button>
  
                <Modal
                size='lg'
                show={show1}
                onHide={handleClose1}
                backdrop="static"
                keyboard={false}
                >
                <Modal.Header closeButton>
                    <Modal.Title>Record New Plan</Modal.Title>
                </Modal.Header>
                <Modal.Body className='plan-modal-body'>
                    <Col xs={12} sm={12} md={12} lg={12}>
                    <div className='mb-1'>
                        <span className='fw-bold plan-header'>Plan Details</span>
                    </div>
                    </Col>
                    {/* <div> */}
                    <Form onSubmit={handleSubmit(registerPlan)}>
                    <Row className='form-layout no-shadow py-3 my-1'>
                    <Col xs={12} sm={12} md={12} lg={12}>
                    <FloatingLabel id="planname">
                        <Form.Control type="text" placeholder="Plan Name"/>
                        <label htmlFor="planname">Plan Name<span className='text-danger'>*</span></label>
                    </FloatingLabel>
                    </Col>
                    <Col xs={12} md={4} sm={4} lg={4} className='date mb-3'>
                      <label htmlFor="datefrom">Start Date <span className='text-danger'>*</span></label>
                      <DatePicker oneTap value={dateone} onChange={setDateOne} placement='auto'/>
                   </Col>
                   <Col xs={12} md={4} sm={4} lg={4} className='date mb-3'>  
                      <label htmlFor="dateto">End Date <span className='text-danger'>*</span></label>
                      <DatePicker oneTap value={datetwo} onChange={setDateTwo} placement='auto'/>
                   </Col>
                   <Col xs={12} md={12} sm={12} lg={12} className='react-bs-textarea'>
                        <FloatingLabel controlId="floatingTextarea">
                            <Form.Control
                            as="textarea"
                            placeholder="Leave a comment here"
                            />
                            <label htmlFor="floatingTextarea">Description<span className='text-danger'>*</span></label>
                        </FloatingLabel>
                    </Col>
                    </Row>
                    <Col xs={12} sm={12} md={12} lg={12}>
                    <div className='mb-1'>
                        <span className='fw-bold plan-header'>Objectives</span>
                    </div>
                    <Row className='form-layout no-shadow py-2'>    
                    <Col xs={12} md={6} sm={6} lg={6} className='mt-3' id='select-picker'>
                      <FloatingLabel id='users' className='mb-3'>
                        <label htmlFor="single" id='plan-new-record-label'>Objective<span className='text-danger'>*</span></label>
                        <SelectPicker value={selectedOptions} onChange={(value)=>setSelectedOptions(value)} data={optionList} placeholder="Select User" placement='auto'/>
                      </FloatingLabel>
                    </Col>
                    </Row>
                    </Col>
                    <Col xs={12} sm={12} md={12} lg={12}>
                    <div className='mb-1'>
                        <span className='fw-bold plan-header'>Assign Profiles</span>
                    </div>
                    <Row className='form-layout no-shadow py-2'>
                    {assignProfiles.map((data, index)=>{
                        return(
                        <React.Fragment key={index}>
                        <Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
                            <FloatingLabel id="hcpname">
                                <Form.Select 
                                ref={hcpnameref}
                                name='hcpname'
                                onChange={event => handleFormChange(index, event)}
                                aria-label="Select hcpname" placeholder='select hcpname'>
                                    <option>Select hcpname</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </Form.Select>
                                <label htmlFor="hcpname">HCP Name<span className='text-danger'>*</span></label>
                            </FloatingLabel>
                        </Col>
                        <Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
                            <FloatingLabel id="assignto">
                                <Form.Select 
                                ref={assigntoref}
                                name='assignto'
                                onChange={event => handleFormChange(index, event)}
                                aria-label="Select assignto" placeholder='select assignto'>
                                    <option>Select asssign</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </Form.Select>
                                <label htmlFor="assignto">Assign To<span className='text-danger'>*</span></label>
                            </FloatingLabel>
                        </Col>
                    <Col xs={12} md={6} sm={6} lg={3} className='mt-4'>
                        <FloatingLabel id="status">
                            <Form.Select 
                            ref={statusref}
                            name='status'
                            onChange={event => handleFormChange(index, event)}
                            aria-label="Select status" placeholder='select status'>
                                <option>Select status</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </Form.Select>
                            <label htmlFor="status">Status<span className='text-danger'>*</span></label>
                        </FloatingLabel>
                    </Col>
                    <Col xs={1} sm={1} md={1} lg={1} className='mt-4'>
                    {(assignProfiles.length-1===index)
                    ? <Button variant='light' onClick={addRow}>
                        <i className="pi pi-plus-circle fs-5"></i>
                    </Button> : ''}
                    </Col>
                    <Col xs={1} sm={1} md={1} lg={1} className='mt-4'>
                    {(assignProfiles.length!==1)
                        ? <Button variant='light' onClick={removeRow}>
                        <i className="pi pi-trash fs-5"></i>
                    </Button> : ''}
                    </Col>      
                        </React.Fragment>)
                    })}    
                    </Row>
                    </Col>
                    <Modal.Footer>
                        <Button variant="success" type='submit' className='btn-sm'>Save</Button>
                        <Button variant="outline-success" className='btn-sm' onClick={handleClose1}>
                        Close
                        </Button>
                    </Modal.Footer>
                    </Form>
                    {/* </div> */}
                </Modal.Body>
                </Modal>
                </Col>
            </Row>
      </Container>
      {/* Plan new record modal end */}
      <Container fluid className='no-shadow mb-3'>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-2'>
            <span className='new_record_heading p-2 pl-4 pr-4 my-2'>Button Types</span>
          </Col>
          <Col xs={12} sm={6} md={6} lg={3} xxl={3}>
            <Button variant='primary' className='mb-2'>Custom Button</Button>
          </Col>
          <Col xs={12} sm={6} md={6} lg={3} xxl={3}>
            <Button variant='success' className='mb-2'>Primary Button</Button>
          </Col>
          <Col xs={12} sm={6} md={6} lg={3} xxl={3}>
            <Button variant='outline-success' className='mb-2'>Secondary Button</Button>
          </Col>
          <Col xs={12} sm={6} md={6} lg={3} xxl={3}>
            <Button variant='link' className='px-4'>Tertiary Button</Button>
          </Col>
        </Row>
      </Container>
      {/* Accordion */}
      <Container fluid className='no-shadow mb-3'>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
            <span className='new_record_heading p-2 pl-4 pr-4 my-2'>Accordion</span>
          </Col>
          <Col xs={12} sm={12} md={4} lg={4} className='accordions mb-3'>
              <Card className='no-shadow'>
                  <Card.Header>
                      <div className='d-flex'><img src={viewsimilar} alt="viewsimilar" className='img-fluid' width={30}/><p className='text-primary'>View Similar</p></div>
                  </Card.Header>
                  <Card.Body>
                  <Accordion defaultActiveKey="0" flush>
                  <Accordion.Item eventKey="0">
                      <Accordion.Header>
                          Similar HCPs who have published on same concepts
                      </Accordion.Header>
                      <Accordion.Body>
                      <ListGroup variant="flush">
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
                      </ListGroup>
                      </Accordion.Body>
                  </Accordion.Item>
                  <Accordion.Item eventKey="1">
                      <Accordion.Header>
                          {/* <h4 className="text-primary">Similar HCPs who received top referrals</h4> */}
                          Similar HCPs who received top referrals
                      </Accordion.Header>
                      <Accordion.Body>
                      <ListGroup variant="flush">
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
                      </ListGroup>
                      </Accordion.Body>
                  </Accordion.Item>
                  <Accordion.Item eventKey="2">
                      <Accordion.Header>
                          {/* <h4 className='text-primary'>Co-authors of the HCP</h4> */}
                          Co-authors of the HCP
                      </Accordion.Header>
                      <Accordion.Body>
                      <ListGroup variant="flush">
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Adil Javed</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Andrew Michael Miller</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Brenda Louise Banwell</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Bruce A. Cree</a></ListGroup.Item>
                          <ListGroup.Item><img src={icon} className='img-fluid' width={20}/><a href="#">Daniel D Mikol</a></ListGroup.Item>
                      </ListGroup>
                      </Accordion.Body>
                  </Accordion.Item>
                  </Accordion>
                  </Card.Body>
              </Card>
          </Col>
        </Row>
      </Container>
      {/* Accordion end */}
      {/* React Confirm Alert */}
      <Container fluid className='no-shadow mb-3' id='reactConfirmAlert'>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xxl={12} className='mb-3'>
            <span className='new_record_heading p-2 pl-4 pr-4 my-2'>React Confirm Alert Section</span>
          </Col>
          <Col xs={12} sm={12} md={6} lg={6} xxl={6} className='mb-2'>
            <Button onClick={submit} variant="primary">Confirm dialog</Button>
          </Col>
          <Col xs={12} sm={12} md={6} lg={6} xxl={6} className='mb-2'>
            <Button onClick={submit1} variant="outline-success">CustomUI dialog</Button>
          </Col>
        </Row>
      </Container>
      {/* React Confirm Alert end */}
      </SSRProvider>
    </>
  )
}

function Highlight({ children: text = "", tags }) {
  if (!tags?.length) return text;
  const matches = [...text.matchAll(new RegExp(tags, "ig"))];
  const startText = text.slice(0, matches[0]?.index);
  return (
    <span>
      {startText}
      {matches.map((match, i) => {
        const startIndex = match.index;
        const currentText = match[0];
        const endIndex = startIndex + currentText.length;
        const nextIndex = matches[i + 1]?.index;
        const untilNextText = text.slice(endIndex, nextIndex);
        return (
          <React.Fragment key={i}>
            <p><span className='text-primary'>{currentText}</span>{untilNextText}</p>
          </React.Fragment>
        );
      })}
    </span>
  );
}