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

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.no_sanksi}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Nama Perguruan Tinggi:</Col>
					<Col md="8">
						<strong>{data.laporan.pt.nama}</strong>
					</Col>
				</FormGroup>

				<FormGroup row>
					<Col md="4">Keterangan:</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">Dokumen Sanksi:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{data.dokumen.map((e) => (
										<tr>
											<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>
				<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.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;