<style>
	tr .spnTooltip {
		z-index:10;
		display:none; 
		padding:14px 20px;
		margin-top:-30px; 
		margin-left:28px;
		width:300px; 
		line-height:16px;
	}
	tr:hover .spnTooltip{
		display:inline; 
		position:absolute; 
		color:#111;
		border:1px solid #DCA; 
		background:#fffAF0;
	}
	.callout {
		z-index:20;
		position:absolute;
		top:30px;
		border:0;
		left:-12px;
	}

	.couponcode:hover .coupontooltip {
    display: block;
	}


	.coupontooltip {
	    display: none;
	    background: rgba(0,0,0,0.75);
	    color: #FFFFFF;
	    margin-left: -12px;
	    padding: 10px;
	    position: absolute;
	    z-index: 10000;
	    width:auto;
	    height: auto;
	}

	.couponcode {
	    margin:100px;
	}
</style>

<div class="container-fluid" style="padding-bottom: 2rem;">
	<div class="card bg-light-transparent">  
		<div class="card-header bg-white">
			<div class="float-left">
				<h4>Stationery Request Lists</h4>
				
				<!-- <a href="<?php //echo base_url('hr/serviceform/stationery_form'); ?>" class="btn btn-outline-dark btn-sm" title="Add New stationery" ><i class="fa fa-plus"></i> Add New Request</a> -->

				<a href="" class="btn btn-outline-dark btn-sm" title="Add Request" data-toggle="modal" data-target="#modal_detail_new" ><i class="fa fa-plus"></i> New Request Form</a>

				<a href="<?php echo base_url('hr/Serviceform_report/stationery_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>

				<a id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false"><i class="fas fa-filter"></i>Show Filters</a>
			</div>
		</div>
		<div class="collapse" id="collapseFilter">
			<div class="card-header">
				<div class="row">
					<div class="col">
						<div class="card no-shadow">
							<div class="card-body">
								<input type="hidden" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">
								<?php if($_SESSION['all_modules_access'][0] == 'admin'){ ?>	
									<div class="form-group row">
										<label for="sv_stationery_filter_dept" class="col-lg-3">
											Department
										</label>                           
										<div class="col-lg-4" >
											<select class="custom-select" name="sv_stationery_filter_dept" id="sv_stationery_filter_dept">
												<option value="-1">[All]</option>
												<?php if($department) foreach($department as $row){ ?>
													<option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
												<?php } ?>
											</select>
										</div>
									</div>
								<?php } ?>
								<div class="form-group row">
									<label for="sv_stationery_filter_status" class="col-lg-3">
										Status
									</label>                           
									<div class="col-lg-4" >
										<select class="custom-select" id="sv_stationery_filter_status" name="sv_stationery_filter_status">
											<option value="-1">[All]</option>
											<option value="Pending">Pending</option>
											<option value="Verified">Verified</option>
											<option value="Approved">Approved</option>
											<option value="Rejected">Rejected</option>
											<option value="Cancel">Cancel</option>
										</select>
									</div>
								</div>
								<div class="form-group row">
									<label for="sv_stationery_filter_year" class="col-lg-3">
										Year
									</label>                           
									<div class="col-lg-4" >
										<input type="text" name="sv_stationery_filter_year" id="sv_stationery_filter_year" class="form-control datepicker-yyyy">
									</div>
								</div>
								<div class="form-group row">
									<label for="sv_stationery_filter_month" class="col-lg-3">
										Requested Month
									</label>                           
									<div class="col-lg-4" >
										<input type="text" name="sv_stationery_filter_month" id="sv_stationery_filter_month" class="form-control datepicker-mm">
									</div>
								</div>
								<div class="row">
									<div class="col d-print-none">
										<button class="btn btn-info" id="searchBtn">Search</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> 
		<div class="tab-content">
			<div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							<div class="table-responsive">
								<table id="filter_table_stationery" class="table table-bordered p-0 m-0" width="100%" id="table_stationery">
									<thead>
										<th class="sorting" tabindex="0" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
											#
										</th>
										<th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
											Date request
										</th>
										<th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
											Date Taken
										</th>
										<th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
											Department
										</th>
										<th class="sorting text-center" tabindex="0" rowspan="1" colspan="1" style="width: 0px;">
											Status
										</th>
										<th class="sorting text-center" tabindex="0" rowspan="" colspan="1" style="width: 0px;">
											Action
										</th>         
									</thead>
									<tbody>
										<?php if(!empty($stationeryRequestList_new)) { ?> 
											<?php foreach($stationeryRequestList_new as $key => $row) { //debug($row); ?><tr>
												<td><?php echo $key+1; ?>
												</td>
												<td><?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>
												</td>
												<td><?php echo date('d-m-Y', strtotime($row['date_taken'])); ?>
												</td>
												<td><?php echo $row['departmentName'] . ' / ' . $row['branchName'] ?>
												</td>
												<td><?php echo ($row['status_app']==null || $row['status_app']=='Pending' )?'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>':$row['status_app']; ?>
												</td>
												<td class="text-center"> 
													<div class="btn-group btn-group-sm" role="group">
														<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
											            title="View Detail"
											            data-name="<?php echo $row['staffName']; ?>" 
											            data-dept="<?php echo $row['departmentName'].'/'.$row['branchName']; ?>" data-datereq="<?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>"
											            data-datetaken="<?php echo date('d-m-Y',strtotime($row['date_taken'])); ?>"
											            data-desc="<?php echo $row['description']; ?>"
											            data-qty="<?php echo $row['quantity']; ?>"
											            data-pck="<?php echo $row['package']; ?>"
											            data-status="<?php echo $row['status_app']; ?>"
											            onclick="open_view_stationery_modal(this)">
											                <i class="far fa-eye"></i>
											            </button>
														<button type="button" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Edit" data-row="<?php echo $row['ID']; ?>"><a href="<?php echo base_url('hr/serviceform/stationery_form/'.$row['ID']); ?>" class="btn-outline-dark" target="_blank"><i class="far fa-edit"></i></a></button>
														<button type="button" class="btn btn-outline-dark" onclick="" data-trigger="hover" data-tooltip="tooltip" title="Print Detail" data-row="<?php echo $row['ID']; ?>"><a href="<?php echo base_url('hr/serviceform_report/stationery_print/'.$row['ID']); ?>" target="_blank" class="btn-outline-dark"><i class="fa fa-print"></i></a></button>
														<button type="button" id="deleteButton" class="btn btn-outline-dark" onclick="deleteData(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete "><i class="far fa-trash-alt"></i></button>
													</div>
												</td>
											</tr>
										<?php } } ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>      
	</div>
</div>

<!-- modal -->

<div class="modal fade" id="modal_detail_new" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle">Create New Stationery Form</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<!-- <form class="form" id="newDetailForm" method="post" action="<?php //echo base_url('hr/Serviceform/stationery_list_save') ?>"> -->
				<form class="form" id="newDetailForm">
					<div class="row">
						<div class="col-6">
							<label>Requested by</label>
							<input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $_SESSION['user']['name']; ?>" readonly>

							<input type="text" class="form-control" name="reqName_id" id="reqName_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
						</div>
						<div class="col-6">
							<label>Department</label>
							<input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>

							<input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
						</div>
					</div>

					<br>

					<div class="row" style="padding-bottom: 4rem;">
						<div class="col-6">
							<label>Date Request</label>
							<input type="text" class="form-control datepicker" name="datereq" id="datereq" value="<?php echo date("d-m-Y"); ?>" disabled>
						</div>
						<div class="col-6">
							<label>Date Taken</label>
							<input class="form-control datepicker" type="text" id="date_taken" name="date_taken" value="<?php echo date("d-m-Y"); ?>">
						</div>
					</div>

					<div class="float-right">
						<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
						<button type="button" class="btn btn-primary" onclick="submitNewDetail()">Submit</button>
					</div> 
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade d-print-none" id="viewDetails" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Stationery Request Detail</h5>&emsp;
                <!-- <a href="javascript:window.print()" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a> -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <label>Requester Name </label>
                        <input type="text" class="form-control" name="modal_view_name" id="modal_view_name" disabled>

                        <!-- <p name="modal_view_name" id="modal_view_name"></p> -->
                    </div>
                    <div class="col-6">
                        <label>Department </label>
                        <input type="text" class="form-control" name="modal_view_dept" id="modal_view_dept" disabled>

                        <!-- <p name="modal_view_dept" id="modal_view_dept"></p> -->
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <label>Date Request </label>
                        <input type="text" class="form-control" name="modal_view_date_req" id="modal_view_date_req" disabled>

                        <!-- <p name="modal_view_date_req" id="modal_view_date_req"></p> -->
                    </div>
                    <div class="col-4">
                        <label>Date Taken </label>
                        <!-- <p name="modal_view_date_taken" id="modal_view_date_taken"></p> -->
                        <input type="text" class="form-control" name="modal_view_date_taken" id="modal_view_date_taken" disabled>
                    </div>
                    <div class="col-4">
                    	<label>Status</label>
                        <input type="text" class="form-control" name="modal_view_status" id="modal_view_status" disabled>
                    </div>
                </div><br>
                <div class="row">
                    <div class="col-12">
                        <label>Detail </label>
                        <p name="modal_view_detail" id="modal_view_detail"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- modal -->

<style type="text/css">
	.tooltipevent
	{
		width:auto;
		height:auto;
		background:rgba(0,0,0,0.75);
		position:absolute;
		color: #fff;
		z-index:10001;
		padding:10px 10px 10px 10px ;  
		line-height: 200%;
	}
</style>

<script>
	var tooltip = document.querySelectorAll('.coupontooltip');

	document.addEventListener('mousemove', fn, false);

	function fn(e) {
		for (var i=tooltip.length; i--;) {
			tooltip[i].style.left = e.pageX + 20;
			tooltip[i].style.top = e.pageY + 10;
		}
	}

	function deleteData(ID) {
		validateForm("#deleteButton", "Delete this stationery list?", function() {
			$.ajax({
				url:'<?php echo base_url('hr/serviceform/deleteStationeryList') ?>',
				data: {
					stationeryID : ID,
				},
				type: 'post',
				dataType: 'json',
				success: (data) => {
					if(data.status == "Success") {

						localStorage.setItem("status", data.status);
						localStorage.setItem("msg", data.msg);

						location.reload();

					//redirect(base_url('hr/serviceform/maintenance_list'));
				    }
			    }
		    });
		});
	}

	function open_view_stationery_modal(elem) 
    {
        // console.log(elem);

        let name                 = $(elem).data('name');
        let dept                 = $(elem).data('dept');
        let datereq              = $(elem).data('datereq');
        let date_taken           = $(elem).data('datetaken');
        let descs	             = $(elem).data('desc');
        let status	             = $(elem).data('status');
        let qtys                 = $(elem).data('qty')+',';
        let pcks                 = $(elem).data('pck')+',';


        if(descs == ''){
        	var description = descs+',';
        }else{
        	var description = descs;
        }

		$('#modal_view_detail').html('');
        if(descs != ''&&qtys != ''&&pcks != '')
        {
        	var desc = description.split(",");
        	var qty = qtys.split(",");
        	var pck = pcks.split(",");

        	if(desc.length > 0)
        	{
        		for(var i=0; i < desc.length; ++i)
        		{
        			var details = '<li>'+desc[i]+' - '+qty[i]+' - '+pck[i]+'</li>';
        			$('#modal_view_detail').append(details);
        		}
        	}
        }else{
        	$('#modal_view_detail').html('');
        }

        /* view modal */
        $('#modal_view_name').val(name);
        $('#modal_view_dept').val(dept);
        $('#modal_view_date_req').val(datereq);
        $('#modal_view_date_taken').val(date_taken);
        $('#modal_view_status').val(status);

        // $('#modal_view_name').text(name);
        // $('#modal_view_dept').text(dept);
        // $('#modal_view_date_req').text(datereq);
        //$('#modal_view_date_taken').text(date_taken);
    }

	$(document).ready(function(){

		//getData();

		$('#searchBtn').click(function(){
			getData();
		});

	});

	function getData() {
		var table = $('#filter_table_stationery').DataTable();
		table.clear().draw();
		var frmData = new FormData();

		frmData.append('sv_stationery_filter_dept',$('#sv_stationery_filter_dept').val());
		frmData.append('sv_stationery_filter_status',$('#sv_stationery_filter_status').val());
		frmData.append('sv_stationery_filter_year',$('#sv_stationery_filter_year').val());
		frmData.append('sv_stationery_filter_month',$('#sv_stationery_filter_month').val());
		frmData.append('user_id',$('#user_id').val());

		$.ajax({
			url:"<?php echo base_url('/hr/api/serviceform/get_stationery_filter'); ?>",
			type:'post',
			dataType:'json',
			data:frmData,
			processData: false,
			contentType: false,
			success:function(data){

				iziToast.success({
					position: 'bottomRight',
					message: 'filtering data',
				});

				let stationery = data.table;

				if(stationery != null){
					$.each(stationery,function(key,content)
					{
						console.log(stationery);
						var i = key;

						if(content.createdTS != '0000-00-00'){
							var createdTS = moment(content.createdTS).format('DD-MM-YYYY');;
						}
						if(content.date_taken != '0000-00-00'){
						var date_taken = moment(content.date_taken).format('DD-MM-YYYY');;
						}

						var btn_view = '<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Detail" data-name="'+content.staffName+'" data-dept="'+content.departmentName+'/'+content.branchName+'" data-datereq="'+createdTS+'" data-datetaken="'+date_taken+'" data-desc="'+content.description+'" data-qty="'+content.quantity+'" data-pck="'+content.package+'" onclick="open_view_stationery_modal(this)"><i class="far fa-eye"></i></button>';

						var btn_print = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform_report/stationery_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

						var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/stationery_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';

						var btn_delete = '<button type="button" class="btn btn-outline-dark" onclick="deleteButton('+content.ID+')" data-trigger="hover" data-tooltip="tooltip" title="Delete"><i class="far fa-trash-alt"></i></button>';
						
						if(content.status_app == null || content.status_app == 'Pending')
						{
							var status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
						}else{
							var status = content.status_app;
						}

						table.row.add({
							0   : i+1,
							1	: createdTS,
							2	: date_taken,
							3   : content.departmentName+'/'+content.branchName,
							4	: status,
							5	: '<div class="text-center"><div class="btn-group btn-group-sm" role="group">'+btn_view+btn_edit+btn_print+btn_delete+'</div></div>',
						}).draw();
						console.log(data);
					});                   
				}

			},
			error:function(){
				iziToast.warning({
					position: 'bottomRight',
					message: '500 Internal Server Error.'
				});
			}
		});
	}

	function submitNewDetail() {
	    validateForm("#newDetailForm", "Confirm to form of stationery?", function() {
	        $.ajax({
	            url:'<?php echo base_url('hr/serviceform/stationery_list_save') ?>',
	            data: {

	            	reqName_id 			: $('#reqName_id').val(),
					department_id 		: $('#department_id').val(),
					date_taken 			: $('#date_taken').val(),
					datereq 			: $('#datereq').val(),
	            },
	            type: 'post',
	            dataType: 'json',
	            success: (data) => {
	                if(data.status == "Success") {

		                localStorage.setItem("status", data.status);
		                localStorage.setItem("msg", data.msg);
		                window.location.href = data.redirect;
	                
	                }
	            }
	        });
	    });
	}
</script>