
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 AdminAssTypes extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,as_type:'',as_img:'',ass:[]
         }
      }

      componentDidMount(){
        axios.get('https://moneyforex.in/church/Rest/asstypes_api').then(res => {
            //console.log(res.data);
            this.setState({ass:res.data});
        });
      }

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

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

    submitForm(event){event.preventDefault();
        var formData = new FormData();
        formData.append("as_type", this.state.as_type);
        formData.append("as_img", this.state.as_img);

        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://moneyforex.in/church/Rest/add_asstypes_api', formData,config)
            .then((res) => {
            console.log(res.data);
            if(res.data.status==1){this.componentDidMount();}
        }).catch((err) => alert("File Upload Error"));    
    }

    render(){
        return (     
            <div className="container-fluid">
                <div className='row'>
                    <div className='col-md-4'>
                        <div className='card'><div className='card-header'>Add New Type</div>
                        <div className='card-body'>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <div className='form-group'>
                                <label>Type Title</label>
                                <input type="text" onChange={(e)=>this.setState({as_type:e.target.value})} className="form-control" value={this.state.as_type}
                                placeholder='Church/School/NGO' required name='as_type'/>
                            </div>
                            <div className='form-group'>
                                <label>Type Image</label>
                                <input type="file"  onChange={(e)=>this.handleFile(e)} className="form-control" name='as_type_img'/>
                            </div>
                            <button className='btn btn-primary' type='submit'>ADD</button>
                        </form>
                        </div>
                        </div>
                    </div>                    
                    <div className='col-md-8'>
                    <div className='card'><div className='card-header'>Listed Association Types</div>
                        <div className='card-body'>
                        <table className='table table-bordered table-striped table-condensed'>
                            <thead><tr><th>S.No.</th><th>Title</th><th>Action</th></tr></thead>
                            <tbody>
                            {this.state.ass.map(as=>
                            <tr  key={as.as_type_id}><td><img width="100px" className='img' 
                            src={'https://moneyforex.in/church/assets/images/'+as.as_type_img}/></td><td>{as.as_type}</td>
                            <td><button className='btn btn-outline-danger btn-sm' onClick={()=>this.deleteAss(as.as_type_id)}>Delete</button></td></tr>)}
                            </tbody>
                        </table>
                        </div>
                    </div>
                    </div>
                </div></div> 
        );
    }
}


