
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 AdminContri extends Component{
    constructor(props){
        super(props);
         this.state={contris:[],assetsLoaded:false,cont_user:'',cont_method:'',members:[],cont_date:'',cont_id:'',
         cont_note:'',cont_fund:'',cont_amt:'',funds:[],search_word:''
         }
         this.handleChange = this.handleChange.bind(this)
      }

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


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

      editAss(id){
        axios.get('https://moneyforex.in/church/Rest/edit_contri_api/'+id).then(res => {
            //console.log(res.data);
            this.setState({cont_user:res.data.cont_user,cont_method:res.data.cont_method,cont_note:res.data.cont_note,search_word:res.data.mem_name,
                cont_fund:res.data.cont_fund,cont_amt:res.data.cont_amt,cont_date:res.data.cont_date,cont_id:res.data.cont_id});
        });
      }


    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: "conts",
                        col: "cont_id",
                        val: id
                    })
                    .then(response => {
                        console.log(response);
                    })
                }
              },
              {
                label: 'No',
              }
            ]
          });        
    }

    setUser(id,name){
        this.setState({cont_user:id,search_word:name,members:[]});
    }

    handleChange2 = (event) => {
        this.setState({search_word: event.target.value});
        var m=event.target.value;
        if(m.length>3){
        axios.post('https://moneyforex.in/church/Rest/search_member_api',{keyword:m})
            .then((res) => {
                    this.setState({members:res.data});
            }).catch((err) => console.log(err));
        }
    }

    submitForm(event){event.preventDefault();
        var formData = new FormData();
        formData.append("cont_id", this.state.cont_id);
        formData.append("cont_user", this.state.cont_user);
        formData.append("cont_amt", this.state.cont_amt);
        formData.append("cont_fund", this.state.cont_fund);
        formData.append("cont_note", this.state.cont_note);
        formData.append("cont_method", this.state.cont_method);
        formData.append("cont_date", this.state.cont_date);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://moneyforex.in/church/Rest/add_conts_api', formData,config)
            .then((res) => {
            console.log(res.data);
            if(res.status==1){this.componentDidMount();}
        }).catch((err) => alert("File Upload Error"));    
    }

    render(){
        return (
            <div className="container-fluid">        
                <div className='row'>
                    <div className='col-md-6'>
                    <div className='card'><div className='card-header'>Add New Contribution</div>
                        <div className='card-body'>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <input type="hidden" name='cont_id'  value={this.state.cont_id}/>
                            <input type="hidden" name='cont_user'  value={this.state.cont_user}/>
                            <div className='form-group'>
                                <label>Search Member</label>
                                <input type="text" onChange={this.handleChange2} className="form-control" value={this.state.search_word}
                               required name='search_word'/>
                               {this.state.members.length>0 &&
                               <div class="list-group">
                                   {this.state.members.map(m=>
                                    <a href="#" key={m.mem_id} onClick={()=>this.setUser(m.mem_id,m.mem_name)} class="list-group-item">{m.mem_name}</a>)}
                               </div>}
                            </div>
                            <div className='row'>
                            <div className='form-group col-md-6'>
                                <label>Amount</label>
                                <input type="text" onChange={this.handleChange} className="form-control" value={this.state.cont_amt}
                               required name='cont_amt'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Date</label>
                                <input type="date" onChange={this.handleChange} className="form-control" value={this.state.cont_date}
                               required name='cont_date'/>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Fund Type</label>
                                <select  onChange={this.handleChange} value={this.state.cont_fund}
                                 className='form-control' name='cont_fund' required>
                                    <option value="">Select</option>
                                    {this.state.funds.map(as=>
                                    <option key={as.fund_id} value={as.fund_id}>{as.fund_title}</option>)}
                                </select>
                            </div>
                            <div className='form-group col-md-6'>
                                <label>Method</label>
                                <select  onChange={this.handleChange} value={this.state.cont_method}
                                 className='form-control' name='cont_method' required>
                                    <option value="Cash">Cash</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Credit/Debit Card">Credit/Debit Card</option>
                                    <option value="Direct Deposit">Direct Deposit</option>
                                </select>
                            </div>
                            </div>
                            <div className='form-group'>
                                <label>Note</label>
                                <textarea className='form-control' name="cont_note" rows="2" onChange={this.handleChange} value={this.state.cont_note}></textarea>
                            </div>                            
                            <button className='btn btn-primary' type='submit'>ADD</button>
                        </form></div></div>
                    </div>                    
                    <div className='col-md-6'>
                    <div className='card'><div className='card-header'>Listed Contributions</div>
                        <div className='card-body'>
                        <table className='table table-bordered table-striped table-condensed'>
                            <thead><tr><th>S.No.</th><th>Member</th><th>Amount</th><th>Method</th><th>Action</th></tr></thead>
                            <tbody>
                            {this.state.contris.map(as=>
                            <tr key={as.cont_id}><td>{as.mem_name}</td>
                                <td>{as.cont_amt}<br/>{as.cont_date}<br/>{as.fund_title}</td>
                                <td>{as.cont_method}</td><td>
                            <button className='btn btn-warning btn-sm' onClick={()=>this.editAss(as.cont_id)}>Edit</button>
                                <button className='btn btn-danger btn-sm' onClick={()=>this.deleteAss(as.cont_id)}>Delete</button></td></tr>)}
                            </tbody>
                        </table></div></div>
                    </div>
                </div>
            </div>
        );
    }
}


