
import React,{Component} from 'react';
import axios from 'axios';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

export default class AdminStaff extends Component{
    constructor(props){
        super(props);
         this.state={assetsLoaded:false,dname:'',depid:'',deps:[],etype:'',dimg:'',olddimg:'',did:'',daadhar:'',reg_no:'',dexp:'',
         dphone:'',demail:'',dage:'',dgender:'',dedu:'',dabout:'',staff:[],reg_no:''
         }
         this.handleChange = this.handleChange.bind(this)
      }

      componentDidMount(){
        axios.get('https://drkushwahindore.com/admin/Rest/departments_api').then(res => {
            //console.log(res.data);
            this.setState({deps:res.data});
        });
        axios.get('https://drkushwahindore.com/admin/Rest/staff_api').then(res => {
            //console.log(res.data);
            this.setState({staff:res.data});
        });
      }

      handleChange(event){
        this.setState({
          [event.target.name] : event.target.value
        })
      }

      editAss(id){
        axios.get('https://drkushwahindore.com/admin/Rest/edit_api/doctors/did/'+id).then(res => {
            //console.log(res.data);
            this.setState({dname:res.data.dname,depid:res.data.depid,etype:res.data.etype,dimg:res.data.dimg,olddimg:res.data.olddimg,
            did:res.data.did,daadhar:res.data.daadhar,reg_no:res.data.reg_no,dexp:res.data.dexp,dphone:res.data.dphone,demail:res.data.demail,
            olddimg:res.data.dimg,dage:res.data.dage,dgender:res.data.dgender,reg_no:res.data.reg_no,dabout:res.data.dabout});
        });
      }

    handleFile(e){
        console.log(e.target.files[0]);
        this.setState({dimg:e.target.files[0]})
    }

    submitForm(event){event.preventDefault();
        var formData = new FormData();
        formData.append("dname", this.state.dname);
        formData.append("depid", this.state.depid);
        formData.append("etype", this.state.etype);
        formData.append("dimg", this.state.dimg);
        formData.append("demail", this.state.demail);
        formData.append("dphone", this.state.dphone);
        formData.append("olddimg", this.state.olddimg);
        formData.append("daadhar", this.state.daadhar);
        formData.append("did", this.state.did);
        formData.append("reg_no", this.state.reg_no);
        formData.append("dexp", this.state.dexp);
        formData.append("dage", this.state.dage);
        formData.append("dgender", this.state.dgender);
        formData.append("reg_no", this.state.reg_no);
        formData.append("dabout", this.state.dabout);
        formData.append("dedu", this.state.dedu);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://drkushwahindore.com/admin/Rest/add_staff_api', formData,config)
            .then((res) => {
            console.log(res.data);
            //if(res.status==1){this.componentDidMount();}
        }).catch((err) => alert("File Upload Error"));    
    }

    deleteAss(id){
        confirmAlert({
            title: 'Confirm Delete',
            message: 'Are you sure to do delete?.',
            buttons: [
              {
                label: 'Yes',
                onClick: () => {
                    axios.post("https://drkushwahindore.com/admin/Rest/delete_record", {
                        tbl: "doctors",
                        col: "did",
                        val: id
                    })
                    .then(response => {
                        console.log(response);
                    })
                }
              },
              {
                label: 'No',
              }
            ]
          });        
    }

    render(){
        return (
            <div className="container-fluid">       
                <div className='row'>
                    <div className='col-md-5'>
                    <div className='widget-area-2 proclinic-box-shadow'>
                        <h3 className="widget-title">Add/Edit Staff</h3>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <input type="hidden" name='pat_id' value={this.state.pat_id}/>
                            <div className='row'>                         
                            <div className='form-group col-md-6'>
                                <label>Staff/Doctor Name</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.dname} required name='dname'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Department</label>
                                <select  onChange={this.handleChange} value={this.state.depid}
                                 className='form-control' name='depid' required>
                                    <option value="">Select</option>
                                    {this.state.deps.map(dep=>
                                    <option key={dep.depid} value={dep.depid}>{dep.dep_name}</option>)}
                                </select>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Doctor Reg No(if/any)</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.reg_no} required name='reg_no'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Employee Type</label>
                                <select  onChange={this.handleChange} value={this.state.etype}
                                 className='form-control' name='etype' required>
                                    <option value="">Select</option>
                                    <option value="Doctor">Doctor</option>
                                    <option value="Medical">Medical</option>
                                    <option value="Reception">Reception</option>
                                </select>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Gender</label>
                                <select onChange={this.handleChange}   value={this.state.dgender}
                                 className='form-control' name='dgender' required>
                                    <option value="">Select</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Age</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.dage}
                                placeholder='' required name='dage'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Email</label>
                                <input type="email" onChange={this.handleChange}  className="form-control" value={this.state.demail}
                                placeholder='' required name='demail'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Phone</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.dphone}
                                placeholder='' required name='dphone'/>
                            </div>
                            <div className='form-group col-md-8'>
                                <label>Education</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.dedu}
                                placeholder='' required name='dedu'/>
                            </div>
                            <div className='form-group col-md-4'>
                                <label>Experience Year</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.dexp}
                                placeholder='' required name='dexp'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Aadhar Numberr</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.daadhar}
                                placeholder='' required name='daadhar'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Staff Image</label>
                                <input type="file"  onChange={(e)=>this.handleFile(e)} className="form-control" name='dimg'/>
                                {this.state.olddimg!='' &&
                                <img width="100px" className='img' src={'https://drkushwahindore.com/admin/assets/pats/'+this.state.dimg}/>}
                            </div>
                            <div className='form-group col-md-12'>
                            <label>About Doctor</label>
                            <textarea className='form-control' name="dabout" rows="2" 
                                onChange={this.handleChange} value={this.state.dabout}></textarea>
                            </div>
                            </div>
                            <button className='btn btn-primary' type='submit'>Add Staff</button>
                        </form></div>
                    </div>   
                    <div className='col-md-7'>
                    <div className='widget-area-2 proclinic-box-shadow'>
                        <h3 className="widget-title">Listed Staff</h3>
                        <table className='table table-bordered table-striped table-condensed table-responsive'>
                                        <thead><tr><th>Image</th><th>Name</th><th>Contact</th><th>Department</th>
                                                <th>Edu/Exp</th><th>Action</th></tr></thead>
                                        <tbody>
                                        {this.state.staff.map(p=>
                                        <tr  key={p.did}><td><img width="50px" className='img' 
                                        src={'https://drkushwahindore.com/admin/assets/pats/'+p.dimg}/></td>
                                        <td>{p.dname}<br/>{p.dgender} Age {p.dage} yrs</td>
                                        <td>{p.demail}<br/>{p.dphone}</td>
                                        <td>{p.etype} {p.dep_name}</td>
                                        <td>{p.dedu} {p.dexp} Yrs</td>
                                        <td>
                                            
                            <button className='btn btn-warning btn-sm' onClick={()=>this.editAss(p.did)}>Edit</button>
                            <button className='btn btn-danger btn-sm' 
                                        onClick={()=>this.deleteAss(p.did)}>Delete</button></td></tr>)}
                                        </tbody>
                                    </table>
                        </div>  
                    </div>
                </div>
            </div>
        );
    }
}


