{extends file="layout.html"}
{block name="module_content"}
<!--// $Id$ //-->
<script type="text/javascript">
	window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.js">\x3C/script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">\x3C/script>');
<!--
	var styles = [
		'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css',
		'https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css'
	];
	var scripts = [
		'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js'
	];
	var head = document.getElementsByTagName('head')[0];

	styles.forEach(function(el){
		var link = document.createElement('link');
		link.rel='stylesheet';
		link.type='text/css';
		link.href=el;

		head.appendChild(link);
	});

	scripts.forEach(function(el){
		var script = document.createElement('script');
	  script.type='text/javascript';
	  script.src = el;

	  head.appendChild(script);
	});
//-->
</script>
<style>
  .products-table tr th, .products-table tr td{
    text-align: center;
  }
  .products-table tr th:last-child, .products-table tr td:last-child{
    text-align: right;
  }
	.products-table tr th:first-child, .products-table tr td:first-child{
		text-align: left;
	}
  .modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

    background: #cebd9b;
    text-align: center;
    padding: 10px;
    border: 1px solid #800000;
    min-width: 400px;
  }
  .modal.open{
    display: block;
    z-index: 1000;
    max-width: 0;
  }
  form .form-group{
    text-align: center;
    display: block;
    margin: 10px auto;
    width: 90%;
  }
  form .form-group label{
    display: block;
    font-size: 14px;
  }
  form .form-group input, form .form-group select, form .form-group textarea{
    display: block;
    font-size: 14px;
    padding: 4px 2px;
    width: calc(100% - 8px);
    border: 1px solid rgba(0,0,0,.5);
    background-color: rgba(0,0,0,.04);
		margin: 5px auto;
  }
	form .form-group input, form .form-group select, form .form-group .numberInput{
		max-width: 200px;
		text-align: center;
		margin-left: auto;
    margin-right: auto;
	}
	#orderLicenceForm .form-group input, #orderLicenceForm .form-group select{
		max-width: 100%;
	}
	#changeLicenceDescriptionForm .form-group input{
		max-width: 100%;
	}
  form .form-group input:focus, form .form-group select:focus, form .form-group textarea:focus{
    outline: 0;
  }
  .licences-table{
    width: 100%;
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
  }
  .licences-table tr{
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  .licences-table tr:last-child{
    border-bottom: none;
  }
  .licences-table tr th{
    padding: 5px;
  }
  .licences-table tr td{
    padding: 5px;
  }
  .licences-table tr td input{
    width: 40px;
    display: inline-block;
  }
  .licences-table tr td input:focus, .licences-table tr td button:focus{
    outline: 0;
  }
  .licences-table tr td button, .licences-table tr td a{
    background-color: transparent;
    border: 0;
    color: #800000;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
  }
  .licences-table tr td button:hover, .licences-table tr td button:active, .licences-table tr td a:hover, .licences-table tr td a:active{
    color: #800000;
    text-decoration: underline;
    outline: 0;
  }
  .btn-classic{
    background: #bfaa80;
    border: 1px solid #800000;
    transition-duration: .5s;
    -o-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
		font-size: 8pt;
    font-family: Arial, Helvetica, Verdana;
    font-weight: bold;
    padding: 5px;
		color: #000 !important;
  }
  .btn-classic:hover, .btn-classic:active{
    background: #ae986d;
		text-decoration: none;
  }
  .btn-classic:focus{
    outline: 0;
  }
  table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
    background-color: #fafafa42;
  }
	.red{
		color: red;
	}
	.select2-container--default .select2-selection--single{
		display: block;
		font-size: 14px;
		padding: 0px 2px;
		width: calc(100% - 8px);
		border: 1px solid rgba(0,0,0,.5);
		background-color: rgba(0,0,0,.04);
		margin: 5px auto;
		border-radius: 0;
		-o-border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		outline: 0;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow{
		top: 5px;
		right: 5px;
	}
	.select2-container--open .select2-dropdown--below{
		top: -5px;
	}


	.dropdown-box{
		display: none;
	  position: absolute;
	  width: 150px;
	  top: 25px;
	  left: 50%;
		transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
	  z-index: 10;
	  background: #dfd5bd;
	  border: 1px solid #800000;
	}
	.dropdown-box .btn-classic{
		width: 100%;
		float: left;
		clear: both;
		margin: 0;
		display: block;
		padding: 5px 0;
		align-items: flex-start;
		text-align: center;
		border: 0;
	}
	.dropdown-box.open{
		display: block;
	}
	.products-table tr td:last-child, .products-table tr th:last-child{
		position: relative;
		width: 200px;
		text-align: center !important;
	}

	.numberInput{
		position: relative;
	}
	.numberInput span{
		position: absolute;
		right: 0;
		height: 50%;
		width: 20px;
		background: rgb(158, 146, 119);
		cursor: pointer;
		-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	}
	.numberInput span:hover, .numberInput span:active{
		background: rgb(119, 109, 89);
	}
	.numberInput span.up{
		top: 0;
	}
	.numberInput span.down{
		bottom: 0;
	}
	.numberInput.full-width{
		max-width: 100% !important;
	}
</style>
<H1 class="gdata-title"><span class="bold">{$layout.pagetitle}</span></H1>
<button type="button" id="orderLicenceModalButton" class="btn-classic" style="margin-bottom: 5px;">Zamów nową licencję</button>
<table id="keys_table" class="display products-table" style="width:100%">
  <thead>
    <tr>
      <th>Klucz</th>
      <th>Produkt</th>
      <th>Ilość</th>
			<th>Notatka</th>
			<th>Klient</th>
      <th>Aktywny</th>
      <th>Akcje</th>
    </tr>
  </thead>
  <tbody>
    {foreach from=$keys item=key}
      <tr>
        <td>{$key.prod_key}</td>
        <td>{$key.prod_name}</td>
        <td>{$key.licences_count}</td>
				{if $key.description}
					<td>{$key.description|nl2br}</td>
				{else}
				   <td>Brak notatki</td>
				{/if}
				<td>{$key.customertext}</td>
        <td>{($key.active)? 'Tak' : 'Nie'}</td>
        <td>
					<button type="button" class="btn-classic dropdown-button">&#x25cf;&nbsp;&#x25cf;&nbsp;&#x25cf;</button>
					<div class="dropdown-box">
	          <button type="button" class="btn-classic {($key.active)? 'deactivateLicence' : 'activateLicence'}" key-id="{$key.id}">{($key.active)? 'Dezaktywuj' : 'Aktywuj'}</button>
	          <button type="button" class="btn-classic changeLicencesCount" prod-name="{$key.prod_name}" licences-count="{$key.licences_count}" key-id="{$key.id}">Zmień ilość</button>
						<button type="button" class="btn-classic changeLicenceDescription" prod-desc="{$key.description}" prod-name="{$key.prod_name}" key-id="{$key.id}">Zmień notatkę</button>
						<button type="button" class="btn-classic changeLicenceCustomerId" customer-id="{$key.customer_id}" key-id="{$key.id}">Zmień klienta</button>
						<a href="{$certificateURL}{$key.prod_key|urlencode}" class="btn-classic">Generuj certyfikat</a>
					</div>
				</td>
      </tr>
    {/foreach}
  </tbody>
  <tfoot>
    <tr>
      <th>Klucz</th>
      <th>Produkt</th>
      <th>Ilość</th>
			<th>Notatka</th>
			<th>Klient</th>
      <th>Aktywny</th>
      <th>Akcje</th>
    </tr>
  </tfoot>
</table>
<div class="modal" id="orderLicenceModal">
  <h1>Zamów licencję</h1>
  <form id="orderLicenceForm" method="POST" action="?m=gdatamod&t=orderLicence">
    <input type="hidden" value="" id="orderLicenceProductName" name="productSymbol">
		<div class="form-group">
			<label for="licenceCustomerSymbol" >{trans('Klient')} <span class="red">*</span>:</label>
			<select class="js-data-customer-ajax" id="licenceCustomerSymbol" name="licenceCustomerSymbol"></select>
		</div>
		<div class="form-group">
      <label for="orderLicenceProductSymbol" >{trans('Produkt')} <span class="red">*</span>:</label>
      <select id="orderLicenceProductSymbol" name="productName" class="js-data-products-ajax">
        {foreach from=$products item=product key=key}
          <option value="{$key}">{$key}</option>
        {/foreach}
      </select>
    </div>
		<div class="form-group">
      <label for="licenceCount" >{trans('Ilość licencji')}:</label>
			<div class="numberInput full-width">
				<input type="text" name="licenceCount" id="licenceCount" max="{$products[0]->LicenceCount}" value="1" autocomplete="off">
				<span class="up">&#x25B2;</span>
				<span class="down">&#x25BC;</span>
			</div>
    </div>
		<div class="form-group">
      <label for="licenceDescription" >{trans('Notatka')}:<br /><small>(Treść notatki jest tylko dostępna dla Ciebie)</small></label>
      <textarea name="licenceDescription" id="licenceDescription" rows="3"></textarea>
    </div>
    <div class="form-group">
			<p>
				<span class="red">*</span> - Pola wymagane.
			</p>
      <button type="button" id="orderLicence" class="btn-classic">Zamów licencje</button>
    </div>
  </form>
</div>
<div class="modal" id="changeLicencesCountModal">
  <h1>Zmień ilość licencji</h1>
  <h2 id="changeLicencesCountTitle"></h2>
  <form id="changeLicencesCountForm" method="POST" action="?m=gdatamod&t=changeLicencesCount">
    <input type="hidden" id="changeLicencesCountKeyId" name="keyId">
		<input type="hidden" id="changeLicencesCountProductSymbol" name="productSymbol">
    <div class="form-group">
      <label for="licenceCount" >{trans('Ilość licencji')}:</label>
			<div class="numberInput">
				<input type="text" name="licenceCount" id="changeLicencesCountInput" autocomplete="off">
				<span class="up">&#x25B2;</span>
				<span class="down">&#x25BC;</span>
			</div>
    </div>
    <div class="form-group">
      <button type="button" id="changeLicencesCountSubmit" class="btn-classic">Zmień ilość</button>
    </div>
  </form>
</div>
<div class="modal" id="changeLicenceDescriptionModal">
  <h1>Zmień notatkę</h1>
  <h2 id="changeLicenceDescriptionTitle"></h2>
  <form id="changeLicenceDescriptionForm" method="POST" action="?m=gdatamod&t=changeLicenceDescription">
    <input type="hidden" id="changeLicenceDescrptionKeyId" name="keyId">
		<div class="form-group">
      <label for="changeLicenceDescriptionText" >{trans('Notatka')}:</label>
      <textarea name="licenceDescription" id="changeLicenceDescriptionText" rows="3"></textarea>
    </div>
    <div class="form-group">
      <button type="button" id="changeLicenceDescriptionSubmit" class="btn-classic">Zmień notatkę</button>
    </div>
  </form>
</div>
<div class="modal" id="changeLicenceCustomerIdModal">
  <h1>Zmień klienta</h1>
  <form id="changeLicenceCustomerIdForm" method="POST" action="?m=gdatamod&t=changeLicenceCustomerId">
    <input type="hidden" value="" id="changeLicenceCustomerIdKey" name="keyId">
		<div class="form-group">
			<label for="changeLicenceCustomerIdSelect" >{trans('Klient')} <span class="red">*</span>:</label>
			<select class="js-data-customer-ajax" id="changeLicenceCustomerIdSelect" name="licenceCustomerSymbol"></select>
		</div>
    <div class="form-group">
			<p>
				<span class="red">*</span> - Pola wymagane.
			</p>
      <button type="button" id="changeLicenceCustomerIdSubmit" class="btn-classic">Zmień klienta</button>
    </div>
  </form>
</div>
<form id="activateForm" method="POST" action="?m=gdatamod&t=activateKey">
  <input type="hidden" id="activateKeyId" name="keyId">
</form>
<form id="deactivateForm" method="POST" action="?m=gdatamod&t=deactivateKey">
  <input type="hidden" id="deactivateKeyId" name="keyId">
</form>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
<!--
    var openOrderLicenceModal = function(){
      var orderLicenceModal = document.getElementById('orderLicenceModal');
      var orderLicenceModalButton = document.getElementById('orderLicenceModalButton');

      window.addEventListener('click', function(e){
				if(e.target.className.search('select2') < 0){
					orderLicenceModal.className = 'modal';
				}
      });
      orderLicenceModal.addEventListener('click', function(e){
        e.stopPropagation();
      });

      orderLicenceModalButton.addEventListener('click', function(e){
        e.stopPropagation();
        e.preventDefault();
        document.getElementById('licenceCount').value = 1;
        document.getElementById('orderLicenceProductName').value = '';
				// document.getElementById('licenceCustomerSymbol').value = '';
				document.getElementById('licenceDescription').value = '';
        orderLicenceModal.className = 'modal open';
        return false;
      });

			$('#orderLicenceProductSymbol').val(null).trigger('change').on("change", function (e) {
				var max = 0;
				Object.keys(products[$(this).val()]).forEach(function(el){
					if(parseInt(el, 10) > max) max = parseInt(el, 10);
				});
				$('#licenceCount').attr('max', max).val(1);
			});
    };

    var openChangeLicencesCountModal = function(){
      var changeLicencesCountModal = document.getElementById('changeLicencesCountModal');
      var changeLicencesCountModalButtons = document.getElementsByClassName('changeLicencesCount');

      window.addEventListener('click', function(){
        changeLicencesCountModal.className = 'modal';
      });
      changeLicencesCountModal.addEventListener('click', function(e){
        e.stopPropagation();
      });

      Array.prototype.forEach.call(changeLicencesCountModalButtons, function(el) {
        el.addEventListener('click', function(e){
          e.stopPropagation();
          e.preventDefault();
          document.getElementById('changeLicencesCountTitle').innerText = el.getAttribute('prod-name');
          document.getElementById('changeLicencesCountKeyId').value = el.getAttribute('key-id');
					document.getElementById('changeLicencesCountProductSymbol').value = products[el.getAttribute('prod-name')][el.getAttribute('licences-count')];
          document.getElementById('changeLicencesCountInput').value = el.getAttribute('licences-count');

					var max = 0;
					Object.keys(products[el.getAttribute('prod-name')]).forEach(function(el){
						if(parseInt(el, 10) > max) max = parseInt(el, 10);
					});
					document.getElementById('changeLicencesCountInput').max = max;

					$('#changeLicencesCountInput').on('change', function(){
						document.getElementById('changeLicencesCountProductSymbol').value = products[el.getAttribute('prod-name')][$(this).val()];
					});

          changeLicencesCountModal.className = 'modal open';
          return false;
        });
      });
    };

		var openChangeLicenceDescriptionModal = function(){
      var changeLicenceDescriptionModal = document.getElementById('changeLicenceDescriptionModal');
      var changeLicenceDescriptionModalButtons = document.getElementsByClassName('changeLicenceDescription');

      window.addEventListener('click', function(){
        changeLicenceDescriptionModal.className = 'modal';
      });
      changeLicenceDescriptionModal.addEventListener('click', function(e){
        e.stopPropagation();
      });

      Array.prototype.forEach.call(changeLicenceDescriptionModalButtons, function(el) {
        el.addEventListener('click', function(e){
          e.stopPropagation();
          e.preventDefault();
					document.getElementById('changeLicenceDescriptionTitle').innerText = el.getAttribute('prod-name');
					document.getElementById('changeLicenceDescrptionKeyId').value = el.getAttribute('key-id');
          document.getElementById('changeLicenceDescriptionText').value = el.getAttribute('prod-desc');
          changeLicenceDescriptionModal.className = 'modal open';
          return false;
        });
      });
    };

		var openChangeLicenceCustomerIdModal = function(){
      var changeLicenceCustomerIdModal = document.getElementById('changeLicenceCustomerIdModal');
      var changeLicenceCustomerIdModalButtons = document.getElementsByClassName('changeLicenceCustomerId');

      window.addEventListener('click', function(){
        changeLicenceCustomerIdModal.className = 'modal';
      });
      changeLicenceCustomerIdModal.addEventListener('click', function(e){
        e.stopPropagation();
      });

      Array.prototype.forEach.call(changeLicenceCustomerIdModalButtons, function(el) {
        el.addEventListener('click', function(e){
          e.stopPropagation();
          e.preventDefault();
					document.getElementById('changeLicenceCustomerIdKey').value = el.getAttribute('key-id');
          //el.getAttribute('customer-id');
          changeLicenceCustomerIdModal.className = 'modal open';
          return false;
        });
      });
    };

    var orderLicenceEvent = function(){

      document.getElementById('orderLicence').onclick = function(e){
        e.preventDefault();
        document.getElementById('orderLicenceProductName').value = products[$('#orderLicenceProductSymbol').val()][$('#licenceCount').val()];
        if(document.getElementById('orderLicenceProductName').value != '' && document.getElementById('licenceCustomerSymbol').value != ''){
					document.getElementById('orderLicenceForm').submit();
				}else{
					alert('Uzupełnij wymagane pola!');
				}
      };
      return false;
    };

    var changeLicencesCountEvent = function(){
      document.getElementById('changeLicencesCountSubmit').onclick = function(e){
        e.preventDefault();
        document.getElementById('changeLicencesCountForm').submit();
      };
      return false;
    };

		var changeLicenceDescriptionEvent = function(){
      document.getElementById('changeLicenceDescriptionSubmit').onclick = function(e){
        e.preventDefault();
				document.getElementById('changeLicenceDescriptionForm').submit();
      };
      return false;
    };

		var changeLicenceCustomerIdEvent = function(){
      document.getElementById('changeLicenceCustomerIdSubmit').onclick = function(e){
        e.preventDefault();
				if($('#changeLicenceCustomerIdSelect').val()){
					document.getElementById('changeLicenceCustomerIdForm').submit();
				}else{
					alert('Proszę wybrac klienta')
				}
      };
      return false;
    };

    var activateKeyEvent = function(){
      var activateKeyElements = document.getElementsByClassName('activateLicence');

      Array.prototype.forEach.call(activateKeyElements, function(el) {
        el.addEventListener('click', function(e){
          e.stopPropagation();
          e.preventDefault();

          document.getElementById('activateKeyId').value = el.getAttribute('key-id');
          document.getElementById('activateForm').submit();

          return false;
        });
      });
    };

    var deactivateKeyEvent = function(){
      var deactivateKeyElements = document.getElementsByClassName('deactivateLicence');

      Array.prototype.forEach.call(deactivateKeyElements, function(el) {
        el.addEventListener('click', function(e){
          e.stopPropagation();
          e.preventDefault();

          document.getElementById('deactivateKeyId').value = el.getAttribute('key-id');
          document.getElementById('deactivateForm').submit();

          return false;
        });
      });
    };

    openOrderLicenceModal();
    openChangeLicencesCountModal();
		openChangeLicenceDescriptionModal();
		openChangeLicenceCustomerIdModal();
    orderLicenceEvent();
    changeLicencesCountEvent();
		changeLicenceDescriptionEvent();
		changeLicenceCustomerIdEvent();
    activateKeyEvent();
    deactivateKeyEvent();

		var products = JSON.parse('{$products|json_encode}');

			window.addEventListener('load', function(){
				var numberInputEl = $(".numberInput input");
				numberInputEl.keydown(function (evt) {
					if(evt.keyCode == 38){
						// up
						var val = parseInt($(this).val(), 10),
								max = parseInt($(this).attr('max'), 10);

						if(Number.isInteger(max) && Number.isInteger(val) && max > val){
							$(this).val((val+1));
						}else if(!Number.isInteger(max)){
							alert("Wybierz produkt przed wyborem ilości licencji.")
						}
					}else if(evt.keyCode == 40){
						// down
						var val = parseInt($(this).val());

						if(Number.isInteger(val) && val > 1){
							$(this).parent().children('input').val((val-1));
						}
					}
					evt.preventDefault();
				});
				numberInputEl.bind('change keydown keypress keyup mousedown click mouseup', function(){
					var val = parseInt($(this).val());
					if(!Number.isInteger(val) || val < 1) $(this).val(1);
				});
				$('.numberInput .up').click(function(){
					var val = parseInt($(this).parent().children('input').val(), 10),
							max = parseInt($(this).parent().children('input').attr('max'), 10);

					if(Number.isInteger(max) && Number.isInteger(val) && max > val){
						$(this).parent().children('input').val((val+1));
					}else if(!Number.isInteger(max)){
						alert("Wybierz produkt przed wyborem ilości licencji.")
					}
				});
				$('.numberInput .down').click(function(){
					var val = parseInt($(this).parent().children('input').val());

					if(Number.isInteger(val) && val > 1){
						$(this).parent().children('input').val((val-1));
					}
				});
				$('.js-data-customer-ajax').select2({
					width: '100%',
					ajax: {
				    url: '//{$smarty.server.HTTP_HOST}{$smarty.server.PHP_SELF}?m=gdatamod&ev=getDataForSelect',
				    data: function (params) {
				      var query = {
				        search: params.term,
				        page: params.page || 1
				      }

				      // Query parameters will be ?search=[term]&page=[page]
				      return query;
				    },
						processResults: function (data, params) {
						    params.page = params.page || 1;
						    return {
						        results: data.items,
						        pagination: {
						            more: data.total_count > 0
						        }
						    };
						},
						dataType: 'json'
				  },
				});
				$('.js-data-products-ajax').select2({
					width: '100%',
				});
				$('.js-data-products-ajax').val(null);

				$('.dropdown-button, .dropdown-box').mouseenter(function() {
					$(this).parent().children('.dropdown-box').addClass('open');
				}).mouseleave(function() {
					$(this).parent().children('.dropdown-box').removeClass('open');
				});
			});
		$(document).ready(function() {
      $('#keys_table').DataTable();
    });

//-->
</script>
{/block}