var BackEndHome = React.createClass({
    getInitialState: function () {
        return {
            loggedin: 0,
            userrole: 0
        };
    },

    loadAllowLogin: function () {
        $.ajax({
            url: '/getuserrole/',
            dataType: 'json',
            cache: false,
            success: function (data) {
                this.setState({
                    loggedin: data.loggedin,
                    userrole: data.role
                });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(status, err.toString());
            }.bind(this)
        });
    },

    componentDidMount: function () {
        this.loadAllowLogin();
    },

    render: function () {
        if (this.state.loggedin == 0) {
            return (
                <div>
                    <h1>No Access</h1>
                    <p>Please log in first.</p>
                    <p><a href="index.html">Go to Back End Login</a></p>
                </div>
            );
        }

        if (this.state.userrole != 1 && this.state.userrole != 2) {
            return (
                <div>
                    <h1>No Access</h1>
                    <p>You do not have permission to use the back end.</p>
                </div>
            );
        }

        return (
            <div>
                <img
                    src="../images/jjad.png"
                    alt="JJAD Logo"
                    style={{ width: "250px", height: "auto", display: "block", margin: "0 auto" }}
                />

                <h1>Training Center Back End</h1>
                <p>Welcome to the administrative system.</p>
                <p>Use the navigation above to manage:</p>
                <ul>
                    <li>Users</li>
                    <li>Customers</li>
                    <li>Menu Items</li>
                    <li>Inventory</li>
                    <li>Orders</li>
                    <li>Order Details</li>
                    <li>Reservations</li>
                    <li>Open Orders</li>
                    <li>Past Orders</li>
                    <li>Inventory Report</li>
                </ul>
            </div>
        );
    }
});

ReactDOM.render(
    <BackEndHome />,
    document.getElementById('content')
);