import React, { Component } from 'react';
//import { withRouter } from 'next/router'
import ContentWrapper from '@/components/Layout/ContentWrapper';
import { Row, Col, Card, Button, CardHeader, CardFooter, Table, Nav, NavItem, NavLink, TabContent, TabPane, Pagination, PaginationItem, PaginationLink, ListGroup, ListGroupItem, Dropdown, DropdownMenu, DropdownToggle, DropdownItem,FormGroup  } from 'reactstrap';
//import { Row, Col, Card, CardHeader, CardFooter, Table, Pagination, PaginationItem, PaginationLink } from 'reactstrap';

// import { Row, Col, Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import Select from 'react-select';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

import { GetServerSideProps, NextPage } from 'next';
import ErrorPage from 'next/error';
import fetch from 'node-fetch';

import https from 'https';

const containerStyle = {
    width: '100%',
    height: '155px'
};

import FormWizardVertical from './pt.wizard.vertical.js';

var jenisPelanggaran = [];

//const qpt_id = {};

//http://localhost:3000/app/profile?ptId=0BCE4DB7-B207-445D-8D03-0C54B7688252

// Demo with custom style
const DemoMapCustomStyle = props => (
        <GoogleMap mapContainerStyle={containerStyle} zoom={14} center={props.location} options={{ styles: props.mapStyles }}>
        <Marker position={props.location} />
        </GoogleMap>
)

const styleHeaderText = {
    color: 'brown'
}

class Profile extends Component {

    toggleTab = tab => {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

    
    static async getInitialProps({ query }) {

        

        const httpsAgent = new https.Agent({
            rejectUnauthorized: false,
          });
        
          //console.log('post agent : ');

          
         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/707C3895-B546-4DA5-A6A7-EFE7461A7C7E', { 
         //const res = await fetch('https://api.kemdikbud.go.id:8243/pddikti/1.2/pt/'+query.ptId, { 
        //     method: 'get', 
        //     headers: new Headers({
        //       'Authorization': 'Bearer 5b62f743-eef2-3370-8c66-6951b2e9c2c5', 
        //       'Accept': 'application/json'
        //     }),
        //     agent: httpsAgent
        //   }
        //  )

        //console.log('res : ', res);
         
        //const json = await res.json();
        const json = [
            {
                "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
                "kode": "031031",
                "kode_satker": null,
                "nama": "Universitas Satyagama",
                "nama_singkat": "USG",
                "sk_pendirian": "0742/O/1990",
                "tgl_sk_pendirian": "1990-12-22",
                "sk_operasional": null,
                "tgl_sk_operasional": null,
                "status": "A",
                "alamat": {
                    "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
                    "rt": null,
                    "rw": null,
                    "dusun": null,
                    "kelurahan": "-",
                    "kode_pos": "11730",
                    "kab_kota": {
                        "id": "016200",
                        "nama": "Kota Jakarta Barat"
                    }
                },
                "propinsi": {
                    "id": "010000",
                    "nama": "Prov. D.K.I. Jakarta"
                },
                "telepon": "(021) 5452377-78",
                "faksimile": "(021) 54391325",
                "website": "www.satyagama.ac.id",
                "email": "info@satyagama.ac.id",
                "status_milik": {
                    "id": "3",
                    "nama": "Yayasan"
                },
                "pembina": {
                    "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
                    "nama": "LLDIKTI III"
                },
                "bentuk_pendidikan": {
                    "id": "23",
                    "nama": "Universitas"
                },
                "last_update": "2021-12-08",
                "negara": {
                    "id": "ID",
                    "nama": "Indonesia"
                },
                "pimpinan": {
                    "id": "D3D20B3D-0FBE-4706-8A70-67C4C09C8FBE",
                    "nama": "DEWI SULISTYANI",
                    "tmt_sk_pengangkatan": "2021-03-17",
                    "tst_sk_pengangkatan": "2025-03-17"
                }
            }
        ];
        console.log('json : ', json);
        // const json = 
        //                 {
        //                     "id": "0BCE4DB7-B207-445D-8D03-0C54B7688252",
        //                     "kode": "031031",
        //                     "kode_satker": null,
        //                     "nama": "Universitas Satyagama",
        //                     "nama_singkat": "USG",
        //                     "sk_pendirian": "0742/O/1990",
        //                     "tgl_sk_pendirian": "1990-12-22",
        //                     "sk_operasional": null,
        //                     "tgl_sk_operasional": null,
        //                     "status": "N",
        //                     "alamat": {
        //                     "jalan": "Jalan Kamal Raya No 2-A Cengkareng",
        //                     "rt": null,
        //                     "rw": null,
        //                     "dusun": null,
        //                     "kelurahan": "-",
        //                     "kode_pos": "11730",
        //                     "kab_kota": {
        //                         "id": "016200",
        //                         "nama": "Kota Jakarta Barat"
        //                     }
        //                     },
        //                     "propinsi": {
        //                     "id": "010000",
        //                     "nama": "Prov. D.K.I. Jakarta"
        //                     },
        //                     "telepon": "(021) 5452377-78",
        //                     "faksimile": "(021) 54391325",
        //                     "website": "www.satyagama.ac.id",
        //                     "email": "info@satyagama.ac.id",
        //                     "status_milik": {
        //                     "id": "3",
        //                     "nama": "Yayasan"
        //                     },
        //                     "pembina": {
        //                     "id": "728989DD-251E-4516-BE2C-BA17A93A5C51",
        //                     "nama": "LLDIKTI III"
        //                     },
        //                     "bentuk_pendidikan": {
        //                     "id": "23",
        //                     "nama": "Universitas"
        //                     },
        //                     "last_update": "2021-08-22",
        //                     "negara": {
        //                     "id": "ID",
        //                     "nama": "Indonesia"
        //                     }
        //             }



        return { data: json[0] }
      }

    state = {
        dropdownOpen: false,
        dropdownOpenUpload: false,
        timelineAlt: false,
        location: { lat: 33.7906731, lng: -117.8357194 },
        customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}],
        listA: [],
        //isChecked:true,
        selectedOptionMulti: [],
        activeTab: 'tasks'
        // 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
        //     }
        // ]
    }

    toggleDD = () => this.setState({
        dropdownOpen: !this.state.dropdownOpen
    })

    toggleDDUpload = () => this.setState({
        dropdownOpenUpload: !this.state.dropdownOpenUpload
    })

    toggleTimeline = e => {
        this.setState({
            timelineAlt: e.target.checked
        })
    }

    // // 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}
    //                         ) 
    //                 )
    //     });



    // }


    // state = {
    //     location: { lat: 33.7906731, lng: -117.8357194 },
    //     customStyle: [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}]
    // }

    
    // renderTableData() {
    //     //const dataTable = this.props.data;
    //     //if (dataTable === true ) {


    //         return this.state.tbljenisPelanggaran.map((jp,index) => {
            
    //         return (
    //                 // <tr>
    //                 //     <td>
    //                 //         <label>{index+1}</label>
    //                 //     </td>
    //                 //     <td>
    //                 //         <div className="media align-items-center">
    //                 //             <a className="mr-3" href="">
    //                 //                 <img className="img-fluid rounded thumb64" src="/static/img/dummy-search.png" alt="Dummy"/>
    //                 //             </a>
    //                 //             <div className="media-body d-flex">
    //                 //                 <div>
    //                 //                     <h4 className="m-0">{pt.nama}</h4>
    //                 //                     <small className="text-muted">{pt.sk_pendirian} - {pt.website} - {pt.email}</small>
    //                 //                     <p>{pt.alamat.jalan}</p>
    //                 //                 </div>
    //                 //                 <div className="ml-auto">
    //                 //                     <Button color="info" size="sm" onClick={(e) => this.handleClick(e, pt.id)}>View</Button>
    //                 //                 </div>
    //                 //             </div>
    //                 //         </div>
    //                 //     </td>
    //                 // </tr>
    //             <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>
    //         )
    //         })
    //     //}
    //  }

/*     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.push(
            {
                "noSangsi":_noSangsi,
                "pelanggaran":_hisJP
            }
        )

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

    render() {

        const { selectedOptionMulti } = this.state;

        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">{this.props.data.nama}</h3>
                        <p>{this.props.data.website}</p>
                        <p>{this.props.data.sk_pendirian}</p>
                        <p>{this.props.data.alamat.jalan}</p>
                    </div>
                </div>
                {/* <div className="text-center bg-gray-dark p-3 mb-4">
                    <Row>
                        <Col xs="4" className="br">
                            <h3 className="m-0">400</h3>
                            <p className="m-0">
                                <span className="d-none d-md-inline">Profile</span>
                                <span>Views</span>
                            </p>
                        </Col>
                        <Col xs="4" className="br">
                            <h3 className="m-0">2000</h3>
                            <p className="m-0">Likes</p>
                        </Col>
                        <Col xs="4">
                            <h3 className="m-0">100</h3>
                            <p className="m-0">Following</p>
                        </Col>
                    </Row>
                </div> */}
                {/* START card */}
                <div className="p-3">
                    {/* <Card className="card-default">
                        <CardHeader> */}
                                            {/* START panel tab */}
                {/* <div className="card card-transparent"> */}
                    <Nav tabs justified>
                        <NavItem>
                            <NavLink className={ this.state.activeTab === 'tasks' ? 'active':'' }
                                onClick={() => { this.toggleTab('tasks'); }}
                            >
                                <em className="far fa-clock fa-fw"></em> Pelanggaran
                            </NavLink>
                        </NavItem>
                        {/* <NavItem>
                            <NavLink className={ this.state.activeTab === 'trans' ? 'active':'' }
                                onClick={() => { this.toggleTab('trans'); }}
                            >
                                <em className="fas fa-info-circle"></em> Action Jenis Pelanggaran
                            </NavLink>
                        </NavItem> */}
                        <NavItem>
                            <NavLink className={ this.state.activeTab === 'wizard' ? 'active':'' }
                                onClick={() => { this.toggleTab('wizard'); }}
                            >
                                <em className="fas fa-info-circle"></em> Perbaikan & Sanggahan
                            </NavLink>
                        </NavItem>
                    </Nav>

                    
                    <TabContent activeTab={this.state.activeTab} className="bg-white p-0">
                        <TabPane tabId="tasks">
                            <div className="p-3">
                                {/* START card */}
                                <Card className="card-default">
                                    <CardHeader>Daftar Pelanggaran</CardHeader>
                                    {/* START table-responsive */}
                                    <Table striped bordered hover responsive>
                                        <thead>
                                            <tr>
                                                <th>ID Laporan</th>
                                                <th>UUID Pelanggaran</th>
                                                <th>Progres</th>
                                                <th>Aktivitas Terakhir</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
                                                    <div className="d-flex align-items-center mb-3">BI:54678</div>
                                                </td>
                                                <td>
                                                    {/* <div className="ml-auto">ABCDEFGH012345</div> */}
                                                    <div className="d-flex align-items-center mb-3">ABCDEFGH012345</div>
                                                </td>
                                                <td>
                                                    <div className="progress progress-sm">
                                                        <div className="progress-bar progress-bar-striped bg-success" role="progressbar" style={{width: '10%'}}>
                                                            {/* <span className="sr-only">80% Complete</span> */}
                                                            {/* <div className="radial-bar radial-bar-50 radial-bar-xs" data-label="50%"></div> */}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div className="d-flex align-items-center mb-3">05/05/2021</div>
                                                    {/* <div className="ml-auto">05/05/2021</div> */}
                                                </td>
                                                <td>
                                                    <div className="d-flex align-items-center mb-3">
                                                        <Button color="info" size="sm" onClick={(e) => this.toggleTab('wizard')}>Lanjutkan</Button>
                                                        {/* <Button color="info" size="sm">Lanjutkan</Button> */}
                                                    </div>
                                                </td>

                                            </tr>
                                           
                                        </tbody>
                                    </Table>
                                    {/* END table-responsive */}
                                </Card>
                                {/* END card */}
                                                            
                            </div>
                        </TabPane>
                        
                        <TabPane tabId="wizard" className="p-3">
                            <FormWizardVertical />
                        </TabPane>
                    </TabContent>
                {/* </div> */}
                {/* END panel tab */}
                    {/* </CardHeader>
                </Card> */}
                </div>
                {/* START card */}

            </ContentWrapper>
            );
    }

}

export default Profile;