<!DOCTYPE html>
<html>
  <head>
    <title>Product Specification</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

		<link rel="apple-touch-icon" sizes="57x57" href="/assets/v2/apple-icon-57x57.png">
		<link rel="apple-touch-icon" sizes="60x60" href="/assets/v2/apple-icon-60x60.png">
		<link rel="apple-touch-icon" sizes="72x72" href="/assets/v2/apple-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="76x76" href="/assets/v2/apple-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="114x114" href="/assets/v2/apple-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="120x120" href="/assets/v2/apple-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="144x144" href="/assets/v2/apple-icon-144x144.png">
		<link rel="apple-touch-icon" sizes="152x152" href="/assets/v2/apple-icon-152x152.png">
		<link rel="apple-touch-icon" sizes="180x180" href="/assets/v2/apple-icon-180x180.png">
		<link rel="icon" type="image/png" sizes="192x192"  href="/assets/v2/android-icon-192x192.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/assets/v2/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="96x96" href="/assets/v2/favicon-96x96.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/assets/v2/favicon-16x16.png">
		<link rel="manifest" href="/assets/v2/manifest.json">
		<meta name="msapplication-TileColor" content="#ffffff">
		<meta name="msapplication-TileImage" content="/assets/v2/ms-icon-144x144.png">
		<meta name="theme-color" content="#ffffff">    
    
    <link rel="stylesheet" href="/assets/v2/bootstrap.min.css">
    <script src="/assets/v2/jquery.min.js"></script>
    <script src="/assets/v2/popper.min.js"></script>
    <script src="/assets/v2/bootstrap.min.js"></script>
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap-stylesheet" />
    <link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" />	
        
<link rel="stylesheet" href="/assets/v2/main.css">
<link rel="stylesheet" href="/assets/v2/zwl7zyg.css">

<link rel="stylesheet" href="/assets/v2/main.css">
<link rel="stylesheet" href="/assets/v2/print.css" media="print">           
  </head>
  <body>
    <div class="blue-line"></div>

<div class="container mt-3">
  <h1 id="productTitle"></h1>
  <div id="product-data"></div>
  <div id="product-not-found" style="display: none;">
    <p class="text-danger">Product not found.</p>
  </div>
</div>

<script>
  function getProductBySerialNumber(serialNumber) {
    return $.ajax({
      url: '/api/v2/product/' + serialNumber,
      method: 'GET',
      dataType: 'json'
    });
  }

  function updateProductData(product) {
    const productDataContainer = $('#product-data');
    
     $("#productTitle").html(`${product.productType}`);
    
    productDataContainer.html(`
    <div class='panel card panel-fill'>
			<div class="card-header">
                <h1 class="font-16 m-1">Product specifications</h1>
            </div>
<div class="card-body">
	<div class="row">            		
      <div class="col-lg-6 mb-2">
		  ${(product.stockItem && product.stockItem.columnY) ? `<strong>STK number:</strong> ${product.stockItem.columnY}` : ''}
	  </div>
        <div class="col-lg-6 mb-2">
         	<strong>Nestor code:</strong> ${product.productCodeLv ? `${product.productCodeLv}` : ''}
			${product.productSerialNumber.length !== 6 ? `
    			<br><strong>Product serial number: </strong>${product.productSerialNumber}
			` : ''}
        </div>      
       </div>
       <div class="row">
        <div class="col-lg-6 mb-2">
				${(product.stockItem && product.stockItem.columnY) ? `<a href='https://www.sahkonumerot.fi/${product.stockItem.columnY}'><strong>S&auml;hkonumerot: </strong>https://www.sahkonumerot.fi/${product.stockItem.columnY}</a>`:''}
		</div>
		<div class="col-lg-6">
		  ${product.productTestReports?.length
		    ? `<strong>Product test reports:</strong>
		       ${product.productTestReports
		         .map(tr => `<div><a href="/files/${tr.testReportId}.pdf">${tr.testReportId}</a></div>`)
		         .join('')}`
		    : ''}

		  ${product.productFileLinks?.length
		    ? `<strong>Visual inspection report:</strong>
		       ${product.productFileLinks
		         .map(fl => `<div><a href="/api/files/${fl.testReportId}/${fl.relPath}" target="_blank">${fl.relPath}</a></div>`)
		         .join('')}`
		    : ''}
		</div>

      </div>
      <div class="row justify-content-start align-items-center">
		<div class="col-lg-3 mb-2">
		    ${(product.stockItem && product.stockItem.columnAA) ? `<img src="${product.stockItem.columnAA}" class="product-image">` : ''}
		</div>
        <div class="col-lg-3 mb-2"></div>
          <!-- Initial place for serial number -->
    </div>
      <div class="row">
        <div class="col-lg-12 mb-2">
			<strong>${product.stockItem && product.stockItem.columnZ ? `Nestor cables product page: </strong><br><p class="text-muted"><a href='${product.stockItem.columnZ}'>${product.stockItem.columnZ}</a>` : ''}</p>
        </div>        
        <div class="col-lg-12 mb-2">
			 ${product.stockItem && product.stockItem.columnAB ? `<a href="${product.stockItem.columnAB}" class="btn btn-success mt-3 mx-2 blue-btn" download>User Manual EN</a>` : ''}				
              ${product.stockItem && product.stockItem.columnAC ? `<a href="${product.stockItem.columnAC}" class="btn btn-primary mt-3 mx-2 blue-btn" download>User Manual FI</a>`: ''}
        </div>        
      </div>
      </div>
      </div>
    `);
  }

  function showProductNotFound() {
    $('#product-data').hide();
    $('#product-not-found').show();
  }

  $(function() {
    var requestPath = window.location.pathname;
    
   	requestPath =  requestPath.endsWith("/") ? requestPath.slice(0, -1) : requestPath;
   	let serialNumber = requestPath.split('/').pop();
    
    getProductBySerialNumber(serialNumber)
      .done(function(product) {
        updateProductData(product);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        console.error(`Error: ${textStatus} (${jqXHR.status}): ${errorThrown}`);
        showProductNotFound();
      });
  });
</script>


<footer class="site-footer">
  <div class="bg-blue">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <a href="#">
          <img class="img-fluid mx-auto" src="https://pd.nestorcables.fi/assets/images/nc_logo_valk-140x140.png" alt="Nestor Cables">
        </a>
      </div>
      <div class="bg-blue  d-flex justify-content-center flex-column align-items-center">
		<div class="footer__top--text">
			<div class="d-flex flex-column flex-lg-row align-items-center">
				<p class="mb-0 px-3 pb-lg-0 pb-2">Mittarikuja 5, 90620 Oulu</p>
				<p class="mb-0 px-3 pb-lg-0 pb-2">PL 276, 90101 Oulu</p>
				<a class="px-3 pb-lg-0 pb-2" href="tel:020 791 2770">puh. 020 791 2770</a>
				<a class="px-3" href="mailto:info@nestorcables.fi">info@nestorcables.fi</a>
			</div>		
		</div>  
		</div>  
    </div>  
  </div>
  <div class="red-ribbon"></div>  
<div style="display: flex; justify-content: center; align-items: center; height: 100px; font-size: 14px; font-weight: 300;">
	© 2022 Nestor Cables.
</div>


</footer>
 <style>
	 
      body {
        margin: 0;
        font-family: myriad-pro, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #3b3b3b;
        text-align: left;
        background-color: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .container {
        flex: 1;
      }

      .product-image {
        max-width: 100%;
        height: auto;
        display: block;
        margin: auto;
      }

      .blue-line {
        border-top: 5px solid rgb(0, 72, 152);
      }

      .site-footer {
        background-color: #f1f1f1;
        padding-bottom: 20px;
      }

      .bg-blue {
        background-color: rgb(0, 72, 152);
        padding: 10px 0;
      }

      .red-ribbon {
        background-color: rgb(226, 38, 55);
        height: 5px;
        width: 100%;
      }

      h1 {
        color: rgb(0, 72, 152);
      }
	a {
	  color: rgb(0, 72, 152);
	  text-decoration: none;
	}
	
	a:hover {
	  text-decoration: underline;
	  color: rgb(0, 72, 152);
	}
	.blue-btn {
	  background-color: rgb(0, 72, 152);
	  color: #fff;
	  border: none;
	  padding: 10px 20px;
	  font-size: 1rem;
	  font-weight: 400;
	  line-height: 1.5;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  transition: background-color 0.3s ease;
	}
	
	.blue-btn:hover {
	  background-color: #004eaa;
	  cursor: pointer;
	}
	
	.blue-btn:active {
	  background-color: #003e84;
	}
	
	.blue-btn:focus {
	  outline: none;
	}
    </style>
</body>
</html>