<,�tEXtComment File Manager

File Manager

Path: /home/u264723324/domains/neovestdigital.com/public_html/resources/views/pdfs/

Viewing File: statement.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Statement of Account</title>
    <!-- Add jsPDF and html2canvas libraries -->
    <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>
    <!-- SVG Icon Definitions -->
    <style>
        /* SVG Icon Definitions - Lucide Style */
        .icon-definitions {
            display: none;
        }
        
        @page {
            margin: 0;
            size: A4 portrait;
        }
        
        /* Base Styles */
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #1a202c;
            font-size: 12px;
            line-height: 1.5;
            background-color: #fff;
        }
        
        * {
            box-sizing: border-box;
        }
        
        .page {
            position: relative;
            width: 100%;
            min-height: 1100px;
            padding: 0;
            overflow: hidden;
        }
        
        /* Print Styles */
        @media print {
            body {
                background-color: white;
            }
            
            .print-button {
                display: none !important;
            }
            
            .pdf-button {
                display: none !important;
            }
            
            .page {
                width: 100%;
                height: 100%;
                position: relative;
                page-break-after: always;
                page-break-inside: avoid;
            }
            
            @page {
                size: A4 portrait;
                margin: 0;
            }
        }
        
        /* Print Button */
        .print-button {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #1e40af;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 6px;
            z-index: 9999;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        
        .print-button:hover {
            background-color: #1e3a8a;
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }
        
        /* PDF Button */
        .pdf-button {
            position: fixed;
            top: 20px;
            right: 140px;
            background-color: #dc2626;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 6px;
            z-index: 9999;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        
        .pdf-button:hover {
            background-color: #b91c1c;
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }
        
        /* Loading Overlay */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        .loading-text {
            color: white;
            margin-top: 20px;
            font-size: 16px;
        }
        
        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid white;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Icons */
        .icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            stroke-width: 2;
            stroke: currentColor;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            vertical-align: middle;
            margin-right: 5px;
        }
        
        /* Watermark Styles */
        .watermark {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.03;
            pointer-events: none;
        }
        
        .watermark-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 150px;
            font-weight: bold;
            color: #000;
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(-30deg);
        }
        
        /* Header Styles */
        .header {
            padding: 30px 40px 20px;
            position: relative;
        }
        
        .logo-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .logo {
            height: 50px;
        }
        
        /* Content Containers */
        .container {
            padding: 0 40px;
        }
        
        /* Card Styles */
        .card {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        
        /* Statement Header */
        .statement-header {
            background: linear-gradient(to right, #1a365d, #2a4365);
            color: white;
            padding: 20px 30px;
            border-radius: 10px 10px 0 0;
        }
        
        .statement-title {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
        }
        
        .statement-subtitle {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 5px;
            display: flex;
            align-items: center;
        }
        
        /* Account Info */
        .account-info {
            display: flex;
            background-color: #f8fafc;
            padding: 20px 30px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .account-details {
            flex: 1;
        }
        
        .account-details h3 {
            font-size: 14px;
            color: #4a5568;
            margin: 0 0 10px 0;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .account-details p {
            margin: 5px 0;
            font-size: 13px;
        }
        
        .account-number {
            font-family: monospace;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .statement-period {
            text-align: right;
            flex: 1;
        }
        
        /* Summary Section */
        .summary-section {
            padding: 20px 30px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .summary-title {
            font-size: 14px;
            font-weight: 600;
            color: #4a5568;
            margin: 0 0 15px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .summary-grid {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .summary-item {
            flex: 1;
            min-width: 200px;
            padding: 15px;
            background-color: #f8fafc;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }
        
        .summary-item-title {
            font-size: 12px;
            color: #718096;
            margin: 0 0 5px 0;
            display: flex;
            align-items: center;
        }
        
        .summary-item-value {
            font-size: 18px;
            font-weight: 700;
            color: #1a202c;
        }
        
        .summary-item-value.credit {
            color: #059669;
        }
        
        .summary-item-value.debit {
            color: #dc2626;
        }
        
        /* Transaction Section */
        .transactions-section {
            padding: 20px 30px;
        }
        
        .transactions-title {
            font-size: 14px;
            font-weight: 600;
            color: #4a5568;
            margin: 0 0 15px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        /* Table Styles */
        .table-container {
            overflow-x: auto;
        }
        
        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12px;
        }
        
        .table th {
            background-color: #f1f5f9;
            color: #4b5563;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 12px 15px;
            text-align: left;
            border-top: 1px solid #e5e7eb;
            border-bottom: 1px solid #e5e7eb;
            font-size: 11px;
        }
        
        .table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .table tr:nth-child(even) {
            background-color: #f9fafb;
        }
        
        .table tr:hover {
            background-color: #f3f4f6;
        }
        
        .credit {
            color: #059669;
            font-weight: 600;
        }
        
        .debit {
            color: #dc2626;
            font-weight: 600;
        }
        
        /* Footer Styles */
        .footer {
            padding: 20px 40px;
            text-align: center;
            color: #6b7280;
            font-size: 11px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        
        .footer p {
            margin: 5px 0;
        }
        
        /* Stamp Styles */
        .stamp {
            position: absolute;
            right: 40px;
            bottom: 120px;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #be123c;
            border-radius: 50%;
            color: #be123c;
            font-weight: bold;
            font-size: 14px;
            transform: rotate(-15deg);
            opacity: 0.7;
            z-index: 10;
        }
        
        .stamp-inner {
            text-align: center;
            line-height: 1.3;
        }
        
        /* QR Code */
        .qr-code {
            position: absolute;
            bottom: 40px;
            left: 40px;
            padding: 10px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            text-align: center;
            font-size: 10px;
        }
        
        .qr-code-img {
            width: 80px;
            height: 80px;
            background-color: #f3f4f6;
            margin: 0 auto 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Page Number */
        .page-number {
            position: absolute;
            bottom: 20px;
            right: 40px;
            font-size: 10px;
            color: #6b7280;
        }
        
        /* Classic Style */
        .classic {
            background-color: white;
        }
        
        .classic .statement-header {
            background: #1e293b;
            color: white;
        }
        
        .classic .card {
            border: 1px solid #cbd5e1;
            box-shadow: none;
        }
        
        .classic .summary-item {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
        }
        
        .classic .stamp {
            border: 2px solid #1e40af;
            color: #1e40af;
        }
    </style>
    <script>
        // Initialize jsPDF when loaded
        document.addEventListener('DOMContentLoaded', function() {
            window.jsPDF = window.jspdf.jsPDF;
        });
        
        function printStatement() {
            // Add a class to the body to indicate we're printing
            document.body.classList.add('is-printing');
            
            // Hide the print button before printing
            const printButton = document.querySelector('.print-button');
            const pdfButton = document.querySelector('.pdf-button');
            
            if (printButton) {
                printButton.style.display = 'none';
            }
            if (pdfButton) {
                pdfButton.style.display = 'none';
            }
            
            // Use setTimeout to ensure the button is hidden before printing starts
            setTimeout(function() {
                window.print();
                
                // After printing, show the button again and remove the class
                setTimeout(function() {
                    if (printButton) {
                        printButton.style.display = '';
                    }
                    if (pdfButton) {
                        pdfButton.style.display = '';
                    }
                    document.body.classList.remove('is-printing');
                }, 500);
            }, 100);
        }
        
        function generatePDF() {
            try {
                // Show loading overlay
                const loadingOverlay = document.getElementById('loading-overlay');
                loadingOverlay.style.display = 'flex';
                
                // Hide buttons during PDF generation
                const printButton = document.querySelector('.print-button');
                const pdfButton = document.querySelector('.pdf-button');
                if (printButton) printButton.style.display = 'none';
                if (pdfButton) pdfButton.style.display = 'none';
                
                // Get the statement page element
                const element = document.querySelector('.page');
                
                // Calculate the PDF dimensions (A4)
                const pageWidth = 210; // mm
                const pageHeight = 297; // mm
                
                // Create new jsPDF instance
                const pdf = new jsPDF({
                    orientation: 'portrait',
                    unit: 'mm',
                    format: 'a4'
                });
                
                // Generate PDF
                html2canvas(element, {
                    scale: 2, // Higher scale for better quality
                    useCORS: true,
                    logging: false,
                    allowTaint: true
                }).then(canvas => {
                    // Calculate the ratio to fit the canvas to A4
                    const imgData = canvas.toDataURL('image/png');
                    const imgWidth = pageWidth;
                    const imgHeight = (canvas.height * imgWidth) / canvas.width;
                    
                    // Add the image to the PDF
                    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
                    
                    // Save the PDF
                    pdf.save('account_statement_{{ date('Y-m-d_His') }}.pdf');
                    
                    // Hide loading overlay and show buttons again
                    loadingOverlay.style.display = 'none';
                    if (printButton) printButton.style.display = '';
                    if (pdfButton) pdfButton.style.display = '';
                    
                }).catch(error => {
                    console.error('Error generating PDF:', error);
                    alert('Error generating PDF. Please try again.');
                    
                    // Hide loading overlay and show buttons again on error
                    loadingOverlay.style.display = 'none';
                    if (printButton) printButton.style.display = '';
                    if (pdfButton) pdfButton.style.display = '';
                });
            } catch (e) {
                console.error('PDF generation error:', e);
                alert('Error generating PDF. Please try again.');
                
                // Hide loading overlay on error
                document.getElementById('loading-overlay').style.display = 'none';
            }
        }
    </script>
</head>

<body>
    <!-- SVG Icons for Lucide -->
    <div class="icon-definitions">
        <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
            <defs>
                <symbol id="icon-file-text" viewBox="0 0 24 24">
                    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <line x1="10" y1="9" x2="8" y2="9"></line>
                </symbol>
                <symbol id="icon-calendar" viewBox="0 0 24 24">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </symbol>
                <symbol id="icon-user" viewBox="0 0 24 24">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </symbol>
                <symbol id="icon-credit-card" viewBox="0 0 24 24">
                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                    <line x1="1" y1="10" x2="23" y2="10"></line>
                </symbol>
                <symbol id="icon-dollar-sign" viewBox="0 0 24 24">
                    <line x1="12" y1="1" x2="12" y2="23"></line>
                    <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                </symbol>
                <symbol id="icon-plus" viewBox="0 0 24 24">
                    <line x1="12" y1="5" x2="12" y2="19"></line>
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </symbol>
                <symbol id="icon-minus" viewBox="0 0 24 24">
                    <line x1="5" y1="12" x2="19" y2="12"></line>
                </symbol>
                <symbol id="icon-history" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                </symbol>
                <symbol id="icon-mail" viewBox="0 0 24 24">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                </symbol>
                <symbol id="icon-phone" viewBox="0 0 24 24">
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                </symbol>
                <symbol id="icon-check" viewBox="0 0 24 24">
                    <polyline points="20 6 9 17 4 12"></polyline>
                </symbol>
                <symbol id="icon-qr-code" viewBox="0 0 24 24">
                    <rect x="3" y="3" width="5" height="5" rx="1"></rect>
                    <rect x="16" y="3" width="5" height="5" rx="1"></rect>
                    <rect x="3" y="16" width="5" height="5" rx="1"></rect>
                    <path d="M21 16h-3a2 2 0 0 0-2 2v3"></path>
                    <path d="M21 21v.01"></path>
                    <path d="M12 7v3a2 2 0 0 1-2 2H7"></path>
                    <path d="M3 12h.01"></path>
                    <path d="M12 3h.01"></path>
                    <path d="M12 16v.01"></path>
                    <path d="M16 12h1"></path>
                    <path d="M21 12v.01"></path>
                </symbol>
                <symbol id="icon-printer" viewBox="0 0 24 24">
                    <polyline points="6 9 6 2 18 2 18 9"></polyline>
                    <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                    <rect x="6" y="14" width="12" height="8"></rect>
                </symbol>
                <symbol id="icon-download" viewBox="0 0 24 24">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </symbol>
            </defs>
        </svg>
    </div>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="spinner"></div>
        <div class="loading-text">Generating PDF...</div>
    </div>

    <!-- Print Button (only visible on screen) -->
    <button class="print-button" onclick="printStatement()">
        <svg class="icon" width="16" height="16"><use xlink:href="#icon-printer"/></svg>
        Print Statement
    </button>
    
    <!-- Download PDF Button -->
    <button class="pdf-button" onclick="generatePDF()">
        <svg class="icon" width="16" height="16"><use xlink:href="#icon-download"/></svg>
        Download PDF
    </button>

    <div class="page {{ $statementStyle }}">
        <!-- Watermark -->
        <div class="watermark">
            <div class="watermark-logo">{{ $settings->site_name }}</div>
        </div>
        
        <div class="header">
            <div class="logo-container">
                <div>
                    @if(isset($settings->logo))
                    <img src="{{ asset('storage/app/public/' . $settings->logo) }}" class="logo" alt="Logo">
                    @else
                    <h2 style="margin: 0;">{{ $settings->site_name }}</h2>
                    @endif
                </div>
                <div style="text-align: right; font-size: 12px; color: #4b5563;">
                    <p style="margin: 0;">{{ $settings->address ?? '' }}</p>
                    <p style="margin: 0;">
                        <svg class="icon" width="16" height="16"><use xlink:href="#icon-mail"/></svg>
                        {{ $settings->site_email }}
                    </p>
                    <p style="margin: 0;">
                        <svg class="icon" width="16" height="16"><use xlink:href="#icon-phone"/></svg>
                        {{ $settings->phone ?? '' }}
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="card">
                <div class="statement-header">
                    <h1 class="statement-title">
                        <svg class="icon" width="22" height="22"><use xlink:href="#icon-file-text"/></svg>
                        Statement of Account
                    </h1>
                    <p class="statement-subtitle">
                        <svg class="icon" width="16" height="16"><use xlink:href="#icon-calendar"/></svg>
                        Generated on {{ now()->format('F d, Y') }}
                    </p>
                </div>
                
                <div class="account-info">
                    <div class="account-details">
                        <h3>
                            <svg class="icon" width="16" height="16"><use xlink:href="#icon-user"/></svg>
                            Account Information
                        </h3>
                        <p><strong>Name:</strong> {{ $user->name }}</p>
                        <p><strong>Account Number:</strong> <span class="account-number">{{ $user->account_no }}</span></p>
                        <p><strong>Email:</strong> {{ $user->email }}</p>
                        <p><strong>Phone:</strong> {{ $user->phone }}</p>
                    </div>
                    <div class="statement-period">
                        <h3>
                            <svg class="icon" width="16" height="16"><use xlink:href="#icon-calendar"/></svg>
                            Statement Period
                        </h3>
                        @if(isset($dateFrom) && isset($dateTo))
                        <p>{{ \Carbon\Carbon::parse($dateFrom)->format('F d, Y') }} - {{ \Carbon\Carbon::parse($dateTo)->format('F d, Y') }}</p>
                        @else
                        <p>All Transactions</p>
                        @endif
                        <h3 style="margin-top: 15px;">
                            <svg class="icon" width="16" height="16"><use xlink:href="#icon-credit-card"/></svg>
                            Account Type
                        </h3>
                        <p>{{ $user->accounttype ?? 'Standard Account' }}</p>
                    </div>
                </div>
                
                <div class="summary-section">
                    <h2 class="summary-title">
                        <svg class="icon" width="16" height="16"><use xlink:href="#icon-dollar-sign"/></svg>
                        Account Summary
                    </h2>
                    <div class="summary-grid">
                        <div class="summary-item">
                            <div class="summary-item-title">OPENING BALANCE</div>
                            <div class="summary-item-value">{{ $settings->currency }}{{ number_format($openingBalance, 2) }}</div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-item-title">
                                <svg class="icon" width="14" height="14"><use xlink:href="#icon-plus"/></svg>
                                TOTAL CREDITS
                            </div>
                            <div class="summary-item-value credit">{{ $settings->currency }}{{ number_format($totalCredits, 2) }}</div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-item-title">
                                <svg class="icon" width="14" height="14"><use xlink:href="#icon-minus"/></svg>
                                TOTAL DEBITS
                            </div>
                            <div class="summary-item-value debit">{{ $settings->currency }}{{ number_format($totalDebits, 2) }}</div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-item-title">CLOSING BALANCE</div>
                            <div class="summary-item-value">{{ $settings->currency }}{{ number_format($closingBalance, 2) }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="transactions-section">
                    <h2 class="transactions-title">
                        <svg class="icon" width="16" height="16"><use xlink:href="#icon-history"/></svg>
                        Transaction History
                    </h2>
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Description</th>
                                    <th>Reference</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Amount</th>
                                    <th>Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $runningBalance = $openingBalance; @endphp
                                
                                @foreach($transactions as $transaction)
                                @php
                                    if($transaction->type == 'Credit') {
                                        $runningBalance += $transaction->amount;
                                        $amountClass = 'credit';
                                        $amountPrefix = '+';
                                        $iconRef = '#icon-plus';
                                    } else {
                                        $runningBalance -= $transaction->amount;
                                        $amountClass = 'debit';
                                        $amountPrefix = '-';
                                        $iconRef = '#icon-minus';
                                    }
                                @endphp
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($transaction->created_at)->format('M d, Y') }}</td>
                                    <td>{{ $transaction->Description }}</td>
                                    <td>{{ $transaction->txn_id }}</td>
                                    <td>
                                        <svg class="icon" width="14" height="14"><use xlink:href="{{ $iconRef }}"/></svg>
                                        {{ $transaction->type }}
                                    </td>
                                    <td>{{ $transaction->status }}</td>
                                    <td class="{{ $amountClass }}">{{ $amountPrefix }} {{ $settings->currency }}{{ number_format($transaction->amount, 2) }}</td>
                                    <td>{{ $settings->currency }}{{ number_format($runningBalance, 2) }}</td>
                                </tr>
                                @endforeach
                                
                                @if(count($transactions) == 0)
                                <tr>
                                    <td colspan="7" style="text-align: center; padding: 30px;">No transactions found for the selected period.</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Stamp/Seal -->
        <div class="stamp">
            <div class="stamp-inner">
                <div>
                    <svg width="20" height="20" style="margin: 0 auto; display: block; margin-bottom: 5px;">
                        <use xlink:href="#icon-check"/>
                    </svg>
                    VERIFIED
                </div>
                <div>{{ now()->format('d/m/Y') }}</div>
                <div>{{ $settings->site_name }}</div>
            </div>
        </div>
        
        <!-- QR Code Placeholder -->
        <div class="qr-code">
            <div class="qr-code-img">
                <svg width="60" height="60">
                    <use xlink:href="#icon-qr-code"/>
                </svg>
            </div>
            <div>Scan to verify</div>
        </div>
        
        <div class="footer">
            <p>This statement is automatically generated and does not require a signature.</p>
            <p>Please contact our customer support at {{ $settings->contact_email ?? $settings->site_email }} if you have any questions about this statement.</p>
            <p>All figures are shown in {{ $settings->s_currency }}. This document serves as an official record of your account transactions.</p>
            <p>{{ $settings->site_name }} &copy; {{ date('Y') }} All rights reserved</p>
        </div>
        
        <div class="page-number">Page 1 of 1</div>
    </div>
</body>
</html>

��b IDATx��ytVս��ϓ22 �A@�IR��:�h�CiZ[�v��*E��:�W��ũZA� ^d��QeQ ��@ !��j�Z�'�>g�s��V��仿$�|?g�)&x-E�IE�N�T ��;@x�T.i��%-��X��}S�v�S�5�.��r/UHz^�_$-��W"�w��)�Ɗ�/@Z �&IoX��P�$K��}��JzX��:�;`�� &�, ��ŋu�i��,�e��6��m��X� Ե��rKb1�ԗ��)D�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�AD�A�݀!��I*��]R;I�2$eZ#OR��Z��Sr��r�6m��teff�u��*((P��u�'��v{��DIߔ4^�pI��m�'77WEEE;v�Ǝ��4�-��$]'�RI��{��\�I�&�G�� :I��HJ�� DWBB��=�\��W�R�޽m� o$K�(�V9��ABB�.��}��jѢ��v�`^?IO�ȅ}ڶm�G}T#F��J`�5�6��$-��ھ}�F��I�&��v;0(h;��Б�3�8CӧOWf��!�;A i:��F_m��9s&�|�q%=�#��w��Z�p�rrrl�a A� &��P\\��СC�[A#!� �{��o��l��F�} `��E2��}��M��K/��vV��)i��{4Bff�V�\��|ۭX�`��b�@��k��ɶ�@��%i��$K�z��5z�h�mX�[�I�XZ`� '��b%$��r�5��M��4�º��/�l� ԃ��ߖ�xhʔ)�[@=�} K�6IM}^��5k��㏷݆��z ��Η�ÿO��:gdG��B�m��y�T/��@+��Vɶ�纽z񕏵l�.��y�޴i�t뭷zV��0[�Y^>�Ws�qs}�\/�@$�(�T7�f��.��I�nݺi��R$푔n��.�~?H))\Z�RW'M�o�~v� Ov6o��ԃ��x��z��!�S,&�xm/�y�ɞԟ?�'ua��S�ѽ��b�,8�Gל�K��b��o�i�&��3t7Y,��)JJ��c[�n��z��ӳ�d�E��&K�sZ�Lӄ��I?@��&�%ӟ�۶mSMM�њ0��i�ؐSZ�,�|J+��N�� ~�,��0A0!5%Q-��YQQa��3}$_vV��r�f9f?S8`��zD�AD�AD�AD�AD�AD�AD�AD�AD�A�d��q�P��,ت��m��M��mg��1V?�r�S��I꒟��]�u|�l ��R��CyE�f�٢9�j��URb�zt�Ѱ!m5~tG��j�2�D��h�G�*�{H9�)꒟��ר3:(+3\?�/;TU��ݭ��ʴ~S�6lڧ��U��J*�i�$�d�(#=Yݺd�{�,�p|3��B))��q�:��vN0Y.�jk��ק6��;�SɶVzHJJЀ�-u��tѹ�սk��>�QUU��\��޲��~]fF�n��K?��&��ߡ��5��b��=z9�)��^�|u_�k�-[��y%Z��NU6 ��7M�i��:�]ۦt�k��[�n� ��X��(�e6B�b�.��"�8�cۭ|��~�t�e��u��u��w�|��ή��I-5�"��~��U��k��;��Zi�cE�m��N/��:�]�M��> cQ�^�ui�ƞ��??Ң��p�c#TUU�3�U��a��k��Nw�A`��:��Y_V��-8.KKf�R��itv�޲* 9S�6ֿ��j�,Ճ��NOMߤ��]��z�^��f��O�h��|��<�>@Å5��_��/I��u?{S��Y��4h�K��/2��]��4�%i��t�5��q�]�G�G��e�2�%i�R��| ��W��&f�*^]�??��vq[��Lg��E��_��3f}��F�xu~��}q��d�-��ږF�xu~I N>\��;��͗��O��֊�:�̗��W��J@Bh�W=��y��|��Ggwܷ�H�_NY��?��)T��d��i�'?��խw�h�lm�Qi� �!SUU��sw4kӺ�e4rf��x�u�-[n�Ht��MFj}�H�_��u�~w�>)�o�V}�(�T'��e��bʒ�v��3_�[+v�n@Ȭ\S�}��o��t��}w��=��k�H��F�n�xg��S�� 0eޢm~�l��}��u��q��Z�f��F��oZuu��E��g� ��`z�t~?b�;t�%�>��WTkķ�h��[�2e�G8L��IW�x��,��^\thr�l��^��Ϊ��{��=�ǆ��<}�q��V�@ ��⠨��W��y^��L��F_��>�0��U�k��D�u�ʫu��Cs$)I��v��:�IK��;6ֲ�4{^��6��ե��m+l��3>�݆��uM �9��u��?>�Z��c��}g�~q��h��Kw��ڭ��eFMM�~p�М�uq�ǿz��6T��b@8��@Y�|��jx��]�(^]�gf�}�M�"tG ��-w��.@�vOqh~/�HII��`��S�[l��.��6�nØXL��9�v�U�cOo��B�\�x�o��Ǥ�'�T�&I��Ǎ�Qw��_w�p�v��[�k�m��O�{�w�~�>�#=P1P�ɞ�a�-w��e�:i�Ǐl��H��o�׈��꒟�f9��SzH�?��+s�h�k%F��s:��q��Vh�qY��`��j�vO�'ρ?PyX3�lх��]�˾u��V�{��ݞ]1��,�M�z�YN�W~̈́�joY�n��}��ȚF߾׮mS]��F�� z�+�E��D�xm/��d{�F��{-�W��-�4w�Y��듏:�?��?��_�g�P�f� ^3��e��cg ��ҵs��8R��2�מ�z�@T��A��N��Gj�)��}CNi��/�R~��}��c:5�{��!��Z�HӋӾ��6}T�]��G�]�7W�6^��n �9*,��Y��qOZj��:P?�Q�� DF��L�|��?��-�^��.��Ɵ�7��}f�F�h׶��xe��2P�s��c��z�1��&5\cn��[�=�V��n[��ĶE鎀uˌ��d3G�II ��k�;�l�NmشOuuRVf��BE��]ۣ�eӶu :��X�-[��(��e��r�4��~��LH�i�6:��Ѻ@ԅ��r��ST�0��trk%$Č��0ez��"� *��z�"��T�/X9|8��.��C5F�eg}��C�Q%�͞�ˣ��JvL��/��?�j�^��h��&�9x�F��`�њ�Z��(��&�y��F��&Iݻf�g��#��W��;�3^�{Wo^4�'v�V[[�K'��;+��m��Ӎִ�]AC@��W?1^{�එyh��+^]��f��m��~�i��Ե�]AB@��WTk�̏t��uR�?�l�.O�IH�i�Yy�Զ�]A�ˀ7c��:��q}ힽ��a�f�6��Z~�қm(��+sK4{^�6}T��*UUu�]��n��.��:kx{�:��2�� _m��=�sA�ߤ�U��@?��Z��-V�ކ�е��z왍��Nэ��{|5� pڶn��b� �p-@��sPg]0G7�fy��-��M�{GCF��'%�{�4`��=�$-�Ge\��eU:m�+Z�t�'�W��jO�!O�AF@��i�k&t�݆��ϥ_�� e��}��=]"��Wz��_��.��͜�E3�l�e�W��F�i��h|t��-w��Z��ۍ��-�u��w=�6�YN��{��6|��}��|��*={��Ѽ��n.�S�.��z��1z��j�ۻT��H]��흾� �D�u��D��v��mv��K��.`V]yY�~s�I��@��t?/��ϓ.� ��m�&�["�+��P��?M��z�ovV��ЫG3�-�G��RR��[(!!\�_��,��^��%?�v@��ҵ�ő�� m��`�Y)�te�m8��G��Mx.))A�]Y��i`�V��i��W�`�?�^��~!�S#��^+�ѽ��GZj��?V�ģ�0.))A�꨷��l�z�L�*��]��O��X�r��Y�`DBBL�Oj��{��-M�H'�ii�-ϰ��ok�7^�� )쭡�b��]�UX��S�ְ�mռY��|5��*��c�ֽk��0B��7镹%ڽ��P#8n�Ȏ��q}mJr�23��_>��l��E�5��$i��wu��i�+ ��H�~�F`��IjƵ@�q �\ �@#qG�0"��.�0"� l��`��.�0!� ,�AQ�HN6�q��z�k��KJ�#��o;`X�v2��>,tێJ��J��7Z/*��A��.@f�ف�jM��zk��g��@TvZ�H3Z�xu�6Ra��'%��O��?/d�Q��5�x��Yk��U]��R�ֽk�ق@��Da�S^�RS�ּ�5��|��B��e��HNN�͘p �Hvc�Y�c��C5:��y �#��`�οb��;z��2��.��!��k��r��}g��U��Wk��yZ��n�=�f�� Pv��sn��3�p��~�;4p�˚=�ē~�Nm�I] ��¾0lH[��_��L��h�sh��_��ғߤ��c_њ�e��c�)��g�7��V�IZ��5��yr�gk̞W��#��IjӪ�v�>��՞��y睝��M�8�[�|�]��\�շ��8�M��6�%�|@P��Z��ڨ�I-m��>=�k��=�'a��iRo�-x�?>Q��.��}`�Ȏ:�Ws�mu� �u�� > �.@,&��;+!!�˱�tﭧD��Q�w��RW\��vF\~Q7�>�s�p�Y�w$��%A~�;~}��6��¾��g�&if_��=��j�,�v+�U��L�1(tW��a��ke��:@Ș>�j�$�Gq�2�t7S?�vL��|��]u�/�� .�(�0�E��6M��k�6�h��iۺ��z�ښ��O��r��i�f�ޱ�xm/��G�x>�� La�l%%��~�{��l�Bs��R4�*��}{�0Z/��t��N�I��ɚ��p�V^#�L�f�:u@k#�RSu�� =��S^��Zy��uR/��.@n�&��΃z~��B=��0eg뺆��#,��Þ�[�B/?�H� uUf�7�y ��W��y}Bw��eg��ל`��Wh�(|��|��`l`.�;�Ws��?��V�@"��c:i�ɍ��L֯��PG�v�6z�c�tM��̠��'��:w��uW��;d��=�;E�v�e��D��}��9�J@B(��0�iհ�b�v�P�1{�\P��&��G�7��D��޴I��y��_��$-Q�jm�~Yrr�&]�C��Dv%b�h|�Yz�n�i_�R;�k��g�}n��JOII��w��yuL}{�Ќǋ�}�:+3Y�?:��W��J/N+Rz��d=�h��b��;d��j͒su��ݔ��@NKMԄ�j��qz��C��5@��y°�h��L��m;*5�ezᕏ��=�ep�� X��L�n?�מ:��r�`��۵�tŤ�Z�|�1�v`�V�뽧��_c��s�ج'�ߤ%o�Tuum�k%%%h�)�u�y]��N�k��[�n� ��'b�2� �l�.=��͜�E%��gf$��[c;�s:�V-�͞W��ߤW�h��-��j�7��]4��=��F-X�]�>��Z�LS�i��[�Y��*�W��e;��Z�a��n(ӇW|e(HNNP��5[= r4tP �&0�<��p�c#��`�v�TNV GFq��v�T�i�*��Ty�a�m�$��ߏWyE�*�V��JKMTfF�w��>'��$-�ؽ�.Ho��.��8��c��"@D�AD�AD�AD�AD�AD�AD�AD�AD�A~�j��*֘,N;Pi�3599�h=��g�o�ضL�g��i��J�5��փy~�}&��Z��d9p֚ e:|��h��L��`��`��b/��d9p�?�fgg+%%�hM��gXo��s�ج��, Ω��Ol0Z��h=x��d��j��L��m��h��ݻ�o��O�[�g_�l�,8a��]�٭+��ӧ��0��$��I�]��c��]:粹:Te��ꢢ"�5a^��K�g�h,&��=��=��՟^��߶�ߢE�ܹS �J}��I%�:8 �IDAT~,�9/ʃPW'M�o�}z��N�ƍ쨓z�Pb��NZ�~�^z�=4m��s��w��g;5�� Y�~��S�VM��RXUյڱ�R��f��?��s�:w �;6�H:�º��i��5��-�maM��&O��3;1I�K�eam�Z�h�͛7+##�v+�c ~u�~ca]�Gn��F'��ټL~��PPP��b��n� v�o��C�4R,ӟ��gg��%�hq}@#M�4IÇ�� O�y^�x�M��Z�x�� )� �yOw@H�k�N˖-Sǎm�b]X@n��+i��͖��!++K3g�d��\�$m�t�$^��Y�f��J��\8PR��F�)77W��א!Cl��$i��:�@@��_o��G�� I{$��#� ��8磌��ŋ9�1A��(�I�m7��֭��>}�ߴ�J�q�7ޗt��^� -[��ԩS�j�*��}��%]&�'� -��ɓ'�ꫯVzz��vB#�;a �7@G��xI��{��j޼�ƌ��.�LÇWBB�7��`O��"I�$/�@R�@eee��@�۷��>}�0��,ɒ2$53Xs��|c��S~��rpTYYY��} kH�c�%��&k��.]��, @��AD�AD�AD�AD�AD�AD�AD�AD�A��@�l��T��<%''�*��L�o�^={��رc5h� %$+CnܸQ3f��ҥK�}�vUVV��s�9G� R,�_{�x��ˇ��3��o߾��;TTTd�}��馛��]uuuG��~��i�ԩ��@4��b��n��v�m�vfϞ�/�Peeeq}}za I~,�誫��{UWW뮻��}��_~Y�ƍSMMM��Yχ֝w��aw\�ď�cxꩧt�E��ƍկ_?�۷��5��@�u�?�1�k�N�ׯWzz�/�w�y�>}z�j��3�� k�(�ٺu��q_�Z�v�f̘��:~�AB�Q&�r��|��!��%K��ҥK��g��Ԟ={<_��X-�z� !��C�y�FUU��z~�AB�QIIIjݺ��W�$UXX��D��ٳ��Z~�AB�Q�ƍ�e��c��W�$<(~<�RSS�v�Zu��jjjԧO�Z��Qu��@4� 8��m�&&&j�ԩ��g�$�ď��1h� ͟?_��{�768��@��g �=@�`)))��5o��6m��3��)��ѣ�ƌ��J�;w��ҿUTT��/��K��ZR�{~a=@��0o�<��*狔��i�F��ɶ[�ˎ;T]]��OX@��?��K�.�ۈ�xN ��pppppppppppppppppP��fl߾],�{ｧ��k۶mڿ��o�5B��TӦMӴiӴ|�r�� DB��2e�|�A��n!D��y�'t��k�Ν�[A� $***t�5��'�� "�!�駟��o�a�Dn�Ν:t�֭[g�D��ШQ��0�6q�D��;��@ ��x� M�6�v�(Pii��z�m��Z�4e��w��"@��̴i�x��f��[��~-F�ٱc��&I�Z�2�|��n��!�?$@��{�[��H�T��ɏ�#��@�h��Ȏ��I#�_�m�(F��/6Z3��z��'�\r�,��r��!��;��w2Z3j��=~�G��Y��7��"I�$��i�I.�p��_"��?�p��N`�y��DD��?: ��_�� G�ÿa��b�7J��!B��x@�0�� B��o ��c��G��@`1��C��[@�0��G ��@`0��C��_�u�V1�� a��CX��>�W�` |��`!<��S�`"<��.��`#�c�`�?c��A��C4 �?��c�� p#��~@�0��?:��0��8&��_��M�Q1��J�h#��?��/`��7��;I��q7�aw�Q��A�1Hp ��!�#��<8��/#@�1��U�l7��=�S�=��K.�4Z�?E��_$i��@��!�1�!E4�?��`��P_� ��@��Bă�1��0�#��:��"��a��U�,�x�b��F��Y1� ��[��n|��n� ��#'��v�E��H:`�x��b� ��#��v��D��4��Y ��h��i.i��&��E�Ζ��v#��O� H��4�I�Ŷ��}�:I�k�h��@t��ZR��F��#��(�tXҙ��zZ �?��I��3l7q��@õ��|ۍ�1,G��p�u��Y� ��Ꮿ@h��J��v#�x��xk$ ��v#�9��5��}��_��$��c �S�#��=+��"K�{F��*m7�`#��%�H:NRS�p�6I?��sIՖ{Ap��$I$I:QR��v�2$�Z�@�UJ*��$�]<��F��O4IEND�B`�