import React, {Component} from "react";
import axios from "axios";
import * as configs from '../../Config/config';

export default class EditFinancialDetails extends Component{

    constructor(props) {
        super(props);

        this.state = {
            account_month : '',
            direct_income : '',
            indirect_income : '',
            total_income : '',
            direct_expenses : '',
            indirect_expenses : '',
            total_expenses : '',
            gross_revenue : ''
        };
    }

    onChangeHandler = e => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmitHandler = e => {
        e.preventDefault();

        const financialDetails = {
            account_month : this.state.account_month,
            direct_income : this.state.direct_income,
            indirect_income : this.state.indirect_income,
            total_income : this.state.total_income,
            direct_expenses : this.state.direct_expenses,
            indirect_expenses : this.state.indirect_expenses,
            total_expenses : this.state.total_expenses,
            gross_revenue : this.state.gross_revenue
        }

        console.log(`Form submitted:`);
        console.log(`account_month: ${this.state.account_month}`);
        console.log(`direct_income: ${this.state.direct_income}`);
        console.log(`indirect_income: ${this.state.indirect_income}`);
        console.log(`total_income: ${this.state.total_income}`);
        console.log(`direct_expenses: ${this.state.direct_expenses}`);
        console.log(`indirect_expenses: ${this.state.indirect_expenses}`);
        console.log(`total_expenses: ${this.state.total_expenses}`);
        console.log(`gross_revenue: ${this.state.gross_revenue}`);

        axios.post(configs.BASE_URL+'/admin/finance/update/'+this.props.match.params.id,financialDetails)
            .then(res => console.log(res.data));

        window.location = '/admin';
    }

    componentDidMount() {
        axios.get(configs.BASE_URL+'/admin/finance/'+this.props.match.params.id)
            .then(response =>{
                this.setState({
                    account_month: response.data.account_month,
                    direct_income : response.data.direct_income,
                    indirect_income : response.data.indirect_income,
                    total_income : response.data.total_income,
                    direct_expenses : response.data.direct_expenses,
                    indirect_expenses : response.data.indirect_expenses,
                    total_expenses : response.data.total_expenses,
                    gross_revenue : response.data.gross_revenue
                },()=>{

                })
                console.log(response.data);

            })
            .catch(function (error) {
                console.log(error);
            });
    }

    // calctot(){
    //     let dinc = parseInt(document.getElementById('dirIncome').value, 10);
    //     let indinc = parseInt(document.getElementById('indIncome').value, 10);
    //     document.getElementById('sincome').innerHTML = dinc + indinc;
    //
    //     let totincusd = parseFloat((dinc + indinc) / 199.56).toFixed(2);
    //     document.getElementById('totIncomeUSD').value = totincusd;
    //
    //     let dexp = parseInt(document.getElementById('dirExpenses').value, 10);
    //     let indexp = parseInt(document.getElementById('indExpenses').value, 10);
    //     document.getElementById('sexpenses').innerHTML = dexp + indexp;
    //
    //     let totexpusd = parseFloat((dexp + indexp) / 199.56).toFixed(2);
    //     document.getElementById('totExpensesUSD').value = totexpusd;
    //
    //     let totincome = dinc + indinc;
    //     let totexpense = dexp + indexp;
    //     let totrev = totincome - totexpense;
    //     document.getElementById('srevenue').innerHTML = totrev;
    //
    //     let totrevusd = parseFloat((totincome - totexpense) / 199.56).toFixed(2);
    //     document.getElementById('totRevenueUSD').value = totrevusd;
    // }

    placeHolders() {
        document.getElementById("dirIncome").placeholder = "Direct Income";
        document.getElementById("indIncome").placeholder = "Indirect Income";
        document.getElementById("dirExpenses").placeholder = "Direct Expenses";
        document.getElementById("indExpenses").placeholder = "Indirect Expenses";
    }

    render() {
        return (

            <div>
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div className="page-title-icon">
                                <i className="pe-7s-display1 fa fa-line-chart"></i>
                            </div>
                            <div>
                                Edit Financial Details
                            </div>
                        </div>
                    </div>
                </div>

                <div className="main-card mb-3 card">
                    <div className="card-body">

                        <form onSubmit={this.onSubmitHandler}>

                            <div className="position-relative row form-group">
                                <label htmlFor="accMonth" className="col-sm-2 col-form-label">Account Month</label>
                                <div className="col-sm-3">
                                    <input type="month" name="account_month" id="accMonth" className="form-control" value={this.state.account_month} onChange={this.onChangeHandler} />
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="dirIncome" className="col-sm-2 col-form-label">Direct Income<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input onClick={this.placeHolders} type="number" min="0.00" step="1" name="direct_income" id="dirIncome" className="form-control" value={this.state.direct_income} onChange={this.onChangeHandler} />
                                </div>
                                <label htmlFor="indIncome" className="col-sm-2 col-form-label">Indirect Income<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input onBlur={this.calctot} onClick={this.placeHolders} type="number" min="0.00" step="1" name="indirect_income" id="indIncome" className="form-control" value={this.state.indirect_income} onChange={this.onChangeHandler} />
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="totIncome" className="col-sm-2 col-form-label">Total Income<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input type="number" min="0.00" name="total_income" id="totIncome" className="form-control" style={{backgroundColor: "#e7ebcc", color: "black"}} value={this.state.total_income} onChange={this.onChangeHandler}/>
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="dirExpenses" className="col-sm-2 col-form-label">Direct Expenses<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input onClick={this.placeHolders} type="number" min="0.00" step="1" id="dirExpenses" name="direct_expenses" className="form-control" value={this.state.direct_expenses} onChange={this.onChangeHandler} />
                                </div>
                                <label htmlFor="indExpenses" className="col-sm-2 col-form-label">Indirect Expenses<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input onBlur={this.calctot} onClick={this.placeHolders} type="number" min="0.00" step="1" id="indExpenses" name="indirect_expenses" className="form-control" value={this.state.indirect_expenses} onChange={this.onChangeHandler} />
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="totExpenses" className="col-sm-2 col-form-label">Total Expenses<span style={{fontWeight:"bold"}}>(Rs.)</span><span style={{color:"red"}}>*</span></label>
                                <div className="col-sm-4">
                                    <input type="number" min="0.00" name="total_expenses" id="totExpenses" className="form-control" style={{backgroundColor: "#e7ebcc", color: "black"}} value={this.state.total_expenses} onChange={this.onChangeHandler} />
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <label htmlFor="totRevenue" className="col-sm-2 col-form-label">Gross Revenue<span style={{fontWeight: "bold"}}>(Rs.)</span></label>
                                <div className="col-sm-4">
                                    <input type="number" min="0.00" name="gross_revenue" id="totRevenue" className="form-control" style={{backgroundColor: "#e7ebcc", color: "black"}} value={this.state.gross_revenue} onChange={this.onChangeHandler}/>
                                </div>
                            </div>

                            <div className="position-relative row form-group">
                                <div className="col-sm-12">
                                    <button className="btn btn-primary" style={{width:"150px"}} type="submit">Update Details</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>

            </div>

        );
    }
}