import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col, Progress, Button } from "reactstrap";
import { getPelaporan } from "../../../../actions/pelaporan";

import Sparkline from "@/components/Common/Sparklines";
import Datatable from "@/components/Tables/Datatable";
import moment from "moment";

class Pelaporan extends Component {
	constructor(props) {
		super(props);
	}

	static getInitialProps = async () => {
		const pelaporan = await getPelaporan();
		return { pelaporan };
	};

	detailLaporanClick = (e, ptId, number) => {
		e.preventDefault();
		Router.push({
			pathname: "/app/pt/jawaban-pencabutan-sanksi/detail",
		});
	};

	render() {
		const { pelaporan } = this.props;
		return (
			<ContentWrapper>
				<div className="content-heading">Jawaban Permohonan Pencabutan Sanksi</div>
				<Row>
					<Col lg={12}>
						<div className="card b">
							<div className="card-body">
								<Datatable options={{ responsive: true }}>
									<table className="table w-100">
										<thead>
											<tr>
												<th>#ID</th>
												<th>Description</th>
												<th>Created</th>
												<th>Status</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											{/* {pelaporan.data.map((value) => {
												return ( */}
											<tr key={1}>
												<td>BI:1155937274981</td>
												<td className="text-nowrap">
													<div className="media align-items-center">
														<img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy" />
														<div className="media-body d-flex">
															<div>
																<h4 className="m-0">Universitas Satyagama</h4>
																<small className="text-muted">0742/O/1990 - www.satyagama.ac.id - info@satyagama.ac.id</small>
																<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, sit.</p>
															</div>
														</div>
													</div>
												</td>
												<td>{moment().fromNow()}</td>
												<td>
													<div className="inline wd-xxs badge badge-success">open</div>
												</td>
												<td>
													<Button color='primary' onClick={(e) => this.detailLaporanClick(e)}>Detail</Button>
												</td>
											</tr>
											{/* );
											})} */}
										</tbody>
									</table>
								</Datatable>
							</div>
						</div>
					</Col>
				</Row>
			</ContentWrapper>
		);
	}
}

export default Pelaporan;