import React, { Component } from "react";
import Router from "next/router";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Select from "react-select";
import {
	Row,
	Col,
	Card,
	CardHeader,
	CardBody,
	FormGroup,
	FormFeedback,
	FormText,
	Label,
	InputGroup,
	InputGroupAddon,
	InputGroupButtonDropdown,
	InputGroupText,
	Input,
	Button,
	DropdownToggle,
	DropdownMenu,
	CustomInput,
	DropdownItem,
} from "reactstrap";

const styleHeaderText = {
	color: "brown",
};

let Dropzone = null;
class DropzoneWrapper extends Component {
	state = {
		isClient: false,
	};
	componentDidMount = () => {
		Dropzone = require("react-dropzone").default;
		this.setState({ isClient: true });
	};
	render() {
		return Dropzone ? <Dropzone {...this.props}>{this.props.children}</Dropzone> : null;
	}
}

const selectInstanceId = 1;
const tbljenisPelanggaran = [
	{
		idPelanggaran: 0,
		Pelanggaran: "Tidak Ada",
		Sangsi: "Tanpa Sangsi",
		KeteranganSangsi: "-",
		LevelSangsi: 0,
		LabelSangsi: "Tidak ada",
		checked: false,
		TMTBulan: 0,
	},
	{
		idPelanggaran: 1,
		Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pelaksanaan kebebasan akademik,kebebasan mimbar akademik, dan otonomi keilmuan di perguruan tinggi",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "-",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 2,
		Pelanggaran: "Perguruan tinggi tidak memuat mata kuliah agama,Pancasila, kewarganegaraan, dan bahasa Indonesia dalam kurikulumnya",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "-",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 3,
		Pelanggaran: "Perguruan tinggi tidak menggunakan bahasa Indonesia sebagai bahasa pengantar utama",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "-",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 4,
		Pelanggaran:
			"Perguruan tinggi tidak menyebarluaskan hasil penelitian dengan cara diseminarkan, dipublikasikan, dan/atau dipatenkan, kecuali hasil penelitian yang bersifat rahasia, mengganggu, dan/atau membahayakan kepentingan umum",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 5,
		Pelanggaran: "PTN tidak menerima calon Mahasiswa yang telah memenuhi persyaratan akademik dan lolos seleksi penerimaan Mahasiswa secara nasional",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		TMTBulan: 6,
	},
	{
		idPelanggaran: 6,
		Pelanggaran:
			"PTN tidak mencari dan menjaring calon Mahasiswa yang memiliki potensi akademik tinggi, tetapi kurang mampu secara ekonomi dan calon Mahasiswa dari daerah terdepan, terluar, dan tertinggal untuk diterima paling sedikit 20% (dua puluh persen) dari seluruh Mahasiswa baru yang diterima dan tersebar pada semua Program Studi",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 7,
		Pelanggaran: "Perguruan tinggi tidak memenuhi hak Mahasiswa yang kurang mampu secara ekonomi untuk dapat menyelesaikan studinya sesuai dengan peraturan akademik",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 8,
		Pelanggaran: "Perguruan tinggi memberi gelar yang tidak menggunakan bahasa Indonesia",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 9,
		Pelanggaran: "Pemimpin perguruan tinggi tidak melindungi dan memfasilitasi pengelolaan di bidang non akademik",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 10,
		Pelanggaran: "Perguruan tinggi tidak mengumumkan ringkasan laporan tahunan kepada masyarakat",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 11,
		Pelanggaran: "Perguruan tinggi memiliki Dosen tetap kurang dari 5 (lima) orang untuk setiap Program Studi",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 12,
		Pelanggaran: "Perguruan tinggi tidak memenuh  nisbah Dosen dan Mahasiswa sesuai dengan ketentuan peraturan perundang-undangan",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 13,
		Pelanggaran: "Perguruan tinggi tidak melakukan pelaporan secara berkala ke pangkalan data Pendidikan Tinggi",
		Sangsi: "Peringatan Tertulis",
		KeteranganSangsi: "",
		LevelSangsi: 1,
		LabelSangsi: "Ringan",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 14,
		Pelanggaran: "Program sarjana memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
		Sangsi: "Penghentian sementara bantuan biaya pendidikan dari pemerintahan pusat",
		KeteranganSangsi: "Berupa penundaan pemberian bantuan keuangan, hibah, dan/atau bentuk bantuan lain bagi perguruan tinggi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 15,
		Pelanggaran: "Program magister memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penghentian sementara penerimaan Mahasiswa baru",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 16,
		Pelanggaran: "Program doktor memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan proses usul pembukaan Program Studi baru",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 17,
		Pelanggaran: "Program diploma memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program magister atau sederajat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 18,
		Pelanggaran: "Program magister terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 19,
		Pelanggaran: "Program doktor terapan memiliki Dosen yang tidak berkualifikasi akademik lulusan program doktor atau sederajat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 20,
		Pelanggaran: "Program profesi memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan profesi dan/atau lulusan program magister atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		TMTBulan: 6,
	},
	{
		idPelanggaran: 21,
		Pelanggaran: "Program spesialis memiliki Dosen yang tidak berkualifikasi akademik minimum lulusan program spesialis dan/atau lulusan program doktor atau sederajat dengan pengalaman kerja paling singkat 2 (dua) tahun",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 22,
		Pelanggaran: "Perguruan tinggi tidak mencabut gelar akademik, gelar vokasi, atau gelar profesi apabila karya ilmiah yang digunakan untuk memperoleh gelar akademik, gelar vokasi, atau gelar profesi terbukti merupakan hasil plagiat",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 23,
		Pelanggaran: "Perguruan tinggi tidak menyediakan, memfasilitasi, memiliki Sumber Belajar sesuai dengan Program Studi yang dikembangkan",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 24,
		Pelanggaran: "Perguruan tinggi tidak memiliki statuta",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 25,
		Pelanggaran: "Perguruan tinggi tidak memiliki panduan/prosedur peralihan dan perolehan satuan kredit semester serta rekognisi pembelajaran lampau",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 26,
		Pelanggaran: "Perguruan tinggi melaporkan data yang tidak valid ke PDDIKTI",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 27,
		Pelanggaran: "Perguruan tinggi yang menyelenggarakan kegiatan akademik yang tidak sesuai dengan seluruh Standar Nasional Pendidikan Tinggi",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 28,
		Pelanggaran: "Badan Penyelenggara tidak memberikan gaji pokok serta tunjangan kepada Dosen dan tenaga kependidikan sesuai dengan ketentuan peraturan perundang-undangan",
		Sangsi: "Penghentian sementara kegiatan penyelenggaraan pendidikan",
		KeteranganSangsi: "Penundaan pelaksanaan akreditasi",
		LevelSangsi: 2,
		LabelSangsi: "Sedang",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 29,
		Pelanggaran: "Perguruan tinggi dan/atau Program Studi yang tidak terakreditasi mengeluarkan gelar akademik, gelar vokasi, dan/atau gelar profesi",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Penghentian bantuan keuangan, hibah, dan/atau bentuk bantuan lain yang diperuntukkan bagi perguruan tinggi",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 30,
		Pelanggaran: "Perguruan tinggi dan/atau Program Studi memberikan ijazah, gelar akademik, gelar vokasi, dan/atau gelar profesi kepada orang yang tidak berhak",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Penghentian layanan Pemerintah Pusat bagi perguruan tinggi",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 31,
		Pelanggaran: "Perguruan tinggi tidak mengusulkan akreditasi ulang Program Studi sebagaimana ditentukan dalam peraturan perundang-undangan",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Penghentian penerimaan Mahasiswa baru",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 32,
		Pelanggaran: "Perguruan tinggi lembaga negara lain yang menyelenggarakan pendidikan di wilayah Negara Kesatuan Republik Indonesia yang tidak sesuai dengan ketentuan peraturan perundang-undangan",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Larangan melakukan wisuda",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 33,
		Pelanggaran: "Perguruan tinggi melakukan penerimaan Mahasiswa baru dengan tujuan komersial",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Penghentian proses usul pembukaan Program Studi baru",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 34,
		Pelanggaran: "Pengelolaan perguruan tinggi tidak berprinsip nirlaba",
		Sangsi: "Penghentian pembinaan",
		KeteranganSangsi: "Penarikan Dosen Pegawai Negeri Sipil yang dipekerjakan",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 35,
		Pelanggaran: "Perguruan tinggi dan/atau Badan Penyelenggara melakukan perubahan nama perguruan tinggi, nama dan/atau bentuk Badan Penyelenggara, dan/atau lokasi Kampus Utama PTS tanpa izin dari Menteri",
		Sangsi: "Pencabutan izin Program Studi",
		KeteranganSangsi: "",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 36,
		Pelanggaran: "Perguruan tinggi menyelenggarakan Program Studi tanpa izin dari Menteri",
		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
		KeteranganSangsi: "",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 37,
		Pelanggaran: "Perguruan tinggi menyelenggarakan PJJ tanpa izin dari Menteri",
		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
		KeteranganSangsi: "",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 38,
		Pelanggaran: "Perguruan tinggi dan/atau Program Studi tidak lagi memenuhi syarat pendirian perguruan tinggi dan/atau pembukaan Program Studi",
		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
		KeteranganSangsi: "",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
	{
		idPelanggaran: 39,
		Pelanggaran: "Terjadi sengketa",
		Sangsi: "Pembubaran PTN atau pencabutan izin PTS",
		KeteranganSangsi: "",
		LevelSangsi: 3,
		LabelSangsi: "Berat",
		checked: false,
		TMTBulan: 6,
	},
];
const selectJenisPelangaran = tbljenisPelanggaran.map((e) => {
	return { value: e.idPelanggaran, label: e.Pelanggaran, className: "State-ACT" };
});
class FormStandard extends Component {
	constructor() {
		super();
		this.state = {
			dropdownOpen: false,
			splitButtonOpen: false,
			selectedOptionMulti: [],
			stat: "Waiting to add files..",
			pelaporanNumber: Math.floor(Date.now() * Math.random()),
			keteranganLaporan: "",
			files: [],
		};
	}

	static getInitialProps({ query }) {
		return { query };
	}

	setKeteranganPelaporan = (e) => {
		this.setState({ keteranganLaporan: e.target.value });
	};

	toggleDropDown = () => {
		this.setState({
			dropdownOpen: !this.state.dropdownOpen,
		});
	};

	toggleSplit = () => {
		this.setState({
			splitButtonOpen: !this.state.splitButtonOpen,
		});
	};

	handleChangeSelectMulti = (selectedOptionMulti) => {
		this.setState({ selectedOptionMulti });
	};

	onDrop = (files) => {
		this.setState({
			files: files.map((file) =>
				Object.assign(file, {
					preview: URL.createObjectURL(file),
				})
			),
			stat: "Added " + files.length + " file(s)",
		});
	};

	uploadFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? "Dropzone ready to upload " + this.state.files.length + " file(s)" : "No files added.",
		});
	};

	clearFiles = (e) => {
		e.preventDefault();
		e.stopPropagation();
		this.setState({
			stat: this.state.files.length ? this.state.files.length + " file(s) cleared." : "No files to clear.",
		});
		this.setState({
			files: [],
		});
	};

	onSubmit = (e) => {
		const formdata = new FormData();
		formdata.append("number", this.state.pelaporanNumber);
		formdata.append("pt_id", this.props.query.ptId);
		formdata.append("description", this.state.keteranganLaporan);
		formdata.append("pelanggaran_id", this.state.selectedOptionMulti.map((e) => e.value).join());
		if (this.state.files.length > 0) {
			this.state.files.forEach((e) => {
				formdata.append("files", e);
			});
		}

		const inserted = this.insertData(formdata);
		e.preventDefault();
		if (inserted) {
			Router.push({
				pathname: "/app/pelaporan",
			});
		}
	};

	insertData = async (data) => {
		try {
			const requestOptions = {
				method: "POST",
				body: data,
			};

			const inserted = await fetch("http://localhost:1880/pelaporan.create", requestOptions);
			return inserted;
		} catch (error) {
			console.log("error", error);
			return false;
		}
	};

	render() {
		const { selectedOptionMulti, files } = this.state;

		const thumbs = files.map((file, index) => (
			<Col md={3} key={index}>
				<img className="img-fluid mb-2" src={file.preview} alt="Item" />
			</Col>
		));
		return (
			<ContentWrapper unwrap>
				<div className="bg-cover" style={{ backgroundImage: "url(/static/img/profile-bg.png)" }}>
					<div className="p-4 text-center" style={styleHeaderText}>
						<img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar" />
						<h3 className="m-0">Universitas Satyagama</h3>
						<p>0742/O/1990</p>
						<p>Jalan Kamal Raya No 2-A Cengkareng</p>
					</div>
				</div>
				<div className="p-3">
					<div className="content-heading">
						<div>
							Pelaporan Baru
							<small>Form pembuatan laporan baru v.0.1</small>
						</div>
					</div>
					<Row>
						<Col xl="9">
							{/* START card */}
							<Card className="card-default">
								<CardHeader>
									<label>Informasi Laporan</label>
								</CardHeader>
								<CardBody>
									<form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
										{/* <fieldset> */}
										<FormGroup row>
											<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
											<div className="col-md-10">
												<Input type="text" disabled value={this.state.pelaporanNumber} />
												<span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
											</div>
										</FormGroup>
										{/* </fieldset> */}
										<FormGroup row>
											<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
											<div className="col-md-10">
												<Select instanceId={selectInstanceId + 1} isMulti value={selectedOptionMulti} onChange={this.handleChangeSelectMulti} options={selectJenisPelangaran} required />
												<span className="form-text">Pilih Jenis Pelanggaran</span>
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Keterangan Laporan</label>
											<div className="col-md-10">
												<Input type="textarea" value={this.state.keteranganLaporan} onChange={this.setKeteranganPelaporan} required />
												{/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
												<span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
											</div>
										</FormGroup>
										<FormGroup row>
											<label className="col-md-2 col-form-label">Upload File Pendukung</label>
											<div className="col-md-10">
												{/* <Input type="file" multiple name="files" className="custom-file-input" /> */}
												{/* <CustomInput type="file" multiple id="files" onChange={this.filesHandler} /> */}
												{/* <span className="form-text">Multiple files upload</span> */}
												<DropzoneWrapper className="" onDrop={this.onDrop}>
													{({ getRootProps, getInputProps, isDragActive }) => {
														return (
															<div {...getRootProps()} className={"dropzone card p-3 " + (isDragActive ? "dropzone-drag-active" : "")}>
																<input {...getInputProps()} />
																<div className="dropzone-previews flex">
																	{this.state.files.length > 0 ? <Row>{thumbs}</Row> : <div className="text-center dz-default dz-message">Drop files here to upload</div>}
																</div>
																<div className="d-flex align-items-center">
																	<small className="ml-auto">
																		<button type="button" className="btn btn-link" onClick={this.clearFiles}>
																			Clear files
																		</button>
																	</small>
																</div>
															</div>
														);
													}}
												</DropzoneWrapper>
											</div>
										</FormGroup>
										<FormGroup row>
											<div className="col-xl-10">
												<button className="btn btn-sm btn-primary" type="submit">
													Submit Laporan
												</button>
											</div>
										</FormGroup>
									</form>
								</CardBody>
							</Card>
							{/* END card */}
						</Col>
						<Col xl="3">
							<div className="card card-default">
								<div className="card-body">
									<div className="text-center">
										<h3 className="mt-0">Universitas Satyagama</h3>
										<p>0742/O/1990</p>
									</div>
									<hr />
									<ul className="list-unstyled px-4">
										<li>
											<em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
										</li>
										<li>
											<em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
										</li>
									</ul>
								</div>
							</div>
						</Col>
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}

export default FormStandard;
