render() {
    if (this.state.redirect) {
        return <Redirect to={this.state.redirect}/>
    }

    return (
        <Container>
            <h1 className="h2">Driver's Details</h1>
            <Form onSubmit={this.handleSubmit}>
                <Row className="mb-3">
                    <Form.Group as={Col}>
                        <Form.Label htmlFor="first_name">First Name</Form.Label>
                        <Form.Control type="text" name="first_name" 
                            onChange={this.handleChange} required placeholder="Enter First Name" />
                    </Form.Group>

                    <Form.Group as={Col}>
                        <Form.Label htmlFor="last_name">Last Name</Form.Label>
                        <Form.Control type="text" name="last_name"
                        onChange={this.handleChange} required placeholder="Enter Last Name" />
                    </Form.Group>
                </Row>

                <Row>
                    <Form.Group as={Col} className="mb-3" controlId="formGridPhone">
                        <Form.Label>Phone Number</Form.Label>
                        
                        <Form.Control  type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                        onChange={this.handlePhoneChange} value={this.state.phone}
                        required placeholder="402-345-6789" name="phone" maxlength="12"/>
                    </Form.Group>

                    <Form.Group as={Col} className="mb-3" controlId="formGridStatus">
                        <Form.Label>Status</Form.Label>
                        <Form.Select onChange={this.handleChange} name="employee_status">
                            <option>Employee</option>
                            <option>Volunteer</option>
                        </Form.Select>
                    </Form.Group>

                    <Form.Group as={Col} controlId="formGridCapacity">
                        <Form.Label>Capacity</Form.Label>
                        <Form.Control type="number" placeholder="Vehicle Capacity"
                        required onChange={this.handleChange} name="capacity" min="0"/>
                    </Form.Group>
                </Row>

                <Form.Group className="mb-3">
                    <Row><Form.Label>Availabilty</Form.Label></Row>
                        { this.days.map( d => 
                            <Form.Check type="checkbox" name="availability" value="true" 
                            inline label={d} id={d} 
                            onChange={this.handleAvailabilityChange} />
                        )}
                </Form.Group>

                <Form.Group className="mb-3">
                    <Row><Form.Label>Languages</Form.Label></Row>
                        { this.languages.map( l => 
                            <Form.Check type="checkbox" inline label={l} id={l}
                                name="languages" onChange={this.handleLanguageChange} 
                                checked={this.checkLanguage(l)} />
                        )}
                </Form.Group>

                <Button variant="primary" className="mr-4" type="submit">Submit</Button>
                <Link to="/data">
                    <Button variant="secondary">Cancel</Button>
                </Link>
            </Form>
        </Container>
        );
    }
/**
 * The render method used to display the component. 
 * @returns The HTML to be rendered.
 */
The render method used to display the component.
@returns The HTML to be rendered.
The render method used to display the component . @returns The HTML to be rendered .
render() {
    if (this.state.redirect) {
        return <Redirect to={this.state.redirect}/>
    }
    return (
        <Container>
            <h1 className="h2">Driver's Details</h1>
            <Form onSubmit={this.handleSubmit}>
                <Row className="mb-3">
                    <Form.Group as={Col}>
                        <Form.Label htmlFor="first_name">First Name</Form.Label>
                        <Form.Control type="text" name="first_name" 
                            onChange={this.handleChange} required placeholder="Enter First Name" />
                    </Form.Group>
                    <Form.Group as={Col}>
                        <Form.Label htmlFor="last_name">Last Name</Form.Label>
                        <Form.Control type="text" name="last_name"
                        onChange={this.handleChange} required placeholder="Enter Last Name" />
                    </Form.Group>
                </Row>
                <Row>
                    <Form.Group as={Col} className="mb-3" controlId="formGridPhone">
                        <Form.Label>Phone Number</Form.Label>
                        <Form.Control  type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                        onChange={this.handlePhoneChange} value={this.state.phone}
                        required placeholder="402-345-6789" name="phone" maxlength="12"/>
                    </Form.Group>
                    <Form.Group as={Col} className="mb-3" controlId="formGridStatus">
                        <Form.Label>Status</Form.Label>
                        <Form.Select onChange={this.handleChange} name="employee_status">
                            <option>Employee</option>
                            <option>Volunteer</option>
                        </Form.Select>
                    </Form.Group>
                    <Form.Group as={Col} controlId="formGridCapacity">
                        <Form.Label>Capacity</Form.Label>
                        <Form.Control type="number" placeholder="Vehicle Capacity"
                        required onChange={this.handleChange} name="capacity" min="0"/>
                    </Form.Group>
                </Row>
                <Form.Group className="mb-3">
                    <Row><Form.Label>Availabilty</Form.Label></Row>
                        { this.days.map( d => 
                            <Form.Check type="checkbox" name="availability" value="true" 
                            inline label={d} id={d} 
                            onChange={this.handleAvailabilityChange} />
                        )}
                </Form.Group>
                <Form.Group className="mb-3">
                    <Row><Form.Label>Languages</Form.Label></Row>
                        { this.languages.map( l => 
                            <Form.Check type="checkbox" inline label={l} id={l}
                                name="languages" onChange={this.handleLanguageChange} 
                                checked={this.checkLanguage(l)} />
                        )}
                </Form.Group>
                <Button variant="primary" className="mr-4" type="submit">Submit</Button>
                <Link to="/data">
                    <Button variant="secondary">Cancel</Button>
                </Link>
            </Form>
        </Container>
        );
    }
render ( ) { if ( this . state . redirect ) { return < Redirect to = { this . state . redirect } / > } return ( < Container > < h1 className = "h2" > Driver's Details < / h1 > < Form onSubmit = { this . handleSubmit } > < Row className = "mb-3" > < Form . Group as = { Col } > < Form . Label htmlFor = "first_name" > First Name < / Form . Label > < Form . Control type = "text" name = "first_name" onChange = { this . handleChange } required placeholder = "Enter First Name" / > < / Form . Group > < Form . Group as = { Col } > < Form . Label htmlFor = "last_name" > Last Name < / Form . Label > < Form . Control type = "text" name = "last_name" onChange = { this . handleChange } required placeholder = "Enter Last Name" / > < / Form . Group > < / Row > < Row > < Form . Group as = { Col } className = "mb-3" controlId = "formGridPhone" > < Form . Label > Phone Number < / Form . Label > < Form . Control type = "tel" pattern = "[0-9]{3}-[0-9]{3}-[0-9]{4}" onChange = { this . handlePhoneChange } value = { this . state . phone } required placeholder = "402-345-6789" name = "phone" maxlength = "12" / > < / Form . Group > < Form . Group as = { Col } className = "mb-3" controlId = "formGridStatus" > < Form . Label > Status < / Form . Label > < Form . Select onChange = { this . handleChange } name = "employee_status" > < option > Employee < / option > < option > Volunteer < / option > < / Form . Select > < / Form . Group > < Form . Group as = { Col } controlId = "formGridCapacity" > < Form . Label > Capacity < / Form . Label > < Form . Control type = "number" placeholder = "Vehicle Capacity" required onChange = { this . handleChange } name = "capacity" min = "0" / > < / Form . Group > < / Row > < Form . Group className = "mb-3" > < Row > < Form . Label > Availabilty < / Form . Label > < / Row > { this . days . map ( d => < Form . Check type = "checkbox" name = "availability" value = "true" inline label = { d } id = { d } onChange = { this . handleAvailabilityChange } / > ) } < / Form . Group > < Form . Group className = "mb-3" > < Row > < Form . Label > Languages < / Form . Label > < / Row > { this . languages . map ( l => < Form . Check type = "checkbox" inline label = { l } id = { l } name = "languages" onChange = { this . handleLanguageChange } checked = { this . checkLanguage ( l ) } / > ) } < / Form . Group > < Button variant = "primary" className = "mr-4" type = "submit" > Submit < / Button > < Link to = "/data" > < Button variant = "secondary" > Cancel < / Button > < / Link > < / Form > < / Container > ) ; }
The render method used to display the component.
The render method used to display the component .