text: import React, { Component } from 'react'
  import './questions.css'
  
  
  import { Dropdown } from 'primereact/dropdown';
  import { Button } from 'primereact/button';
  import { ListBox } from 'primereact/listbox';
  import { Toast } from 'primereact/toast';
  import { InputTextarea } from 'primereact/inputtextarea';
  import { DataTable } from 'primereact/datatable';
  import { Column } from 'primereact/column';
  import { InputSwitch } from 'primereact/inputswitch';
  import { Calendar } from 'primereact/calendar';
  import { InputText } from 'primereact/inputtext';
  
  
  export default class Questions extends Component {
      constructor(props) {
          super(props)
      
          this.state = {
              selectedstate: null,
              selectedcounty: null,
              loading: false,
              ispremisevisible: true,
              cityvalue: null,
              query_created: null,
              restuarantdata: [],
              first: 0,
              rows: 10,
              zipvalue: null,
              zonevalue: null,
              citychecked: false,
              zipchecked: false,
              zonechecked: false,
  
              //Operation variables
              isoperationvisible: true,
              methodoperationvalue: null,
              methodoperationcheck: false,
              licensecodecheck: false,
              licensecodevalue: null,
              countychecked: false,
              //License dates
              islicenseinfovisible: true,
              dateframecheck: false,
              dateissuevalue: null,
              dateexpryvalue: null,
              recentstartdatevalue: null,
  
              //alcoholinfo
              isalcoholinfovisible: true,
              alcoholcheck: false,
              alcoholselected: null,
              alcoholtypes: null
              
  
          }
  
          this.countylist = [];
          this.city = [];
          this.zip = [];
          this.zone = [];
          this.methodoperation = [];
          this.licensecode = [];
          // this.references = ['NY', 'CA', 'WA', 'VA', 'MI', 'OR', 'CO', 'NJ', 'ID', 'TX', 'NC',
          // 'VT', 'WI', 'PA', 'GA', 'MD', 'TN', 'AZ', 'MA', 'NM', 'MO', 'HI',
          // 'SD', 'MT', 'CT', 'FL', 'OH', 'MN', 'IN', 'IL',
          // 'WY'];
          this.references = ['NY', 'CA'];
  
  
  
          this.onStateChange = this.onStateChange.bind(this);
          this.onCountyChange = this.onCountyChange.bind(this);
          this.onLoadingClick = this.onLoadingClick.bind(this);
          this.onResetClick = this.onResetClick.bind(this);
          this.onSaveClick = this.onSaveClick.bind(this);
          this.onCustomPage2 = this.onCustomPage2.bind(this);
          this.onCityChange = this.onCityChange.bind(this);
          this.onZipChange = this.onZipChange.bind(this);
          this.onZoneChange = this.onZoneChange.bind(this);
          this.onMethodOperationChange = this.onMethodOperationChange.bind(this);
          this.onLicenseCodeChange = this.onLicenseCodeChange.bind(this);
          
  
      }
  
      onStateChange = (e) =>{
          this.setState({ selectedstate: e.target.value });
      }
  
  
      onResetClick = (e) =>{
          e.preventDefault();
          
          this.setState({
              // selectedstate: null,
              selectedcounty: null,
              loading: false,
              ispremisevisible: true,
              query_created: null,
              restuarantdata: [],
              cityvalue: null,
              zipvalue: null,
              zonevalue: null,
              citychecked: false,
              zipchecked: false,
              zonechecked: false,
              methodoperationcheck: false,
              methodoperationvalue: null,
              licensecodecheck: false,
              licensecodevalue: null,
              dateframecheck: false,
              dateexpryvalue: null,
              dateissuevalue: null,
              recentstartdatecheck: false,
              alcoholcheck: false,
              countychecked: false,
              countylist: null
  
          })
  
          if(this.state.selectedstate === null) return;
  
          const req_data = {
              state_name: (this.state.selectedstate === null) ? null : this.state.selectedstate,
          }
  
          this.getQueryResultLoad(req_data);
          this.toast.show({severity:'info', summary: 'Sucessfully Cleared the Entries', life: 3000});
      }
      onSaveClick = (e) =>{
          e.preventDefault();
          if(this.state.restuarantdata.length === 0) {
              alert('No Records Avaiable, would you like to change your conditions?');
              return;
          }
  
          //Code to post the data to the user profile db
          var req_data ={
              sql_query : this.state.query_created,
              date_time : Date().toLocaleString(),
              user : localStorage.getItem('username'),
          };
          var req = new Request('http://localhost:4000/pgresms/validate/saved_preferences', {
          method: 'POST',
          headers: new Headers({ 'Content-Type': 'application/json' }),
          body: JSON.stringify(req_data)
          });
  
          fetch(req)
              .then((res)=>{
                  if(res.status === 400) throw new Error(res.statusText);
                  res.json().then((data)=>{
  
                      this.toast.show({severity:'success', summary: data.message, life: 3000});
                  })
              })
              .catch((err)=>{
                  console.log(err)
                  this.toast.show({severity:'error', summary: 'Error Message', detail:err.message, life: 3000});
              })
  
  
      }
  
      // Button Loading Code
      onLoadingClick = (e) => {
          e.preventDefault();
          this.setState({ loading: true });
          setTimeout(() => {
              this.setState({ loading: false
                          });
          }, 2000);
  
      
          const req_data = {
              state_name: (this.state.selectedstate === null) ? null : this.state.selectedstate
          }
  
          console.log(req_data)
          this.getQueryResultLoad(req_data);
  
      }
  
      getQueryResultLoad = (req_data) =>{
          console.log('In getQueryResult');
          var req = new Request('http://localhost:4000/pgresms/validate/question_query_load', {
          method: 'POST',
          headers: new Headers({ 'Content-Type': 'application/json' }),
          body: JSON.stringify(req_data)
          });
  
          fetch(req)
              .then((res)=>{
                  if(res.status === 400) throw new Error(res.statusText);
                  res.json().then((data)=>{
                      this.setState({ ispremisevisible: true,
                                      query_created: data.query,
                                      restuarantdata: data.tbl})
                      console.log(data.tbl);
                      this.toast.show({severity:'success', summary: 'Sucessfully retrieved Data from Server', life: 3000});
                  })
              })
              .catch((err)=>{
                  console.log(err)
                  this.toast.show({severity:'error', summary: 'Error Message', detail:err.message, life: 3000});
              })
      }
  
      onCityChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
          if(e.value){
              //compute the this.methodoperation
              var api_link = 'http://localhost:4000/pgresms/validate/question_query_city_name';
              var req = new Request(api_link, {
                  method: 'POST',
                  headers: new Headers({ 'Content-Type': 'application/json' }),
                  body: JSON.stringify({state_name: this.state.selectedstate})
                  });
  
              
              
              fetch(req)
                  .then((res)=>{
                      if(res.status === 400) throw new Error();
                      res.json().then((data)=>{
                          data.tbl.forEach(element => {
                              this.city.push({name: element.city_name});
                          });
  
                      })
                  })
                  .catch((err)=>{
                      console.log(err)
                  })
              
          }
          this.setState({citychecked: e.value,
          cityvalue: null})
  
      }
  
      onZipChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
          if(e.value){
              //compute the this.methodoperation
              var api_link = 'http://localhost:4000/pgresms/validate/question_query_zip_name';
              var req = new Request(api_link, {
                  method: 'POST',
                  headers: new Headers({ 'Content-Type': 'application/json' }),
                  body: JSON.stringify({state_name: this.state.selectedstate})
                  });
              fetch(req)
                  .then((res)=>{
                      if(res.status === 400) throw new Error();
                      res.json().then((data)=>{
                          data.tbl.forEach(element => {
                              this.zip.push({name: element.zip});
                          });
  
                      })
                  })
                  .catch((err)=>{
                      console.log(err)
                  })
          }
          this.setState({zipchecked: e.value,
              zipvalue: null})
  
      }
  
      onZoneChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
          if(e.value){
              //compute the this.methodoperation
              var api_link = 'http://localhost:4000/pgresms/get/question_query_zone_code';
              
              fetch(api_link)
                  .then((res)=>{
                      if(res.status === 400) throw new Error();
                      res.json().then((data)=>{
                          data.tbl.forEach(element => {
                              this.zone.push({name: element.zone_name});
                          });
  
                      })
                  })
                  .catch((err)=>{
                      console.log(err)
                  })
          }
          this.setState({zonechecked: e.value,
              zonevalue: null})
  
      }
  
  
  
      onSubmitClick = (e) => {
          e.preventDefault();
          this.setState({ loading: true });
          setTimeout(() => {
              this.setState({ loading: false
                          });
          }, 2000);
  
      
          const req_data = {
              state_name: (this.state.selectedstate === null) ? null : this.state.selectedstate,
              county_name: (this.state.selectedcounty === null) ? null : this.state.selectedcounty.name,
              city_name: (this.state.cityvalue === null) ? null : this.state.cityvalue.name,
              zip_code: (this.state.zipvalue === null) ? null : this.state.zipvalue.name,
              zone_name: (this.state.zonevalue === null) ? null : this.state.zonevalue.name,
              m_operation: (this.state.methodoperationvalue === null) ? null : this.state.methodoperationvalue.name,
              license_code: (this.state.licensecodevalue === null) ? null : this.state.licensecodevalue.name,
              issue_date: (this.state.dateissuevalue === null) ? null : this.state.dateissuevalue,
              expiry_date: (this.state.dateexpryvalue === null) ? null : this.state.dateexpryvalue,
              recent_start_date: (this.state.recentstartdatevalue === null) ? null : this.state.recentstartdatevalue,
          }
  
          console.log(req_data)
          this.getQueryResultSubmit(req_data);
  
      }
      getQueryResultSubmit = (req_data) =>{
          console.log('In getQuerySubmit');
          var req = new Request('http://localhost:4000/pgresms/validate/question_query_submit', {
          method: 'POST',
          headers: new Headers({ 'Content-Type': 'application/json' }),
          body: JSON.stringify(req_data)
          });
  
          fetch(req)
              .then((res)=>{
                  if(res.status === 400) throw new Error(res.statusText);
                  res.json().then((data)=>{
  
                      this.setState({ ispremisevisible: true,
                                      query_created: data.query,
                                      restuarantdata: data.tbl})
                      this.loadWineOptionsData(data.tbl);
                      this.toast.show({severity:'success', summary: 'Sucessfully Retrieved Data from Server', life: 3000});
                  })
              })
              .catch((err)=>{
                  console.log(err)
                  this.toast.show({severity:'error', summary: 'Error Message', detail:err.message, life: 3000});
              })
      }
  
      loadWineOptionsData(options){
          if(options === undefined || options.length === 0){
              this.setState({alcoholtypes : null, alcoholcheck: true})
              return;}
          console.log('loadWineOptionsData: premise obj')
          var premise_obj = []
          options.forEach((row)=>{
              premise_obj.push(row.premise_name);
          })
          console.log('premise_obj')
          console.log(premise_obj)
  
          var req = new Request('http://localhost:4000/mgservices/api/mg/getWineList', {
              method: 'POST',
              headers: new Headers({ 'Content-Type': 'application/json' }),
              body: JSON.stringify({id: premise_obj})
              });
          console.log('http://localhost:4000/mgservices/api/mg/getWineList')
          let arr_data = [];
          let map_data = [];
  
  
          fetch(req)
              .then((res)=>{
                  res.json().then(data=>{
                      console.log(data)
  
                      data.forEach((row)=>{
                          if(map_data.indexOf(row.Wholesaler_Name) === -1){
                              arr_data.push(row);
                              map_data.push(row.Wholesaler_Name);
                          }
                      })
  
                      this.setState({alcoholtypes : arr_data, alcoholcheck: true})
                  })
              })
              .catch((err)=>{
                  console.log(err)
                  this.toast.show({severity:'error', summary: 'Error Message', detail:err.message, life: 3000});
              })
      }
  
  
      //Table pagination functions
      onCustomPage2 = (event) => {
          this.setState({
              first: event.first,
              rows: event.rows
          });
      }
      
  
      onMethodOperationChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
          console.log("Inside the onMethodOperationChange: " + e.value)
          if(e.value){
              //compute the this.methodoperation
              var api_link = 'http://localhost:4000/pgresms/validate/question_query_method_operation';
              var req = new Request(api_link, {
                  method: 'POST',
                  headers: new Headers({ 'Content-Type': 'application/json' }),
                  body: JSON.stringify({state_name: this.state.selectedstate})
                  });
  
              fetch(req)
                  .then((res)=>{
                      if(res.status === 400) throw new Error();
                      res.json().then((data)=>{
                          console.log(data);
                          // this.methodoperation = [];
                          data.tbl.forEach(element => {
                              this.methodoperation.push({name: element.method_of_operation});
                          });
  
                      })
                  })
                  .catch((err)=>{
                      console.log(err)
                  })
              
          }
          this.setState({methodoperationcheck: e.value,
              methodoperationvalue: null})
  
          return;
  
      }
  
      onLicenseCodeChange = (e) =>{
          if(this.state.selectedstate === null) return;
          this.licensecode = [];
          e.preventDefault();
  
          if(e.value){
              var api_link = 'http://localhost:4000/pgresms/validate/question_query_license_code';
              var req = new Request(api_link, {
                  method: 'POST',
                  headers: new Headers({ 'Content-Type': 'application/json' }),
                  body: JSON.stringify({state_name: this.state.selectedstate})
                  });
  
              fetch(req)
                  .then((res)=>{
                      if(res.status === 400) throw new Error();
                      res.json().then((data)=>{
                          console.log(data);
                          
                          data.tbl.forEach(element => {
                              this.licensecode.push({name: element.license_type_code});
                          });
  
                      })
                  })
                  .catch((err)=>{
                      console.log(err)
                  })
              
          }
          this.setState({licensecodecheck: e.value,
              licensecodevalue: null})
  
          return;
          
  
      }
  
      onCountyChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
          if(e.value){
              var req = new Request('http://localhost:4000/pgresms/validate/getcounty_records', {
              method: 'POST',
              headers: new Headers({ 'Content-Type': 'application/json' }),
              body: JSON.stringify({state_name: this.state.selectedstate})
              });
  
  
              fetch(req)
              .then((res)=>{
                  if(res.status === 400) throw new Error(res.statusText);
                  res.json().then((data)=>{
                      console.log(data);
                      // this.countylist = [];
                      data.tbl.forEach((row,i)=>{
                          this.countylist.push({name: row.county});
                      })
                      
                  })
              })
              .catch((err)=>{
                  console.log(err)
                  this.toast.show({severity:'error', summary: 'Error Message', detail:err.message, life: 3000});
              })
          }
          this.setState({countychecked: e.value,
              selectedcounty: null})
  
          return;
          
      }
  
      onDateframeChange = (e)=>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
  
          this.setState({dateframecheck: e.value,
              dateissuevalue: null,
              dateexpryvalue: null})
  
  
      }
      onStartDateChange = (e) =>{
          if(this.state.selectedstate === null) return;
          e.preventDefault();
      
          this.setState({recentstartdatecheck: e.value,
              recentstartdatevalue: null })
  
      }
  
      monthNavigatorTemplate(e) {
          return <Dropdown value={e.value} options={e.options} onChange={(event) => e.onChange(event.originalEvent, event.value)} style={{ lineHeight: 1 }} />;
      }
      yearNavigatorTemplate(e) {
          return <Dropdown value={e.value} options={e.options} onChange={(event) => e.onChange(event.originalEvent, event.value)} className="p-ml-2" style={{ lineHeight: 1 }} />;
      }
  
  
      onAlcoholChange = (e) =>{
          e.preventDefault();
          this.setState({alcoholcheck: e.value})
  
      }
  
      alcoholTemplate = (option) =>{
          if(option === undefined || option === null) {
              this.setState({alcoholcheck:false})
              return;}
          console.log(option);
          return(
              <ul className='list_al-container'>
              {option.map((ele) => (
                  <li>{ele.Product_Description}</li>
              )
              )}
          </ul>
          )
          
      }
  
      printReferences(){
          // console.log(this.references);
          return(this.references.map((ele)=>{
              return(
                  <span> {ele}{','} </span>
              )
          }))
      }
      
      render() {
          //Table Pagination Handle
          const template2 = {
              layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
              'RowsPerPageDropdown': (options) => {
                  const dropdownOptions = [
                      { label: 10, value: 10 },
                      { label: 20, value: 20 },
                      { label: 50, value: 50 }
                  ];
  
                  return (
                      <React.Fragment>
                          <span className="p-mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>Items per page: </span>
                          <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} appendTo={document.body} />
                      </React.Fragment>
                  );
              },
              'CurrentPageReport': (options) => {
                  return (
                      <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
                          {options.first} - {options.last} of {options.totalRecords}
                      </span>
                  )
              }
          };
  
          return (
              <div className='container-question'>
                  <div>Find a Licensor for your New Business</div>
                  <Toast ref={(el) => this.toast = el} />
                  <div className='query-maker'>
                      
                      <div className='container-countystate'>
                          <span className='drop-card'>
                              <h3>Select the STATE</h3>
                              {/* <Dropdown value={this.state.selectedstate} options={this.statelist} onChange={this.onStateChange} optionLabel="name" placeholder="State" style={{ width: '15rem' }}/> */}
                              <InputText value={this.state.selectedstate} onChange={this.onStateChange} style={{ width: '15rem' }}/>
                          </span>
                          <span className='container-countystate-btn'>
                              <Button className="countystate-btn p-button-raised p-button-text" label="Load Data" onClick={(e) => this.onLoadingClick(e)} 
                                      style={{'color' : 'white', 'background': 'lightcoral'}}/>
                          </span>
                          <span>References : </span>
                          <span style={{'color':'cadetblue'}}>{this.printReferences()}</span>
                      </div>
                      <div className='container-query-cards'>
                          <div className='container-premise'>
                              {
                                  (this.state.ispremisevisible) ? 
                                  <div>
                                      <div>
                                          <h4>Do you want to search by City Name?</h4>
                                          <InputSwitch checked={this.state.citychecked} onChange={(e)=>this.onCityChange(e)} />
                                          {this.state.citychecked ? 
                                          <Dropdown value={this.state.cityvalue} options={this.city} onChange={(e) => this.setState({ cityvalue: e.value })} optionLabel="name" placeholder="Select a City" style={{ width: '15rem' }} />
                                          : null
                                          }
                                      </div>
  
                                      <div>
                                          <h4>Do you want to search by Zip Code?</h4>
                                          <InputSwitch checked={this.state.zipchecked} onChange={(e)=>this.onZipChange(e)} />
                                          {this.state.zipchecked ? 
                                          <Dropdown value={this.state.zipvalue} options={this.zip} onChange={(e) => this.setState({ zipvalue: e.value })} optionLabel="name" placeholder="Select a Zip" style={{ width: '15rem' }} />
                                          : null
                                          }
                                      </div>
  
                                      <div>
                                          <h4>Do you want to search by available Zone?</h4>
                                          <InputSwitch checked={this.state.zonechecked} onChange={(e)=>this.onZoneChange(e)} />
                                          {this.state.zonechecked ? 
                                          <Dropdown value={this.state.zonevalue} options={this.zone} onChange={(e) => this.setState({ zonevalue: e.value })} optionLabel="name" placeholder="Select a Zone" style={{ width: '15rem' }} />
                                          : null
                                          }
                                      </div>   
                                  </div>
                                  
                                  :
                                  null
                              }
                          </div>
                          <div className='container-operation'>
                              {
                                  (this.state.isoperationvisible) ? 
                                  <div>
                                      <div>
                                          <h4>Choose by Method Of Operation<i>(by wine seller type)</i>?</h4>
                                          <InputSwitch checked={this.state.methodoperationcheck} onChange={(e)=>this.onMethodOperationChange(e)} />
                                          {this.state.methodoperationcheck ? 
                                          <Dropdown className='method-dropdwn' value={this.state.methodoperationvalue} options={this.methodoperation} onChange={(e) => this.setState({ methodoperationvalue: e.value })} optionLabel="name" placeholder="Select a Operation" style={{ width: '15rem' }} />
                                          : null
                                          }
                                      </div>
                                      <div>
                                          <h4>Choose License Code?</h4>
                                          <InputSwitch checked={this.state.licensecodecheck} onChange={(e)=>this.onLicenseCodeChange(e)} />
                                          {this.state.licensecodecheck ? 
                                          <Dropdown className='method-dropdwn' value={this.state.licensecodevalue} options={this.licensecode} onChange={(e) => this.setState({ licensecodevalue: e.value })} optionLabel="name" placeholder="Select a Code" style={{ width: '15rem' }} />
                                          : null
                                          }
                                      </div>
                                      <div>
                                          <h4>Do you want to search by County?</h4>
                                          <InputSwitch checked={this.state.countychecked} onChange={(e)=>this.onCountyChange(e)} />
                                          {this.state.countychecked ? 
                                          <Dropdown className='method-dropdwn' value={this.state.selectedcounty} options={this.countylist} onChange={(e) => this.setState({ selectedcounty: e.value })} optionLabel="name" placeholder="County" style={{ width: '15rem' }} />
                                          : null  
                              
                                          }
                                      </div>                    
                                  </div>
                                  :
                                  null
                              }
                          </div>
                          <div className='container-licenseinfo'>
                              {
                                  (this.state.islicenseinfovisible) ? 
                                  <div>
                                      <div>
                                          <h4>Choose by Issued Expiry License Range?</h4>
                                          <InputSwitch checked={this.state.dateframecheck} onChange={(e)=>this.onDateframeChange(e)} />
                                          {this.state.dateframecheck ?
                                          <div>
                                              <Calendar id="navigatorstemplate" value={this.state.dateissuevalue} onChange={(e) => this.setState({ dateissuevalue: e.value })} monthNavigator yearNavigator yearRange="2010:2030"
                                              monthNavigatorTemplate={this.monthNavigatorTemplate} yearNavigatorTemplate={this.yearNavigatorTemplate} />
                                              <Calendar id="navigatorstemplate" value={this.state.dateexpryvalue} onChange={(e) => this.setState({ dateexpryvalue: e.value })} monthNavigator yearNavigator yearRange="2010:2030"
                                              monthNavigatorTemplate={this.monthNavigatorTemplate} yearNavigatorTemplate={this.yearNavigatorTemplate} />
                                          </div>
                                          
                                          : null
                                          }
                                      </div>
                                      <div>
                                          <h4>Choose by Recent Start License Date(<i>ge</i>)?</h4>
                                          <InputSwitch checked={this.state.recentstartdatecheck} onChange={(e)=>this.onStartDateChange(e)} />
                                          {this.state.recentstartdatecheck ? 
                                           <Calendar id="navigatorstemplate" value={this.state.recentstartdatevalue} onChange={(e) => this.setState({ recentstartdatevalue: e.value })} monthNavigator yearNavigator yearRange="2010:2030"
                                           monthNavigatorTemplate={this.monthNavigatorTemplate} yearNavigatorTemplate={this.yearNavigatorTemplate} />
                                          : null
                                          }
                                      </div>                       
                                  </div>
                                  :
                                  null
                              }
                          </div>
                          <div className='container-alcoholinfo'>
                             {this.state.isalcoholinfovisible ? 
                              <div>
                                  <h4>OPTIONS Available <i>(for you)</i></h4>
                                  <InputSwitch checked={this.state.alcoholcheck} onChange={(e)=>this.onAlcoholChange(e)} />
                                  {this.state.alcoholcheck ?
                                  this.alcoholTemplate(this.state.alcoholtypes)
                                  : <h4>No Data Available</h4>
                                  }
                              </div>
                              :
                              <h4>No Data Available</h4>
                          }
                              
                          </div>
                      </div>
                      
                      <div className='btn-set'>
                          <Button label="Submit" loading={this.state.loading} onClick={(e) => this.onSubmitClick(e)} />
                          <Button label="Reset" onClick={(e) => this.onResetClick(e)} />
                          <Button label="Save Preferences" onClick={(e) => this.onSaveClick(e)} />
                      </div>
                      
                      
                  </div>
                  <div className='query-contianer'>
                      {
                          (this.state.query_created !== null)? 
                          <InputTextarea value={this.state.query_created.text} rows={5} cols={130} disabled /> :
                          <InputTextarea value={'Query formulated for the conditions'} rows={5} cols={130} disabled />
                      }
                  </div>
                  <div className='result-contianer'>
                      <DataTable value={this.state.restuarantdata} paginator paginatorTemplate={template2} 
                      first={this.state.first} rows={this.state.rows} onPage={this.onCustomPage2} responsiveLayout="scroll"
                       paginatorClassName="p-jc-end" className="p-mt-6" >
                          <Column field="premise_name" header="Active License Holder" sortable></Column>
                          <Column field="premise_addr" header="Address" sortable></Column>
                          <Column field="state_name" header="State" sortable></Column>
                      </DataTable>
                  </div>
              </div>
          )
      }
  }
  