<?php include 'header.php'; ?>

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid1">
        <div class="row mb-2 align-center">
            <div class="col-sm-6">
               <h1 class="my-3 h1">Documents</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Documents</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<hr class="mb-3">
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid1"> 
		<ul class="nav md-tabs nav-justified">
		  <li class="nav-item waves-effect waves-light">
			<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">New Work</a>
		  </li>
		  <li class="nav-item waves-effect waves-light">
			<a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Completed Work</a>
		  </li>
		</ul>
		<!-- Tab panels -->
		<div class="tab-content card">
		  <!-- Panel 1 -->
		  <div class="tab-pane fade in show active" id="panel1" role="tabpanel"> 
			<div class="table-responsive" >
				<table id="dataTable" class="dataTable table table-hover">
					<thead>
						<tr>
							<th>Name</th>
							<th>Original Language</th> 
							<th>Translated Language</th>
							<th>Sentences</th>
							<th>Uploaded At</th>
							<th>Document</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>             
			</div>		
		  </div>
		  <div class="tab-pane fade" id="panel2" role="tabpanel"> 
			<div class="table-responsive" >
				<table id="dataTable1" class="dataTable table table-hover">
					<thead>
						<tr>
							<th>Name</th>
							<th>Original Language</th> 
							<th>Translated Language</th>											
							<th>Original Document</th>
							<th>Translated Document</th>
							<th>Sentences</th>
							<th>Completed At</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>             
			</div>		
		  </div>
		</div>
        <!-- /.row (main row) -->   
	</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- Modal Small Size -->
<div class="modal fade" id="modalDocument" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Documents</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>                
            </div>
            <div class="modal-body">
                <div class="div-document"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- /.content-wrapper -->
<?php include 'footer.php'; ?>
<script>	
	
initialiseDatatable();
initialiseDatatable1();
if (typeof ($_GET('success')) != "undefined" && $_GET('success') == 1) {
	toastr.success("Congratulations! Documents submitted successfully.");		
}
if (typeof ($_GET('error')) != "undefined" && $_GET('error') == 1) {
	toastr.error("Document is opened by another user.");		
}
function $_GET(param) {
	var vars = {};
	window.location.href.replace(location.hash, '').replace(
			/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
			function (m, key, value) { // callback
				vars[key] = value !== undefined ? value : '';
			}
	);

	if (param) {
		return vars[param] ? vars[param] : null;
	}
	return vars;
}
function initialiseDatatable() {
	$('#dataTable').dataTable().fnDestroy();
	 $('#dataTable').DataTable({
		language: {
			searchPlaceholder: "Search"
		},
		"pagingType": "first_last_numbers",
		"processing": true,
		"bDestroy": true,
		"serverSide": true,
		"bAutoWidth": false,
		"searching": true,
		"destroy": true,
		"columnDefs": [
			{
				"targets": [0],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [1],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [2],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [3],
				"searchable": false,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [4],
				"searchable": false,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [5],
				"searchable": false,
				"orderable": false,
				"visible": true,
			}
		],
		"order": [
			[4, "desc"]
		],
		"lengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
		"ajax": {
			url: "controllers/get_documents.php", // json datasource
			type: "post",
			data: { },
			error: function () {
				$(".claim-list").append('<tr><td colspan="3">No data found</td></tr>');
			}
		}		
	});
	$('input[type="search"]').addClass('txt-search');
} 
function initialiseDatatable1() {
	$('#dataTable1').dataTable().fnDestroy();
	 $('#dataTable1').DataTable({
		language: {
			searchPlaceholder: "Search"
		},
		"pagingType": "first_last_numbers",
		"processing": true,
		"bDestroy": true,
		"serverSide": true,
		"bAutoWidth": false,
		"searching": true,
		"destroy": true,
		"columnDefs": [
			{
				"targets": [0],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [1],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [2],
				"searchable": true,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [3],
				"searchable": false,
				"orderable": false,
				"visible": true,
			}, {
				"targets": [4],
				"searchable": false,
				"orderable": false,
				"visible": true,
			}, {
				"targets": [5],
				"searchable": false,
				"orderable": true,
				"visible": true,
			}, {
				"targets": [6],
				"searchable": false,
				"orderable": true,
				"visible": true,
			}
		],
		"order": [
			[6, "desc"]
		],
		"lengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
		"ajax": {
			url: "controllers/get_documents_completed.php", // json datasource
			type: "post",
			data: {},
			error: function () {
				$(".claim-list").append('<tr><td colspan="3">No data found</td></tr>');
			}
		}		
	});
	$('input[type="search"]').addClass('txt-search');
}   
$("body").on('click', '.view-document', function () {
	$.ajax({url: 'controllers/get_view_document.php',
		data: {
			id: $(this).attr('data-id'),
			type: $(this).attr('data-dtype'),
		},
		type: 'post',
		dataType: 'JSON',
		success: function (output) {
			console.log(output.status);
			$('.div-document').html(output.html);
		}
	});
}); 
</script>