
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 AdminAssocs extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,as_type:'',assoc_img:'',aso_id:'',ass:[],assocs:[],assoc_title:'',assoc_sdesc:'',assoc_city:'',assoc_phone:'',old_assoc_img:''
         }
      }

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

      editAss(id){
        axios.get('https://moneyforex.in/church/Rest/edit_assocs_api/'+id).then(res => {
            //console.log(res.data);
            this.setState({as_type:res.data.aso_type,old_assoc_img:res.data.aso_img,aso_id:res.data.aso_id,
                assoc_title:res.data.aso_title,assoc_sdesc:res.data.aso_sdesc,assoc_city:res.data.aso_city,assoc_phone:res.data.aso_phone});
        });
      }

    handleFile(e){
        console.log(e.target.files[0]);
        this.setState({assoc_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: "assos",
                        col: "aso_id",
                        val: id
                    })
                    .then(response => {
                        console.log(response);
                    })
                }
              },
              {
                label: 'No',
              }
            ]
          });        
    }

    submitForm(event){event.preventDefault();
        var formData = new FormData();
        formData.append("aso_id", this.state.aso_id);
        formData.append("as_type", this.state.as_type);
        formData.append("assoc_img", this.state.assoc_img);
        formData.append("assoc_title", this.state.assoc_title);
        formData.append("assoc_sdesc", this.state.assoc_sdesc);
        formData.append("assoc_city", this.state.assoc_city);
        formData.append("assoc_phone", this.state.assoc_phone);
        formData.append("old_assoc_img", this.state.old_assoc_img);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://moneyforex.in/church/Rest/add_assoc_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-5'>
                        <div className='card'><div className='card-header'>Add New Association</div>
                        <div className='card-body'>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <input type="hidden" name='aso_id'  value={this.state.aso_id}/>
                            <div className='form-group'>
                                <label>Association Type</label>
                                <select onChange={(e)=>this.setState({as_type:e.target.value})}  value={this.state.as_type}
                                 className='form-control' name='as_type' required>
                                    <option value="">Select</option>
                                    {this.state.ass.map(as=>
                                    <option key={as.as_type_id} value={as.as_type_id}>{as.as_type}</option>)}
                                </select>
                            </div>
                            <div className='form-group'>
                                <label>Association Name</label>
                                <input type="text" onChange={(e)=>this.setState({assoc_title:e.target.value})} className="form-control" value={this.state.assoc_title}
                                placeholder='St. Joseph Catholic Church' required name='assoc_title'/>
                            </div>
                            <div className='form-group'>
                                <label>Association Short Description</label>
                                <textarea className='form-control' name="assoc_sdesc" rows="2" onChange={(e)=>this.setState({assoc_sdesc:e.target.value})} value={this.state.assoc_sdesc}></textarea>
                            </div>
                            <div className='row'>
                                <div className='form-group col-md-6'>
                                    <label>City</label>
                                    <input type="text" onChange={(e)=>this.setState({assoc_city:e.target.value})} className="form-control" value={this.state.assoc_city}
                                    placeholder='Mumbai' required name='assoc_city'/>
                                </div>
                                <div className='form-group col-md-6'>
                                    <label>Phone</label>
                                    <input type="text" onChange={(e)=>this.setState({assoc_phone:e.target.value})} className="form-control" value={this.state.assoc_phone}
                                    placeholder='1231231230' required name='assoc_phone'/>
                                </div>
                            </div>
                            
                            <div className='form-group'>
                                <label>Type Image</label>
                                <input type="file"  onChange={(e)=>this.handleFile(e)} className="form-control" name='assoc_img'/>
                                {this.state.old_assoc_img!='' &&
                                <img width="100px" className='img' src={'https://moneyforex.in/church/assets/images/'+this.state.old_assoc_img}/>}
                            </div>
                            <button className='btn btn-primary' type='submit'>ADD</button>
                        </form></div></div>
                    </div>                    
                    <div className='col-md-7'>
                    <div className='card'><div className='card-header'>Listed Associations</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.assocs.map(as=>
                            <tr  key={as.aso_id}><td><img width="100px" className='img' 
                            src={'https://moneyforex.in/church/assets/images/'+as.aso_img}/></td><td>{as.aso_title}<br/>
                            <span className='badge bg-primary'>{as.as_type}</span><br/>
                            <i className="bx bx-phone"></i> {as.aso_phone}</td>
                            <td>
                            <button className='btn btn-outline-warning btn-sm' onClick={()=>this.editAss(as.aso_id)}>Edit</button>
                            <button className='btn btn-outline-danger btn-sm' onClick={()=>this.deleteAss(as.aso_id)}>Delete</button></td></tr>)}
                            </tbody>
                        </table>
                        </div></div>
                    </div>
                </div>
            </div>
        );
    }
}


