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

export default class AdminProducts extends Component{
    constructor(props){
        super(props);
         this.state={assetsLoaded:false,medicine:'',m_for:'',price:'',oprice:'',variant:'',mtype:'',category:'',pimg:'medicine.png',
         mid:'',gst:'',meds:[],page:0,oldpimg:'',
         }
         this.handleChange = this.handleChange.bind(this)
      }

      componentDidMount(){
        axios.get('https://drkushwahindore.com/admin/Rest/meds_list_api/'+this.state.page).then(res => {
            //console.log(res.data);
            this.setState({meds:res.data});
        });
      }

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

      editAss(id){
        axios.get('https://drkushwahindore.com/admin/Rest/edit_api/medicines/mid/'+id).then(res => {
            //console.log(res.data);
            this.setState({medicine:res.data.medicine,m_for:res.data.m_for,price:res.data.price,oprice:res.data.oprice,
                variant:res.data.variant,mtype:res.data.mtype,category:res.data.category,pimg:'medicine.png',oldpimg:res.data.pimg,
            mid:res.data.mid,gst:res.data.gst});
        });
      }

    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("medicine", this.state.medicine);
        formData.append("m_for", this.state.m_for);
        formData.append("price", this.state.price);
        formData.append("pimg", this.state.pimg);
        formData.append("oprice", this.state.oprice);
        formData.append("variant", this.state.variant);
        formData.append("oldpimg", this.state.oldpimg);
        formData.append("mtype", this.state.mtype);
        formData.append("mid", this.state.mid);
        formData.append("category", this.state.category);
        formData.append("gst", this.state.gst);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://drkushwahindore.com/admin/Rest/add_medicine_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: "medicines",
                        col: "mid",
                        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 Medicines</h3>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <input type="hidden" name='mid' value={this.state.mid}/>
                            <div className='row'>                         
                            <div className='form-group col-md-12'>
                                <label>Medicine/Product Name</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.medicine} required name='medicine'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Category</label>
                                <select  onChange={this.handleChange} value={this.state.category}
                                 className='form-control' name='category' required>
                                    <option value="">Select</option>
                                    <option value="Ayurvedic">Ayurvedic</option>
                                    <option value="Homeopathic">Homeopathic</option>
                                    <option value="Food Supliment">Food Supliment</option> 
                                    <option value="Allopathic">Allopathic</option>
                                    <option value="Cosmetic">Cosmetic</option>
                                    <option value="Organic">Organic</option>
                                </select>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Variant</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.variant} required name='variant'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Medicine Type</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.mtype} required name='mtype'/>
                            </div>
                            
                            <div className='form-group col-md-6'>
                                <label>Product Image</label>
                                <input type="file"  onChange={(e)=>this.handleFile(e)} className="form-control" name='pimg'/>
                                {this.state.oldpimg!='' &&
                                <img width="100px" className='img' 
                                src={'https://drkushwahindore.com/admin/adminassets/images/'+this.state.oldpimg}/>}
                            </div>
                            <div className='form-group col-md-4'>
                                <label>Price</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.price} required name='price'/>
                            </div>
                            
                            <div className='form-group col-md-4'>
                                <label>Offer Price</label>
                                <input type="text" onChange={this.handleChange} 
                                className="form-control" value={this.state.oprice} required name='oprice'/>
                            </div>
                            <div className='form-group col-md-4'>
                                <label>GST</label>
                                <input type="text" onChange={this.handleChange}  
                                className="form-control" value={this.state.gst} required name='gst'/>
                            </div>
                            <div className='form-group col-md-12'>
                            <label>Description</label>
                            <textarea className='form-control' name="m_for" rows="2" 
                                onChange={this.handleChange} value={this.state.m_for}></textarea>
                            </div>
                            </div>
                            <button className='btn btn-primary' type='submit'>Add Medicine</button>
                            <Link to='/admin/medicines' className='btn btn-default pull-right' type='button'>Cancel</Link>
                        </form></div>
                    </div>   
                    <div className='col-md-7'>
                    <div className='widget-area-2 proclinic-box-shadow'>
                        <h3 className="widget-title">Listed Medicines</h3>
                        <table className='table table-bordered table-striped table-condensed'>
                                        <thead><tr><th>Image</th><th>Name</th><th>Category/Variant</th><th>Price</th>
                                        <th>GST</th><th>Action</th></tr></thead>
                                        <tbody>
                                        {this.state.meds.map(p=>
                                        <tr  key={p.mid}><td><img width="50px" className='img' 
                                        src={'https://drkushwahindore.com/admin/adminassets/images/'+p.pimg}/></td>
                                        <td>{p.medicine}</td>
                                        <td>{p.category}<br/>{p.mtype}</td>
                                        <td>{p.price}</td><td>{p.gst}%</td>
                                        <td>
                                            
                            <button className='btn btn-warning btn-sm' onClick={()=>this.editAss(p.mid)}>Edit</button>
                            <button className='btn btn-danger btn-sm' 
                                        onClick={()=>this.deleteAss(p.mid)}>Delete</button></td></tr>)}
                                        </tbody>
                                    </table>
                        </div>  
                    </div>
                </div>
            </div>
        );
    }
}


