@include('layouts.header')

<style>
    @page {
        size: auto;
        margin: 0;
    }

    @media print {
        body {
            color: black;
            -webkit-print-color-adjust: exact;
        }

        #downloadPDF {
            display: none;
        }

        .page-branch {
            display: table-row !important;
        }

        #back {
            display: none;
        }

        #test,
        #printButton,
        #back,
        .excelButton {
            display: none;
        }

        .page-break {
            page-break-before: always;
        }

    }

    .page-branch {
        display: none;
    }

    @media screen and (max-width: 800px) {
        #printButton {
            display: none;
        }

        #back {
            display: none;
        }
    }

    /* Ensure the border is always displayed */
    .bordered-table {
        border: 3px solid black;
        border-collapse: collapse;
    }

    .bordered-table tbody {
        border-bottom: 2px solid black;
    }

    .bordered-table td {
        border: none;
    }
</style>


<div class="container" id="content" style="font-size: small; padding: 20px;">
    {{-- <div id="downloadPDF" class="btn btn-primary" style="width: 65px">PDF</div> --}}
    <a href="{{ url('/branch_get', ['id' => $branch->id, 'catagory' => $cat]) }}" id="back" class="btn btn-danger"
        style="width: 65px">Back</a>
    <div class="mt-5" style="border: 3px solid black;"></div>
    <div class="row">
        <h5 class="text-left text-primary col">

            {{-- @foreach ($remittances as $key => $remittance)
            @if ($key == '0')
            @if ($remittance->branch == $branch->id) --}}
            {{ $branch->name }}
            {{-- @endif
            @endif
            @endforeach --}}
        </h5>
        <h5 class="text-right text-primary col">
            @if ($start_date && $end_date)
            {{ \Carbon\Carbon::parse($start_date)->format('d/m/Y') . ' - ' . \Carbon\Carbon::parse($end_date)->format('d/m/Y') }}
            @else
            {{ Carbon\Carbon::today()->format('d/m/Y') }}
            @endif
        </h5>
    </div>
    <div style="border: 3px solid black;"></div>

    <table class="table mt-3" style="border: none; border-collapse: collapse; width: 100%;">
        @php
        $total = 0;
        $totalKyatAmount = 0;
        $totalRinggit = 0;
        $totalRate = 0;
        @endphp
        @foreach ($remittances as $key => $remittance)
        @php
        $totalKyatAmount += $remittance->kyat_amount;
        $totalRinggit += $remittance->dollar_amount;
        $totalRate += $remittance->rate;
        @endphp
        <tbody style="border-bottom: 2px solid black;">
            <tr>
                <td style="border: none;font-size: 17px;">{{ $key + 1 }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->transaction_id }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->receiver_name }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->receiver_phone }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->bank_name ?? '' }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->bank_no ?? '' }}</td>
                <td style="border: none;font-size: 17px;color: red;font-weight: bold;">
                    {{ number_format($remittance->kyat_amount) }}
                </td>
            </tr>
            <tr>
                <td style="border: none;font-size: 17px;"></td>
                <td style="border: none;font-size: 17px;">{{ $remittance->sender_name }}</td>
                <td style="border: none;font-size: 17px;">{{ $remittance->receiver_NRC }}</td>
                <td colspan="4" style="border: none;font-size: 17px;">
                    {{ $remittance->receiver_address ?? 'ဖုန်းဆက်ပြီးချိန်းပေးရန်' }}
                </td>
            </tr>
            {{-- show border --}}
            <!-- <tr>
                <td style="border: none;"></td>
            </tr> -->
        </tbody>
        @endforeach
        <tfoot style="border: none;">
            <tr>
                <td style="border: none;"></td>
                <td style="border: none;font-size: 17px">Total Number : ({{ $total += count($remittances) }})</td>
                <td style="border: none;font-size: 17px">Kyat : {{ number_format($totalKyatAmount) }}</td>
                <!-- <td style="border: none;font-size: 20px">Ringgit : {{ number_format($totalRinggit) }}</td> -->
                <!-- <td style="border: none;font-size: 20px">Rate : {{ number_format($totalRate) }}</td> -->
            </tr>
        </tfoot>
    </table>
</div>

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script> --}}
<script src="{{ asset('locallink/js/bundle.min.js') }}"></script>
<script src="{{ asset('locallink/js/canvas.min.js') }}"></script>
<script src="{{ asset('locallink/js/jspdf.min.js') }}"></script>
<script>
    document.getElementById('downloadPDF').addEventListener('click', function() {
        // Select the element to be converted to PDF
        const element = document.getElementById('content');

        document.getElementById('downloadPDF').style.display = 'none';
        document.getElementById('back').style.display = 'none';

        setTimeout(function() {
            document.getElementById('downloadPDF').style.display = 'inline-block';
            document.getElementById('back').style.display = 'inline-block';
        }, 2000);

        // Options for the PDF generation
        const options = {
            margin: [0, 0, 0, 0],
            filename: 'document.pdf',
            image: {
                type: 'jpeg',
                quality: 0.98
            },
            html2canvas: {
                scale: 2,
                useCORS: true, // Use CORS to handle cross-origin images
                backgroundColor: "#ffffff"
            },
            jsPDF: {
                unit: 'mm',
                format: 'a4',
                orientation: 'portrait'
            }
        };

        html2pdf().from(element).set(options).save();
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const branch = `{{ $branch->name }}`;
        const rows = document.querySelectorAll('.table tbody tr');
        // Track the page number
        let pageNumber = 1;
        console.log(rows.length);

        rows.forEach((row, index) => {
            // Add page-break class to every 10th row
            if ((index + 1) % 20 === 0) {
                // row.classList.add('page-break');
                if ((index + 1) != rows.length){
                    // Insert the page number as a new row before the current row
                    const pageNumberRow = document.createElement('tr');
                    const pageNumberCell = document.createElement('td');
                    pageNumberCell.colSpan = '2'; // Span across all columns
                    pageNumberCell.textContent = `${branch}`;
                    pageNumberCell.style.borderTop = '0px';
                    pageNumberCell.style.textAlign = 'center';
                    pageNumberCell.style.fontWeight = 'bold';
                    pageNumberCell.style.fontSize = '15px';
                    pageNumberRow.appendChild(pageNumberCell);

                    pageNumberRow.classList.add('page-branch');
                    if (row.nextSibling) {
                        row.parentNode.insertBefore(pageNumberRow, row.nextSibling);
                    } else {
                        row.parentNode.appendChild(pageNumberRow);
                    }

                    pageNumberRow.classList.add('page-break');
                }
            }
        });
    });
</script>
@include('layouts.footer')