@extends('layouts.master')
@section('title', 'Fund Transfer Report UAT')
@section('styles')
    <style>
        .page-break {
            page-break-before: auto;
            page-break-after: always;
        }
        #reportContent table {
            width: 100%;
            table-layout: fixed; /* ensures columns don’t overflow */
            word-wrap: break-word;
        }
        /* Shrink content for PDF */
        #reportContent.pdf-version {
            font-size: 10px; /* smaller font to fit page width */
        }
        #reportContent.pdf-version table {
            table-layout: fixed;
            width: 100%;
            word-wrap: break-word;
        }
    </style>
@endsection

@section('content')


    <div class="max-w-7xl mx-auto bg-white p-10 text-gray-800 text-sm leading-relaxed">

        <!-- Header -->
        <div class="flex items-start justify-between mb-6">
            <div>
                <h1 class="text-xl font-bold uppercase text-gray-800">
                    {{ $transferType === "BRAC"
                        ? "Account to Account Fund Transfer Report"
                        : "BEFTN/ RTGS Fund Transfer Report" }}
                </h1>
            </div>
            <div class="flex gap-3">
                <button type="button" onclick="downloadFile('pdf')"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm bg-red-600 hover:bg-red-500 text-white rounded-md shadow-sm transition">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M12 16v-8m0 8l-3-3m3 3l3-3M4 4h16v16H4z"/>
                    </svg>
                    Save PDF
                </button>
                <button  type="button" onclick="downloadFile('excel')"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm bg-green-600 hover:bg-green-500 text-white rounded-md shadow-sm transition">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 4h16v16H4z"/>
                    </svg>
                    Export Excel
                </button>
            </div>
        </div>
        <div id="reportContent">
            <!-- Address -->
            <div class="mb-4">
                <b>Date: {{ now()->format('d/m/Y h:i:s A') }}</b>
                <p>The Manager</p>
                <p class="font-semibold">BRAC Bank Limited</p>
                <p>1, Gulshan Avenue</p>
                <p>Gulshan-1, Dhaka-1212</p>
            </div>

            <div class="mb-4">
                <p>
                    <strong>Attention:</strong>
                    Associate Relationship Manager, Cash Management and Custodial Services.
                </p>
            </div>

            <!-- Subject -->
            <div class="mb-4">
                <p>
                    <strong>Subject:
                    Transfer of fund from A/C number</strong>
                    <strong id="debitAccount">1501201806446015</strong>
                </p>
            </div>

            <!-- Body -->
            <div class="mb-4">
                <p>Dear Manager,</p>
                <p class="mt-2">
                    Please execute the following transfers as per details on urgent basis
                    through {{ $transferType === "BRAC" ? "fund transfer" : "BEFTN" }}.
                </p>
            </div>

            <!-- Table -->
            <div class="overflow-x-auto mt-6 relative">
                <table class="w-full border border-gray-400 text-xs">
                    <thead class="bg-gray-100 sticky-header">
                    <tr>
                        <th class="border px-2 py-1">SL</th>
                        <th class="border px-2 py-1">Reference No</th>
                        <th class="border px-2 py-1">Account Name</th>
                        <th class="border px-2 py-1">Account Number</th>
                        <th class="border px-2 py-1">Bank Name</th>
                        @if($transferType == "BRAC")

                        @else
                            <th class="border px-2 py-1">Branch Name</th>
                            <th class="border px-2 py-1">Routing Number</th>
                        @endif
                        <th class="border px-2 py-1 text-right">Amount (BDT)</th>
                    </tr>
                    </thead>
                    <tbody id="reportTableBody">
                    <tr>
                        <td colspan="{{ $transferType === "BRAC" ? "5" : "7" }}" class="text-center py-4">Loading data...</td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr class="font-semibold bg-gray-50">
                        <td colspan="{{ $transferType === "BRAC" ? "5" : "7" }}" class="border px-2 py-1 text-right">Total</td>
                        <td id="totalAmount" class="border px-2 py-1 text-right">0.00</td>
                    </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Authorization -->
            <div class="mt-6">
                <p>
                    You are authorized to debit our account no.
                    <strong>1501201806446015</strong>
                    for the value of transaction. Please execute to transfer total of
                    <strong id="totalAmountNumeric">0.00</strong><strong>/=</strong>
                    (<strong><span id="totalAmountWords">Zero Only</span></strong>)
                    from our above mentioned account.
                </p>
            </div>

            <!-- Closing -->
            <div class="mt-6">
                <p>Thanking you,</p>
                <p class="mt-6 font-semibold">Yours sincerely</p>

                <div class="mt-10">
                    <p class="font-semibold">{{ session('biller_org_code', '') }}</p>
                    <p class="text-xs text-gray-600">Authorized Signatory</p>
                </div>
            </div>

        </div>
        <div class="report-section page-break">
            <!-- next section -->
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let transferType = "{{ $transferType }}";
            let startDate = "{{ $startDate }}";
            let endDate = "{{ $endDate }}";
            console.log(transferType+'='+startDate)
            const loader = document.getElementById('reportLoader');
            const tbody = document.getElementById('reportTableBody');
            const totalAmountEl = document.getElementById('totalAmount');
            const totalAmountNumeric = document.getElementById('totalAmountNumeric');
            const totalAmountWords = document.getElementById('totalAmountWords');

            function numberToWords(num) {
                if (num === 0) return 'Zero Only';

                const a = ['','One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten',
                    'Eleven','Twelve','Thirteen','Fourteen','Fifteen','Sixteen','Seventeen','Eighteen','Nineteen'];
                const b = ['','Ten','Twenty','Thirty','Forty','Fifty','Sixty','Seventy','Eighty','Ninety'];

                function inWords(n) {
                    if (n < 20) return a[n];
                    if (n < 100) return b[Math.floor(n/10)] + (n%10 ? ' ' + a[n%10] : '');
                    if (n < 1000) return a[Math.floor(n/100)] + ' Hundred' + (n%100 ? ' ' + inWords(n%100) : '');
                    if (n < 100000) return inWords(Math.floor(n/1000)) + ' Thousand' + (n%1000 ? ' ' + inWords(n%1000) : '');
                    if (n < 10000000) return inWords(Math.floor(n/100000)) + ' Lakh' + (n%100000 ? ' ' + inWords(n%100000) : '');
                    return inWords(Math.floor(n/10000000)) + ' Crore' + (n%10000000 ? ' ' + inWords(n%10000000) : '');
                }

                let [integerPart, decimalPart] = num.toString().split('.');
                let words = inWords(parseInt(integerPart));
                if (decimalPart) {
                    let decimals = decimalPart.slice(0,2); // up to 2 decimals
                    words += ' Point ' + decimals.split('').map(d => a[parseInt(d)]).join(' ');
                }
                return words + ' Only';
            }

            function loadReportData() {
                if (!tbody) {
                    console.error('Table body not found!');
                    return;
                }

                // Show SweetAlert2 loader
                Swal.fire({
                    title: 'Loading Report...',
                    html: 'Please wait while we fetch the data',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });


                fetch("{{ route('get.bkashfinance.report.uat') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ transferType: transferType, startdate: startDate, enddate: endDate })
                })
                    .then(response => response.json())
                    .then(response => {
                        const data = response.data || [];

                        tbody.innerHTML = '';
                        let totalAmount = 0;

                        if(data.length === 0){
                            const colspanCount = transferType === 'BRAC' ? '6' : '7'
                            tbody.innerHTML = `<tr><td colspan="${colspanCount}" class="text-center py-4">No data found for selected dates.</td></tr>`;
                        }
                        else {
                            data.forEach((row, index) => {
                                totalAmount += parseFloat(row.Amount);

                                // Determine bank name based on transfer type
                                const bankName = transferType === 'BRAC' ? 'BRAC Bank Ltd' : row['Bank Name'];

                                const tr = document.createElement('tr');
                                if(transferType === 'BRAC'){
                                    tr.innerHTML = `
                                        <td class="border px-2 py-1 text-center">${index + 1}</td>
                                        <td class="border px-2 py-1">${row.Ref}</td>
                                        <td class="border px-2 py-1">${row['Bank_Account_Name']}</td>
                                        <td class="border px-2 py-1">${row['Bank_Account_No']}</td>
                                        <td class="border px-2 py-1">${bankName}</td>
                                        <td class="border px-2 py-1 text-right">${Number(row.Amount).toLocaleString('en-BD', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                                    `;
                                }else{
                                    tr.innerHTML = `
                                        <td class="border px-2 py-1 text-center">${index + 1}</td>
                                        <td class="border px-2 py-1">${row.Ref}</td>
                                        <td class="border px-2 py-1">${row['Bank_Account_Name']}</td>
                                        <td class="border px-2 py-1">${row['Bank_Account_No']}</td>
                                        <td class="border px-2 py-1">${bankName}</td>
                                        <td class="border px-2 py-1">${row['Branch Name']}</td>
                                        <td class="border px-2 py-1">${row['RoutingNumber']}</td>
                                        <td class="border px-2 py-1 text-right">${Number(row.Amount).toLocaleString('en-BD', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</td>
                                    `;
                                }

                                tbody.appendChild(tr);
                            });
                        }

                        totalAmountEl.textContent = totalAmount.toLocaleString('en-BD', { minimumFractionDigits: 2, maximumFractionDigits: 3 });
                        totalAmountNumeric.textContent = totalAmount.toLocaleString('en-BD', { minimumFractionDigits: 2, maximumFractionDigits: 3 });
                        totalAmountWords.textContent = numberToWords(totalAmount);

                        // Close SweetAlert2 loader
                        Swal.close();

                    })
                    .catch(error => {
                        const colspanCount = transferType === 'BRAC' ? '6' : '8'
                        console.error('Error fetching report:', error);
                        tbody.innerHTML = `<tr><td colspan="${colspanCount}" class="text-center py-4 text-red-600">Error loading report. Please try again.</td></tr>`;

                        // Close loader and show error
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to load report. Please try again.',
                            confirmButtonText: 'OK'
                        });
                    })
                    .finally(() => {

                    });
            }

            loadReportData();
        });
    </script>
    <script>
        async function downloadFile(type) {
            const startdate = "{{ $startDate }}";
            const enddate = "{{ $endDate }}";
            let transferType = "{{ $transferType }}";

            if (!startdate || !enddate) {
                Swal.fire({
                    text: "Org Code, Start Date and End Date are required.",
                    icon: "error"
                });
                return;
            }

            Swal.fire({
                title: '<span style="font-size: 1.0rem; color: #92400e;">Downloading...</span>', // smaller title
                html: `
        <div style="font-size: 0.875rem; color: #92400e; margin-bottom: 0.5rem;">Please wait while your file is being prepared.</div>
        <div id="progressContainer" style="width: 100%; background: #fef3c7; border-radius: 0.5rem; height: 12px; overflow: hidden;">
            <div id="progressBar" style="width: 0%; height: 100%; background: #f59e0b; border-radius: 0.5rem;"></div>
        </div>
        <p id="progressText" style="margin-top: 0.25rem; font-size: 0.75rem; color: #92400e;">0%</p>
    `,
                allowOutsideClick: false,
                showConfirmButton: false,
                width: '320px', // smaller popup
                background: '#fffbeb', // light amber background
                didOpen: () => {
                    const progressBar = document.getElementById('progressBar');
                    const progressText = document.getElementById('progressText');

                    let simulatedProgress = 0;
                    const interval = setInterval(() => {
                        if (simulatedProgress < 95) {
                            simulatedProgress += Math.random() * 3;
                            simulatedProgress = Math.min(simulatedProgress, 95);
                            progressBar.style.width = simulatedProgress + '%';
                            progressText.innerText = Math.floor(simulatedProgress) + '%';
                        }
                    }, 200);

                    // Store interval reference for later clearing when download finishes
                    Swal.interval = interval;
                }
            });

            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');

            // Simulate progress
            let simulatedProgress = 0;
            const interval = setInterval(() => {
                if (simulatedProgress < 90) { // cap at 95% until download finishes
                    simulatedProgress += Math.random() * 3; // increment randomly
                    simulatedProgress = Math.min(simulatedProgress, 90);
                    progressBar.style.width = simulatedProgress + '%';
                    progressText.innerText = Math.floor(simulatedProgress) + '%';
                }
            }, 200);

            try {
                const response = await fetch(`/bkash/fund-transfer-report-UAT/transactions/downloads/${type}?startdate=${startdate}&enddate=${enddate}&transferType=${transferType}`, {
                    method: 'GET'
                });

                const blob = await response.blob(); // wait until download is fully done
                clearInterval(interval); // stop simulated progress

                progressBar.style.width = '100%';
                progressText.innerText = '100%';

                // Trigger file download
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                const now = new Date();
                const pad = n => String(n).padStart(2, '0');

                const dateTimeStr =
                    now.getFullYear().toString() +
                    pad(now.getMonth() + 1) +
                    pad(now.getDate()) +
                    pad(now.getHours()) +
                    pad(now.getMinutes()) +
                    pad(now.getSeconds());
                a.download = `UAT_Fund_Transfer_Report_${transferType}_${dateTimeStr}.${type === 'csv' ? 'csv' : type === 'excel' ? 'xlsx' : 'pdf'}`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);

                Swal.close();
            }
            catch (err) {
                clearInterval(interval);
                Swal.fire({
                    icon: 'error',
                    text: 'Download failed: ' + err.message
                });
            }
        }
    </script>
@endpush