<?php session_start();
include ('../inc/dbcon.php');
include ('../inc/functions.php');
if(isset($_SESSION["axeslogin"]) && $_SESSION["axeslogin"] == true){
$_SESSION['cuPages']='sel_sinvlist.php';   
$cuPage='sel_sinvlist.php';    
$aid=$_SESSION['uid'];
$brid=$_SESSION['abrid'];
$uty=$_SESSION['utype'];    
}else{
header('Location:../index.php');
exit;    
}
$mhead='sales';
$menuh='Sales';
$phead='sinvlist';
$page='Sales Invoice';
$print='print';
$dtnow = date("Y-m-d h:i:s", time());
$today = strftime("%Y-%m-%d", time());
?>
<?php
function check_desales($invno){
$flage=0;
global $con;
$sql="SELECT * FROM tbl_trarecord WHERE invno!='$invno' AND refinv='$invno'";    
$query=mysqli_query($con,$sql)or die(mysqli_error($con));
if($query->num_rows > 0) {
$flage=1;    
}else{
$flage=0;    
}

if($flage>0){
return $flage;
exit;    
}    

$sql="SELECT * FROM tbl_pdlirecord WHERE refinv='$invno'";    
$rquery=mysqli_query($con,$sql)or die(mysqli_error($con));
if($rquery->num_rows > 0) {
$flage=1;    
}else{
$flage=0;    
}

if($flage>0){
return $flage;
exit;    
}    

$sql="SELECT * FROM tbl_traproduct WHERE invno='$invno' AND rbclno IS NOT NULL";    
$rquery=mysqli_query($con,$sql)or die(mysqli_error($con));
if($rquery->num_rows > 0) {
$flage=1;    
}else{
$flage=0;    
}

if($flage>0){
return $flage;
exit;    
}    
    
$sql="SELECT * FROM tbl_waranty WHERE refinv='$invno'";    
$rquery=mysqli_query($con,$sql)or die(mysqli_error($con));
if($rquery->num_rows > 0) {
$flage=1;    
}else{
$flage=0;    
}

if($flage>0){
return $flage;
exit;    
}    
    
$sql="SELECT * FROM tbl_sreturn WHERE refinv='$invno'";    
$rquery=mysqli_query($con,$sql)or die(mysqli_error($con));
if($rquery->num_rows > 0) {
$flage=1;    
}else{
$flage=0;    
}

return $flage;    
}

if(isset($_POST['delsel'])){
$id=$_POST['delsel'];

$sql="SELECT * FROM tbl_sales WHERE id='$id' LIMIT 1";
$dsales=mysqli_query($con,$sql) or die(mysqli_error($con));    
$dsel=mysqli_fetch_array($dsales);     

$invno=$dsel['invno'];    
    
if(check_desales($invno)){
save_msg('w','Sales Depend on others data!!!');
echo "<script>window.location='sel_sinvlist.php'</script>";
return;    
}    

$sql="SELECT * FROM tbl_serialsale WHERE invno='$invno'";
$query=mysqli_query($con,$sql)or die(mysqli_error($con));
if($query->num_rows > 0) {
while ($row=mysqli_fetch_array($query)){
$serial=$row['serial'];    
$sql="UPDATE tbl_serial SET status='0' WHERE serial='$serial'";
mysqli_query($con,$sql)or die(mysqli_error($con));    
}
$sql="DELETE FROM tbl_serialsale WHERE invno='$invno'";
mysqli_query($con,$sql)or die(mysqli_error($con));    
}    
    
$sql="DELETE FROM tbl_trarecord WHERE invno='$invno'";
mysqli_query($con,$sql)or die(mysqli_error($con));

$sql="DELETE FROM tbl_traproduct WHERE invno='$invno'";
mysqli_query($con,$sql)or die(mysqli_error($con));

$sql="DELETE FROM tbl_cheqman WHERE refinv='$invno'";
$query=mysqli_query($con,$sql)or die(mysqli_error($con));

$sql="DELETE FROM tbl_sales WHERE id='$id'";
$fdel=mysqli_query($con,$sql)or die(mysqli_error($con));    
$efid=mysqli_affected_rows($con);
if($efid>0){
$act =remove_junk(escape('Sales invoice: '.$invno));    
write_activity($aid,'SEL','Sales has been deleted',$act);        
save_msg('s','Sales Successfully Deleted!!!');
}else{
save_msg('s','Sales Fail to Delete!!!');    
}
echo "<script>window.location='sel_sinvlist.php'</script>";    
}
?>
<?php
include('../layout/head.php');
include('../layout/header.php');
include('../layout/side_nav.php');
?>
<div class="content-wrapper">
<?php include('../layout/page_head.php'); ?>
<!-- Main content -->
<section class="content">

<div class="row">
<div class="col-md-9">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Sales Record</h3>
</div>
<div class="box-body">
<?php echo display_msg();?>    
<div class="col-md-12 table-responsive">
<table class="table table-bordered table-striped" id="datarec">
<thead>
<tr>
<th style="width:40px; text-align:center;">SN</th>   
<th>Date</th>
<?php if($uty=='1'){ ?>
<th>Branch</th>    
<?php } ?>   
<th>Customer</th>
<th>Invoice</th>
<th>Total</th>    
<!--<th>Received</th>
<th>Due</th>-->
<th>Note</th>    
<!--<th>Status</th>-->    
<th style="width:40px; text-align:center;">Action</th>    
</tr>
</thead>    
<tbody>
   
</tbody>   
</table>
</div>
<div class="clearfix" ></div>  
<div class="row"style="margin-top: 15px" >
<div class="col-md-12 table-responsive">    
<div class="col-md-8"></div>
<div class="col-md-4 text-right" >
<a href="sel_sinvcteate.php" class="btn btn-flat bg-purple">Create Sales</a>
</div>
</div>    
</div>    
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header">
<!-- tools box -->
<div class="pull-right box-tools">
<a class=" pull-right" data-widget="collapse" style="margin-right: 5px;">
<i class="fa fa-minus"></i></a>
</div>
<!-- /. tools -->
<i class="fa fa-filter" aria-hidden="true"></i>    
<h3 class="box-title">Date Range Filter</h3>
</div>
<!-- /.box-header -->
<div class="box-body" >

<form action="#" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div class="col-md-12 popup_details_div">    
<div class="row">
<div class="col-md-12">
<div class="col-md-1"></div>
<div class="col-md-10">    

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Date From</label>
<div class="input-group date datetimepicker">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" name="tfdate" id="tfdate" value="<?php if(isset($_POST['tfdate'])){echo $_POST['tfdate']; }else{echo date('Y-m-d', strtotime('-15 days', time()));} ?>"  class="form-control" placeholder="Date From" readonly="true">
</div>
</div>        
</div>
<div class="col-md-6">
<div class="form-group" >
<label>Date To</label>
<div class="input-group date datetimepicker">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" name="ttdate" id="tdate" value="<?php if(isset($_POST['ttdate'])){echo $_POST['ttdate']; }else{echo $today;} ?>"  class="form-control" placeholder="Date To" readonly="true">
</div>    
</div>    
</div>    
</div>     
    
</div>   
<div class="col-md-1"></div>    
</div>    
</div>    
</div>
    
<div class="clearfix" ></div>
<div class="col-md-12 nopadding widgets_area"></div>    
<div class="row"style="margin-top: 15px" >
<div class="col-md-2" >
    
</div>       
<div class="col-md-10 text-right" >    
<input type="button" id="csvexp" class="btn btn-flat bg-purple btn-sm " value="Exp->CSV"/>   
</div> 
</div>     
</form>    
    
</div>
</div>
</div>

</div>    
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header">
<h3 class="box-title">History </h3>
</div>
<!-- /.box-header -->
<div class="box-body" >
<?php if($_SESSION['access']=='1'){echo read_activity($aid,'SEL','A');}else{echo read_activity($aid,'SEL','U');}?>
</div>
</div>
</div>
</div>
</div>
</div>    

<?php include('../layout/quick.php');?>
<div style="display: none;">
<table id="expcsv"></table>
</div>    
</section>
<!-- /.main content -->
<?php include('../layout/print.php'); ?>
<?php include('../layout/details.php'); ?>    
</div>
<?php
include('../layout/footer.php');
?>
<!-- page script -->
<script type="text/javascript">
$(document).ready(function() {
//$('#datarec').DataTable({stateSave: true});
var dataTable=$('#datarec').DataTable({
"processing": true,
"serverSide":true,
"stateSave": true,    
"aoColumns": [
    { "sWidth": "40px", "sClass": "text-center" },
    <?php if($uty=='1'){ ?>
    null,
    <?php } ?>
    null,
    null,
    null,
    null,
    null,
    { "sWidth": "120px", "sClass": "text-center" }
],    
"ajax":{
url:"sel_listdata.php",
type:"post"
}
});    
});
    
function take_action(id) {
document.getElementById(id).submit(); 
}
    
function remove_item(id) {
bootbox.confirm({
title: "Confirm",
message: "Are you sure to delete ?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-flat bg-purple'
},
cancel: {
label: 'Cancel',
className: 'btn-flat bg-gray'
}
},
callback: function (result) {
if (result == true) {
document.getElementById(id).submit();
}
}
});
}

function callPrintType(){
var ptype = $('#prtype').val();
invid = $("li.invpiv.active").attr('id');
inv = invid.split("_");

$.ajax({
url: 'sel_viewinv.php',
method: "POST",
data:{ 
print: inv[1], key: ptype 
},
beforeSend: function() {
//$("#invhold").fadeOut('slow');
},    
success: function(data){    
$('#invhold').html(data);
$("#invhold").fadeIn('slow');    
sethead();    
}
});   
}    
    
$(document).on('click','.details-invoice',function(e) {      
id_arr = $(this).attr('id');
id = id_arr.split("_");

$.ajax({
url: 'sel_viewlist.php',
method: "POST",
data:{ 
invid: id[1],cusid: id[2],type:id[3]
},
success: function(data){
$('#listitem').html(data);
pagelist();    
}
});    
    
$.ajax({
url: 'sel_viewinv.php',
method: "POST",
data:{ 
print: id[1], key: 'invonly'
},
success: function(data){
$('#invhold').html(data);
sethead();    
}
});
    
$('.right-side').toggle('slide', { direction: 'right' }, 300);    

e.preventDefault();
});

$(document).on('click', '#closepop', function() {
if($('.right-side').is(':visible')) { $('.right-side').toggle('slide', { direction: 'right' }, 300); }   
});    

$(document).on('click', '.detailsrec', function(e) { 
id_arr = $(this).attr('id');
id = id_arr.split("_");
if(id[1]==0)return;

$.ajax({
url: 'axe_details.php',
method: "POST",
data:{ 
cusdet: 1,cusid: id[1],type:id[0]
},
success: function(data){
$('#profile').html(data);    
}
});    
    
$.ajax({
url: 'axe_details.php',
method: "POST",
data:{ 
tradet: 1,cusid: id[1],type:id[0]
},
success: function(data){
$('#details').html(data);   
}
});    
    
$('.right-side-details').toggle('slide', { direction: 'right' }, 300);    
e.preventDefault();    
});
    
$(document).on('click', '#closedet', function() {
$('#profile').html('');
$('#details').html('');    
if($('.right-side-details').is(':visible')) {
$('.right-side-details').toggle('slide', { direction: 'right' }, 300);
}    
});    
    
$('#listitem').on('click','li', function(){
   $(this).addClass('active').siblings().removeClass('active');
});
    
$(document).on('click', '.invpiv', function() {
var ptype = $('#prtype').val();    
id_arr = $(this).attr('id');
id = id_arr.split("_");
var ids = id[1];
$.ajax({
url: 'sel_viewinv.php',
method: "POST",
data:{ 
print: ids, key: ptype
},
beforeSend: function() {
//$("#invhold").fadeOut('slow');
},    
success: function(data){    
$('#invhold').html(data);
$("#invhold").fadeIn('slow');    
sethead();    
}
});     
});
    
$(document).on('click', '#csvexp', function() {
var tfdate=$('#tfdate').val();
var tdate=$('#tdate').val();	
$.ajax({
url: 'sel_cart.php',
method: "POST",
data:{ 
expcsv: 1, fdate: tfdate, tdate: tdate
},
success: function(data){
$('#expcsv').html(data);
const dataTable = document.getElementById("expcsv");
const exporter = new TableCSVExporter(dataTable);
const csvOutput = exporter.convertToCSV();
const csvBlob = new Blob([csvOutput], { type: "text/csv" });
const blobUrl = URL.createObjectURL(csvBlob);
const anchorElement = document.createElement("a");

anchorElement.href = blobUrl;
anchorElement.download = "Axes_sold_invoice.csv";
anchorElement.click();

setTimeout(() => {
URL.revokeObjectURL(blobUrl);
}, 500);
}
});
$('#expcsv').html('');	
});
     
class TableCSVExporter {
constructor (table, includeHeaders = true) {
this.table = table;
this.rows = Array.from(table.querySelectorAll("tr"));

if (!includeHeaders && this.rows[0].querySelectorAll("th").length) {
this.rows.shift();
}
}

convertToCSV () {
const lines = [];
const numCols = this._findLongestRowLength();

for (const row of this.rows) {
let line = "";

for (let i = 0; i < numCols; i++) {
if (row.children[i] !== undefined) {
line += TableCSVExporter.parseCell(row.children[i]);
}

line += (i !== (numCols - 1)) ? "," : "";
}

lines.push(line);
}

return lines.join("\n");
}

_findLongestRowLength () {
return this.rows.reduce((l, row) => row.childElementCount > l ? row.childElementCount : l, 0);
}

static parseCell (tableCell) {
let parsedValue = tableCell.textContent;

// Replace all double quotes with two double quotes
parsedValue = parsedValue.replace(/"/g, `""`);

// If value contains comma, new-line or double-quote, enclose in double quotes
parsedValue = /[",\n]/.test(parsedValue) ? `"${parsedValue}"` : parsedValue;

return parsedValue;
}
}  


$(document).on('click', '#posprint', function() {
var posid = $('#printpos').val();
$.ajax({
url: 'axe_posprint.php',
method: "POST",
data:{ 
print: posid
},
success: function(data){
    
}
});    
});    
</script>    
<!-- /page script -->


<template id="transover-popup-template">
  <style>
    .pos_translation {
      padding-bottom: 3px;
    }

    strong {
      font-weight: bold;
    }

    .rtl {
      direction: rtl;
    }

    main {
      color: #333;
      max-width: 800px;
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: initial;

      background: #fcf7d9;
      text-align: left;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
      box-shadow: rgba(0,0,0,0.2) 0px 2px 5px;
      border-radius: 5px;
      padding: 6px 8px 3px 8px;
      position: fixed;
      z-index: 2147483647;
      top: -1500px;
      left: 0;
      box-sizing: content-box;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;

      /* To fix the following issue:
      1. Have translate on hover enabled (opposed to translate on click).
      2. Wisit a website that has a dropdown menu that opens on hover.
      3. Open the menu.
      4. Hover over a word within that menu.
      5. Incidentally move the cursor over the TransOver popup.
      The hover menu gets closed.
      */
      pointer-events: none;
    }

    .pos_translation {
      font-size: 1em;
      line-height: 1.3em;
    }

    .red {
      color: red;
    }

    .from_lang {
      color: grey;
      font-size: 0.8em;
      line-height: 1.2em;
      margin-top: 2px;
      margin-bottom: 3px;
    }
  </style>

  <main translate="no"></main>
</template><template id="transover-tat-popup-template">
  <style>
    #tat_input_container {
      display: flex;
      margin-bottom: 10px;
    }

    #tat_input_container label {
      line-height: 26px;
    }

    #tat_input {
      margin-left: 5px;
      flex-grow: 2;
      font-size: 14px;
      line-height: 20px;
      border-radius: 2px;
      border: 1px #ccc solid;
      padding-left: 5px;
    }

    #tat_submit_container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #tat_submit_container select {
      margin-left: 5px;
    }

    #tat_submit {
      width: 45px;
      margin-left: 5px;
    }

    #tat_to_lang {
      width: 150px;
    }

    #swap_languages {
      margin-left: 5px;
      margin-right: 5px;
      width: 24px;
      height: 24px;
      background-repeat: no-repeat;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEKElEQVR4nL1Vb0xbVRQ/97Xre23pn9FSNmBQGEqGMJQPIyU6MkMczf6gbAyNk5lo9gkTdTPGLPswzRITjcYPftREiYQ/g5EVZZEwNt3ELBmiI/wLqB1rFdaWDaSjfe+e44cHpUAL0URPcnPuu/e887vn3PM7F+A/Fs1mBi+fbNBXPHNgv6ShCa/X+48BhI02T7522lbmrrtsTct8RRCETQ+TSLTJNhreOuvcXXG4y2C1F874vL25BcWP5hWWKgQEAABKNBJZmAvNzIaCi1d6vqVkfliixdfPnH+8eO9BzxaDKQuRgCMRR2KcYhoQgaKRh/PBO+O90yM/fhTy/faD51InrvW1LuzT5z6sLKo4/LVGZ3AoSMARQEEChYgpSKAgMa5qQKaRREvaLmteST0jlHIc5usjw8M8KUBN3Yu2soP1fYLOkLrkDJadxb5pWQMgESASIDHBsC3vSR4Ja3fYUq6OjY1SQoBUq3kxHPT/lJpdUAVaMYUjMQWJKbR8clA1qWniBAyJGKpgTHLklC3cHb469POANyHA1NQUDN66+atNxCuWjJ2VgmhUI+EICkfkiKQOIiRgSKDexxIAAtMQoikjRbg4Pj6OAEmq6KsvPhuok6P7H3n6+ZaUdGep/5fv+vyDfe8AQCy/Wslo3+567n3Rnl1CKgAhEOgceeU6UbQCQCApAABAS1PjZC2XD2S7qr9EpPCD+7MDPT09SrzNcYNFdpQfuUgEAhIBEQAJGpEBmDcFAABoa2mePopYK5pt+2RZXleCi0HftTueTx4jIi1jasUTESHiH8s2MR68cea9Ap1kLCHVCJAAwnOh6ZnfR79vb29f5fzZupcMzpLyd32D1862tTY/3OiQsQiMVvuhQlfVB5xWiPUgOO0LTE3sAQD/qr+4rE0v2vsm0xmdxwTh1dbmpvubAoT+nLotq45haZBoScsorjrRkbn7qTZgQjSWZ0JJQYKtO5+oYaIx7ZigeaG1qdGfCCCWopqjtcZ99W+P64yWDI5EnFTGokou4kgMCUite4L4eTjgG/Jfv1Db3Pj56FqAGA9Ghofl/DynvDV7l3ulJQAotBRRHKEwvvaJQCOZ0vQZ+dW5Nn3/0OCtuwkBAAC228yDW/TGfL0ts4gvMZivtIV49sJaMNLqTJGQb36bReqdnJxM3CrGRkd5ulFzWYkuSnr7jlICjSbOGSzPOREgrKwpclS+13/h47Bv7LzH41lVVQnbtdvt1phT7SXWnKLjkj1rj6DTpxKBQKS+BgRMEB25+UjElMW/Fu7daD0XCfk/7ejoCCe95ETicrmYyWQSRVHUQdzrJ6WYTVmHTnmj88HZwI2WU5G5QFNnZ2c0kY8NAZKJu/qI2Vl54nawv60hPDf7TVdXF09m+6/eWafTyWlm4tLcbOBmd3f3uhbyv8rfG8mfJ968lFgAAAAASUVORK5CYII=);
      cursor: pointer;
    }

    #swap_languages.disabled {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEIklEQVR4nL1VX0hbVxj/7k0w6TS3QVck+qC2/tfhiMyRUR8GlU4XNzJYsFBUluXBh/Uho0PBPWww6TbEpzGz+pKBC2OS2tkHRbQd3ZiIdkoVghptdO2MRmP+3Xtzb+759nBNFl0S8WH7weF+nO+7v985h/P7DsB/DMVZBTab7YLJZLouCMKG1+s9twCdLdnf31/Q09MzWVZWZqFp+szFpIMyU2JgYKC0s7Pzga6oqHZ9fX2msbGx0mAwxBN5juNi+/v7e36/n5+cnMRzqQ4NDb3q9/t3JEnCuCRhPB4noiiiIIgkJggYi8WQ53lycHgYnJmddfX29l41mUxZTyMJu91+LRKJBCSZGEVRREEUiSATE57nkeM4ZFmWRKNRjEQieHQUFO+OjAyYzWbVab4T59rd3V1gs9ke5ubm5iMAACJgckBKfHIAIF1TW3s1HAopc3JyHrndbkwrkJeXx29sbPyh1+vfuqBW5yEChYDUMVHql0LyT0wQAZFQlZVVry8sLDxaXFzwphXY3t6Gubm5zXA4PFtXV3eNYZh8RASJEJDiEiESQXlIeCxMISIQJICIFEVRCkmSNKIo3FtbWyMAGW6R3W5/wvP89Y9u3fqxprpG/2Bi4qHL5eoDAClRwzDMyxaL5U55RWUDIgEkiAQRqqqr31CpVFoA8GcUAABwOBweQRDetlgs30uEsIFA4Mn09HQ8tSY/v0C0Wq33CCItHx8BhUKhAgDmTAEAAKfT6ZMk6X2dTvemKIrkdP7Zs61f+vp66xBRSVEUAAAgIhJC/krUUIlgcHCwimGYBvlWyNjb2/MtLS09HhsbO0H+gcXyUktLy+c/37//qdPp5LItMrkDnU7X3tHR8fWxACIitbOz83xlZaUJAF6k/hTjeeU77e02RqMppWn6w9HR0aMzBTwez1OUAQmN4uLiotu3P3EZjcafaJoWjueBEKImBKG5ufk9jUZzSalU3nA4HC8yiQAAgNlszt3d3X0utwSByO0ghhzHI8txJMqyGIlESTgcwVAojMFgiBwdBfEwEMCFxcWnVqu1Oh1v0gerq6tiSUmJqG9sbEXZtgljATltNJKcpxAJXGQuXqqvf+VdmqZ/n5+f/zOtAACAWq1eYhim/HJZWT1mEiAJc8nuRSLHOSqVZmtrM6xUKmc8Hk/6VuF2uyVBECZZllWXV1ToFbRCkeJUOBZIkCdjnuPEkbvfDS0vL38xMTFx4lZRkAatra2KwsLChteamm5euXylSW5+CTMhUEDRVdVV5YQgFQoGo8P24c+2vd5vXC4Xe5orrUACBoOB0mg0KpVKlQMpr59Wq9Xc+fIrr8/nC9iHv/3Y5/P9MD4+LmTjOhfMZjPz+NffvF1dXe1GozHrU5p1B5nQ1tam1Gq1pQcHB5tTU1P/aiH/K/4G7RvFhRjTPe0AAAAASUVORK5CYII=);
      cursor: auto;
    }

    main {
      color: #333;
      font-family: Arial, sans-serif;
      font-size: 14px;
      font-weight: 300;
      line-height: 19px;
      letter-spacing: initial;

      background: #fcf7d9;
      text-align: left;
      border-style: solid;
      border-width: 1px;
      border-color: #ccc;
      box-shadow: rgba(0,0,0,0.2) 0px 2px 5px;
      border-radius: 5px;
      padding: 10px 12px 12px 12px;
      position: fixed;
      z-index: 2147483647;
      top: 15px;
      right: 15px;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    #disable_on_this_page_container {
      margin-bottom: 8px;
      color: blue;
    }

    #disable_on_this_page_container label {
      margin-right: 10px;
    }

    #disable_on_this_page, #disable_everywhere {
      position: relative;
      vertical-align: middle;
      bottom: 1px;
      margin-right: 5px;
      margin-left: 0px;
    }

    #top_row_container {
      display: flex;
      justify-content: space-between;
    }

    #tat_close{
      width: 12px;
      height: 12px;
      background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, darkgrey 46%, darkgrey 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, darkgrey 46%,  darkgrey 56%,transparent 56%, transparent 100%);
    }
  </style>

  <main translate="no">
    <div id="top_row_container">
      <div id="disable_on_this_page_container">
        <label><input id="disable_on_this_page" type="checkbox">Disable on this site</label>
        <label><input id="disable_everywhere" type="checkbox">Disable everywhere</label>
      </div>
      <a href="#" id="tat_close"></a>
    </div>
    <div id="tat_input_container">
      <label for="tat_from_lang">Translate</label>
      <input id="tat_input" type="text">
    </div>
    <div id="tat_submit_container">
      <label for="tat_from_lang">from</label>
      <select id="tat_from_lang"></select>

      <div id="swap_languages"></div>

      <label for="tat_to_lang">into</label>
      <select id="tat_to_lang"></select>

      <input type="submit" id="tat_submit" value="go">
    </div>
  </main>
</template>
</html>    