<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>WorkAble</title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Font Awesome -->
        <link rel="stylesheet" href="<?php echo base_url("assets/plugins/fontawesome-free/css/all.min.css") ?>">
        <!-- Ionicons -->
        <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <!-- overlayScrollbars -->
        <link rel="stylesheet" href="<?php echo base_url("assets/dist/css/adminlte.min.css") ?>">
        <!-- Google Font: Source Sans Pro -->
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-164670420-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());

            gtag('config', 'UA-164670420-1');
        </script>
    </head>
    <body class="hold-transition register-page">
        <div class="register-box">
            <div class="register-logo">
                <a href="<?php echo base_url("welcome") ?>"><b>Workable</b>Able</a>
            </div>

            <div class="card">
                <div class="card-body register-card-body">
                    <p class="login-box-msg">Register a new Supervisor</p>

                    <form onsubmit="return validateform()" action="<?php echo base_url("Welcome/saveSupervisor") ?>" method="post" >
                        <div class="input-group mb-3">
                            <input type="text" name="name" onclick="$('#name').removeClass('has-error')" id="name" class="form-control" placeholder="Full name" autocomplete="off">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-user"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="text"  name="designation" onclick="$('#designation').removeClass('has-error')" id="designation" class="form-control" placeholder="Designation" autocomplete="off">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-id-card"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="text"  name="userName" onclick="$('#userName').removeClass('has-error')" id="userName" class="form-control" placeholder="Employee Id" autocomplete="off">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-id-card"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="text"  name="departmet" id="departmet" onclick="$('#departmet').removeClass('has-error')" class="form-control" placeholder="Departmet" autocomplete="off">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-building"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="password"  name="password" id="password" onclick="$('#password').removeClass('has-error')" class="form-control" placeholder="Password" autocomplete="off">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                        </div> 
                        <div class="input-group mb-3">
                            <select class="form-control" onchange="$('#duration').removeClass('has-error')" id="duration" name="duration">
                                <option value="" selected="" disabled="">Duration of employment </option>
                                <?php foreach ($duration as $value) { ?>
                                    <option value="<?= $value->id; ?>"><?= $value->text; ?></option> 
                                <?php } ?>
                            </select>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="far fa-calendar-alt"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <?php
                            if ($this->session->flashdata('error')) {
                                echo $this->session->flashdata('error');
                                unset($_SESSION['error']);
                            }
                            ?>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="icheck-primary">
                                </div>
                            </div>
                            <!-- /.col -->
                            <div class="col-6">
                                <button type="submit" class="btn btn-primary btn-block">Register</button>
                            </div>

                            <!-- /.col -->
                        </div>
                    </form>




                    <a href="<?php echo base_url("welcome") ?>" class="text-center">I already have a membership</a>
                </div>
                <!-- /.form-box -->
            </div><!-- /.card -->
        </div>
        <!-- /.register-box -->

        <!-- jQuery -->
        <script src="<?php echo base_url("assets/plugins/jquery/jquery.min.js") ?>"></script>

        <script src="<?php echo base_url("assets/plugins/bootstrap/js/bootstrap.bundle.min.js") ?>"></script>
        <!-- AdminLTE App -->
        
        <script src="<?php echo base_url("assets/dist/js/adminlte.min.js") ?>"></script>
    </body>
</html>
<style>
    .has-error{
        border-color : #dd4b39
    }
</style>
<script type="text/javascript">
                                function validateform() {
                                    var st = true;
                                    var userName = $("#userName").val();
                                    var designation = $("#designation").val()
                                    var name = $("#name").val()
                                    var departmet = $("#departmet").val()
                                    var password = $("#password").val()
                                    var duration = $("#duration").val()
                                    if (name === "" || name === null) {
                                        $("#name").addClass("has-error");
                                        st = false;
                                    }
                                    if (userName === "" || userName === null) {
                                        $("#userName").addClass("has-error");
                                        st = false;
                                    }
                                    if (departmet === "" || departmet === null) {
                                        $("#departmet").addClass("has-error");
                                        st = false;
                                    }

                                    if (password === "" || password === null) {
                                        $("#password").addClass("has-error");
                                        st = false;
                                    }
                                    if (duration === "" || duration === null) {
                                        $("#duration").addClass("has-error");
                                        st = false;
                                    }
                                     if (designation === "" || designation === null) {
                                        $("#designation").addClass("has-error");
                                        st = false;
                                    }
                                    return st;
                                }
</script>