<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                <!-- Report Header with Year Filter -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-primary text-white d-flex flex-wrap justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <i class="menu-icon ti ti-users-group me-2"></i>
                            <h5 class="mb-0 text-white">Member Saving Report</h5>
                        </div>
                        <form method="GET" action="<?php echo e(url('/member_savings_report')); ?>" class="d-flex align-items-center">
                            <?php
                                $currentYear = now()->year;
                                $selectedYear = request('year', $currentYear);
                            ?>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text bg-white text-primary"><i class="ti ti-calendar"></i></span>
                                <select name="year" id="year" class="form-select form-select-lg text-white bg-primary border-primary">
                                    <?php for($y = $currentYear; $y >= 2009; $y--): ?>
                                        <option value="<?php echo e($y); ?>" <?php echo e($selectedYear == $y ? 'selected' : ''); ?>>
                                            <?php echo e($y); ?>

                                        </option>
                                    <?php endfor; ?>
                                </select>
                                <button type="submit" class="btn btn-light btn-lg">Select Year</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Filters Section -->
                <div class="card shadow mb-5">
                    <div class="card-header bg-secondary text-white pb-3">
                        <h5 class="mb-0 text-white">Filters</h5>
                    </div>
                    <div class="card-body pt-4">
                        <!-- Basic Filters Row -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-4">
                                <div class="input-group input-group-lg">
                                    <span class="input-group-text"><i class="ti ti-search"></i></span>
                                    <input type="text" id="searchInput" class="form-control form-control-lg" placeholder="Search members...">
                                </div>
                            </div>
                            <div class="col-md-8 d-flex flex-wrap gap-2">
                                <button class="btn btn-outline-primary btn-lg" type="button" data-bs-toggle="collapse" data-bs-target="#advancedFilters">
                                    <i class="ti ti-adjustments me-1"></i> Advanced Filters
                                </button>
                                <div class="ms-auto d-flex gap-2 flex-wrap">
                                    <select id="rowsPerPageSelect" class="form-select form-select-lg" style="width: auto;">
                                        <option value="10">10 rows</option>
                                        <option value="25">25 rows</option>
                                        <option value="50">50 rows</option>
                                        <option value="100">100 rows</option>
                                        <option value="200">200 rows</option>
                                        <option value="500">500 rows</option>
                                        <option value="all">All</option>
                                    </select>
                                    <button id="exportPDF" class="btn btn-danger btn-lg">
                                        <i class="ti ti-file-type-pdf me-1"></i> PDF
                                    </button>
                                    <button id="exportExcel" class="btn btn-success btn-lg">
                                        <i class="ti ti-file-type-xls me-1"></i> Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- Advanced Filters Section -->
                        <div class="collapse mb-4" id="advancedFilters">
                            <div class="card border-0 bg-light">
                                <div class="card-body">
                                    <h6 class="text-primary mb-3"><i class="ti ti-filter me-1"></i> Advanced Filters</h6>
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <label class="form-label">Division</label>
                                            <select id="divisionFilter" class="form-select form-select-lg">
                                                <option value="">All Divisions</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Village</label>
                                            <select id="villageFilter" class="form-select form-select-lg" disabled>
                                                <option value="">All Villages</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">GN Division</label>
                                            <select id="gnDivisionFilter" class="form-select form-select-lg" disabled>
                                                <option value="">All GN Divisions</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Small Group</label>
                                            <select id="smallGroupFilter" class="form-select form-select-lg" disabled>
                                                <option value="">All Small Groups</option>
                                            </select>
                                        </div>
                                        <div class="col-12 d-flex gap-2">
                                            <button class="btn btn-primary btn-lg" id="applyAdvancedFilters">
                                                <i class="ti ti-check me-1"></i> Apply Filters
                                            </button>
                                            <button class="btn btn-outline-secondary btn-lg" id="resetAllFilters">
                                                <i class="ti ti-refresh me-1"></i> Reset All
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Member Savings Table -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-light text-dark d-flex justify-content-between align-items-center pb-3">
                        <h5 class="mb-0 text-dark">Member Savings Table (<?php echo e($selectedYear); ?>)</h5>
                        <span class="badge bg-primary text-white" id="memberCount"><?php echo e($getMember->count()); ?> members</span>
                    </div>
                    <div class="card-body pt-4 pb-0">
                        <div class="table-responsive" style="max-height: 500px;">
                            <table id="MembersavingTable" class="table table-hover table-striped table-bordered mb-0">
                                <thead class="bg-light text-dark sticky-top">
                                    <tr>
                                        <th>#</th>
                                        <th>Division</th>
                                        <th>Village</th>
                                        <th>GN Division</th>
                                        <th>Small Group</th>
                                        <th>Name</th>
                                        <th>NIC Number</th>
                                        <th>Old Account Number</th>
                                        <?php for($m=1;$m<=12;$m++): ?>
                                            <th><?php echo e(\Carbon\Carbon::create()->month($m)->format('M')); ?></th>
                                        <?php endfor; ?>
                                        <th class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <?php
                                        $count = 1;
                                        $footerTotals = array_fill(1,12,0);
                                        $footerGrandTotal = 0;
                                    ?>
                                    <?php $__currentLoopData = $getMember; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $member): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php
                                            $encryptedId = encrypt($member->id);
                                            $monthlyTotalsMember = array_fill(1,12,0);
                                            $memberTotal = 0;
                                            foreach ($getData as $getD) {
                                                if ($getD->memberId == $member->uniqueId && $getD->type == 'Credit') {
                                                    $month = (int) \Carbon\Carbon::parse($getD->created_at)->format('n');
                                                    $amount = $getD->amount ?? 0;
                                                    $monthlyTotalsMember[$month] += $amount;
                                                    $memberTotal += $amount;
                                                }
                                            }
                                            for($m=1;$m<=12;$m++) $footerTotals[$m] += $monthlyTotalsMember[$m];
                                            $footerGrandTotal += $memberTotal;
                                        ?>
                                        <tr>
                                            <td><?php echo e($count++); ?></td>
                                            <td><a href="<?php echo e(route('division_details', ['id' => encrypt($member->divisionId)])); ?>"><?php echo e($member->division?->divisionName ?? '-'); ?></a></td>
                                            <td> <a href="<?php echo e(route('village_details', ['id' => encrypt($member->villageId)])); ?>"><?php echo e($member->village?->villageName ?? '-'); ?></a></td>
                                            <td><?php echo e($member->gnDivision->gnDivisionName ?? '-'); ?></td>
                                            <td><a href="<?php echo e(route('smallgroup_details', ['id' => encrypt($member->smallGroupId)])); ?>"><?php echo e($member->smallgroup?->smallGroupName ?? '-'); ?></a></td>
                                            <td><a href="<?php echo e(route('view_member', $encryptedId)); ?>">
                                                    <?php echo e($member->firstName); ?> <?php echo e($member->lastName); ?>

                                                </a>
                                            </td>
                                            <td><?php echo e($member->nicNumber); ?></td>
                                            <td><?php echo e($member->oldAccountNumber); ?></td>
                                            <?php for($m=1;$m<=12;$m++): ?>
                                                <td class="text-end"><?php echo e(number_format($monthlyTotalsMember[$m],2)); ?></td>
                                            <?php endfor; ?>
                                            <td class="text-end fw-bold text-success"><?php echo e(number_format($memberTotal,2)); ?></td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </tbody>
                                <tfoot class="bg-light text-dark fw-bold sticky-bottom" id="tableFooter">
                                    <tr>
                                        <td colspan="8" class="text-end">TOTAL</td>
                                        <?php for($m=1;$m<=12;$m++): ?>
                                            <td class="text-end" id="footer-month-<?php echo e($m); ?>"><?php echo e(number_format($footerTotals[$m],2)); ?></td>
                                        <?php endfor; ?>
                                        <td class="text-end" id="footer-grand-total"><?php echo e(number_format($footerGrandTotal,2)); ?></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        <!-- Pagination Controls -->
                        <div class="d-flex justify-content-between align-items-center p-3 border-top">
                            <div>
                                <span id="paginationInfo">Showing 0 to 0 of 0 entries</span>
                            </div>
                            <div class="d-flex gap-1" id="paginationControls">
                                <!-- Pagination buttons will be inserted here by JavaScript -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Charts Section -->
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow h-100">
                            <div class="card-header bg-light text-dark pb-3">
                                <h5 class="mb-0 text-dark">Total Savings by Division (<?php echo e($selectedYear); ?>)</h5>
                            </div>
                            <div class="card-body pt-4">
                                <canvas id="divisionSavingsChart" height="150"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="card shadow h-100">
                            <div class="card-header bg-light text-dark pb-3">
                                <h5 class="mb-0 text-dark">Monthly Savings by Division (<?php echo e($selectedYear); ?>)</h5>
                            </div>
                            <div class="card-body pt-4">
                                <canvas id="monthlyDivisionSavingsChart" height="150"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
/* Custom styles for sticky footer */
.table-responsive {
    position: relative;
}
.table-responsive tfoot.sticky-bottom {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
/* Ensure the footer has a background that covers any content behind it */
.table-responsive tfoot.sticky-bottom {
    background-color: #f8f9fa; /* Light background */
}
/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .input-group-lg {
        flex-wrap: wrap;
    }
    
    .input-group-lg .form-select,
    .input-group-lg .form-control {
        flex: 1 1 auto;
        margin-bottom: 0.5rem;
    }
    
    .input-group-lg .btn {
        flex: 0 0 auto;
    }
    
    .d-flex.flex-wrap {
        justify-content: center;
        margin-top: 0.5rem;
    }
    
    .ms-auto {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }
}
/* Style for year select options */
#year option {
    background-color: #0d6efd;
    color: white;
}
</style>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- SheetJS for Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<!-- jsPDF for PDF export -->
<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/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>

<!-- Pass PHP variables to JavaScript -->
<script>
    window.divisionSavings = <?php echo json_encode($divisionSavings); ?>;
    window.divisionMonthlySavings = <?php echo json_encode($divisionMonthlySavings); ?>;
</script>

<!-- External JavaScript file -->
<script src="<?php echo e(asset('pages-custom-js/member_saving_report.js')); ?>"></script><?php /**PATH /home/techhdyz/new.technathi.cloud/resources/views/pages/allpages/reports/member_savings_report.blade.php ENDPATH**/ ?>