import Scrollable from "@/components/Common/Scrollable";
import { Card, Row, Col, Table, FormGroup } from "reactstrap";

function Ringkasan({ dataLaporan, dataSanksi, dataUpload }) {
	console.log(dataUpload);
	return (
		<>
			<Row>
				<Col>
					<p className="lead bb">Detail Laporan</p>
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Laporan:</Col>
							<Col md="8">
								<strong>{dataLaporan._number}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Nama Perguruan Tinggi:</Col>
							<Col md="8">
								<strong>Universitas Satyagama</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Jenis Pelanggaran:</Col>
							<Col md="8">
								<Scrollable height="125px" className="list-group">
									<ul>
										{dataLaporan.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>{dataLaporan.description}</p>
								</Scrollable>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Dibuat Pada:</Col>
							<Col md="8">
								<strong>{moment(dataLaporan.createAt).format("D MMMM YYYY")}</strong>
							</Col>
						</FormGroup>
					</form>
				</Col>
			</Row>
			<Row>
				<Col>
					<p className="lead bb">Penetapan Sanksi</p>
					<Card className="card-default">
						<Table bordered hover responsive>
							<thead>
								<tr>
									<th>No</th>
									<th>Jenis Pelanggaran</th>
									<th>Sanksi</th>
								</tr>
							</thead>
							<tbody>
								{dataSanksi.map((e, i) => (
									<tr>
										<td>{++i}</td>
										<td>
											<div className="media align-items-center">
												<div className="media-body d-flex">
													<div>
														<p>Pengelolaan perguruan tinggi tidak berprinsip nirlaba</p>
														<p>TMT : 6 Bulan</p>
														<p>Level Pelanggaran : Berat</p>
													</div>
												</div>
											</div>
										</td>
										<td>
											<div className="media align-items-center">
												<div className="media-body d-flex">
													<div>
														<p>Penghentian pembinaan</p>
														<p>Keterangan : Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan</p>
													</div>
												</div>
											</div>
										</td>
									</tr>
								))}
							</tbody>
						</Table>
					</Card>
				</Col>
			</Row>
			<Row>
				<Col>
					<p className="lead bb">Nomor Surat keputusan Sanksi</p>
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Surat:</Col>
							<Col md="8">
								<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Keterangan:</Col>
							<Col md="8">
								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Surat Sanksi:</Col>
							<Col md="8">
								<Scrollable height="120px" className="list-group">
									<table className="table table-bordered bg-transparent">
										<tbody>
											{dataUpload
												? dataUpload.files.map((e) => (
														<tr>
															<td>
																<em className="fa-lg far fa-file-code"></em>
															</td>
															<td>
																<a className="text-muted" href={e.preview} download={e.name}>
																	{e.name}
																</a>
															</td>
														</tr>
												  ))
												: ""}
										</tbody>
									</table>
								</Scrollable>
							</Col>
						</FormGroup>
					</form>
				</Col>
			</Row>
		</>
	);
}

export default Ringkasan;