diff --git a/resources/views/portal/ninja2020/statement/index.blade.php b/resources/views/portal/ninja2020/statement/index.blade.php
index eda0abbad632..ebfd9636efbe 100644
--- a/resources/views/portal/ninja2020/statement/index.blade.php
+++ b/resources/views/portal/ninja2020/statement/index.blade.php
@@ -12,22 +12,22 @@
             <div class="flex">
                 <label for="from" class="block w-full flex items-center mr-4">
                     <span class="mr-2">{{ ctrans('texts.from') }}:</span>
-                    <input type="date" class="input w-full">
+                    <input id="date-from" type="date" class="input w-full" data-field="startDate" value="{{ now()->startOfYear()->format('Y-m-d') }}">
                 </label>
 
                 <label for="to" class="block w-full flex items-center mr-4">
                     <span class="mr-2">{{ ctrans('texts.to') }}:</span>
-                    <input type="date" class="input w-full">
+                    <input id="date-to" type="date" class="input w-full" data-field="endDate" value="{{ now()->format('Y-m-d') }}">
                 </label>
             </div> <!-- End date range -->
 
             <label for="show_payments" class="block flex items-center mr-4 mt-4 md:mt-0">
-                <input type="checkbox" class="form-checkbox" autocomplete="off">
+                <input id="show-payments-table" type="checkbox" data-field="showPaymentsTable" class="form-checkbox" autocomplete="off">
                 <span class="ml-2">{{ ctrans('texts.show_payments') }}</span>
             </label> <!-- End show payments checkbox -->
 
             <label for="show_aging" class="block flex items-center">
-                <input type="checkbox" class="form-checkbox" autocomplete="off">
+                <input id="show-aging-table" type="checkbox" data-field="showAgingTable" class="form-checkbox" autocomplete="off">
                 <span class="ml-2">{{ ctrans('texts.show_aging') }}</span>
             </label> <!-- End show aging checkbox -->
         </div>
@@ -39,12 +39,70 @@
 
 @push('footer')
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // document
-            //     .querySelector('meta[name=pdf-url]')
-            //     .content = 'https://google.com';
+        class Statement {
+            constructor() {
+                this.url = new URL(document.querySelector('meta[name=pdf-url]').content);
+                this.startDate = '';
+                this.endDate = '';
+                this.showPaymentsTable = false;
+                this.showAgingTable = false;
+            }
 
-            // document.querySelector('meta[name=pdf-url]').dispatchEvent(new Event('change'));
-        });
+            bindEventListeners() {
+                ['#date-from', '#date-to', '#show-payments-table', '#show-aging-table'].forEach(selector => {
+                    document
+                        .querySelector(selector)
+                        .addEventListener('change', (event) => this.handleValueChange(event));
+                });
+            }
+
+            handleValueChange(event) {
+                if (event.target.type === 'checkbox') {
+                    console.log(1);
+                    this[event.target.dataset.field] = event.target.checked;
+                } else {
+                    this[event.target.dataset.field] = event.target.value;
+                }
+
+                this.updatePdf();
+            }
+
+            get composedUrl() {
+                this.url.search = '';
+
+                if (this.startDate.length > 0) {
+                    this.url.searchParams.append('start_date', this.startDate);
+                }
+
+                if (this.endDate.length > 0) {
+                    this.url.searchParams.append('end_date', this.endDate);
+                }
+
+                this.url.searchParams.append('show_payments_table', +this.showPaymentsTable);
+                this.url.searchParams.append('show_aging_table', +this.showAgingTable);
+
+                return this.url.href;
+            }
+
+            updatePdf() {
+                document
+                    .querySelector('meta[name=pdf-url]')
+                    .content = this.composedUrl;
+
+                let iframe = document.querySelector('#pdf-iframe');
+
+                if (iframe) {
+                    iframe.src = this.composedUrl;
+                }
+
+                document.querySelector('meta[name=pdf-url]').dispatchEvent(new Event('change'));
+            }
+
+            handle() {
+                this.bindEventListeners();
+            }
+        }
+
+        new Statement().handle();
     </script>
 @endpush
\ No newline at end of file