
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 AdminEvents extends Component{
    constructor(props){
        super(props);
         this.state={event_id:'',
            assetsLoaded:false,event_title:'',event_start:'',event_end:'',event_sdesc:'',event_desc:'',event_location:'',event_time:''
         }
         this.handleChange = this.handleChange.bind(this)
      }

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

      editAss(id){
        axios.get('https://moneyforex.in/church/Rest/edit_event_api/'+id).then(res => {
            //console.log(res.data);
            this.setState({event_title:res.data.event_title,event_start:res.data.event_start,event_end:res.data.event_end,event_id:res.data.event_id,
                event_sdesc:res.data.event_sdesc,event_desc:res.data.event_desc,event_location:res.data.event_location,event_time:res.data.event_time});
        });
      }

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

    submitForm(event){event.preventDefault();
        var formData = new FormData();
        formData.append("event_title", this.state.event_title);
        formData.append("event_start", this.state.event_start);
        formData.append("event_end", this.state.event_end);
        formData.append("event_sdesc", this.state.event_sdesc);
        formData.append("event_desc", this.state.event_desc);
        formData.append("event_location", this.state.event_location);
        formData.append("event_time", this.state.event_time);
        formData.append("event_id", this.state.event_id);
        const config = {
            headers: {
              'content-type': 'multipart/form-data',
            },
          };
      
        axios.post('https://moneyforex.in/church/Rest/add_event_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 Event</div>
                        <div className='card-body'>
                        <form onSubmit={(e)=>this.submitForm(e)}>
                            <input type="hidden" name='event_id'  value={this.state.event_id}/>
                            
                            <div className='form-group'>
                                <label>Event Title</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.event_title}
                                 required name='event_title'/>
                            </div>
                            <div className='form-group'>
                                <label>Start Date</label>
                                <input type="date" onChange={this.handleChange}  className="form-control" value={this.state.event_start}
                                 required name='event_start'/>
                            </div>
                            <div className='form-group'>
                                <label>End Date</label>
                                <input type="date" onChange={this.handleChange}  className="form-control" value={this.state.event_end}
                                 required name='event_end'/>
                            </div>
                            <div className='form-group'>
                                <label>Start Time</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.event_time}
                                 required name='event_time'/>
                            </div>
                            <div className='form-group'>
                                <label>Event Short Description</label>
                                <textarea onChange={this.handleChange}  className='form-control' name="event_sdesc" rows="2" value={this.state.event_sdesc}></textarea>
                            </div>
                            <div className='form-group'>
                                <label>Event Location</label>
                                <input type="text" onChange={this.handleChange}  className="form-control" value={this.state.event_location}
                                 required name='event_location'/>
                            </div>
                            <button className='btn btn-primary' type='submit'>ADD EVENT</button>
                        </form></div></div>
                    </div> 
                </div>
            </div>
        );
    }
}


