<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="New Judge Form">
    <meta name="author" content="Team Summer 2015">
    <title>Mobile Judge: Welcome Prospertive Judge</title>
    <!-- Bootstrap core CSS -->
    <link href="/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/thirdparty/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="/css/custom.css" rel="stylesheet">
    <script src="/scripts/console-polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://fb.me/react-with-addons-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="/scripts/bootstrap.js"></script>
    <script src="/modelsjs/users.js"></script>
    <script src="/modelsjs/grades.js"></script>
    <script src="/modelsjs/judgestudentconflicts.js"></script>
    <noscript>Mobile Judge requires javascript enabled for each one of its functions, please use a browser capable of executing javascript.</noscript>
</head>

<body>


<script type="text/jsx">

    var JudgeTitle = React.createClass({
        getInitialState: function(){
            return {title: ""}
        },

        render: function () {
            return (
                <h1>{this.props.title}</h1>
            )
        }
    })

    //Header used in all of the pages
    var Header = React.createClass({
        render: function () {
            console.log("handleClick HEADER", this);
            return (
                <header>
                    <nav className="navbar navbar-default navbar-fixed-top custom-navbar no-border-radius"
                         role="navigation">
                        <div className="container">
                            <div className="navbar-header">
                                <button type="button" className="navbar-toggle collapsed navbar-header-btn"
                                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                    <span className="sr-only">Toggle navigation</span>
                                    <span className="icon-bar custom-bar"></span>
                                    <span className="icon-bar custom-bar"></span>
                                    <span className="icon-bar custom-bar"></span>
                                </button>
                                <a href="#" className="navbar-btn" role="button">
                                    <i className="back-icon glyphicon glyphicon-circle-arrow-left"></i>
                                    <span className="hidden-xs">Back</span>
                                </a>
                            </div>

                            <div className="navbar-brand-center">
                                <span className="bar-title">Mobile Judge</span>
                            </div>
                        </div>
                    </nav>
                </header>
            );
        }
    });

    var Alert = React.createClass({
        getInitialState: function () {
            return ({
                show: false,
                type: "info",
                messages: []
            })
        },
        render: function (){
            if(this.props.show != true)
            {
                return (false);
            }
            return(
                <div className={'alert alert-' + this.props.type}>
                    {
                        this.props.messages.map(function(m){
                            return (<p>{m}</p>)
                        })
                    }
                </div>
            )
        }
    })
    
    var JudgeForm = React.createClass({
        getInitialState: function () {
            return ({
                judge: {
                    Email: '',
                    FirstName: '',
                    LastName: '',
                },
                formErrors: []
            })

        },
        componentWillMount: function () {
            console.log("COMPONENT WILL MOUNT");
            $(UserEntity).on('JudgesHasChanged', function () {
                this.setState({judge: UserEntity.getJudge()});
            }.bind(this))
        },

        handleClick: function (event) {
            var errors= [];
            var options = {};
            options.title = this.refs.Title.getDOMNode().value;
            options.affiliation = this.refs.Affiliation.getDOMNode().value;
            options.fname = this.refs.FName.getDOMNode().value;
            options.lname = this.refs.LName.getDOMNode().value;

            //In case fname and lname are left untouched 
            if(options.fname.length == 0)
                options.fname = this.refs.FName.getDOMNode().placeholder;
            if(options.lname.length == 0)
                options.lname = this.refs.LName.getDOMNode().placeholder;

            password1 = this.refs.Password1.getDOMNode().value;
            password2 = this.refs.Password2.getDOMNode().value;

            if(options.fname.length == 0)
            {
                errors.push("First Name can not be left empty");
            }
            if(options.lname.length == 0)
            {
                errors.push("Last Name can not be left empty");
            }

            if(password1.length < 1)
            {
                errors.push("Password can not be empty");
            }

            if(password2 != password1)
            {
                errors.push("Passwords don't match, please try again");
            }

            this.setState({formErrors: errors})
            if(errors.length == 0)
            {
                options.pass = this.refs.Password1.getDOMNode().value;
                UserEntity.updateJudge(options, this.props.judgeData.id);
                this.props.onViewChange("ConflictTable");
            }
        },

        render: function () {
            console.log("JUDGEDATA", this.props.judgeData);
            return (
                <div className='row'>
                    <div className="page-header">
                        <h1>Judge Account Set Up Process</h1>
                    </div>
                    <Alert show={this.state.formErrors.length > 0} type="danger" messages={this.state.formErrors}/>
                    <div className='form-group'>
                        <input type='text' className='form-control' placeholder={this.props.judgeData.email} value={this.props.judgeData.email} readOnly/>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>Title</span>
                            <input ref="Title" type='text' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id='firstName'>First Name</span>
                            <input ref="FName" type='text' className='form-control' placeholder={this.props.judgeData.fname} aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>Last Name</span>
                            <input ref="LName" type='text' className='form-control' placeholder={this.props.judgeData.lname} aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>Affiliation</span>
                            <input ref="Affiliation" type='text' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <Alert show={true} type="info" messages={["* Fields can not be left blank."]}/>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>* Password</span>
                            <input ref="Password1" type='password' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>* Retry Password</span>
                            <input ref="Password2" type='password' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <button type='button' id='loginme' className='btn btn-lightblue btn-block' onClick={this.handleClick}>
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            )
        }
    })

    var JudgeConfirmation = React.createClass({
        handleClick: function (event) {
                //move to main App
        },

        render: function () {
            console.log("JUDGEDATA", this.props.judgeData);
            return (
                <div className='row'>
                    <div className="page-header">
                        <h1>Congratulations, You Account Has been Set up.</h1>
                    </div>
                    <div className="alert alert-info">
                        You can now log login at
                        <a href="<?='http://' . $_SERVER['SERVER_NAME']?>"> Mobile Judge Summer 2015</a> 
                    </div>
                </div>

            )
        }
    })


    var Footer = React.createClass({
        render: function () {
            return (
                <nav className='navbar navbar-default navbar-fixed-bottom'>
                    <div className='container-fluid no-padding text-center' style={{padding:"15px"}}>
                        <b>Mobile Judge: Summer 2015</b>
                    </div>
                </nav>
            )
        }
    })

    var Content = React.createClass({
        render: function () {
            {console.log(this,"You got here Reder Content")}
            return this.props.view
        }
    });

    var App = React.createClass({
        getInitialState: function () {
            return ({
                currView: "JudgeForm",
                judge: {
                    Email: '',
                    FirstName: '',
                    LastName: '',
                    termid: '',
                    judgeid: '',
                    stateid: ''
                }
            })

        },
        changeView: function (view) {
            this.setState({currView: view});
        },

        componentWillMount: function () {
            console.log("COMPONENT WILL MOUNT APP");
            $(UserEntity).on('JudgesHasChanged', function () {
                this.setState({judge: UserEntity.getJudge()});
                temp = UserEntity.getJudge();
                if(temp.statesid != 4)
                {
                    this.changeView('JudgeConfirmation');
                }
            }.bind(this))
        },

        render: function() {
            {console.log("You got here Reder APP")};
            var result = '';
            if(this.state.currView == "JudgeForm")
                result = <JudgeForm onViewChange={this.changeView} judgeData={judge} />;
            if(this.state.currView == "ConflictTable")
                result = <ConflictTable onViewChange={this.changeView} judgeData={judge}/>;
            if(this.state.currView == "JudgeConfirmation")
                result = <JudgeConfirmation onViewChange={this.changeView} judgeData={judge}/>;
            return (
                <div className="container">
                    <Header onViewChange={this.changeView}/>
                    <Content judgeData={judge} view={result} onViewChange={this.changeView} />
                    <Footer />
                </div>
            )
        }
    })

    var RowStudent = React.createClass({
        handleOnClick: function(e) {
            e.preventDefault();
            var nextState = this.state.curState == 'selected' ? 'unselected' : 'selected';
            var conflict = {};
            conflict.studentid = this.props.data.id;
            conflict.judgeid = this.props.judgeid;
            conflict.termid = this.props.termid;
            this.setState({curState: nextState});
            console.log('student', conflict);
            this.props.handleRowClick(conflict);
            console.log(this);
            console.log('trying to complete item with an id of ' + this.props.id);
            console.log(this);
        },

        getInitialState: function() {
            return {curState: this.props.state};
        },

        render: function(){
            var state = this.state.curState == 'selected' ? 'td-primary info' : 'td-primary';
            var data = this.props.data;
            var key = data.fname.substring(0,1) + this.props.keyid;
            return(
                <tr id={key} className="td-primary" onClick={this.handleOnClick} state={this.state.curState}>
                    <td className={state}>{data.fname} {data.lname}<br/>
                        <small>{data.name}</small>
                    </td>
                </tr>
            );
        }
    });

    var ConflictTable = React.createClass({
        handleOnClick: function(e) {
            console.log("Save conflicts now!");
            this.state.selectStudents.map(ConflictEntity.addConflict);
            GradeEntity.assignStudents(this.props.judgeData.id);
            this.props.onViewChange("JudgeConfirmation");

        },

        handleStudentClick: function(student) {
            var toRemove = -1;
            for (var j = 0; j < this.state.selectStudents.length; j++)
            {
                if(student.studentid ===  this.state.selectStudents[j].studentid)
                {
                    toRemove = j;
                }
            }

            if(toRemove != -1) 
            {
                this.state.selectStudents.splice(toRemove, 1);
            }
            else
            {
                this.state.selectStudents.push(student);
            }
        },

        getInitialState: function() {
            UserEntity.loadStudents("current");
            return (
                {
                    students:'',
                    selectStudents: []
                }
            );
        },

        componentDidMount: function(){
            $(UserEntity).on('current', function(){
                this.setState({students: UserEntity.getStudents()})
            }.bind(this)
        )},

        render: function(){

            var students = this.state.students;
            var i = 0;
            var self = this;

            return(
            <div className="container conflictsView judgeView">
                <ABC/>
                <div>
                  <h3>
                    <span className="visible-md-inline visible-lg-inline">Click </span> 
                    <span className="visible-xs-inline visible-sm-inline">Tap </span> 
                    on students who may cause a conflict of interest
                  </h3>
                </div>
                <table className="table table-bordered conflicts pointer">
                    <tbody>
                    {console.log("TABLE ", self)}
                    {$.map(students, function(student)
                        {
                            return [<RowStudent handleRowClick={self.handleStudentClick} key={i++} keyid={i} data={student} judgeid={self.props.judgeData.id} termid={self.props.judgeData.termid} />];
                        }
                    )}
                        
                    </tbody>
                </table>
                <div className="form-group">
                    <div className="input-group full-width">
                        <button type="button" id="loginme" onClick={this.handleOnClick} className="btn btn-lightblue btn-block">Save Conflicts</button>
                    </div>
                </div>
            </div>
            );
        }
    });

    var ABC = React.createClass({
        handleClick: function (j, e) {
            e.preventDefault();
            var i = 0;
            while ($("#" + j + i).length == 0) {
                i++;
                if (i == 1000) {
                    //alert("nothing found");
                    break;
                }
            }
            $('html, body').animate({
                scrollTop: ($("#" + j + i).offset().top - 100)
            }, 1000);
        },
        render: function () {
            return (
                <div id="abc">
                    <span id="a" onClick={this.handleClick.bind(null, "A")}>A </span>
                    <span id="b" onClick={this.handleClick.bind(null, "B")}>B </span>
                    <span id="c" onClick={this.handleClick.bind(null, "C")}>C </span>
                    <span id="d" onClick={this.handleClick.bind(null, "D")}>D </span>
                    <span id="e" onClick={this.handleClick.bind(null, "E")}>E </span>
                    <span id="f" onClick={this.handleClick.bind(null, "F")}>F </span>
                    <span id="g" onClick={this.handleClick.bind(null, "G")}>G </span>
                    <span id="h" onClick={this.handleClick.bind(null, "H")}>H </span>
                    <span id="i" onClick={this.handleClick.bind(null, "I")}>I </span>
                    <span id="j" onClick={this.handleClick.bind(null, "J")}>J </span>
                    <span id="k" onClick={this.handleClick.bind(null, "K")}>K </span>
                    <span id="l" onClick={this.handleClick.bind(null, "L")}>L </span>
                    <span id="m" onClick={this.handleClick.bind(null, "M")}>M </span>
                    <span id="n" onClick={this.handleClick.bind(null, "N")}>N </span>
                    <span id="o" onClick={this.handleClick.bind(null, "O")}>O </span>
                    <span id="p" onClick={this.handleClick.bind(null, "P")}>P </span>
                    <span id="q" onClick={this.handleClick.bind(null, "Q")}>Q </span>
                    <span id="r" onClick={this.handleClick.bind(null, "R")}>R </span>
                    <span id="s" onClick={this.handleClick.bind(null, "S")}>S </span>
                    <span id="t" onClick={this.handleClick.bind(null, "T")}>T </span>
                    <span id="u" onClick={this.handleClick.bind(null, "U")}>U </span>
                    <span id="v" onClick={this.handleClick.bind(null, "V")}>V </span>
                    <span id="w" onClick={this.handleClick.bind(null, "W")}>W </span>
                    <span id="x" onClick={this.handleClick.bind(null, "X")}>X </span>
                    <span id="y" onClick={this.handleClick.bind(null, "Y")}>Y </span>
                    <span id="z" onClick={this.handleClick.bind(null, "Z")}>Z </span>
                </div>
            );
        }
    });


    React.render(<App />, document.body);
    UserEntity.loadJudgeInvite(<?php echo $judgeid; ?>);
</script>

<!-- JavaScript -->
</body>
</html>

