<style>
	.tooltip {
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black;
	}

	.tooltip .tooltiptext {
		visibility: hidden;
		width: 120px;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;

		/* Position the tooltip */
		position: absolute;
		z-index: 1;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
	}
</style>


<body class="hold-transition layout-top-nav">
    <div class="wrapper">

        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
            <div class="container">
                <a href="#" class="navbar-brand">
                    <img src="<?php echo base_url("assets/dist/img/w_logo.png") ?>" alt="WorkAble Logo" class="brand-image img-circle elevation-3"
                         style="opacity: .8">
                    <span class="brand-text font-weight-light">WORKable</span>
                </a>

                <!-- Right navbar links -->
                <ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
                    <li class="nav-item">
                        <a href="<?php echo base_url('welcome/dataCollectionform'); ?>" class="nav-link">Reset</a>
                    </li>
                    <li class="nav-item">
                        <a href="<?php echo base_url(); ?>" class="nav-link">Login</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- /.navbar -->

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header" style="
                 padding-bottom: 0px;
                 padding-top: 4px;
                 ">
                <div class="container">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h3 class="m-0 text-dark">WORKable Employee Form</h3>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->

            <!-- Main content -->
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12" id="user_dataForm">
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Name <span style="color: red">*</span></label>
                                                <input type="text" onclick="$('#name').removeClass('has-error')" value="" class="form-control" name="empName" id="empName" placeholder="Enter Your Name">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Designation/Title													<span style="color: red">*</span></label>
                                                <input type="text" onclick="$('#designation').removeClass('has-error')" value="" class="form-control" name="designation" id="designation" placeholder="Enter Your Designation">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Emp Id <span style="color: red">*</span></label>
                                                <input type="text" onclick="$('#empID').removeClass('has-error')" value="" class="form-control" name="empID" id="empID" placeholder="Enter Employee Id">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Department <span style="color: red">*</span></label>
                                                <select onchange="$('#department').removeClass('has-error')"  class="form-control select2bs4" name="department" id="department">
                                                    <option value=""  >Select Department</option>
                                                    <?php foreach ($department as $value) { ?>
                                                        <option  value="<?= $value->department ?>"><?= $value->department ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Supervisor <span style="color: red">*</span></label>
                                                <select onchange="$('#supervisor').removeClass('has-error')" class="form-control select2bs4" name="supervisor" id="supervisor">
                                                    <option value=""  >Select Supervisor</option>
                                                    <?php foreach ($supList as $value) { ?>
                                                        <option  value="<?= $value->id; ?>"><?= $value->name; ?> - (<?=$value->username;?>)</option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Duration of employment <span style="color: red">*</span></label>
                                                <select onchange="$('#duration').removeClass('has-error')" class="form-control select2bs4" name="duration" id="duration">
                                                    <option value=""  >Select Duration</option>
                                                    <?php foreach ($durationList as $value) { ?>
                                                        <option  value="<?= $value->id; ?>"><?= $value->text; ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <input type="button" class="btn btn-success float-right" onclick="validateUserData()" value="NEXT"/>
                                        </div>
                                    </div>
<!--                                    <div class="row">
                                        <div class="col-md-12" id="errorDiv" style="color: red">

                                        </div>
                                    </div>-->
                                </div>
                            </div><!-- /.card -->
                        </div>
                        <div class="col-lg-12" style="display: none" id="activity_form" >
                            <div class="card card-primary card-outline">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <p class="card-text">What are the top 6-8 most time-consuming activities in your job? Consider the activities you work on in an average day / week / month</p>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="">Enter Activity in Words <span style="color: red">*</span></label>
                                                <input type="text" maxlength="35"  class="form-control" id="activity" placeholder="Ex : Getting Keys and Open the Doors">
                                            </div>
                                        </div>
                                        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                                            <div class="form-group">
                                                <label for="" data-toggle="tooltip" data-html="true" title="Whether you do this activity in a daily basis / weekly / monthly">How frequently ?<span style="color: red">*</span></label>
                                                <select id="frequent" class="form-control">
                                                    <option value="Daily">Daily</option>
                                                    <option value="Weekly">Weekly</option>
                                                    <option value="Monthly">Monthly</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                                            <div class="form-group">
                                                <label for="" data-toggle="tooltip" data-html="true" title="How many times during a day / week / month you do this activity">How many times ? <span style="color: red">*</span></label>
                                                <input type="number" id="times" style="text-align: right" onchange="validateIntegers(this,1)" min="1" step="1" value="1" class=form-control>
                                            </div>
                                        </div>

                                        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-6 col-6">
                                            <div class="form-group">
                                                <label for="">Duration (HH:MM)<span style="color: red">*</span></label>
												<input type="text" style="text-align: right" class="form-control" onchange="validateTime(this)" id="hour" placeholder="HH:MM">
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6">
                                            <div class="form-group">
                                                <label for=""  data-toggle="tooltip" data-html="true" title="0 - Very Easy / 5 - Very Hard">Please tell us how easy or hard this activity is?<span style="color: red">*</span></label>
                                                <select id="satisfaction" class="form-control">
                                                    <option value="">Please Select</option>
                                                    <option value="0">0</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                </select>
                                            </div>
                                        </div>
										</div>
									<hr>
										<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label for="" data-toggle="tooltip" data-html="true" title="You could enter numbers and text.
Example :- 8 units per hour / 5 successful sales calls per day
">What is the output expected for this activity?</label>
												<input type="text"  onchange="onChnageTarget()"  class="form-control" id="targetText" placeholder="N/A" value="">
											</div>
										</div>
										<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12" style="display: none" id="targetAgreeDiv">
											<div class="form-group">
												<label for="" data-toggle="tooltip" data-html="true" title="0 - Totally Irrational  / 5 - Extremely Reasonable">Do you think this target output is reasonable</label>
												<select id="targetSatisfaction" class="form-control">
													<option value="">Please Select</option>
													<option value="0">0</option>
													<option value="1">1</option>
													<option value="2">2</option>
													<option value="3">3</option>
													<option value="4">4</option>
													<option value="5">5</option>
												</select>
											</div>
										</div>
										<div class="col-md-5">
											<div class="form-group">
												<label for="">Who looks at the actual results other than yoursel?</label>
												<input type="text" onchange="onChangeTartgetMonitor()" class="form-control" id="targetMonitor" placeholder="N/A" value="">
											</div>
										</div>

										<div class="col-xl-2 col-lg-2 col-md-2 col-sm-7 col-7" style="display: none"  id="monitorFrequentDiv">
											<div class="form-group">
												<label for="">How often ?</label>
												<select id="monitorFrequent" class="form-control">
													<option value="">N/A</option>
													<option value="Daily">Daily</option>
													<option value="Weekly">Weekly</option>
													<option value="Monthly">Monthly</option>
												</select>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label for="">Do you have any suggestions to improve your performance in this activity?</label>
												<textarea placeholder="Suggestions" id="suggestion" type="text" class="form-control" ></textarea>
											</div>
										</div>

                                        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-5 col-5">
                                            <br>
                                            <a class="btn btn-app" onclick="addToTable()">
                                                <i class="fas fa-plus"></i> Add
                                            </a>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div  class="col-md-12" style="overflow-x: auto">
                                            <table style="width: 100%" id="table" class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Activities <span id="count">(0/8)</span></th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbody_div">

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <input type="button" class="btn btn-primary float-right" id="submitBtn" onclick="submitForm()" value="Submit"/>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.card -->
                        </div>

                    </div>
                    <!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content -->
        </div>



        <script src="<?php echo base_url("assets/customJs/dataCollection.js") ?>"></script>

