@extends('layouts.app')
<style>
    td {
        border: 1px solid #333;
        white-space: nowrap;
    }

    tr.spottr1 td:empty::before {
        content: "-";
    }

    tr td:empty::before {
        content: "-";
    }

    .number {
        text-align: right;
    }

    .spottr {
        font-weight: bold;
    }
</style>
@section('content')
{{--*/ usort($tableGrid, "SiteHelpers::_sort") /*--}}
<div class="page-titles">
    <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>
<div class="card">
    <div class="card-body">
        <div class="toolbar-nav">
            <div class="row">
                <div class="col-md-6"></div>    
            </div>
        </div>

        <!-- Filter Form -->
        <form action="{{ url('dataprodisconsole/tarikdataconsolelkp') }}" method="GET">
            <div class="col-md-12" style="text-align:center">
                Tanggal 
                <input type="date" style="height:30px;width:200px;text-align:center;" name="tgl" value="{{ date('Y-m-d') }}">
                
                <select style="height:30px;width:200px;text-align:center;" name="regional">
                    <option value="">SEMUA</option>
                    <option value="01">SUMATERA 1</option>
                    <option value="02">SUMATERA 2</option>
                    <option value="03">JATENG</option>
                    <option value="04">JATIM 1</option>
                    <option value="05">JATIM 2</option>
                    <option value="06">JATIM 3</option>
                    <option value="07">SULAWESI</option>
                </select>

                <button type="submit" class="btn btn-xs btn-danger">Lihat</button> 
                <button type="button" class="btn btn-xs btn-success" onclick="downloadPDF()">Download PDF</button>
                <button type="button" class="btn btn-xs btn-primary" onclick="exportToExcel()">Download Excel</button>

                <hr>
            </div> 
        </form>
    
        <!-- Tabel Data -->
        <div id="dataTableWrapper" style="overflow-x: auto;">
            <table id="dataTable222">
                <tr>
                    <td>{!! $loaddata !!}</td>
                    <td valign="top">{!! $loaddata2 !!}</td>
                </tr>
            </table>
        </div>
    </div>  
</div>

<!-- Library jsPDF & html2canvas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
function downloadPDF() {
    const { jsPDF } = window.jspdf;

    // Select the content to be converted to PDF
    const content = document.querySelector('.card-body');

    // Use html2canvas to capture the content as an image
    html2canvas(content).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('l', 'mm', 'a4'); // Set orientation to landscape

        // Calculate dimensions to fit the content in the PDF
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

        // Add the image to the PDF
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

        // Save the PDF
        pdf.save('data_landscape.pdf'); // Updated file name
    });
}

function downloadExcel() {
                    const table = document.querySelector('#databaseconsole');
                    const workbook = XLSX.utils.book_new();
                    const worksheet = XLSX.utils.table_to_sheet(table);
                    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

                    // Create a downloadable link
                    const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
                    const blob = new Blob([s2ab(excelData)], { type: "application/octet-stream" });
                    const link = document.createElement("a");
                    link.href = URL.createObjectURL(blob);
                    link.download = "data_console_lhp.xlsx";
                    document.body.appendChild(link);

                    // Trigger download
                    link.click();
                    document.body.removeChild(link);

                    // Helper function to convert string to ArrayBuffer
                    function s2ab(s) {
                        const buf = new ArrayBuffer(s.length);
                        const view = new Uint8Array(buf);
                        for (let i = 0; i < s.length; i++) {
                            view[i] = s.charCodeAt(i) & 0xFF;
                        }
                        return buf;
                    }

                }

                function exportToExcel() {
                    const table = document.getElementById("databaseconsole").outerHTML;
                    const filename = "data_console_lhp.xls";
                    const html = [
                        '<html xmlns:o="urn:schemas-microsoft-com:office:office" ',
                        'xmlns:x="urn:schemas-microsoft-com:office:excel" ',
                        'xmlns="http://www.w3.org/TR/REC-html40">',
                        '<head>',
                        '<!--[if gte mso 9]>',
                        '<xml>',
                        '<' + 'x:ExcelWorkbook>',
                        '<' + 'x:ExcelWorksheets>',
                        '<' + 'x:ExcelWorksheet>',
                        '<' + 'x:Name>Sheet1</' + 'x:Name>',
                        '<' + 'x:WorksheetOptions>',
                        '<' + 'x:DisplayGridlines/>',
                        '</' + 'x:WorksheetOptions>',
                        '</' + 'x:ExcelWorksheet>',
                        '</' + 'x:ExcelWorksheets>',
                        '</' + 'x:ExcelWorkbook>',
                        '</xml>',
                        '<![endif]-->',
                        '</head>',
                        '<body>' + table + '</body>',
                        '</html>'
                    ].join('');

                    const blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    const url = URL.createObjectURL(blob);

                    const a = document.createElement("a");
                    a.href = url;
                    a.download = filename;
                    a.click();

                    URL.revokeObjectURL(url);
                }
</script>
@stop