<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                {{-- Page Header --}}
                <div class="card shadow mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center bg-primary text-white">
                        <h5 class="mb-0 text-uppercase fw-bold">
                            <i class="menu-icon ti ti-users-group me-2"></i>Member Report
                        </h5>
                        <div class="d-flex align-items-center gap-3">
                            
                            <form method="GET" action="{{ url('/member_report') }}" id="dateFilterForm" class="d-flex align-items-center gap-2">
                                <label for="filter_date" class="text-white mb-0 fw-bold">As on Date:</label>
                                <input type="date" name="filter_date" id="filter_date" class="form-control form-control-sm"
                                       value="{{ $filterDate->format('Y-m-d') }}">
                                <button type="submit" class="btn btn-light btn-sm">Apply Date</button>
                            </form>
                        </div>
                    </div>
                </div>
                
                {{-- Combined Controls Card --}}
                <div class="card shadow-sm mb-3">
                    <div class="card-body">
                        {{-- Main Controls Row --}}
                        <div class="row align-items-center mb-3">
                            <div class="col-md-8">
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <div class="input-group" style="flex: 1; min-width: 300px;">
                                        <span class="input-group-text"><i class="ti ti-search"></i></span>
                                        <input type="text" id="tableSearch" class="form-control" placeholder="Search members...">
                                        <button class="btn btn-outline-secondary" type="button" id="clearSearch">Clear</button>
                                    </div>
                                    <button class="btn btn-outline-primary" type="button" id="toggleAdvancedFilters">
                                        <i class="ti ti-filter me-1"></i> Filters
                                    </button>
                                    <button class="btn btn-outline-info" type="button" id="toggleColumnVisibility">
                                        <i class="ti ti-columns me-1"></i> Columns
                                    </button>
                                    <button class="btn btn-outline-success" type="button" id="exportExcel">
                                        <i class="ti ti-file-spreadsheet me-1"></i> Excel
                                    </button>
                                    <button class="btn btn-outline-danger" type="button" id="exportPDF">
                                        <i class="ti ti-file-text me-1"></i> PDF
                                    </button>
                                    <button class="btn btn-outline-secondary" type="button" id="printTable">
                                        <i class="ti ti-printer me-1"></i> Print
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex justify-content-md-end align-items-center">
                                    <div class="d-flex align-items-center me-3">
                                        <span class="me-2">Rows per page:</span>
                                        <select class="form-select form-select-sm" id="rowsPerPage" style="width: auto;">
                                            <option value="10">10</option>
                                            <option value="20" selected>20</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                            <option value="200">200</option>
                                        </select>
                                    </div>
                                    <div id="searchResultsInfo" class="text-muted"></div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Advanced Filters Section --}}
                        <div id="advancedFilters" class="mt-3" style="display: none;">
                            <div class="card border">
                                <div class="card-body">
                                    <h6 class="card-title mb-3">Advanced Filters</h6>
                                    
                                    {{-- Location Filters --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-3">
                                            <label for="divisionFilter" class="form-label">Division</label>
                                            <select class="form-select form-select-sm" id="divisionFilter">
                                                <option value="">All Divisions</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="villageFilter" class="form-label">Village</label>
                                            <select class="form-select form-select-sm" id="villageFilter" disabled>
                                                <option value="">Select Division First</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="smallGroupFilter" class="form-label">Small Group</label>
                                            <select class="form-select form-select-sm" id="smallGroupFilter" disabled>
                                                <option value="">Select Village First</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="gnDivisionFilter" class="form-label">GN Division</label>
                                            <select class="form-select form-select-sm" id="gnDivisionFilter" disabled>
                                                <option value="">Select Division First</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    {{-- Personal Information Filters --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-3">
                                            <label for="professionTypeFilter" class="form-label">Profession Type</label>
                                            <select class="form-select form-select-sm" id="professionTypeFilter">
                                                <option value="">All Profession Types</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="professionFilter" class="form-label">Profession</label>
                                            <select class="form-select form-select-sm" id="professionFilter" disabled>
                                                <option value="">Select Profession Type First</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="maritalStatusFilter" class="form-label">Marital Status</label>
                                            <select class="form-select form-select-sm" id="maritalStatusFilter">
                                                <option value="">All Marital Status</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="ageRangeFilter" class="form-label">Age Range (Years)</label>
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">From</span>
                                                <input type="number" class="form-control" id="ageFrom" placeholder="0" min="0">
                                                <span class="input-group-text">To</span>
                                                <input type="number" class="form-control" id="ageTo" placeholder="100" min="0">
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {{-- Status Filters --}}
                                    <div class="row g-3 mb-3">
                                        <div class="col-md-6">
                                            <label for="statusFilter" class="form-label">Status</label>
                                            <select class="form-select form-select-sm" id="statusFilter">
                                                <option value="">All Status</option>
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="statusTypeFilter" class="form-label">Status Type</label>
                                            <select class="form-select form-select-sm" id="statusTypeFilter">
                                                <option value="">All Status Types</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    {{-- Amount Range Filters --}}
                                    <div class="border-top pt-3 mt-3">
                                        <h6 class="card-title mb-3">Amount Range Filters</h6>
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Savings Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="savingsFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="savingsTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Other Income Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="otherIncomeFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="otherIncomeTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Death Subscription Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="deathSubFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="deathSubTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Total Loans Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="totalLoansFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="totalLoansTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Active Loan Amount Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="activeLoanAmountFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="activeLoanAmountTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Loan Outstanding Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="loanOutstandingFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="loanOutstandingTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Principal Arrears Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="principalArrearsFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="principalArrearsTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Interest Arrears Range</label>
                                                <div class="input-group input-group-sm">
                                                    <span class="input-group-text">From</span>
                                                    <input type="number" class="form-control" id="interestArrearsFrom" placeholder="0.00" step="0.01">
                                                    <span class="input-group-text">To</span>
                                                    <input type="number" class="form-control" id="interestArrearsTo" placeholder="0.00" step="0.01">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <button class="btn btn-sm btn-primary" id="applyFilters">Apply Filters</button>
                                            <button class="btn btn-sm btn-outline-secondary ms-2" id="resetFilters">Reset All</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Column Visibility Section --}}
                        <div id="columnVisibilitySection" class="mt-3" style="display: none;">
                            <div class="card border">
                                <div class="card-body">
                                    <h6 class="card-title mb-3">Column Visibility</h6>
                                    <div class="row g-3" id="columnCheckboxes">
                                        {{-- Column checkboxes will be dynamically inserted here --}}
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12">
                                            <button class="btn btn-sm btn-primary me-2" id="applyColumnVisibility">Apply</button>
                                            <button class="btn btn-sm btn-outline-secondary" id="resetColumns">Reset to Default</button>
                                            <button class="btn btn-sm btn-outline-info float-end" id="selectAllColumns">Select All</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                {{-- Loading Indicator --}}
                <div id="loadingIndicator" class="text-center my-3" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Processing data...</p>
                </div>
                
                {{-- Table Card --}}
                <div class="card shadow-sm">
                    <div class="card-body p-3">
                        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                            <table id="memberTable" class="table table-sm table-striped table-bordered member-saving-table">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th data-column="0">#</th>
                                        <th data-column="1">Division</th>
                                        <th data-column="2">Village</th>
                                        <th data-column="3">Small Group</th>
                                        <th data-column="4">GN Division</th>
                                        <th data-column="5">Member Name</th>
                                        <th data-column="6">NIC Number</th>
                                        <th data-column="7">Unique ID</th>
                                        <th data-column="8">Old Account Number</th>
                                        <th data-column="9">Savings</th>
                                        <th data-column="10">Other Income</th>
                                        <th data-column="11">Death Subscription</th>
                                        <th data-column="12">Count of Total Loans</th>
                                        <th data-column="13">Total Loans</th>
                                        <th data-column="14">Active Loans</th>
                                        <th data-column="15">Active Loan Amount</th>
                                        <th data-column="16">Loan Outstanding</th>
                                        <th data-column="17">Due Terms</th>
                                        <th data-column="18">Principal Arrears</th>
                                        <th data-column="19">Interest Arrears</th>
                                        <th data-column="20">Profession Type</th>
                                        <th data-column="21">Profession</th>
                                        <th data-column="22">Phone Number</th>
                                        <th data-column="23">Address</th>
                                        <th data-column="24">NIC Issue Date</th>
                                        <th data-column="25">Marital Status</th>
                                        <th data-column="26">Date Of Birth</th>
                                        <th data-column="27">Age</th>
                                        <th data-column="28">Follower Name</th>
                                        <th data-column="29">Follower Address</th>
                                        <th data-column="30">Follower NIC Number</th>
                                        <th data-column="31">Follower Issue Date</th>
                                        <th data-column="32">Status</th>
                                        <th data-column="33">Status Type</th>
                                        <th data-column="34">Location</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                    $i = 1;
                                    @endphp
                                    @foreach($getMember as $member)
                                        @php
                                        $encryptedId = Crypt::encrypt($member->id);
                                            $uid = $member->uniqueId ?? '';
                                            $saving = $savingsOnDate[$uid] ?? 0;
                                            $otherIncome = $otherIncomeOnDate[$uid] ?? 0;
                                            $deathSub = $deathSubscriptionOnDate[$uid] ?? 0;
                                            $loanCount = $totalLoanCountByMember[$member->id] ?? 0;
                                            $loanAmount = $totalLoanAmountByMember[$member->id] ?? 0;
                                            $activeLoanCount = $totalActiveLoanCountByMember[$member->id] ?? 0;
                                            $activeLoanAmount = $activeLoansByMember[$member->id] ?? 0;
                                            $loanOutstanding = $loanOutstandingByMember[$member->id] ?? 0;
                                            $principalArrears = $principalArrearsByMember[$member->id] ?? 0;
                                            $interestArrears = $interestArrearsByMember[$member->id] ?? 0;
                                            $dueTerms = $dueTermsByMember[$member->id] ?? 0;
                                            $age = $member->dateOfBirth ? \Carbon\Carbon::parse($member->dateOfBirth)->diff($filterDate)->format('%y years, %m months, %d days') : '-';
                                            $ageYears = $member->dateOfBirth ? \Carbon\Carbon::parse($member->dateOfBirth)->diff($filterDate)->y : 0;
                                        @endphp
                                        <tr 
                                            data-saving="{{ $saving }}"
                                            data-other-income="{{ $otherIncome }}"
                                            data-death-subscription="{{ $deathSub }}"
                                            data-total-loan-count="{{ $loanCount }}"
                                            data-total-loans="{{ $loanAmount }}"
                                            data-active-loan-count="{{ $activeLoanCount }}"
                                            data-active-loan-amount="{{ $activeLoanAmount }}"
                                            data-loan-outstanding="{{ $loanOutstanding }}"
                                            data-principal-arrears="{{ $principalArrears }}"
                                            data-interest-arrears="{{ $interestArrears }}"
                                            data-division="{{ $member->division->divisionName ?? '-' }}"
                                            data-village="{{ $member->village->villageName ?? '-' }}"
                                            data-small-group="{{ $member->smallgroup->smallGroupName ?? '-' }}"
                                            data-gn-division="{{ $member->gnDivision->gnDivisionName ?? '-' }}"
                                            data-profession-type="{{ $member->professionType ?? '-' }}"
                                            data-profession="{{ $member->profession ?? '-' }}"
                                            data-marital-status="{{ $member->maritalStatus ?? '-' }}"
                                            data-age-years="{{ $ageYears }}"
                                            data-status="{{ $member->status }}"
                                            data-status-type="{{ $member->statusType ?? '-' }}"
                                        >
                                            <td data-column="0">{{ $i++ }}</td>
                                            <td data-column="1"><a href="{{ route('division_details', ['id' => encrypt($member->divisionId)]) }}">{{ $member->division->divisionName ?? '-' }}</a></td>
                                            <td data-column="2"> <a href="{{ route('village_details', ['id' => encrypt($member->villageId)]) }}">{{ $member->village->villageName ?? '-' }}</a></td>
                                            <td data-column="3"> <a href="{{ route('smallgroup_details', ['id' => encrypt($member->smallGroupId)]) }}">{{ $member->smallgroup->smallGroupName ?? '-' }}</a></td>
                                            <td data-column="4">{{ $member->gnDivision->gnDivisionName ?? '-' }}</td>
                                            <td data-column="5"><a href="{{ route('view_member', $encryptedId) }}">{{ $member->firstName }} {{ $member->lastName }}</a></td>
                                            <td data-column="6">{{ $member->nicNumber ?? '-' }}</td>
                                            <td data-column="7">{{ $uid }}</td>
                                            <td data-column="8">{{ $member->oldAccountNumber ?? '-' }}</td>
                                            <td data-column="9">{{ number_format($saving, 2) }}</td>
                                            <td data-column="10">{{ number_format($otherIncome, 2) }}</td>
                                            <td data-column="11">{{ number_format($deathSub, 2) }}</td>
                                            <td data-column="12">{{ $loanCount }}</td>
                                            <td data-column="13">{{ number_format($loanAmount, 2) }}</td>
                                            <td data-column="14">{{ $activeLoanCount }}</td>
                                            <td data-column="15">{{ number_format($activeLoanAmount, 2) }}</td>
                                            <td data-column="16">{{ number_format($loanOutstanding, 2) }}</td>
                                            <td data-column="17">{{ $dueTerms > 0 ? $dueTerms : '-' }}</td>
                                            <td data-column="18">{{ number_format($principalArrears, 2) }}</td>
                                            <td data-column="19">{{ number_format($interestArrears, 2) }}</td>
                                            <td data-column="20">{{ $member->professionType ?? '-' }}</td>
                                            <td data-column="21">{{ $member->profession ?? '-' }}</td>
                                            <td data-column="22">{{ $member->phoneNumber ?? '-' }}</td>
                                            <td data-column="23">{{ $member->address ?? '-' }}</td>
                                            <td data-column="24">{{ $member->nicIssueDate ? \Carbon\Carbon::parse($member->nicIssueDate)->format('Y-m-d') : '-' }}</td>
                                            <td data-column="25">{{ $member->maritalStatus ?? '-' }}</td>
                                            <td data-column="26">{{ $member->dateOfBirth ? \Carbon\Carbon::parse($member->dateOfBirth)->format('Y-m-d') : '-' }}</td>
                                            <td data-column="27">{{ $age }}</td>
                                            <td data-column="28">{{ $member->followerName ?? '-' }}</td>
                                            <td data-column="29">{{ $member->followerAddress ?? '-' }}</td>
                                            <td data-column="30">{{ $member->followerNicNumber ?? '-' }}</td>
                                            <td data-column="31">{{ $member->followerIssueDate ? \Carbon\Carbon::parse($member->followerIssueDate)->format('Y-m-d') : '-' }}</td>
                                            <td data-column="32">
                                                @if($member->status == 1)
                                                    <span class="badge bg-label-success">Active</span>
                                                @else
                                                    <span class="badge bg-label-danger">Inactive</span>
                                                @endif
                                            </td>
                                            <td data-column="33">{{ $member->statusType ?? '-' }}</td>
                                            <td data-column="34">
                                                <a href="https://www.google.com/maps?q={{ $member->latitude ?? 0 }},{{ $member->longitude ?? 0 }}" target="_blank">View on Map</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                       
                        {{-- Pagination Controls --}}
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div id="paginationInfo" class="text-muted"></div>
                            <div id="paginationControls"></div>
                        </div>
                    </div>
                </div>
                
                {{-- Summary Cards --}}
                <div class="row mt-4">
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Total Savings</h6>
                            <h4 class="text-primary" id="totalSavings">{{ number_format($totalSavingsAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Total Other Income</h6>
                            <h4 class="text-success" id="totalOtherIncome">{{ number_format($totalOtherIncomeAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Total Death Subscription</h6>
                            <h4 class="text-info" id="totalDeathSub">{{ number_format($totalDeathSubAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Total Loan Count</h6>
                            <h4 class="text-danger" id="totalLoanCount">{{ $totalCountOfTotalLoansAll }}</h4>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Total Loans Amount</h6>
                            <h4 class="text-purple" id="totalLoansAmount">{{ number_format($totalLoansAmountAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Active Loans Count</h6>
                            <h4 class="text-orange" id="activeLoansCount">{{ $totalActiveLoansAll }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Active Loans Amount</h6>
                            <h4 class="text-teal" id="activeLoansAmount">{{ number_format($totalActiveLoanAmountAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Loan Outstanding</h6>
                            <h4 class="text-danger" id="loanOutstanding">{{ number_format($totalLoanOutstandingAll, 2) }}</h4>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Principal Arrears</h6>
                            <h4 class="text-warning" id="principalArrears">{{ number_format($totalPrincipalArrearsAll, 2) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border rounded text-center p-3">
                            <h6 class="text-muted mb-1">Interest Arrears</h6>
                            <h4 class="text-info" id="interestArrears">{{ number_format($totalInterestArrearsAll, 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include required libraries for export functionality -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<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>

<!-- Include the separate JavaScript file -->
<script src="{{ asset('pages-custom-js/member_report.js') }}"></script>