import React, { Component } from 'react';
import SignatureCanvas from 'react-signature-canvas'


class ComponentToPrint extends React.Component {
    render() {
        return (
            <div className='BA-div'>
                <div className='BA-logo'>
                    <img className='BA-logo' src="/static/img/logo-single-1-login.png" alt="logo" />
                </div>
                <h3 className='BA-header'>LAPORAN HASIL EVALUASI DAN PEMBAHASAN</h3>
                <h3 className='BA-header'>UNIVERSITAS SATYAGAMA</h3>
                <div className='BA-body'>
                    <p className='BA-body'>
                        Pada hari ini …….., tanggal …….. bulan …….. tahun …….., bertempat di …….., telah dilakukan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara …….., yang dihadiri oleh:
                    </p>
                    <div className='BA-body'>
                        <ol>
                            <li>.....</li>
                            <li>.....</li>
                            <li>.....</li>
                        </ol>
                    </div>
                </div>
                <div className='BA-body'>
                    <p className='BA-body'>
                        Berdasarkan rapat evaluasi dan pembahasan dugaan pelanggaran penyelenggaraan oleh perguruan tinggi dan/atau badan penyelenggara …….., disampaikan sebagai berikut:
                    </p>
                    <div className='BA-body'>
                        <ol>
                            <li>Telah dibacakan Berita Acara Evaluasi Kinerja Perguruan Tinggi …….., tanggal ……..;</li>
                            <li>Telah dilakukan pembahasan rekomendasi mengenai fakta-fakta yang ditemukan Tim EKPT Ditjen Diktiristek, dengan temuan sebagai berikut:</li>
                            {/* <div style={{ overflow: "auto" }}> */}
                            <table className='table-a'>
                                <tbody>
                                    <tr>
                                        <th rowspan="2">NO</th>
                                        <th rowspan="2">NAMA DAN IZIN PRODI</th>
                                        <th colspan="3">PELANGGARAN TERHADAP PERMENDIKBUD NO.7 TAHUN 2020</th>
                                        <th rowspan="2">SIMPULAN</th>
                                        <th rowspan="2">REKOMENDASI</th>
                                    </tr>
                                    <tr>
                                        <th>PASAL</th>
                                        <th>BUTIR PELANGGARAN</th>
                                        <th>DESKRIPSI PELANGGARAN</th>
                                    </tr>
                                    <tr>
                                        <td>......</td>
                                        <td>......</td>
                                        <td>......</td>
                                        <td>.....</td>
                                        <td>......</td>
                                        <td>......</td>
                                        <td>......</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                </tbody>
                            </table>
                            {/* </div> */}

                            <li>Temuan Lain:
                                <ol type="a">
                                    <li>......</li>
                                    <li>......</li>
                                </ol>
                            </li>
                            <li>Hal-hal yang memberatkan, sebagai berikut:
                                <ol type="a">
                                    <li>......</li>
                                    <li>......</li>
                                </ol>
                            </li>
                            <li>hal-hal yang meringankan, sebagai berikut:
                                <ol type="a">
                                    <li>......</li>
                                    <li>......</li>
                                </ol>
                            </li>
                            <li>
                                Berdasarkan pembahasan yang dilakukan, disepakati untuk merekomendasikan <strong>“Sanksi Administratif berupa …………………………..”.</strong>
                            </li>
                        </ol>
                    </div>
                    <p className='BA-body'>
                        Demikian Laporan Evaluasi dan Pembahasan ini dibuat dengan sesungguhnya dan telah dibaca dan dicermati oleh peserta rapat yang hadir.
                    </p>
                    <table className='demo'>
                        <tbody>
                            <tr>
                                <th colspan="4">PESERTA RAPAT PENYUSUNAN REKOMENDASI</th>
                            </tr>
                            <tr>
                                <td contenteditable='true'>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                            <tr>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                                <td>Nama</td>
                                <td>
                                    <SignatureCanvas penColor='black' canvasProps={{ width: 200, height: 100, className: 'sigCanvas' }} />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="footer">
                    <span>*LAPORAN HASIL EVALUASI DAN PEMBAHASAN …………. – …bulan&tahun…</span>
                    {/* <span class="custom-footer-page-number">Number: </span> */}
                </div>
            </div >

        );
    }
}

export default ComponentToPrint