text: import Axios from 'axios';
  import React, { Component } from 'react';
  import Swal from 'sweetalert2'
  import toast, { Toaster } from 'react-hot-toast';
  import Multiselect from 'multiselect-react-dropdown';
  
  class AddClient extends Component {
      constructor(props) {
          super(props);
          this.state={
              name:'',
              username:'',
              password:'',
              confirm_password:'',
              client:this.props.match.params.id,
              error_string:'',
              statuses:[],
              selected_statuses:[],
              can_edit:0,
              can_return:0,
              can_book:0
          }
      }
      componentDidMount(){
          Axios.post('/api/get_client_accounts').then(res=>{
              console.log(res);
              this.setState({
                  clients:res.data
              })
          })  
          Axios.post('/api/get_statuses').then(res=>{
              this.setState({
                  statuses:res.data
              })
          })  
      }
      name(e){
          this.setState({
              name:e.target.value
          })
      }
   
      username(e){
          this.setState({
              username:e.target.value
          })
      }
      can_edit(e){
          this.setState({
              can_edit: !this.state.can_edit
          })
      }
      can_book(e){
          this.setState({
              can_book: !this.state.can_book
          })
      }
      can_return(e){
          this.setState({
              can_return: !this.state.can_return
          })
      }
     
      password(e){
          this.setState({
              password:e.target.value
          })
      }
      confirm_password(e){
          this.setState({
              confirm_password:e.target.value
          })
      }
      
      statuses(e){
          this.setState({
              selected_statuses:e
          })
      }
      add_client_account(){
       
                  Axios.post('/api/add_client_account',this.state).then(res=>{
                          console.log(res);
                          if(res.data.status){
                            toast.success('Client Account Added SuccessFully');
                            this.props.history.push('/admin/manage-client-accounts/'+this.props.match.params.id);
                          }else{
                              this.setState({
                                  error_string:res.data.message
                              })
                              toast.error('Error - '+res.data.message);
                          }
                  })
  
          
      }
      render() {
          return (
              <div>
                  
                  <div className="container">
                  <div className="top_section_title_div">
                      <h2 className="section_title">Add New User Account</h2>
                  </div>
                      <div className="card mt-3 p-3">
                          <div className="row col-md-12">
                              
                              <div class="form-group input_div col-md-6">
                                  <label className="input_label" for="exampleInputEmail1">Name</label>
                                  <input onChange={this.name.bind(this)} type="Name" class="form-control "  aria-describedby="emailHelp"  />
                              </div>
                           
                              <div class="form-group input_div col-md-6">
                                  <label className="input_label" for="exampleInputEmail1">Username</label>
                                  <input onChange={this.username.bind(this)}  type="email" class="form-control "  aria-describedby="emailHelp" />
                              </div>
                            
                          </div>
                          <div className="row col-md-12">
                              <div class="form-group input_div col-md-6">
                                  <label className="input_label" for="exampleInputEmail1">Password</label>
                                  <input onChange={this.password.bind(this)} type="email" class="form-control "  aria-describedby="emailHelp"  />
                              </div>
                              <div class="form-group input_div col-md-6">
                                  <label className="input_label" for="exampleInputEmail1">Confirm Password</label>
                                  <input onChange={this.confirm_password.bind(this)} type="email" class="form-control " aria-describedby="emailHelp"  />
                              </div>
                              <div class="form-group input_div col-md-12">
                                  <label className="input_label" for="exampleInputEmail1">Permissions</label>
                                  <div className="row">
                                  <div class="form-group input_div col-md-4 mt-3 d-flex">
                                      <input className="mt-1 mr-2" checked={this.state.can_edit}  onChange={this.can_edit.bind(this)}  type="checkbox"  id="exampleInputEmail1" aria-describedby="emailHelp" />
                                      <label className="input_label" for="exampleInputEmail1">Can Edit</label>
                                  
                                  </div>
                                  <div class="form-group input_div col-md-4 mt-3 d-flex">
                                      <input className="mt-1 mr-2" checked={this.state.can_book}  onChange={this.can_book.bind(this)}  type="checkbox"  id="exampleInputEmail1" aria-describedby="emailHelp" />
                                      <label className="input_label" for="exampleInputEmail1">Can Book Shipment</label>
                                  
                                  </div>
                                  <div class="form-group input_div col-md-4 mt-3 d-flex">
                                      <input className="mt-1 mr-2" checked={this.state.can_return}  onChange={this.can_return.bind(this)}  type="checkbox"  id="exampleInputEmail1" aria-describedby="emailHelp" />
                                      <label className="input_label" for="exampleInputEmail1">Can Return Shipment</label>
                                  
                                  </div>
                                  </div>
                              </div>
                              <div class="form-group input_div col-md-6">
                                  <label className="input_label" for="exampleInputEmail1">Select Statuses</label>
                                      <Multiselect
                                      options={this.state.statuses} // Options to display in the dropdown
                                      selectedValues={this.state.selected_statuses} // Preselected value to persist in dropdown
                                      onSelect={this.statuses.bind(this)} // Function will trigger on select event
                                      onRemove={this.statuses.bind(this)}
                                      displayValue="name" // Property name to display in the dropdown options
                                      />
                                  </div>
                            
                          </div>
                          {
                              this.state.error_string != '' ?
                              <p className="text-center text-danger">{this.state.error_string}</p>
                              : null
                          }
                          <div className="mt-3 ml-3 mb-3">
                              <button onClick={this.add_client_account.bind(this)} className="btn btn-success">Save</button>
                          </div>
                      </div>
                  </div>
                 
              </div>
          );
      }
  }
  export default AddClient;