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

function DetailSanksi({ data, noTitle = false }) {
	return (
		<>
			{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
			<form className="form-horizontal">
				<FormGroup row>
					<Col md="4">Nomor Sanksi:</Col>
					<Col md="8">
						<strong>{data.sanksi.no_sanksi}</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">Keterangan:</Col>
					<Col md="8">
						<Scrollable height="100px" className="list-group">
							<p>{data.sanksi.description}</p>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Dibuat Pada:</Col>
					<Col md="8">
						<strong>{moment(data.sanksi.createdAt).format("D MMMM YYYY")}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Dokumen Sanksi:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{data.sanksi.files.map((e) => (
										<tr>
											<td>
												<em className="fa-lg far fa-file-code"></em>
											</td>
											<td>
												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
													{e.name}
												</a>
											</td>
										</tr>
									))}
								</tbody>
							</table>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md={12}>
						<div className="card b">
							<div className="card-body bb">
								<Table responsive>
									<thead>
										<tr>
											<th>Jenis Pelanggaran</th>
											<th>Sanksi</th>
										</tr>
									</thead>
									<tbody>
										{data.sanksi.pelanggaran.map((jp, index) => (
											<tr key={jp._id}>
												<td width={50}>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{jp.pelanggaran}</p>
																<p>TMT : {jp.tmt_bulan} Bulan</p>
																<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
												<td width={50}>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{jp.sanksi}</p>
																<p>Keterangan : {jp.keterangan_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
											</tr>
										))}
									</tbody>
								</Table>
							</div>
						</div>
					</Col>
				</FormGroup>
			</form>
		</>
	);
}

export default DetailSanksi;