File: /var/www/html/pmw24/app/application/views/admin/job/detail_25_5_2018.php
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css"/>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
<script src="<?php echo base_url()?>/public/validation/js/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style>
.wrapperNavTab {
position:relative;
margin:0 auto;
/*overflow:hidden;*/
overflow-x:auto;
padding:0px;
height:50px;
margin-bottom:10px;
}
.list {
position:absolute;
left:0px;
top:0px;
min-width:1050px;
margin-left:12px;
margin-top:0px;
}
.list li{
display:table-cell;
position:relative;
text-align:center;
cursor:grab;
cursor:-webkit-grab;
color:#efefef;
vertical-align:middle;
}
.scroller {
text-align:center;
cursor:pointer;
display:none;
padding:7px;
padding-top:11px;
white-space:no-wrap;
vertical-align:middle;
background-color:#fff;
}
.scroller-right{
float:right;
}
.scroller-left {
float:left;
}
.widthFull{ width:100% !important;}
</style>
<script>
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.list li').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapperNavTab').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
};
var getLeftPosi = function(){
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapperNavTab').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize',function(e){
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
</script>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h3>
Job Settings
</h3>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<!-- general form elements -->
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title"></h3>
<?php if($this->session->flashdata('error_msg')){?>
<div class="alert alert-warning alert-dismissible hite" style="height:60px;">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<h4><i class="icon fa fa-warning"></i><?php echo $this->session->flashdata('error_msg'); ?></h4>
</div>
<?php }?>
<?php if($this->session->flashdata('success_msg')){?>
<div class="alert alert-success alert-dismissible hite" style="height:60px;">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<h4><i class="icon fa fa-warning"></i><?php echo $this->session->flashdata('success_msg'); ?></h4>
</div>
<?php }?>
</div>
<!-- /.box-header -->
<!-- form start -->
<form id="signupForm" role="form" class="mtbresize widthFull" method="post" action="<?php echo base_url('admin/job/update');?>" enctype="multipart/form-data" autocomplete="off">
<div class="box-body">
<div>
<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapperNavTab">
<!-- Nav tabs -->
<ul class="nav nav-tabs list" role="tablist">
<li role="presentation" class="active">
<a href="#jobTitle" aria-controls="jobTitle" role="tab" data-toggle="tab">Job Title<sup class="superr">*</sup></a>
</li>
<li role="presentation"><a href="#jobDescription" aria-controls="jobDescription" role="tab" data-toggle="tab">Job Description<sup class="superr">*</sup></a></li>
<li role="presentation"><a href="#jobDate" aria-controls="jobDate" role="tab" data-toggle="tab">Job Date<sup class="superr">*</sup></a></li>
<li role="presentation"><a href="#jobStartTime" aria-controls="jobStartTime" role="tab" data-toggle="tab">Job Start Time:</a></li>
<li role="presentation"><a href="#jobEndTime" aria-controls="jobEndTime" role="tab" data-toggle="tab">Job End Time:</a></li>
<li role="presentation"><a href="#category" aria-controls="category" role="tab" data-toggle="tab">Category<sup class="superr">*</sup></a></li>
<li role="presentation"><a href="#clientName" aria-controls="clientName" role="tab" data-toggle="tab">Client Information<sup class="superr">*</sup></a></li>
<li role="presentation"><a href="#typeOfWork" aria-controls="typeOfWork" role="tab" data-toggle="tab">Type Of Work<sup class="superr">*</sup></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="jobTitle">
<input type="text" class="form-control" id="job_title" name="job_title" pattern="[a-zA-Z ]*" value="<?php echo $cms['job_title'];?>" placeholder="Name" required="required">
<?php echo form_error('job_title','<span class="error">', '</span>'); ?>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="jobDescription">
<textarea class="form-control" id="job_description" rows="3" name="job_description"><?php echo $cms['job_description'];?></textarea>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="jobDate">
<div class='input-group date'>
<input type='text' class="form-control" placeholder="Job Date" id="job_date" name="job_date" value="<?php echo $cms['job_date'];?>" required="required"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php echo form_error('job_date','<span class="error">', '</span>'); ?>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="jobStartTime">
<div class="input-group">
<input type="text" name="job_start_time" id="job_start_time" value="<?php echo $cms['job_start_time'];?>" class="form-control timepicker">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
</div>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="jobEndTime">
<div class="input-group">
<input type="text" name="job_end_time" id="job_end_time" value="<?php echo $cms['job_end_time'];?>" class="form-control timepicker">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
</div>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="category">
<select class="form-control" id="select_sub_category" required="required" name="category_id">
<option value="">Select</option>
<?php foreach($parent_categories as $parent_category){?>
<option value="<?php echo $parent_category['category_id']; ?>" title="<?php echo $parent_category['category_name'];?>" <?php if($parent_category['category_id'] == $cms['cat_id']){echo "selected";}?>><?php echo $parent_category['category_name'];?></option>
<?php } ?>
</select>
<div id="">
<label for="sub_category">Sub Category<sup class="superr">*</sup></label>
<select class="form-control" id="sub_category" name="sub_category_id" required="required">
<?php foreach($sub_categories as $sub_categories_p){ ?>
<option value="<?php echo $sub_categories_p['category_id'];?>" <?php if($sub_categories_p['category_id'] == $cms['sub_cat_id']){echo "selected";} ?>><?php echo $sub_categories_p['category_name'];?></option>
<?php } ?>
</select>
</div>
</div>
<!--tabpanel-->
<div role="tabpanel" class="tab-pane" id="clientName">
<?php if(!empty($client_list)){?>
<div class="form-group">
<label>Client Name<sup class="superr">*</sup></label>
<select class="form-control" id="select_client_name" name="client_name">
<option value="">Select</option>
<?php foreach($client_list as $client){?>
<option value="<?php echo $client['client_name'];?>" <?php if($client['client_name'] == $cms['client_name']){echo "selected";}?> title="<?php echo $client['client_name'];?>"><?php echo $client['client_name'];?></option>
<?php } ?>
</select>
<?php //echo form_error('client_name','<span class="error">', '</span>'); ?>
</div>
<?php }?>
<div class="checkbox">
<label><input type="checkbox" value="" id="fluency" onclick="checkclientname()">Other Client Name</label>
</div>
<div class="form-group" id="cline_name_text_div">
<input type="text" class="form-control" id="client_name" name="other_client_name" value="<?php echo set_value('client_name');?>" placeholder="Client Name">
</div>
<div id="">
<label for="client_address">Client Address<sup class="superr">*</sup></label>
<select class="form-control" id="client_address" name="client_address" >
<?php foreach($address_list as $address){ ?>
<option value="<?php echo $address['job_address'];?>" <?php if($address['job_address'] == $cms['job_address']){echo "selected";} ?>><?php echo $address['job_address'];?></option>
<?php } ?>
</select>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="address" onclick="checkclientaddress()">Other Address</label>
</div>
<div id="cline_address_text_div">
<textarea class="form-control" id="job_address" rows="3" name="job_address" ><?php echo set_value('job_address');?></textarea></div>
<?php //echo form_error('job_address','<span class="error">', '</span>'); ?>
<div id="">
<label for="client_phone">Client Phone<sup class="superr">*</sup></label>
<select class="form-control" id="client_phone" name="client_phone" >
<?php foreach($phone_list as $phone){ ?>
<option value="<?php echo $phone['client_phoneno'];?>" <?php if($phone['client_phoneno'] == $cms['client_phoneno']){echo "selected";} ?>><?php echo $phone['client_phoneno'];?></option>
<?php } ?>
</select>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="phone" onclick="checkclientphone()">Other Phone</label>
</div>
<div id="cline_phone_text_div">
<input type="text" class="form-control" id="client_phone_no" name="client_phone_no" pattern="[0-9]*" value="<?php echo set_value('client_phone_no');?>" placeholder="Phone No" maxlength="10">
</div>
</div>
<div role="tabpanel" class="tab-pane" id="typeOfWork">
<input type="text" class="form-control" id="type_of_work" name="type_of_work" value="<?php echo $cms['type_of_work'];?>" placeholder="Type Of Work" required="required">
<?php echo form_error('type_of_work','<span class="error">', '</span>'); ?>
</div>
<!--tabpanel-->
</div>
<!--tab-content-->
<div class="box-footer">
<input type="hidden" name="job_id" value="<?php echo $cms['job_id'];?>">
<button type="submit" class="btn btn-sm btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.box -->
</div><!-- /.row -->
</section><!-- /.content -->
</div><!-- /.content-wrapper -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
$(document).ready(function(){
$("#cline_name_text_div").hide();
$("#cline_address_text_div").hide();
$("#cline_phone_text_div").hide();
//$("#sub_category").html('<option value="">Select</option>');
$("#select_sub_category").change(function(){
var content ='<option value="">Select</option>';
var selectedCategoryID = $("#select_sub_category option:selected").val();
$("#sub_category_div").show();
$.ajax({
type: "POST",
url: '<?php echo base_url('admin/usersetting/get_sub_category')?>',
data: 'category_id='+selectedCategoryID,
dataType:'json',
success: function(result){
if(result.sub_category.length > 0){
$.each( result.sub_category, function( key, value ) {
content+='<option value="'+value.category_id+'">'+value.category_name+'</option>';
$("#sub_category").html(content);
});
}else{
content+='<option value="">Select</option>';
$("#sub_category").html(content);
}
},
error:function(result){
}
});
});
$('#select_client_name').change(function(){
var content ='<option value="">Select</option>';
var selectedClientName = $("#select_client_name option:selected").val();
$.ajax({
type: "POST",
url: '<?php echo base_url('admin/job/get_client_address')?>',
data: 'client_name='+selectedClientName,
dataType:'json',
success: function(result){
if(result.client_addresss.length > 0){
$.each( result.client_addresss, function( key, value ) {
content+='<option value="'+value.job_address+'">'+value.job_address+'</option>';
//alert(content);
$("#client_address").html(content);
});
}else{
content+='<option value="">Select</option>';
$("#client_address").html(content);
}
},
error:function(result){
}
});
});
});
function checkclientname()
{
var checkbox = document.getElementById('fluency');
if (checkbox.checked == true)
{
$("#cline_name_text_div").show();
}else{
$("#cline_name_text_div").hide();
}
}
function checkclientaddress()
{
var checkbox = document.getElementById('address');
if (checkbox.checked == true)
{
$("#cline_address_text_div").show();
}else{
$("#cline_address_text_div").hide();
}
}
function checkclientphone()
{
var checkbox = document.getElementById('phone');
if (checkbox.checked == true)
{
$("#cline_phone_text_div").show();
}else{
$("#cline_phone_text_div").hide();
}
}
$('#job_date').datepicker({
maxDate: '0',
format: 'yyyy-mm-dd'
});
$(function () {
$(".timepicker").timepicker({
showInputs: false
});
});
$( "#signupForm" ).validate( {
rules: {
job_title: "required",
category_id: "required",
job_date : "required",
client_phone_no : "requierd",
type_of_work : "requierd"
},
messages: {
job_title: "Job Title field is required",
job_date: "Job Date field is requierd",
category_id: "Category field is required",
client_phone_no : "Client Phone No field is required",
type_of_work : "Type Of Work Field is requierd"
},
errorElement: "em",
/*errorPlacement: function ( error, element ) {
// Add the `help-block` class to the error element
error.addClass( "help-block" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},*/
highlight: function ( element, errorClass, validClass ) {
$( element ).parents( ".form-control" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".form-control" ).addClass( "has-success" ).removeClass( "has-error" );
}
} );
</script>