import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import { Col, FormGroup } from "reactstrap";
import { API_URL } from "@/env";

function DetailLaporan({ data }) {
	return (
		<>
			<p className="lead bb">Detail Laporan</p>
			<form className="form-horizontal">
				<FormGroup row>
					<Col md="4">Nomor Laporan:</Col>
					<Col md="8">
						<strong>{data._number}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Nama Perguruan Tinggi:</Col>
					<Col md="8">
						<strong>{data.pt.nama}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Jenis Pelanggaran:</Col>
					<Col md="8">
						<Scrollable height="125px" className="list-group">
							<ul>
								{data.pelanggaran.map((e) => (
									<li>{e.pelanggaran}</li>
								))}
							</ul>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Keterangan Laporan:</Col>
					<Col md="8">
						<Scrollable height="100px" className="list-group">
							<p>{data.keterangan}</p>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Dibuat Pada:</Col>
					<Col md="8">
						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Status:</Col>
					<Col md="8">
						<div className="badge badge-info">{!data.aktif ? "Laporan ditutup" : data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">File Pendukung:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{data.dokumen.map((e, index) => (
										<tr key={index}>
											<td>
												<em className="fa-lg far fa-file-code"></em>
											</td>
											<td>
												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
													{e.judul}
												</a>
											</td>
										</tr>
									))}
								</tbody>
							</table>
						</Scrollable>
					</Col>
				</FormGroup>
			</form>
		</>
	);
}

export default DetailLaporan;