@extends('layout.app')

@section('content')
<div id="print">
<div class="w-full mb-5 no-print">
    <div class="modal-content bg-white p-4 rounded-lg">
        <div class="flex justify-between items-center gap-5">
            <form class="w-1/2">
                <div class="flex bg-gray-300 rounded-lg mb-5">
                    <label for="start_date" class="text-sm font-medium text-gray-900 w-1/3 p-2.5 flex justify-start items-center whitespace-nowrap">Tanggal Awal</label>
                    <input type="date" id="start_date" name="start_date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>    
                <div class="flex bg-gray-300 rounded-lg mb-5">
                    <label for="end_date" class="text-sm font-medium text-gray-900 w-1/3 p-2.5 flex justify-start items-center whitespace-nowrap">Tanggal Akhir</label>
                    <input type="date" id="end_date" name="end_date" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" required />
                </div>   
                <div class="flex justify-end items-center">
                    <button type="button" onclick="fetchData()" class="text-white bg-yellow-500 hover:bg-yellow-400 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Cari</button>
                </div>           
            </form>            
            <div class="w-1/2">
                <div class="flex bg-gray-300 rounded-lg mb-5">
                    <label for="pemasukan" class="text-sm font-medium text-gray-900 w-1/3 p-3 flex justify-start items-center whitespace-nowrap">Pemasukan</label>
                    <div id="pemasukan" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3"></div>
                </div>    
                <div class="flex bg-gray-300 rounded-lg mb-5">
                    <label for="modal" class="text-sm font-medium text-gray-900 w-1/3 p-3 flex justify-start items-center whitespace-nowrap">Modal</label>
                    <div id="modal" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3"></div>
                </div>    
                <div class="flex bg-gray-300 rounded-lg">
                    <label for="laba" class="text-sm font-medium text-gray-900 w-1/3 p-3 flex justify-start items-center whitespace-nowrap">Laba</label>
                    <div id="laba" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3"></div>
                </div>    
            </div>                                
        </div>
    </div>
</div>

<div class="w-full h-full bg-white rounded-lg shadow-lg p-5">
    <div class="py-5" >   
        <div class="pb-4 bg-white flex justify-between no-print">
            <div class="flex">
                <button onclick="copyToClipboard()" class="bg-gray-500 hover:bg-gray-400 text-white py-1 px-5 rounded-2xl mr-2">
                    Copy
                </button>
                <button onclick="exportToExcel()" class="bg-gray-500 hover:bg-gray-400 text-white py-1 px-5 rounded-2xl mr-2">
                    Excel
                </button>
                <button onclick="exportToCsv()" class="bg-gray-500 hover:bg-gray-400 text-white py-1 px-5 rounded-2xl mr-2">
                    Csv
                </button>
                <!-- <button onclick="exportToPdf()" class="bg-gray-500 hover:bg-gray-400 text-white py-1 px-5 rounded-2xl mr-2">
                    PDF
                </button> -->
                <button onclick="printTable()" class="bg-gray-500 hover:bg-gray-400 text-white py-1 px-5 rounded-2xl mr-2">
                    Print / PDF
                </button>
            </div>
        </div>        
            <table id="table" class="w-full">
                <thead class="bg-gray-200">
                    <tr class="text-left">
                        <th class="p-3">No</th>
                        <th class="p-3">Tanggal</th>
                        <th class="p-3">Pembayaran</th>
                        <th class="p-3">Kode</th>
                        <th class="p-3">No. Transaksi</th>
                        <th class="p-3">Nama Barang</th>
                        <th class="p-3">Qty</th>
                        <th class="p-3">Modal</th>
                        <th class="p-3">Harga Jual</th>
                        <th class="p-3">Laba</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <nav class="no-print flex items-center flex-column flex-wrap md:flex-row justify-between pt-4" aria-label="Table navigation">
                <span id="pagination-info" class="text-sm font-normal text-gray-500 mb-4 md:mb-0 block w-full md:inline md:w-auto"></span>
                <ul id="pagination" class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
                    <li>
                        <a href="#" onclick="previousPage()" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg">Previous</a>
                    </li>
                    <li>
                        <a href="#" onclick="nextPage()" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg">Next</a>
                    </li>
                </ul>
            </nav>
            
            <h1 style="margin-top:50px">Grafik Penjualan</h1>
            <div style="margin-top:30px"  id="tester" style="width:100%;height:250px;"></div>

    </div>
</div>
</div>
@endsection

@section('script')
<script>
    
    
    window.addEventListener('DOMContentLoaded', function() {
        fetchData();
    });

    function calculatePemasukan(data) {
        let pemasukan = 0;
        data.forEach(item => {
            pemasukan += item.pemasukan;
        });
        return pemasukan;
    }

    function calculateModal(data) {
        let modal = 0;
        data.forEach(item => {
            modal += item.modal;
        });
        return modal;
    }

    function calculateLaba(data) {
        let laba = 0;
        data.forEach(item => {
            laba += item.laba_kotor;
        });
        return laba;
    }

    function copyToClipboard() {
        var range = document.createRange();
        range.selectNode(document.getElementById("table"));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        alert("Table copied to clipboard!");
    }

    function exportToExcel() {
        const table = document.getElementById("table");
        const filteredTable = table.cloneNode(true);
        const lastColumnHeader = filteredTable.querySelector("thead th:last-child");
        // if (lastColumnHeader) {
        //     lastColumnHeader.remove();
        // }
        const wb = XLSX.utils.table_to_book(filteredTable);
        XLSX.writeFile(wb, "table.xlsx");
    }

    function exportToCsv() {
        const table = document.getElementById("table");
        const csv = [];
        const rows = table.querySelectorAll("tr");

        rows.forEach((row, rowIndex) => {
            const rowData = [];
            const cols = row.querySelectorAll("td, th");
            cols.forEach((col, colIndex) => {
                if (rowIndex !== 0 || colIndex !== cols.length - 1) {
                    rowData.push(col.innerText);
                }
            });
            csv.push(rowData.join(","));
        });

        const csvContent = csv.join("\n");
        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });
        saveAs(blob, "table.csv");
    }

    function exportToPdf() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();

    doc.setFontSize(8);
    let y = 10;

    // Ambil semua data dari DataTables
    const table = $('#table').DataTable();
    const data = table.rows().data();

    data.each(function (row, index) {
        let x = 8;
        row.forEach(function (cell, cellIndex) {
            // Skip the last cell if it's a <th> element
            if (cellIndex === row.length - 1 && index === 0) {
                return;
            }
            doc.text(cell.toString(), x, y);
            x += 20;
        });
        y += 10;
    });

    doc.save("table.pdf");
}

   

    function printTable() {
    var prtContent = document.getElementById("print");

    var logoUrl = 'http://127.0.0.1:8000/logo.png'; // Ganti dengan URL logo perusahaan Anda

    var css = `
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <style>
            @media print {
                .no-print, .modebar { display: none; }
                table {
                    width: 100%;
                    border-collapse: collapse;
                }
                th, td {
                    border: 1px solid #ddd;
                    padding: 8px;
                }
                th {
                    background-color: #f2f2f2;
                    text-align: left;
                }
                tr:nth-child(even) {
                    background-color: #f9f9f9;
                }
                tr:hover {
                    background-color: #ddd;
                }
                .header {
                    text-align: center;
                    margin-bottom: 20px;
                }
                .header h2 {
                    margin: 5px 0;
                }
                .header p {
                    margin: 0;
                }
                .logo {
                    text-align: center;
                    margin-bottom: 10px;
                }
                .logo img {
                    max-width: 100%; /* Sesuaikan ukuran gambar sesuai kebutuhan */
                    height: auto;
                }
                .plotly .legend {
                    position: relative !important; /* Pastikan legenda berada dalam tata letak yang tepat */
                    top: 0 !important;
                    left: 0 !important;
                }
            }
        </style>
    `;

    var scripts = `
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"><\/script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"><\/script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><\/script>
    `;

    var header = `
        <html>
        <head>
            <title>Cetak Laporan</title>
            ${css}
        </head>
        <body>
            <div class="logo">
                <img style="width: 100%;" src="${logoUrl}" alt="Logo Perusahaan">
            </div>
            <div class="header">
                <h2>Laporan Penjualan</h2>
                <p>Tanggal Awal: ${$('#start_date').val()} - Tanggal Akhir: ${$('#end_date').val()}</p>
                <p>Pemasukan: ${$('#pemasukan').text()}</p>
                <p>Modal: ${$('#modal').text()}</p>
                <p>Laba: ${$('#laba').text()}</p>
            </div>
            ${prtContent.innerHTML}
            ${scripts}
            <script>
                window.onload = function() {
                    window.focus();
                    window.print();
                    window.close();
                };
            <\/script>
        </body>
        </html>
    `;

    var newTab = window.open();
    newTab.document.write(header);
    newTab.document.close();
}





    function fetchData() {
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        const searchQuery = $('#search').val();
        
        $.ajax({
            url: '{{ route('laporan.pembayaran')}}',
            type: 'GET',
            dataType: 'json',
            data: {
                page: currentPage,
                per_page: itemsPerPage,
                search: searchQuery,
                start_date: startDate,
                end_date: endDate
            },
            success: function(data) {
                if (Array.isArray(data.message)) {
                    renderData(data.message);

                    const modalValue = calculateModal(data.message);
                    const labaValue = calculateLaba(data.message);
                    const pemasukanValue = calculatePemasukan(data.message);
                    
                    $('#pemasukan').text('IDR ' + new Intl.NumberFormat('id-ID').format(labaValue));
                    $('#modal').text('IDR ' + new Intl.NumberFormat('id-ID').format(modalValue));
                    $('#laba').text('IDR ' + new Intl.NumberFormat('id-ID').format(labaValue - modalValue));

                    updatePagination(data.message);

                    var trace1 = {
                        x: data.label,
                        y: data.grafik_modal,
                        name: 'Jumlah Modal',
                        type: 'bar',
                        hovertemplate: 'Rp%{y:,.0f}<extra></extra>' // Format hover text
                    };

                    var trace2 = {
                        x: data.label,
                        y: data.grafik_omset,
                        name: 'Jumlah Pemasukan',
                        type: 'bar',
                        hovertemplate: 'Rp%{y:,.0f}<extra></extra>' // Format hover text
                    };

                    var trace3 = {
                        x: data.label,
                        y: data.grafik_pendapatan,
                        name: 'Jumlah Laba',
                        type: 'bar',
                        hovertemplate: 'Rp%{y:,.0f}<extra></extra>' // Format hover text
                    };

                    var data = [trace1, trace2, trace3];

                    var layout = {
                        barmode: 'group',
                        yaxis: {
                            tickprefix: 'Rp',
                            tickformat: ',.0f'
                        },
                        hovermode: 'x unified',
                        legend: {
                            x: 0.5,
                            xanchor: 'center',
                            y: -0.1,
                            yanchor: 'top',
                            orientation: 'h'
                        }
                        
                    };

                    Plotly.newPlot('tester', data, layout);


                } else {
                    alert(data.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error fetching data:', error);
            }
        });
    }

    function renderData(data) {
        const tableBody = document.querySelector('#table tbody');
        tableBody.innerHTML = '';

        data.forEach((item, index) => {
            function formatDateTime(dateTimeString) {
                const date = new Date(dateTimeString);
                const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
                const formattedDate = date.toLocaleString(undefined, options);
                return formattedDate.replace(',', '');
            }

            const row = `
                <tr class="text-left border-b border-gray-200">
                    <td class="p-3">${index + 1}</td>
                    <td class="p-3">${formatDateTime(item.tanggal)}</td>
                    <td class="p-3">${item.pembayaran}</td>
                    <td class="p-3">${item.no_transaksi}</td>
                    <td class="p-3">${item.kode}</td>
                    <td class="p-3">${item.nama_barang}</td>
                    <td class="p-3">${item.qty}</td>
                    <td class="p-3">IDR ${new Intl.NumberFormat('id-ID').format(item.modal)}</td>
                    <td class="p-3">IDR ${new Intl.NumberFormat('id-ID').format(item.laba_kotor)}</td>
                    <td class="p-3">IDR ${new Intl.NumberFormat('id-ID').format(item.laba)}</td>
                   
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', row);
        });
    }
    
    function editData(id) {
        const baseUrl = "{{ route('kategori.update', ['id' => '__ID__']) }}";
        $.ajax({
            url: baseUrl.replace('__ID__', id),
            type: 'GET',
            success: function(response) {
                $('#id').val(response.message.id);
                $('#nama').val(response.message.nama);
                toggleModal();
            },
            error: function(error) {
                console.error('Error getting data:', error.responseText);
            }
        });
    }

    function deleteData(id) {
        const baseUrl = "{{ route('kategori.delete', ['id' => '__ID__']) }}";
        if (confirm('Apakah anda yakin ingin menghapus data ini?')) {
            $.ajax({
                url: baseUrl.replace('__ID__', id),
                type: 'GET',
                success: function(response) {
                    alert(response.message);
                    fetchData();
                },
                error: function(error) {
                    console.error('Error getting data:', error.responseText);
                }
            });
        }
    }
</script>
@endsection