<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <div class="connecting-line"></div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> <span class="round-tab"> <i class="glyphicon glyphicon-folder-open"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> <span class="round-tab"> <i class="glyphicon glyphicon-pencil"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> <span class="round-tab"> <i class="glyphicon glyphicon-picture"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step4" data-toggle="tab" aria-controls="step3" role="tab" title="Step 4"> <span class="round-tab"> <i class="glyphicon glyphicon-picture"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <div class="panel panel-default"> <div class="panel-heading"> Complaint Details</div> <div class="panel-body"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Registration No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="complaint_registration_no" v-model="complaintRegistrationNo" value="{{$complaintRegistrationNo}}" placeholder="{{$complaintRegistrationNo}}" disabled> <br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Complaint Title</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="complaint_title" v-model="complaint_title" placeholder="Complaint Title" required> <br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Received Date Time</label> <div class="control-label col-sm-8"> <input type="datetime-local" v-model="ComplaintReceivedDateTime" class="form-control has-feedback-left" name="date_time" placeholder="date and time"> <br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Dzongkhag</label> <div class="control-label col-sm-8"> <select name="dzongkhag" class="form-control" v-model="dzongkhag" v-on:change="fetchGewog"> <option value="0" selected>Choose Dzongkhag</option> <option v-for="dzongkhag in dzongkhaglist" value="@{{ dzongkhag.dzoID }}">@{{ dzongkhag.dzoName }}</option> </select><br> </div> </div> <div class="form-group has-feedback" v-if="gewoglist.length"> <label class="control-label col-sm-4">Gewog</label> <div class="control-label col-sm-8"> <select name="gewog" class="form-control" v-model="gewog" v-on:change="fetchVillage"> <option value="0" selected>Choose Gewog</option> <option v-for="gewog in gewoglist" value="@{{ gewog.gewogID }}">@{{ gewog.gewogName }}</option> </select><br> </div> </div> <div class="form-group has-feedback" v-if="villagelist.length"> <label class="control-label col-sm-4">Village</label> <div class="control-label col-sm-8"> <select name="village" class="form-control" v-model="village"> <option value="0" selected>Choose Gewog</option> <option v-for="village in villagelist" value="@{{ village.villageID }}">@{{ village.villageName }}</option> </select><br> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Occurrence From</label> <div class="control-label col-sm-8"> <input type="datetime" v-model="complaintOccurrenceFrom" class="form-control has-feedback-left"><br> </div> </div> <div class=" form-group has-feedback"> <label class="control-label col-sm-4">Occurrence Till</label> <div class="control-label col-sm-8"> <input type="date" v-model="complaintOccurrenceTill" class="form-control has-feedback-left" id=""><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Complaint Mode</label> <div class="control-label col-sm-8"> <select name="mode" class="form-control" v-model="complaintMode"> <option value="0" selected>Choose Mode</option> <option v-for="complaintmode in complaintModelist" value="@{{ complaintmode.complaintmodeID }}">@{{ complaintmode.modeName }}</option> </select><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Against Agency</label> <div class="control-label col-sm-8"> <select name="mode" class="form-control" v-model="agencyCategory" v-on:change="fetchAgency"> <option value="0" selected>Choose Category</option> <option v-for="agencyCategory in agencyCategorylist" value="@{{ agencyCategory.empCategoryID }}">@{{ agencyCategory.empCategoryName }}</option> </select><br> </div> {{--Member of parliament or NC member--}} <div v-if="agencyCategory == 1 || agencyCategory == 2 "> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="dzongkhaglist.length"> <select name="dzongkhag" class="form-control" v-model="agency" v-on:change="fetchConstituency"> <option value="0" selected>Choose Dzongkhag</option> <option v-for="dzongkhag in dzongkhaglist" value="@{{ dzongkhag.dzoID }}">@{{ dzongkhag.dzoName }}</option> </select><br> </div> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="constituencylist.length"> <select name="dzongkhag" class="form-control" v-model="department" v-on:change="fetchGewog"> <option value="0" selected>Choose Constituency</option> <option v-for="constituency in constituencylist" value="@{{ constituency.constituencyID }}">@{{ constituency.constituencyName }}</option> </select><br> </div> </div> {{---------------------}} {{--Dzongkhag Administration/Dzongkhag Court/Dungkhag Court--}} <div v-if="agencyCategory == 22"> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="agencylist.length"> <select name="mode" class="form-control" v-model="agency" v-on:change="fetchDepartment"> <option value="0" selected>Choose Agency</option> <option v-for="agency in agencylist" value="@{{ agency.agencyID }}">@{{ agency.agencyName }}</option> </select><br> </div> <div v-if="agency == 139 || agency == 141 || agency == 333"> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="dzongkhaglist.length"> <select name="dzongkhag" class="form-control" v-model="department"> <option value="0" selected>Choose Dzongkhag</option> <option v-for="dzongkhag in dzongkhaglist" value="@{{ dzongkhag.dzoID }}">@{{ dzongkhag.dzoName }}</option> </select><br> </div> </div> </div> {{------------------------}} <div v-else> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="agencylist.length"> <select name="mode" class="form-control" v-model="agency" v-on:change="fetchDepartment"> <option value="0" selected>Choose Agency</option> <option v-for="agency in agencylist" value="@{{ agency.agencyID }}">@{{ agency.agencyName }}</option> </select><br> </div> <label class="control-label col-sm-4"></label> <div class="control-label col-sm-8" v-if="departmentList.length"> <select name="mode" class="form-control" v-model="department"> <option value="0" selected>Choose Department</option> <option v-for="department in departmentList" value="@{{ department.agencyID }}">@{{ department.agencyName }}</option> </select><br> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Complaint Type</label> <div class="control-label col-sm-4 "> <div v-for="complaintType in complaintTypeList"> <input type="radio" name="type" value="@{{ complaintType.id }}" v-model="selectedComplaintTypeID" v-on:change="selectedComplaintType(complaintType.id)">&nbsp @{{ complaintType.complainttypeName }} </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Action Taken</div> <div class="panel-body"> <div class="col-md-12 form-group"> <textarea></textarea> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step2"> <div class="panel panel-default"> <div class="panel-heading">Person Involved(General Details)</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Name</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="name" placeholder="Name"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">DOB</label> <div class="control-label col-sm-8"> <input type="date" class="form-control has-feedback-left" name="DOB"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Gender</label> <div class="control-label col-sm-8"> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">ID No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="cid" placeholder="ID No"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Child Name</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="cname" placeholder="Name"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Father's Name</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="father_name" placeholder="Name"><br> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Spouse Name</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="spouse_name" placeholder="Name"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Address</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="add" placeholder="address"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Dzongkhag</label> <div class="control-label col-sm-8"> <select name="dzo" class="form-control"> <option></option> <option></option> </select><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Village</label> <div class="control-label col-sm-8"> <select name="village" class="form-control"> <option></option> <option></option> </select><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Gewog</label> <div class="control-label col-sm-8"> <select name="gewog" class="form-control"> <option></option> <option></option> </select><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Contact Details</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Birth Place</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="birth_place" placeholder="Birth Place"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Email</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="email" placeholder="Email"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">House No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="house_no" placeholder="House No"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Thram_No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="thram_no" placeholder="Thram No"><br> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Phone No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="phone_no" placeholder="Phone No"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Mobile</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="mobile" placeholder="mobile "><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Nationality</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="nationality" placeholder="Nationality"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Religion</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="religion" placeholder="Religion"><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Physique</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Blood Group</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="group" placeholder="Blood Group"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Weight</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="weight" placeholder="weight"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Height</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="height" placeholder="Height"><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Professional Details</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Employee ID</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="empID" placeholder="Employee ID"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Organization</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="org" placeholder="Organization"><br> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Qualification</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="qualification" placeholder="qualification"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Designation</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="designation" placeholder="designation"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Others</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="others" placeholder="Others"><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Image Upload</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="POST" action="" enctype="multipart/form-data"> <div class="form-group"> <input type="file" class="form-control" name="image" id="image"> </div> <button class="btn btn-info" type="submit">Upload</button> </form> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step3"> <div class="panel panel-default"> <div class="panel-heading">Evidences</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Evidence</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="evidence" placeholder="evidence"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Material Type</label> <div class="control-label col-sm-8"> <select name="mode" class="form-control"> <option>Choose Material Type</option> <option></option> <option></option> </select><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Collection Date</label> <div class="control-label col-sm-8"> <select name="mode" class="form-control"> <option>Choose Mode</option> <option></option> <option></option> </select><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Details</div> <div class="panel-body"> <div class="col-md-12 col-sm-12 col-xs-12"> <textarea></textarea> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step4"> <div class="panel panel-default"> <div class="panel-heading">Attachments</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Attachments Name</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="name" placeholder="Name"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Attachment Type</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="type" placeholder="Attachment Type"><br> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Attachments Detail</div> <div class="panel-body"> <div class="col-md-12 form-group"> <textarea></textarea> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Browse</div> <div class="panel-body"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="POST" action="" enctype="multipart/form-data"> <div class="form-group"> <input type="file" class="form-control" name="image" id="image"> </div> <button class="btn btn-info" type="submit">Upload</button> </form> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete"> <div class="panel panel-default"> <div class="panel-heading">Details of Followup</div> <div class="panel-body"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Followup No</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="complaint_title" placeholder="Followup No"><br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Date Time</label> <div class="control-label col-sm-8"> <div class="input-group date" id="datetimepicker2"> <input type="text" class="form-control" name="date_time" placeholder="date and time"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Action Taken by Agency On</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="against_agency" placeholder="Action Taken by Agency On"> <br> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12"> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Reference No:</label> <div class="control-label col-sm-8"> <input type="text" class="form-control has-feedback-left" name="ref_no" placeholder="Reference No"> <br> </div> </div> <div class="form-group has-feedback"> <label class="control-label col-sm-4">Reference Type</label> <div class="control-label col-sm-8"> <select name="type" class="form-control"> <option>Choose Reference Type</option> <option></option> </select><br> </div> </div> <div class=" form-group has-feedback"> <label class="control-label col-sm-4">Action Date</label> <div class="control-label col-sm-8"> <input type="date" class="form-control has-feedback-left" id=""><br> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Action Taken</div> <div class="panel-body"> <div class="col-md-12 form-group"> <textarea></textarea> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading">Followup Details</div> <div class="panel-body"> <div class="col-md-12 form-group"> <textarea></textarea> </div> </div> <div class="col-md-12"> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> </div> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>

.wizard { margin: 20px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 40px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard > div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #5bc0de; } .wizard li.active span.round-tab i{ color: #5bc0de; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 25%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } }

$(document).ready(function () { //Initialize tooltips $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }