import React, { Component } from 'react';
import {
    Card,
    CardHeader,
    CardFooter,
    CardBody,
    TabContent,
    FormGroup,
    TabPane,
    Input,
    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() {
        
    };

    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. Perbaikan</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. Sanggahan</h4>
                                    </NavLink>
                                </NavItem>
                            </Nav>
                        </Col>
                        <Col xs="8">
                            <TabContent activeTab={this.state.activeStep} className="border-0">

                                <TabPane tabId="1">
                                    {/* <div className="pt-3 mb-3"> */}
                                    <div>
                                        {/* START card */}
                                        <Card className="card-default">
                                            <CardHeader>
                                                <label>Form Perbaikan Sanksi</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 Sanksi</label>
                                                        <div className="col-md-10">
                                                            <Input type="text"/>
                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
                                                        </div>
                                                    </FormGroup>
                                                    {/* </fieldset> */}
                                                    <FormGroup row>
                                                        <label className="col-md-2 col-form-label">Keterangan Perbaikan</label>
                                                        <div className="col-md-10">
                                                            <Input type="textarea"/>
                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
                                                            <span className="form-text">Deskripsi perbaikan 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="customFile" class="custom-file-input"></input> */}
                                                            <CustomInput
                                                                type="file" multiple
                                                                id="exampleCustomFileBrowser"
                                                                name="customFile"
                                                            />
                                                            <span className="form-text">Multiple files upload</span>
                                                        </div>
                                                    </FormGroup>
                                                    <FormGroup row>
                                                        <div className="col-xl-10">
                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Perbaikan</button>
                                                        </div>
                                                    </FormGroup>
                                                </form>
                                            </CardBody>
                                        </Card>
                                        {/* END card */}
                                    </div>
                                </TabPane>
                                <TabPane tabId="2">
                                    {/* <div className="pt-3 mb-3"> */}
                                    <div>   
                                        {/* START card */}
                                        <Card className="card-default">
                                            <CardHeader>
                                                <label>Form Sanggahan Sanksi</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 Sanksi</label>
                                                        <div className="col-md-10">
                                                            <Input type="text"/>
                                                            <span className="form-text">Nomor sanksi akan digenerate otomatis dari sistem</span>
                                                        </div>
                                                    </FormGroup>
                                                    {/* </fieldset> */}
                                                    <FormGroup row>
                                                        <label className="col-md-2 col-form-label">Keterangan Sanggahan</label>
                                                        <div className="col-md-10">
                                                            <Input type="textarea"/>
                                                            {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
                                                            <span className="form-text">Deskripsi Sanggahan 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="customFile" class="custom-file-input"></input> */}
                                                            <CustomInput
                                                                type="file" multiple
                                                                id="exampleCustomFileBrowser"
                                                                name="customFile"
                                                            />
                                                            <span className="form-text">Multiple files upload</span>
                                                        </div>
                                                    </FormGroup>
                                                    <FormGroup row>
                                                        <div className="col-xl-10">
                                                            <button className="btn btn-sm btn-primary" type="submit">Submit Sanggahan</button>
                                                        </div>
                                                    </FormGroup>
                                                </form>
                                            </CardBody>
                                        </Card>
                                        {/* END card */}
                                    </div>


                                </TabPane>

                            </TabContent>
                        </Col>
                    </Row>
                </CardBody>
            </Card>
        );
    }
}

export default FormWizardVertical;
