import React, { Component } from 'react';
import { createMuiTheme, FormControlLabel, MuiThemeProvider, Paper, TableCell, Tooltip, Typography, withStyles } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import api from '../../api';
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
import NumberFormat from 'react-number-format';
import { PropagateLoader } from 'react-spinners';
import UploadFile from '../../library/Upload';
import { ExcelRenderer } from 'react-excel-renderer';

const LightTooltip = withStyles((theme) => ({
    tooltip: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}))(Tooltip);

var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3());

const options = ct.customOptionsFixedColumn();

const style = {
    position: "sticky",
    left: 0,
    background: "white",
    zIndex: 101,
};
const style2 = {
    position: "sticky",
    background: "white",
    zIndex: 100,
    top: 0
};

export default class FixedAssetsMovementMR extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataTable: [],
            loading: true
        }
        this.fileHandler = this.fileHandler.bind(this);
    }

    componentDidMount() {
        this.getItemHierarki()
    }

    getItemHierarki() {
        let payload = {
            "report_id": this.props.report_id,
            "revision": Number(this.props.revision),
            "periode": this.props.periode,
            "company_id": this.props.company.company_id,
            "monthly_report_id": this.props.monthlyReportId,
            "months": this.props.month.month_id
        }
        api.create().getHierarkiMontlyReportFAM(payload).then(response => {
            console.log(payload);
            console.log(response);
            let dataTable = []
            if (response.data) {
                let res = response.data.data
                const handlePushChild = (item) => {
                    let indexIDzz = dataTable.findIndex((val) => val[1] === item.id)
                    if (indexIDzz === -1) {
                        dataTable.push([
                            item.type_report_id,
                            item.id,
                            item.parent,
                            item.formula,
                            item.level,
                            item.description,
                            item.fixed_asset_movement.mtd_mb === "" ? "0.0" : item.fixed_asset_movement.mtd_mb,
                            item.fixed_asset_movement.mtd_rb === "" ? "0.0" : item.fixed_asset_movement.mtd_rb,
                            item.fixed_asset_movement.mtd_actual === "" ? "0.0" : item.fixed_asset_movement.mtd_actual,
                            item.fixed_asset_movement.act_previous_month === "" ? "0.0" : item.fixed_asset_movement.act_previous_month,
                            item.fixed_asset_movement.act_vs_prev_month_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_prev_month_amount,
                            item.fixed_asset_movement.act_vs_prev_month_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_prev_month_percent,
                            item.fixed_asset_movement.act_vs_mb_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_mb_amount,
                            item.fixed_asset_movement.act_vs_mb_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_mb_percent,
                            item.fixed_asset_movement.act_vs_rb_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_rb_amount,
                            item.fixed_asset_movement.act_vs_rb_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_rb_percent,
                            item.order
                        ])
                    }
                    if (item.children !== null) {
                        if (item.children.length > 0) {
                            item.children.map((items, indexs) => {
                                handlePushChild(items)
                            })
                        }
                    }
                }
                res.map((item, index) => {
                    dataTable.push([
                        item.type_report_id,
                        item.id,
                        item.parent,
                        item.formula,
                        item.level,
                        item.description,
                        item.fixed_asset_movement.mtd_mb === "" ? "0.0" : item.fixed_asset_movement.mtd_mb,
                        item.fixed_asset_movement.mtd_rb === "" ? "0.0" : item.fixed_asset_movement.mtd_rb,
                        item.fixed_asset_movement.mtd_actual === "" ? "0.0" : item.fixed_asset_movement.mtd_actual,
                        item.fixed_asset_movement.act_previous_month === "" ? "0.0" : item.fixed_asset_movement.act_previous_month,
                        item.fixed_asset_movement.act_vs_prev_month_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_prev_month_amount,
                        item.fixed_asset_movement.act_vs_prev_month_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_prev_month_percent,
                        item.fixed_asset_movement.act_vs_mb_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_mb_amount,
                        item.fixed_asset_movement.act_vs_mb_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_mb_percent,
                        item.fixed_asset_movement.act_vs_rb_amount === "" ? "0.0" : item.fixed_asset_movement.act_vs_rb_amount,
                        item.fixed_asset_movement.act_vs_rb_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_rb_percent,
                        item.fixed_asset_movement.ordert_vs_rb_percent === "" ? "0.0" : item.fixed_asset_movement.act_vs_rb_percent,
                        item.order
                    ])
                    if (item.children !== null) {
                        if (item.children.length > 0) {
                            item.children.map((items, indexs) => {
                                handlePushChild(items)
                            })
                        }
                    }
                })
                console.log(dataTable);
                this.setState({ dataTable, loading: false })
            }
        })
    }

    downloadTemplate = async () => {
        let res = await fetch(
            `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report/fam/download_template?report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}`
        )
        res = await res.blob()
        console.log(res);
        if (res.size > 0) {
            let url = window.URL.createObjectURL(res);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'Template Monthly Report Fixed Assets Movement.xlsx'
            a.click();
        }        
    }

    async downloadAllData() {
        let url = `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report/fam/export_monthly_report?monthly_report_id=${this.props.monthlyReportId}&&report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}&&revision=${this.props.revision}&&months=${this.props.month.month_id}`
        console.log(url);
        let res = await fetch(
            `https://tia.eksad.com/tia-reporting-dev/public/transaction/monthly_report_bs/export_monthly_report?monthly_report_id=${this.props.monthlyReportId === null ? "" : this.props.monthlyReportId}&&report_id=${this.props.report_id}&&company_id=${this.props.company.company_id}&&year=${this.props.periode}&&revision=${this.props.revision}&&months=${this.props.month.month_id}`
        )
        if (res.size > 0) {
            let url = window.URL.createObjectURL(res);
            let a = document.createElement('a');
            a.href = url;
            a.download = 'Monthly Report Fixed Assets Movement.xlsx';
            a.click();
        }
    }

    fileHandler = (event) => {
        let fileObj = event
        ExcelRenderer(fileObj, (err, resp) => {
            console.log(resp)
            if (err) {
                console.log(err);
            }
            else {
                let isi = resp.rows.slice(3)
                console.log(isi);
                let payload = []
                let reg = /^[-+]?(?:[0-9]+,)*[0-9]+(?:\.[0-9]+)?$/;
                isi.map((i, index) => {
                    if (i.length > 0) {
                        payload.push({
                            item_report_id: i[1] === undefined ? "" : String(i[1]).trim(),
                            item_report: i[2] === undefined ? "" : String(i[2]).trim(),
                            mtd_mb: i[3] === undefined ? "0" : reg.test(String(i[3])) === false ? "0" : String(i[3]).trim()
                        })
                    }
                })
                let body = {
                    company_id: this.props.company.company_id,
                    periode: this.props.periode,
                    report_id: this.props.report_id,
                    fixed_asset_movement: payload,
                    months: this.props.month.month_id
                }
                console.log(body)
                this.setState({ payload: body, judul: resp.rows[1][0], judulColumn: resp.rows[2] })
            }
        });
    }

    checkUpload() {
        api.create().checkUploadMonthlyReportFAM(this.state.payload).then(response => {
            console.log(JSON.stringify(this.state.payload));
            console.log(this.state.payload)
            console.log(response)
            if (response.data) {
                if (response.data.status === 'success') {
                    this.setState({ visibleUpload: false, loading: true })
                    // let dataTable = response.data.data.map((item, index) => {
                    //     return [
                    //         item.type_report_id,
                    //         item.item_report_id,
                    //         item.parent,
                    //         item.formula,
                    //         item.level,
                    //         item.item_report,
                    //         item.total_actual_before,
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.january, formula: item.january_formula } : Number(item.january).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.february, formula: item.february_formula } : Number(item.february).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.march, formula: item.march_formula } : Number(item.march).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.april, formula: item.april_formula } : Number(item.april).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.may, formula: item.may_formula } : Number(item.may).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.june, formula: item.june_formula } : Number(item.june).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.july, formula: item.july_formula } : Number(item.july).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.august, formula: item.august_formula } : Number(item.august).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.september, formula: item.september_formula } : Number(item.september).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.october, formula: item.october_formula } : Number(item.october).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.november, formula: item.november_formula } : Number(item.november).toFixed(1),
                    //         item.type_report_id == 5 || item.type_report_id == 6 ? { value: item.december, formula: item.december_formula } : Number(item.december).toFixed(1),
                    //         Number(item.total_current_year).toFixed(1),
                    //         Number(item.total_next_year).toFixed(1),
                    //         Number(item.total_more_year).toFixed(1),
                    //         item.orders,
                    //         item.forecast_formula,
                    //         item.before_formula,
                    //         item.error
                    //     ]
                    // })
                    // this.setState({ dataTable, dataLoaded: true, loading: false, buttonError: false, editable: true, saveDraft: true }, () => {
                    //     this.state.dataTable.map(item => {
                    //         if (item[12].length > 0) {
                    //             // console.log('masuk')
                    //             this.setState({ buttonError: true, errorPreview: true, editable: true, saveDraft: true })
                    //         }
                    //     })
                    //     // console.log(this.state.dataTable);
                    // })
                }
            }
        })
    }

    backToMonthlyReport(type) {
        console.log(this.state.dataTable);
        let data = []
        this.state.dataTable.map(i => {
            data.push({
                item_report_id: i[1],
                mtd_mb: String(Number(i[6]).toFixed(1)),
                mtd_rb: String(Number(i[7]).toFixed(1)),
                mtd_actual: String(Number(i[8]).toFixed(1)),
                act_previous_month: String(Number(i[9]).toFixed(1)),
                act_vs_prev_month_amount: String(Number(i[10]).toFixed(1)),
                act_vs_prev_month_percent: String(Number(i[11]).toFixed(1)),
                act_vs_mb_amount: String(Number(i[12]).toFixed(1)),
                act_vs_mb_percent: String(Number(i[13]).toFixed(1)),
                act_vs_rb_amount: String(Number(i[14]).toFixed(1)),
                act_vs_rb_percent: String(Number(i[15]).toFixed(1))
            })
        })   
        let payload = {
            "monthly_report_id": this.props.submissionID,
            "company_id": this.props.company.company_id,
            "periode": this.props.periode,
            "report_id": this.props.report_id,
            "status": type,
            "months": this.props.month.month_id,
            "fixed_asset_movement": data
        }
        api.create('UPLOAD').createMonthlyReportFAM(payload).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === "success") {
                    this.props.saveToMonthlyReport()
                } else {
                    this.setState({ loading: false }, () => {
                        this.props.saveToMonthlyReport()
                    })
                }
            } else {
                this.setState({ loading: false }, () => {
                    this.getSubmission()
                    document.body.style.overflow = 'unset';
                })
            }            
        })     
    }

    render() {
        let dataTable2 = this.state.dataTable
        const handleChange = (value, tableMeta, type) => {
            let val = String(value).split(",").join("")
            if (type === "actual") {
                dataTable2[tableMeta.rowIndex][8] = Number(val).toFixed(1)
            } else {
                let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[tableMeta.rowIndex][2])
                if (indexParent > 0) {
                    // console.log(indexParent)
                    dataTable2[tableMeta.rowIndex][9] = Number(val).toFixed(1)
                    let jagain = Number(dataTable2[indexParent][8]).toFixed(1)
                    dataTable2[indexParent][9] = jagain === undefined ? (0 + Number(val)).toFixed(1) : Number(Number(jagain) + Number(val)).toFixed(1)
                    // if (tableMeta.rowData[5] === 'Cash & Bank Balance') {
                    //     console.log(value);
                    //     console.log(a);
                    //     console.log(jagain);
                    //     console.log(dataTable2[indexParent]);
                    // }
                } else {
                    dataTable2[tableMeta.rowIndex][8] = Number(val).toFixed(1)
                }
            }
        }

        const handleValue = (data, type) => {
            let total = 0
            dataTable2.map((item, index) => {
                if (data.rowData[1] === item[2]) {
                    let itemVal = item[data.columnIndex + type].value !== undefined ? Number(item[data.columnIndex + type].value) : Number(item[data.columnIndex + type])
                    total = item[data.columnIndex + type] === undefined ? Number(total) + 0 : Number(total) + itemVal
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[data.rowIndex][2])
            dataTable2[data.rowIndex][data.columnIndex + type] = Number(total).toFixed(1)
            // console.log(indexParent);
            return total
        }

        const handleValueFormula = (data, type) => {
            let total = 0
            dataTable2.map((item, index) => {
                if (data.rowData[1] === item[2]) {
                    let itemVal = item[data.columnIndex + type].value !== undefined ? Number(item[data.columnIndex + type].value) : Number(item[data.columnIndex + type])
                    total = item[data.columnIndex + type] === undefined ? Number(total) + 0 : Number(total) + itemVal
                }
            })
            let indexParent = dataTable2.findIndex((val) => val[1] === dataTable2[data.rowIndex][2])
            dataTable2[data.rowIndex][data.columnIndex + type] = Number(total).toFixed(1)
            // console.log(indexParent);
            return total
        }

        let columns = [
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
                name: "",
                options: {
                    display: false
                }
            },
            {
            name: "Account",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style }),
                customBodyRender: (value, tableMeta) => {
                    return (
                        <div style={{ width: 300 }}>
                            {tableMeta.rowData[24] ?
                                tableMeta.rowData[24].length > 0 ?
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <LightTooltip title={"Report Items Not Registered"} arrow>
                                            <span style={{ fontSize: 12, color: 'red' }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
                                        </LightTooltip>
                                    </div>
                                    :
                                    tableMeta.rowData[4] === 0 ?
                                        <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : value).toUpperCase()}</span>
                                        :
                                        <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                            <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
                                        </div>
                                :
                                tableMeta.rowData[4] === 0 ?
                                    <span style={{ fontSize: 12, fontWeight: 'bold' }}>{String(tableMeta.rowData[0] === 4 ? "" : value).toUpperCase()}</span>
                                    :
                                    <div style={{ paddingLeft: 20 * Number(tableMeta.rowData[4]) }}>
                                        <span style={{ fontSize: 12 }}>{tableMeta.rowData[0] === 4 ? "" : value}</span>
                                    </div>
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `Month To Date (MTD)`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
                        {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
                            <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                        </TableCell> */}
                        <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 45}}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <span>{"Master Budget (MB)"}</span>
                            </div>
                            <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <span>{"Rolling Budget (RB)"}</span>
                            </div>
                            <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <span>{"Actual"}</span>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="col-1">
                                    <div style={{ textAlign: 'right', width: 90 }}>
                                        {
                                            tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                null :
                                                tableMeta.rowData[0] === 3 ?
                                                    <div style={{ flex: 1 }}>
                                                        <FormControlLabel
                                                            style={{ margin: 0 }}
                                                            value={value}
                                                            control={
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(tableMeta.rowData[6]).toFixed(1)}
                                                                />
                                                            }
                                                        />
                                                    </div> :
                                                    tableMeta.rowData[0] === 5 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValue(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 6 ?
                                                            <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValue(tableMeta, 0)).toFixed(1)}
                                                                />
                                                            </span> :
                                                            null
                                        }
                                    </div>
                                </div>
                                <div className="col-2">
                                    <div style={{ textAlign: 'right', width: 90 }}>
                                        {
                                            tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                            null :
                                            tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(handleValueFormula(tableMeta, 1)).toFixed(1)}
                                                    />
                                                </span> :
                                                tableMeta.rowData[0] === 3 ?
                                                    <div style={{ flex: 1 }}>
                                                        <FormControlLabel
                                                            style={{ margin: 0 }}
                                                            value={value}
                                                            control={
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(tableMeta.rowData[7]).toFixed(1)}
                                                                />
                                                            }
                                                        />
                                                    </div> :
                                                    null
                                        }
                                    </div>
                                </div>
                                <div className="col-3">
                                    <div style={{ textAlign: 'right', width: 90 }}>
                                        {
                                            tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                null :
                                                tableMeta.rowData[0] === 3 ?
                                                    <div style={{ flex: 1 }}>
                                                        <FormControlLabel
                                                            style={{ margin: 0 }}
                                                            value={value}
                                                            control={
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={false}
                                                                    value={Number(tableMeta.rowData[8]).toFixed(1)}
                                                                    onBlur={(event) => {
                                                                        handleChange(event.target.value, tableMeta)
                                                                    }}
                                                                />
                                                            }
                                                        />
                                                    </div> :
                                                    tableMeta.rowData[0] === 5 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValue(tableMeta, 2)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 6 ?
                                                            <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                                <NumberFormat
                                                                    thousandSeparator={true}
                                                                    style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
                                                                    type="text"
                                                                    placeholder=""
                                                                    disabled={true}
                                                                    value={Number(handleValue(tableMeta, 2)).toFixed(1)}
                                                                />
                                                            </span> :
                                                            null
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "Actual Previous Month",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#37b5e6', width: 96 }}>
                        <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div style={{ textAlign: 'right', width: 90 }}>
                            {
                                tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                null :
                                tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                    <span style={{ fontSize: 12, textAlign: 'right' }}>
                                        <NumberFormat
                                            thousandSeparator={true}
                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                            type="text"
                                            placeholder=""
                                            disabled={true}
                                            value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                        />
                                    </span> :
                                    tableMeta.rowData[0] === 3 ?
                                        <div style={{ flex: 1 }}>
                                            <FormControlLabel
                                                style={{ margin: 0 }}
                                                value={value}
                                                control={
                                                    <NumberFormat
                                                        thousandSeparator={true}
                                                        style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                        type="text"
                                                        placeholder=""
                                                        disabled={true}
                                                        value={Number(tableMeta.rowData[9]).toFixed(1)}
                                                    />
                                                }
                                            />
                                        </div> :
                                        null
                            }
                        </div>
                    )
                }
            }
        }, {
            name: `Variance`,
            options: {
                customHeadRender: (columnMeta) => (
                    <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
                        <div style={{ borderLeft: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{columnMeta.name}</div>
                        <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
                            <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
                                <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
                                    <span>{"Act vs Previous Month"}</span>
                                </div>
                                <div className="grid grid-2x">
                                    <div className="column-1" style={{ borderRight: '1px #fff solid', backgroundColor: '#37b5e6' }}>
                                        <span>{"Amount"}</span>
                                    </div>
                                    <div className="column-2" style={{ borderLeft: '1px #fff solid', backgroundColor: '#37b5e6' }}>
                                        <span>{"%"}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
                                <div style={{ borderBottom: '1px #fff solid' }}>
                                    <span>{"Act vs MB"}</span>
                                </div>
                                <div className="grid grid-2x">
                                    <div className="column-1" style={{ borderRight: '1px #fff solid' }}>
                                        <span>{"Amount"}</span>
                                    </div>
                                    <div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
                                        <span>{"%"}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#07a7d0' }}>
                                <div style={{ borderBottom: '1px #fff solid' }}>
                                    <span>{"Act vs RB"}</span>
                                </div>
                                <div className="grid grid-2x">
                                    <div className="column-1" style={{ borderRight: '1px #fff solid' }}>
                                        <span>{"Amount"}</span>
                                    </div>
                                    <div className="column-2" style={{ borderLeft: '1px #fff solid' }}>
                                        <span>{"%"}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </th>
                ),
                setCellProps: () => ({ style2 }),
                customBodyRender: (value, tableMeta, updateValue) => {
                    return (
                        <div>
                            <div className="grid grid-3x content-center">
                                <div className="col-1">
                                    <div className="grid grid-2x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[10]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[11]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-2">
                                    <div className="grid grid-2x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[12]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[13]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-3">
                                    <div className="grid grid-2x content-center">
                                        <div className="col-1">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[14]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                        <div className="col-2">
                                            <div style={{ textAlign: 'right', width: 90 }}>
                                                {
                                                    tableMeta.rowData[0] === 1 || tableMeta.rowData[0] === 4 ?
                                                    null :
                                                    tableMeta.rowData[0] === 5 || tableMeta.rowData[0] === 6 ?
                                                        <span style={{ fontSize: 12, textAlign: 'right' }}>
                                                            <NumberFormat
                                                                thousandSeparator={true}
                                                                style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                type="text"
                                                                placeholder=""
                                                                disabled={true}
                                                                value={Number(handleValueFormula(tableMeta, 0)).toFixed(1)}
                                                            />
                                                        </span> :
                                                        tableMeta.rowData[0] === 3 ?
                                                            <div style={{ flex: 1 }}>
                                                                <FormControlLabel
                                                                    style={{ margin: 0 }}
                                                                    value={value}
                                                                    control={
                                                                        <NumberFormat
                                                                            thousandSeparator={true}
                                                                            style={{ fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 90, backgroundColor: 'transparent' }}
                                                                            type="text"
                                                                            placeholder=""
                                                                            disabled={true}
                                                                            value={Number(tableMeta.rowData[15]).toFixed(1)}
                                                                        />
                                                                    }
                                                                />
                                                            </div> :
                                                            null
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }, {
            name: "",
            options: {
                display: false
            }
        }]

        const loadingComponent = (
            <div style={{ position: 'fixed', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
                <PropagateLoader
                    // css={override}
                    size={20}
                    color={"#274B80"}
                    loading={this.state.loading}
                />
            </div>
        );

        return (
            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
                <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                    <Typography style={{ fontSize: '16px', color: 'white' }}>Monthly Report</Typography>
                </div>
                <div style={{ flex: 1, padding: 20, width: '100%' }}>
                    <Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
                        <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
                            <Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Monthly Report - Fixed Assets Movement</Typography>
                        </div>
                        <div style={{ padding: 20 }}>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>{this.props.company.company_name}</Typography>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Period : {this.props.periode} (rev.{this.props.revision})</Typography>
                                    <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                                </div>
                                <div style={{ width: '50%' }}>
                                    <div style={{ justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
                                        <a data-tip={'Download Template'} data-for="template">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => this.downloadTemplate() }
                                            >
                                                <img src={Images.template} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
                                        <a data-tip={'Upload'} data-for="upload">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => this.setState({ visibleUpload: true })}
                                            >
                                                <img src={Images.upload} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
                                        <a data-tip={'Download'} data-for="download">
                                            <button
                                                style={{
                                                    backgroundColor: 'transparent',
                                                    cursor: 'pointer',
                                                    borderColor: 'transparent',
                                                    margin: 5
                                                }}
                                                onClick={() => 
                                                    this.setState({ loading: true }, () => {
                                                        setTimeout(() => {
                                                            this.downloadAllData()        
                                                        }, 100);
                                                    })}
                                            >
                                                <img src={Images.download} />
                                            </button>
                                        </a>
                                        <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
                                    </div>
                                </div>
                            </div>

                            <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
                                {this.state.loading && loadingComponent}
                                <MuiThemeProvider theme={getMuiTheme()}>
                                    <MUIDataTable
                                        data={dataTable2}
                                        columns={columns}
                                        options={options}
                                    />
                                </MuiThemeProvider>
                            </div>
                            {/* <Typography style={{ fontSize: '11px', color: '#4b4b4b', marginTop: 20 }}>Last Updated by : {this.state.updateBy}</Typography> */}
                        </div>
                        <div className="grid grid-2x" style={{ marginTop: 20 }}>
                            <div className="col-1">
                                <button
                                    type="button"
                                    onClick={() => this.setState({ loading: true }, () => {
                                        setTimeout(() => {
                                            this.props.onClickClose()
                                        }, 100);
                                    })}
                                    style={{
                                        backgroundColor: 'transparent',
                                        cursor: 'pointer',
                                        borderColor: 'transparent',
                                        outline: 'none'
                                    }}
                                >
                                    <div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                        <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
                                    </div>
                                </button>
                            </div>
                            {/* {this.props.isApprover === true || this.state.dataTable.length == 0 ? null :
                                (this.props.lastStatus === 'SUBMIT' || this.props.lastStatus === 'REVISION') && this.props.prevRevision === false && (this.props.status === 'revision' || this.props.status === 'not-yet' || this.props.status === "draft" || this.props.status === 'submitted') ? */}
                                <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
                                    <button
                                        className="button"
                                        type="button"
                                        style={{
                                            backgroundColor: 'transparent',
                                            cursor: 'pointer',
                                            borderColor: 'transparent',
                                            outline: 'none',
                                            marginRight: 20
                                        }}
                                        onClick={() => {
                                            this.setState({ loading: true }, () => {
                                                setTimeout(() => {
                                                    this.setState({ loading: false })
                                                    // this.handleValidate()
                                                }, 100);
                                            })
                                        }}
                                    >
                                        <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
                                            <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Calculate</Typography>
                                        </div>
                                    </button>
                                    <button
                                        className="button"
                                        type="button"
                                        style={{
                                            backgroundColor: 'transparent',
                                            cursor: this.state.editable !== true ? 'pointer' : 'default',
                                            borderColor: 'transparent',
                                            outline: 'none',
                                            marginRight: 20
                                        }}
                                        onClick={() =>
                                            this.state.editable === true ?
                                                null :
                                                this.state.handleTekTekTek == 1 ? null :
                                                    this.setState({ handleTekTekTek: 1 }, () => {
                                                        this.backToMasterBudget('draft')
                                                    })
                                        }
                                    >
                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save as Draft</Typography>
                                        </div>
                                    </button>
                                    <button
                                        type="button"
                                        disabled={this.state.buttonError}
                                        onClick={() =>
                                            this.state.buttonError ?
                                                this.setState({ alert: true, messageAlert: 'Data is not complete !', tipeAlert: 'warning' })
                                                :
                                                this.state.handleTekTekTek == 1 ? null :
                                                    this.setState({ handleTekTekTek: 1 }, () => {
                                                        this.backToMasterBudget('submitted')
                                                    })}
                                        style={{
                                            backgroundColor: 'transparent',
                                            cursor: this.state.buttonError === true ? 'default' : 'pointer',
                                            borderColor: 'transparent',
                                            outline: 'none',
                                        }}
                                    >
                                        <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
                                            <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Save & Complete</Typography>
                                        </div>
                                    </button>
                                </div> 
                                {/* : null 
                                } */}
                        </div>
                    </Paper>
                </div>
                {this.state.visibleUpload && (
                    <div className="test app-popup-show">
                        <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                            <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                                <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                                    <div className="popup-title">
                                        <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
                                    </div>
                                </div>
                                <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                                    <button
                                        type="button"
                                        className="btn btn-circle btn-white"
                                        onClick={() => this.setState({ visibleUpload: false })}
                                    >
                                        <img src={Images.close} />
                                    </button>
                                </div>
                            </div>
                            <UploadFile
                                type={this.state.uploadStatus}
                                percentage={this.state.percentage}
                                result={this.state.result}
                                acceptedFiles={["xlsx"]}
                                onHandle={(dt) => {
                                    this.fileHandler(dt)
                                    this.setState({ uploadStatus: 'idle', percentage: '0' })
                                }}
                                onUpload={() => {
                                    String(this.state.judul).includes("MONTHLY REPORT - FIXED ASSETS MOVEMENT") ?
                                        this.checkUpload() :
                                        this.setState({ alert: true, messageAlert: "Invalid Template", tipeAlert: 'warning' })
                                }}
                            />
                        </div>
                    </div>
                )}
            </div>
        )
    }
}