<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mark and Spencer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link type="text/css" href="css/style.css" rel="stylesheet" type="text/css"/>
<link href="css/chosen.css" rel="stylesheet" type="text/css"/>
<link href="css/datepicker.css" rel="stylesheet" type="text/css"/>
<link href="css/responsive.css" rel="stylesheet" type="text/css"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'/>
</head>
<body>
<nav id="" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.svg" class="img-responsive" alt="M&S" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="home.html" >Home</a></li>
<li><a href="catalog-selection.html" >Catalog Selection</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Catalog <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="update-catalog.html" >Update Catalog</a></li>
<li><a href="catalog-visual.html" >Visual Catalog</a></li>
<li><a href="catalog-visual-2.html" >Visual Catalog 2</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" data-toggle="dropdown">Version <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Update Version</a></li>
<li><a href="#">Last Version</a></li>
<li><a href="version-comparison.html" >Version Comparison</a></li>
<li><a href="#">Version Rollback</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Trading report</a></li>
<li><a href="#">Master data</a></li>
<li><a href="#">Sell thru report</a></li>
<li><a href="#">Sales by stroke</a></li>
<li><a href="#">Store catalogue</a></li>
<li><a href="#">Winterwear/Linen report</a></li>
<li><a href="#">Fulfillment sheet</a></li>
<li><a href="#">All ATR reports- store wise availability</a></li>
<li><a href="#">LWSS</a></li>
<li><a href="#">Sales by stroke</a></li>
<li><a href="#">OTB</a></li>
<li><a href="#">Ecom order sheet</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Change Password</a></li>
<li><a href="#">Change Profile</a></li>
<li><a href="#">Achieve Data</a></li>
<li><a href="#">Backup Database</a></li>
<li class="divider"></li>
<li><a href="#">Logout <i class="fa fa-long-arrow-right"></i></a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav><!--add new-->
<div id="rollbackOk" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h3>Please confirm rollback to this version?</h3>
<p class="sml-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
.</p>
<div class="mt5">
<button type="submit" class="btn-alpha">Confirm</button>
<button type="submit" data-dismiss="modal" class="btn-beta">Cancel</button>
</div>
</div>
</div><!--modal-cotent-->
</div><!--modal-dialog-->
</div><!--modal-->
<!--/add new-->
<main class="ms-segment">
<section class="fork">
<div class="container">
<div class="row">
<div class="col-lg-3">
<h1>Version Comparison</h1>
<p>Compare the Catalog versions</p>
</div>
<div class="col-lg-9 text-right">
<div class="search mt2">
<a href="version-comparison.html" class="btn-beta"><i class="fa fa-long-arrow-left"></i> Back</a>
</div>
</div>
</div>
</div>
</section>
<div class="no-record text-muted hidden">No records.</div>
<section class="plate burger-sm">
<div class="container">
<div class="row">
<form class="">
<div class="col-lg-2">
<select class="chosen-select">
<option>Department</option>
<option value="">Source 1</option>
<option value="">Source 2</option>
<option value="">Source 3</option>
</select>
</div>
<div class="col-lg-2">
<select class="chosen-select">
<option>Stroke</option>
<option value="">Source 1</option>
<option value="">Source 2</option>
<option value="">Source 3</option>
</select>
</div>
<div class="col-lg-2">
<select class="chosen-select">
<option>Color</option>
<option value="">Source 1</option>
<option value="">Source 2</option>
<option value="">Source 3</option>
</select>
</div>
<div class="col-lg-4 col-md-offset-2">
<input type="text" class="form-control inpt-search" placeholder="System concat, Trading dept, OTB..."/>
<div id="vlookup" class="drop-search" style="display:none;">
<div class="row">
<div class="col-md-6">
<label>Search</label>
<input type="text" class="form-control" placeholder="Search"/>
</div>
<div class="col-md-6">
<label>Column name</label>
<input type="text" class="form-control" placeholder="Column name"/>
</div>
<div class="col-md-12 mt3">
<a href="#" class="btn-alpha">Search</a>
<a href="javascript:;" onclick="$('#vlookup').hide();" class="btn-beta">Cancel</a>
</div>
</div>
</div>
<div class="text-right mt1"><a href="javascript:;" onclick="$('#vlookup').slideToggle(100);" class="link">Vlookup</a> </div>
</div>
</form>
</div>
<div class="row mt3">
<div class="col-lg-12">
<div class="">
<table class="table table-fixed" id="count-campares">
<thead>
<tr>
<th>Column name</th>
<th>Current value</th>
<th>Version 1</th>
<th>Version 2</th>
<th>Version 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>System concate</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Trading Dept Concat</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>OTB Concat</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Generic</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Allocation date</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Store stock</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Warehoue stock</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Launch Comments 1</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Launch Comments 2</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Volume lines</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Tcode- SAP</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Brand/Trading Dept No</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Tcode- OTB</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Sub Dept</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Range</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Trading Range India</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Trading sub range/ITEM</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Winter/linen</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>SOUTH EX</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>AMBI</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>SAKET</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>VASANT KUNJ</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>MOMENTS KIRTI NAGAR</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>CP</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>AIRPORT</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>GALLERIA</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>GIP NOIDA </td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>PACIFIC MALL- DELHI</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>MALL OF INDIA</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>CHANDIGARH ELANTE</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>MOHALI</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>INVOICE 1/week</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>INVOICE 2</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>INVOICE 3</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Pack size- Custom</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>INDIA GBB- PRICE POINT</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>INDIA GBB- VALUE</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Currency Type</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Final MRP</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td> Move to Next season Qty </td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Allocation date</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Launch</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Launch Comments 1</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Launch Comments 2</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
<tr>
<td>Volume lines</td>
<td>Value</td>
<td>V1</td>
<td>V2</td>
<td>V3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> <a href="catalog-visual-2.html" class="btn-alpha opac0 btn-sml">Preview</a>
<a href="#rollbackOk" data-toggle="modal" class="btn-beta opac0 btn-sml">Rollback</a></td>
<td> <a href="catalog-visual-2.html" class="btn-alpha opac0 btn-sml">Preview</a>
<a href="#rollbackOk" data-toggle="modal" class="btn-beta opac0 btn-sml">Rollback</a></td>
<td> <a href="catalog-visual-2.html" class="btn-alpha btn-sml">Preview</a>
<a href="#rollbackOk" data-toggle="modal" class="btn-beta btn-sml">Rollback</a></td>
<td> <a href="catalog-visual-2.html" class="btn-alpha btn-sml">Preview</a>
<a href="#rollbackOk" data-toggle="modal" class="btn-beta btn-sml">Rollback</a></td>
<td> <a href="catalog-visual-2.html" class="btn-alpha btn-sml">Preview</a>
<a href="#rollbackOk" data-toggle="modal" class="btn-beta btn-sml">Rollback</a></td>
</tr>
</tfoot>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<hr>
<p class="sml-text">© 2017 Marks and Spencer plc (UK) </p>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<script src="js/chosen.jquery.min.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
$(".chosen-select").chosen({ width:"100%" });
</script>
<script type="text/javascript" src="js/dropzone.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover'
});
});
</script>
<!-- $('.dropdown-toggle').click(function () {
$(this).next('.dropdown-menu').slideToggle(100);
});
$('.dropdown-toggle').focusout(function () {
$(this).next('.dropdown-menu').slideUp(100);
})
</script>-->
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#example1').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
</script>
</body>
</html>