@extends('layout')

@section('css')
<style type="text/css">
	.datatable-column-width {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
		max-height: 90px;
	}
</style>
@endsection

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">HSCODE -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
		<div class="d-flex">
			<button id="tombol-rahasia"
					data-toggle="modal"
					data-target="#modal_import_xls"
					class="mr-2 btn btn-success font-weight-bold font-size-lg"
					style="display:none;"
			>
				Import Xls <i class="icon-file-spreadsheet ml-2"></i>
			</button>
			<button data-toggle="modal"
					data-target="#modal_hscode"
					class="btn btn-primary font-weight-bold font-size-lg"
			>
				Tambah HSCODE
			</button>
		</div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

	<div class="row">
		<div class="col-md-12">
			<!-- Hover rows -->
			<div class="card">
				<div class="card-header header-elements-inline">
				</div>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>HSCODE</th>
							<th>Tag</th>
							<th>Deskripsi</th>
							<th>PPH (%)</th>
							<th>BM (%)</th>
							<th>BK (%)</th>
							<th>PPN (%)</th>
							<th>PPnBM (%)</th>
							<th>BMPF(CN)(%)</th>
							<th class="text-center">Actions</th>
						</tr>
					</thead>
					<tbody>

			        </tbody>
			    </table>
    		</div>
    		<!-- /hover rows -->
	       </div>

    </div>
</div>
<!-- /content area -->

<!-- Danger modal -->
<div id="modal_theme_danger" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-danger" align="center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="" method="post" id="delform">
				@csrf
				@method('DELETE')
				<div class="modal-body" align="center">
					<h2> Hapus Data? </h2>
				</div>

				<div class="modal-footer">
					<a type="button" class="btn btn-link" data-dismiss="modal">Batal</a>
					<button type="submit" class="btn bg-danger">Hapus</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- /default modal -->

<!-- Modal impor excel -->
<div id="modal_import_xls" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-success" align="center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="{{ url('import-hscode') }}" method="post" enctype="multipart/form-data" >
				@csrf
				<div class="modal-body" align="center">
					<h2> Import XLS HSCODE </h2>
				</div>

				<div class="form-group" style="margin:20px 60px">
					<label>Download Template Excel:</label>
					<a href="{{url('/')}}/global_assets/template_hscode.xls">template_hscode.xls</a>
				</div>

				<div class="form-group" style="margin:20px 60px">
					<label>File Excel</label>
					<input name="xls_hscode" id="xls_hscode" type="file" class="form-control">
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button type="submit" id="submitimpor" class="btn bg-success" >Impor Xls</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- /default modal -->

<!-- Modal HSCODE -->
<div id="modal_hscode" class="modal fade" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header bg-success" align="center">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form class="form-validate-jquery" action="{{route( 'hscode.store' )}}" method="post" id="myform" enctype="multipart/form-data">
				@csrf
				<div class="modal-body">
					<fieldset class="mb-3">
						<legend class="text-uppercase font-size-sm font-weight-bold" id="formtitle">Tambah HSCODE</legend>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">HSCode</label>
							<div class="col-lg-10">
								<input type="hidden" name="_method" id="method" value="post">
								<input type="text" id="hscode" name="hscode" class="form-control" placeholder="HSCODE" required>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Tags</label>
							<div class="col-lg-10">
								<input type="text" id="tags" name="tags" class="form-control tokenfield" placeholder="Add tag" value="" data-fouc>
								<span class="text-danger">*Pisahkan dengan koma</span>
							</div>
						</div>
						<div class="form-group row">
							<label for="deskripsi" class="col-form-label col-lg-2">Deskripsi</label>
							<div class="col-lg-10">
								<textarea id="description" name="description" rows="5" class="form-control"></textarea>
							</div>
						</div>
						<div class="form-group row">
							<label for="pph" class="col-form-label col-lg-2">PPH (%)</label>
							<div class="col-lg-2">
								<input type="number" id="pph" name="pph" class="form-control" min="0" value="0" step=".1">
							</div>
							<label for="bm" class="col-form-label col-lg-2">BM (%)</label>
							<div class="col-lg-2">
								<input type="number" id="bm" name="bm" class="form-control" min="0" value="0" step=".1">
							</div>
							<label for="bk" class="col-form-label col-lg-2">BK (%)</label>
							<div class="col-lg-2">
								<input type="number" id="bk" name="bk" class="form-control" min="0" value="0" step=".1">
							</div>
						</div>
						<div class="form-group row">
							<label for="ppn" class="col-form-label col-lg-2">PPN (%)</label>
							<div class="col-lg-2">
								<input type="number" id="ppn" name="ppn" class="form-control" min="0" value="0" step=".1">
							</div>
							<label for="ppnbm" class="col-form-label col-lg-2">PPnBM (%)</label>
							<div class="col-lg-2">
								<input type="number" id="ppnbm" name="ppnbm" class="form-control" min="0" value="0" step=".1">
							</div>
							<label for="bmpf_cn" class="col-form-label col-lg-2">BMPF(CN) (%)</label>
							<div class="col-lg-2">
								<input type="number" id="bmpf_cn" name="bmpf_cn" class="form-control" min="0" value="0" step=".1">
							</div>
						</div>
					</fieldset>
				</div>
				<div class="modal-footer">
					<a type="button" class="btn btn-light resetbutton">Cancel <i class="icon-undo"></i></a>
					<button type="submit" class="btn bg-success" >Simpan</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

<!-- Input Tag -->
<script src="{{asset('global_assets/js/plugins/forms/tags/tagsinput.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/tags/tokenfield.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/typeahead/typeahead.bundle.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/ui/prism.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>

<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

<script>
	//Tombol rahasia untuk memunculkan tombol impor excel
	var isKeyPressed = {
	    'control': false,
	    'q': false,
	};

	document.onkeydown = (keyDownEvent) => {

		isKeyPressed[keyDownEvent.key.toLowerCase()] = true;

		if(isKeyPressed["control"]){
			if(isKeyPressed["q"]){
				let check_hidden = $("#tombol-rahasia").is(":hidden");
				if(check_hidden){
					$("#tombol-rahasia").removeAttr('style');
				}
				else{
					$("#tombol-rahasia").attr('style', 'display:none');
				}
			}
		}
	};

	document.onkeyup = (keyUpEvent) => {
		 keyUpEvent.preventDefault();
		 isKeyPressed[keyUpEvent.key.toLowerCase()] = false;
	};

	//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable({
					processing: true,
					serverSide: true,
					ajax: "{{route('hscode-datatable')}}",
					columns: [
						{data:'DT_RowIndex', name:'no'},
						{data:'hscode', name:'hscode'},
						{data: null, render: function(data, type, row){
							let html = "";

							if(data.tags){
								let tags = data.tags.split(", ");
								$.each(tags, function(index, value){
									html += `<span class="badge badge-primary">${value}</span>`;
								});
							}

							return html;
						}},
						{data:null, render: function(data, type, row){
							return data.description ? data.description : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.pph ? data.pph : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.bm ? data.bm : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.bk ? data.bk : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.ppn ? data.ppn : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.ppnbm ? data.ppnbm : '-';
						}},
						{data:null, render: function(data, type, row){
							return data.bmpf_cn ? data.bmpf_cn : '-';
						}},
						{data:null, render: function(data, type, row){
							let html = '<div style="widt: 100%; text-align:center">';
							html += `<button id="${'edit'+data.id}" type="button" class="btn btn-primary btn-icon" onclick="editButton(this.id)" title="Ubah"
											data-toggle="modal"
											data-target="#modal_hscode"
											data-hscode="${data.hscode}"
											data-tags="${data.tags ? data.tags.toLowerCase() : ''}"
											data-description="${data.description}"
											data-pph="${data.pph}"
											data-bm="${data.bm}"
											data-bk="${data.bk}"
											data-ppn="${data.ppn}"
											data-ppnbm="${data.ppnbm}"
											data-bmpfcn="${data.bmpf_cn}"
											data-uri="hscode/${data.id}"
									>
											<i class="icon-pencil7"></i>
									</button>
									<a class="delbutton"
									   data-toggle="modal"
									   data-target="#modal_theme_danger"
									   data-uri="hscode/${data.id}"
									>
										<button type="button"
												class="btn btn-danger btn-icon"
												title="Hapus"
										>
											<i class="icon-x"></i>
										</button>
									</a>`
							html += '</div>';
							return html;
						}}
					]
				});
		    };


		    //
		    // Return objects assigned to module
		    //
		    return {
		        init: function() {
		            _componentDatatableBasic();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
</script>
<script type="text/javascript">
	function editButton(id){
		var hscode = $('#'+id).data('hscode');
		var tags = $('#'+id).data('tags');
		var uri = $('#'+id).data('uri');
		var description = $('#'+id).data('description');
		var pph = $('#'+id).data('pph');
		var bm = $('#'+id).data('bm');
		var bk = $('#'+id).data('bk');
		var ppn = $('#'+id).data('ppn');
		var ppnbm = $('#'+id).data('ppnbm');
		var bmpfcn = $('#'+id).data('bmpfcn');

		$('#myform').attr("action", uri);
		$('#method').val("put");
		$('#hscode').val(hscode);
		$('#tags').tokenfield('setTokens', tags.split(", "));
		$('#description').val(description);
		$('#pph').val(pph);
		$('#bm').val(bm);
		$('#bk').val(bk);
		$('#ppn').val(ppn);
		$('#ppnbm').val(ppnbm);
		$('#bmpf_cn').val(bmpfcn);
		$('#formtitle').html('Ubah HSCODE');
	}

	$( document ).ready(function() {

		//$('.summernote').summernote({
		//	height: 200,
		//	toolbar: []
		//});

        // Default style
        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif
        @if ( session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif

		// $('.editbutton').on('click', function(){
		// 	alert("Test");
		// 	var hscode = $(this).data('hscode');
        //     var tags = $(this).data('tags');
        //     var uri = $(this).data('uri');
		// 	var description = $(this).data('description');
		// 	var pph = $(this).data('pph');
		// 	var bm = $(this).data('bm');
		// 	var bk = $(this).data('bk');
		// 	var ppn = $(this).data('ppn');
		// 	var ppnbm = $(this).data('ppnbm');
		// 	var bmpfcn = $(this).data('bmpfcn');
		//
		// 	$('#myform').attr("action", uri);
		// 	$('#method').val("put");
        //     $('#hscode').val(hscode);
		// 	$('#tags').tokenfield('setTokens', tags.split(", "));
		// 	$('#description').val(description);
		// 	$('#pph').val(pph);
		// 	$('#bm').val(bm);
		// 	$('#bk').val(bk);
		// 	$('#ppn').val(ppn);
		// 	$('#ppnbm').val(ppnbm);
		// 	$('#bmpf_cn').val(bmpfcn);
		// 	$('#formtitle').html('Ubah HSCODE');
		// });

		$('.resetbutton').on('click', function(){

			$('#myform').attr("action", "{{route( 'hscode.store' )}}");
			$('#method').val("post");
			$('#hscode').val("");
			$('#tags').removeAttr('data-fouc').tokenfield('destroy');
            $('#tags').val("");
            $('#tags').tokenfield();
			$('#formtitle').html('Tambah HSCODE');
			$('#description').val("");
			$('[type="number"]').val('');

		});

	});
</script>

<script>

// Setup module
// ------------------------------

var TagInputs = function() {

    //
    // Setup module components
    //

    // Tokenfield
    var _componentTokenfield = function() {
    	if (!$().tokenfield) {
    		console.warn('Warning - tokenfield.min.js is not loaded.');
    		return;
    	}

    	// Basic initialization
    	$('.tokenfield').tokenfield();
    };

    //
    // Return objects assigned to module
    //
    return {
    	init: function() {
    		_componentTokenfield();
    	}
    }

}();


// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
	TagInputs.init();
});
</script>
@endsection