<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="company-form">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="form-title">Company Information</h2>
</div>
</div>
<div class="row com_info">
<div class="col-sm-6">
<!-- left side company information -->
<div class="well form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Company Type</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-th-large"></i></span>
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Company Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-font"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Company Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input class="form-control" required="true" value="" type="email">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Website</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-link"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Certification Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-copy"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">No. of Employee</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Year of Establishment</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flag"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Office Timings</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group" style="margin-bottom:10px;">
<span class="input-group-addon" title="From" ><i class="fa fa-clock-o"></i></span>
<input class="timepicker form-control" placeholder="From" required="true" value="" type="text">
</div>
<div class="input-group">
<span class="input-group-addon" title="To" ><i class="fa fa-clock-o"></i></span>
<input class="timepicker form-control" placeholder="To" required="true" value="" type="text">
</div>
</div>
</div>
</div>
<!-- /left side company information ends -->
</div>
<div class="col-sm-6">
<!-- right side company information -->
<div class="well form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Product Categories</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Country</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-home"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Emirates</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-home"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-home"></i></span>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Fax</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-home"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Facebook URL</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-facebook"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Instagram URL</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-instagram"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Linkedin</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-linkedin"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
</div>
<!-- /right side company information ends -->
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="form-title">Company Images</h2>
</div>
<div class="col-sm-12">
<!-- left side company information -->
<div class="well form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Company Logo</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Trade License</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Company Image 1</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Company Image 2</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Company Image 3</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-md-4 control-label">Company Image 4</label>
<div class="col-md-8 inputGroupContainer">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" readonly>
<div class="popover fade bottom" style="top: 34.4px; left: 43.4px; display: block;">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title"><strong>Preview</strong><button type="button"
class="close-preview" style="font-size: initial;" class="close pull-right">x</button></h3>
<div class="popover-content">
<img src=""></div>
</div>
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="fa fa-remove"></span>
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="fa fa-folder-open"></span>
<span class="image-preview-input-title"> Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview" />
<!-- rename it -->
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
</div>
</div>
<!-- /left side company information ends -->
</div>
<div class="col-sm-12">
<h2 class="form-title">Contact Person Details</h2>
</div>
<div class="col-sm-12">
<!-- right side company information -->
<div class="well form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group ">
<label class="col-md-4 control-label">Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group ">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input class="form-control" required="true" value="" type="email">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group ">
<label class="col-md-4 control-label">Phone Number</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input class="form-control" required="true" value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group ">
<label class="col-md-4 control-label">Designation</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user-secret"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /right side company information ends -->
</div>
<div class="col-sm-12">
<h2 class="form-title">Other Information</h2>
</div>
<div class="col-sm-12">
<div class="well">
<div class="form-group">
<label for="" class="control-label">Company Profile</label>
<textarea class="form-control" id="editor"></textarea>
</div>
<div class="form-group">
<label for="" class="control-label">About Us</label>
<textarea class="form-control" id="editor2"></textarea>
</div>
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-lg btn-warning btn-block">Update</button>
</div>
</div>
</div>
</div>
body {
padding: 50px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left: 2px;
}
.popover-content img {
min-width: 200px;
min-height: 150px;
max-width: 250px;
max-height: 250px;
}
.popover-title .close-preview {
float: right;
width: 25px;
border: 0px;
border-radius: 50%;
height: 24px;
line-height: normal;
top: -4px;
position: relative;
}
.company-form .com_info {
display: flex;
flex-wrap: wrap;
}
.company-form .com_info .col-sm-6 {
display: flex;
}
.company-form .com_info .col-sm-6 .well {
width: 100%;
}
.company-form .form-title {
position: relative;
font-size: 24px;
line-height: 32px;
font-weight: 400;
color: #000;
text-transform: uppercase;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px solid rgb(204, 204, 204);
}
.company-form .form-title:after {
content: "";
position: absolute;
bottom: -1px;
left: 0px;
width: 80px;
height: 1px;
background: rgb(105, 88, 88);
}
.company-form .well {
background: #f9f9f9;
box-shadow: none;
border: 0;
}
.timepicker, .ui-timepicker-list{text-transform: uppercase;letter-spacing: 1px;}
$(document).on('click', '.close-preview', function () {
var parent = $(this).parents('.image-preview');
parent.find('.popover ').removeClass('in');
});
$(document).on('click', '.image-preview-filename', function () {
// alert('asfd');
var parent = $(this).parents('.image-preview');
parent.find('.popover ').addClass('in');
});
$(function () {
// Clear event
$('.image-preview-clear').click(function () {
var parent = $(this).parents('.image-preview');
parent.find('.image-preview-filename').val("");
parent.find('.image-preview-clear').hide();
parent.find('.image-preview-input input:file').val("");
parent.find(".image-preview-input-title").text(" Browse");
});
// Create the preview image
$(".image-preview-input input:file").change(function () {
var parent = $(this).parents('.image-preview');
var img = parent.find('.popover-content img');
// parent.find
var file = this.files[0];
var reader = new FileReader();
// Set preview image into the popover data-content
reader.onload = function (e) {
parent.find(".image-preview-input-title").text("Change");
parent.find(".image-preview-clear").show();
parent.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
// $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
$('.timepicker').timepicker();
