ptb-fe/pages/app/sanksi.proses.wizard.js

import React, { Component } from 'react';
import {
    Card,
    CardHeader,
    CardFooter,
    CardBody,
    TabContent,
    TabPane,
    Nav,
    NavItem,
    NavLink,
    Button,
    Row,
    Col,
    Table,
    CustomInput
} from 'reactstrap';
import classnames from 'classnames';

const stepNavitemStyle = {
    backgroundColor: '#fcfcfc'
};

class FormWizardVertical extends Component {
    state = {
        activeStep: '1',
        hisJenisPelanggaran:[],
        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
            }
        ]
    };

    toggleStep = activeStep => () => {
        if (this.state.activeStep !== activeStep) {
            this.setState({
                activeStep
            });
        }
    };

    // handle particular changes on each checkbox
    onHandleChange(listName,index) {
    
        //set state to checkbox and data in promise mode
        this.setState({
            [listName]: this.state[listName].map(
                        (item, i) => (
                            
                                index !== i ? 
                                item : {...item, checked: !this.state[listName][index].checked}
                            ) 
                    )
        });



    };

    // done = () => {
    //     alert('Custom message without form submission.');
    // };

    handleApplyClick = () => {

        const _noSangsi = document.getElementById('noSangsi').value
        
        const _hisJP=[];
        //Get data for filter by checked
        this.state.tbljenisPelanggaran.filter(
            _jp => _jp.checked == true
        ).map(selectedPelanggaran => (
            _hisJP.push(selectedPelanggaran)
        ));
        
        this.state.hisJenisPelanggaran=[];
        this.state.hisJenisPelanggaran.push(
            {
                "noSangsi":_noSangsi,
                "pelanggaran":_hisJP
            }
        )

        console.log("Result hisJenisPelanggaran : ", this.state.hisJenisPelanggaran)
    }

    renderTableData() {
        
            return this.state.tbljenisPelanggaran.map((jp,index) => {
            
                return (
                    <tr>
                        <td><label>{index+1}</label></td>
                        <td>
                            <div className="media align-items-center">
                                <div className="media-body d-flex">
                                    <div>
                                        
                                        <p>{jp.Pelanggaran}</p>
                                        <p>TMT : {jp.TMTBulan} Bulan</p>
                                        <p>Level Pelanggaran : {jp.LabelSangsi}</p>
                                        
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div className="media align-items-center">
                                <div className="media-body d-flex">
                                    <div>
                                        <p>{jp.Sangsi}</p>
                                        <p>Keterangan : {jp.KeteranganSangsi}</p>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div className="checkbox c-checkbox">
                                <label>
                                    {/* <input type="checkbox" checked={this.state.listA[index].checked} onChange={e => this.handleChange('listA', index)}/> */}
                                    <input 
                                            //name="cb"{jp.idPelanggaran}
                                            type="checkbox"
                                            // checked={
                                            //     jp.checked=true
                                            // } 
                                            checked={this.state.tbljenisPelanggaran[jp.idPelanggaran].checked}
                                            //{this.state.listA[0].checked}
                                            onChange={
                                                e => this.onHandleChange('tbljenisPelanggaran',jp.idPelanggaran)
                                            }
                                    />
                                    <span className="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                    </tr>
                )
            })
        //}
     };

    render() {
        return (
            <Card className="card-default">
                {/* <CardHeader>Vertical Example (without validation)</CardHeader> */}
                <CardBody>
                    <Row>
                        <Col xs="4">
                            <Nav pills vertical={true}>
                                <NavItem style={stepNavitemStyle}>
                                    <NavLink
                                        tag="div"
                                        className={classnames({
                                            active: this.state.activeStep === '1'
                                        })}
                                        onClick={this.toggleStep('1')}
                                    >
                                        <h4 className="text-left my-3">1. Penetapan Pelanggaran & Sanksi</h4>
                                    </NavLink>
                                </NavItem>
                                <NavItem style={stepNavitemStyle}>
                                    <NavLink
                                        tag="div"
                                        className={classnames({
                                            active: this.state.activeStep === '2'
                                        })}
                                        onClick={this.toggleStep('2')}
                                    >
                                        <h4 className="text-left my-3">2. Penetapan Nomor Surat Keputusan Sanksi</h4>
                                    </NavLink>
                                </NavItem>
                                <NavItem style={stepNavitemStyle}>
                                    <NavLink
                                        tag="div"
                                        className={classnames({
                                            active: this.state.activeStep === '3'
                                        })}
                                        onClick={this.toggleStep('3')}
                                    >
                                        <h4 className="text-left my-3">3. Tabel Log</h4>
                                    </NavLink>
                                </NavItem>
                            </Nav>
                        </Col>
                        <Col xs="8">
                            <TabContent activeTab={this.state.activeStep} className="border-0">

                                <TabPane tabId="1">

                                    <div className="d-flex">
                                        {/*<Button color="secondary">Previous</Button>*/}
                                        <Button
                                            className="ml-auto"
                                            color="primary"
                                            onClick={this.toggleStep('2')}
                                        >
                                            Next
                                        </Button>
                                    </div>
                                    <hr />
                                    <div className="pt-3 mb-3">
                                            <Card className="card-default">

                                                {/* START table-responsive */}
                                                <Table bordered hover responsive>
                                                    <thead>
                                                        <tr>
                                                            <th>No</th>
                                                            <th>Jenis Pelanggaran</th>
                                                            <th>Sangsi</th>
                                                            <th>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {this.renderTableData()}
                                                    </tbody>
                                                </Table>
                                                {/* END table-responsive */}
                                                <CardFooter>
                                                    <div className="d-flex">

                                                        <div className="ml-auto">
                                                            <div className="input-group float-right">
                                                                <select className="custom-select" id="inputGroupSelect04">
                                                                    <option value="0">Action</option>
                                                                    <option value="1">Simpan</option>
                                                                    {/* <option value="3">Export</option> */}
                                                                </select>
                                                                <div className="input-group-append">
                                                                    <button className="btn btn-secondary" type="button" onClick={(e) => this.handleApplyClick()}>Apply</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </CardFooter>
                                            </Card>
                                        {/* <fieldset>
                                            <h2>Step 2</h2>
                                            <p className="lead">
                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
                                                tincidunt mauris, vitae accumsan arcu justo sit amet
                                                odio.{' '}
                                            </p>
                                        </fieldset> */}
                                    </div>
                                </TabPane>
                                <TabPane tabId="2">
                                    <div className="d-flex">
                                        <Button color="primary" onClick={this.toggleStep('1')}>
                                            Previous
                                        </Button>
                                        <Button
                                            className="ml-auto"
                                            color="primary"
                                            onClick={this.toggleStep('3')}
                                        >
                                            Next
                                        </Button>
                                    </div>
                                    <hr />
                                    <div className="pt-3 mb-3">


                                        <div className="d-flex">
                                            <CustomInput
                                                type="file"
                                                id="exampleCustomFileBrowser2"
                                                name="customFile"
                                                label="File Surat Sanksi"
                                            />
                                        </div>
                                        <hr />
                                        <div className="d-flex">
                                            <div>
                                                <div className="input-group">
                                                    <input className="form-control" type="text" id='noSangsi' placeholder="Nomor Sanksi"/>
                                                </div>
                                            </div>
                                            <div className="ml-auto">
                                                <div className="input-group float-right">
                                                    <select className="custom-select" id="inputGroupSelect04">
                                                        <option value="0">Action</option>
                                                        <option value="1">Simpan</option>
                                                        {/* <option value="3">Export</option> */}
                                                    </select>
                                                    <div className="input-group-append">
                                                        <button className="btn btn-secondary" type="button" onClick={(e) => this.handleApplyClick()}>Apply</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {/* <fieldset>
                                            <h2>Step 1</h2>
                                            <p className="lead">
                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
                                                tincidunt mauris, vitae accumsan arcu justo sit amet
                                                odio.{' '}
                                            </p>
                                        </fieldset> */}
                                    </div>


                                </TabPane>
                                <TabPane tabId="3">
                                    <div className="d-flex">
                                        <Button color="primary" onClick={this.toggleStep('2')}>
                                            Previous
                                        </Button>
                                        {/* <Button
                                            className="ml-auto"
                                            color="primary"
                                            onClick={this.done}
                                        >
                                            Done
                                        </Button> */}
                                    </div>
                                    <hr />
                                    <div className="pt-3 mb-3">
                                        {/* <fieldset>
                                            <h2>Step 3</h2>
                                            <p className="lead">
                                                Nunc pharetra, elit ut lobortis vehicula, nisl metus
                                                tincidunt mauris, vitae accumsan arcu justo sit amet
                                                odio.{' '}
                                            </p>
                                        </fieldset> */}
                                    </div>
                                </TabPane>
                            </TabContent>
                        </Col>
                    </Row>
                </CardBody>
            </Card>
        );
    }
}

export default FormWizardVertical;