import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import 'moment/min/locales';
moment.locale('id');
import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
import { API_URL } from "@/env";

function DetailSanksi({ data, noTitle = false }) {
	return (
		<Card className="card-default">
			<CardBody>
				{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">Tanggal Penetapan Sanksi:</Col>
						<Col md="8">
							<strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
						</Col>
					</FormGroup>
					{
						data.tanggal_akhir_keberatan &&
						<FormGroup row>
							<Col md="4">Tanggal Akhir keberatan:</Col>
							<Col md="8">
								<strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
							</Col>
						</FormGroup>
					}
					{
						data.jawaban?.keberatan?.tanggal_akhir_banding &&
						<FormGroup row>
							<Col md="4">Tanggal Akhir Banding:</Col>
							<Col md="8">
								<strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").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  style={{ width: "30px" }}>
													<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>
			</CardBody>
		</Card>
	);
}

export default DetailSanksi;