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

function Ringkasan({ dataLaporan, dataPelanggaran, 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.no_laporan}</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.keterangan}</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>
								{dataPelanggaran
									? dataPelanggaran.map((e, i) => (
										<tr key={e._id}>
											<td>{++i}</td>
											<td>
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<p>{e.pelanggaran}</p>
															<p>TMT : {e.tmt_bulan} Bulan</p>
															<p>Level Pelanggaran : {e.label_sanksi}</p>
														</div>
													</div>
												</div>
											</td>
											<td>
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<p>{e.sanksi}</p>
															<p>Keterangan : {e.keterangan_sanksi}</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">Sanksi:</Col>
							<Col md="8">
								<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value + " " + e.label_sanksi}</p>) : ""}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">TMT Berlaku:</Col>
							<Col md="8">
								<strong>
									{dataUpload && dataUpload.akhirsanksi ? (
										<p>
											{moment(dataUpload.awalsanksi).format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).format("DD MMMM YYYY")}
										</p>
									) : (
										""
									)}
								</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">TMT :</Col>
							<Col md="8">
								<strong>
									{dataUpload && dataUpload.akhirsanksi ? (
										<p>
											{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
										</p>
									) : (
										""
									)}
								</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;