<style>
    /* Table Styling */
    #collectionReportTable th,
    #collectionReportTable td {
        white-space: nowrap;
    }

    #collectionReportTable {
        table-layout: auto;
        width: 100%;
    }

    .filter-btn-group button {
        min-width: 90px;
    }

    .summary-card {
        border-radius: 10px;
        padding: 20px;
        color: #fff;
    }

    .summary-card .label {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .summary-card .value {
        font-size: 1.5rem;
        font-weight: bold;
    }
</style>


<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col">
                <div class="card shadow">
    <div class="card-header text-uppercase custom-header bg-primary text-bg-info fw-bold">
        <i class="ti ti-filter"></i> Collection Report 
        <?php if($fromDate && $toDate): ?>
            (<?php echo e(\Carbon\Carbon::parse($fromDate)->format('d M Y')); ?> 
            - <?php echo e(\Carbon\Carbon::parse($toDate)->format('d M Y')); ?>)
        <?php endif; ?>
    </div>

    <div class="card-body">
        <form method="GET" action="<?php echo e(url('/collection_reports')); ?>" class="row gy-2 gx-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label fw-bold">From Date</label>
                <input type="date" name="fromDate" class="form-control" value="<?php echo e($fromDate); ?>">
            </div>

            <div class="col-md-3">
                <label class="form-label fw-bold">To Date</label>
                <input type="date" name="toDate" class="form-control" value="<?php echo e($toDate); ?>">
            </div>

            <div class="col-md-3 d-flex gap-2">
                <button type="submit" class="btn btn-success">
                    <i class="ti ti-filter"></i> Apply
                </button>
                <a href="<?php echo e(url('/collection_reports')); ?>" class="btn btn-danger">
                    <i class="ti ti-x"></i> Clear
                </a>
            </div>
        </form>
    </div>
</div>


                <div class="d-flex flex-wrap mb-3 gap-2">
                    <a href="<?php echo e(route('view_collection_report')); ?>" class="btn btn-secondary"><i class="ti ti-file-export"></i> Export PDF</a>
                    <a href="#" class="btn btn-success"><i class="ti ti-table-export"></i> Export Excel</a>
                </div>

                <div class="card shadow mb-4 border-info">
    <div class="card-header bg-primary text-white fw-bold">
        <i class="ti ti-table"></i> Collection Data
    </div>
    
    
<div class="card shadow-sm mb-3">
  <div class="card-body py-3">
    <div class="row g-2 align-items-center">

      <!-- 🔍 Search -->
      <div class="col-md-3">
        <input type="text" id="searchInput" 
               class="form-control form-control-sm rounded-pill"
               placeholder="🔍 Search members...">
      </div>

      <!-- ⚙️ Advanced Filter Toggle -->
      <div class="col-md-2">
        <button class="btn btn-outline-primary btn-sm rounded-pill w-100" 
                type="button" data-bs-toggle="collapse" 
                data-bs-target="#advancedFilters" 
                aria-expanded="false" aria-controls="advancedFilters">
          ⚙️ Advanced Filters
        </button>
      </div>

      <!-- 📑 Column Toggle -->
      <div class="col-md-2">
        <button class="btn btn-outline-secondary btn-sm rounded-pill w-100"
                type="button" data-bs-toggle="collapse" 
                data-bs-target="#columnFilters"
                aria-expanded="false" aria-controls="columnFilters">
          📑 Columns
        </button>
      </div>

      <!-- 📊 Rows per page -->
      <div class="col-md-2">
        <select id="rowsPerPageSelect" 
                class="form-select form-select-sm rounded-pill border-primary text-primary fw-bold shadow-sm" 
                style="max-width: 150px;">
          <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>
      </div>

      <!-- 📄 Export Buttons -->
      <div class="col-md-3 d-flex justify-content-end gap-2 flex-wrap">
        <button id="exportPDF" class="btn btn-danger btn-sm rounded-pill">📄 PDF</button>
        <button id="exportExcel" class="btn btn-success btn-sm rounded-pill">📊 Excel</button>
      </div>
    </div>

    <!-- 🔽 Advanced Filters Section -->
    <div class="collapse mt-3" id="advancedFilters">
      <div class="card card-body shadow-sm p-3">
        <h6 class="fw-bold text-primary mb-3">⚙️ Advanced Filters</h6>
        <div class="row g-3">

          <div class="col-md-3">
            <label class="form-label mb-1">Division</label>
            <select id="divisionFilter" class="form-select form-select-sm rounded-pill"></select>
          </div>
          <div class="col-md-3">
            <label class="form-label mb-1">Village</label>
            <select id="villageFilter" class="form-select form-select-sm rounded-pill"></select>
          </div>
          <div class="col-md-3">
            <label class="form-label mb-1">GN Division</label>
            <select id="gnDivisionFilter" class="form-select form-select-sm rounded-pill"></select>
          </div>
          <div class="col-md-3">
            <label class="form-label mb-1">Small Group</label>
            <select id="smallGroupFilter" class="form-select form-select-sm rounded-pill"></select>
          </div>
          

          <div class="col-12 d-flex gap-2 mt-2">
            <button class="btn btn-sm btn-primary" id="applyAdvancedFilters">Apply</button>
            <button class="btn btn-sm btn-outline-secondary" id="resetAllFilters">Reset All</button>
          </div>

        </div>
      </div>
    </div>

    <!-- 🔽 Column Visibility Section -->
    <div class="collapse mt-3" id="columnFilters">
      <div class="card card-body shadow-sm p-2">
        <h6 class="fw-bold text-primary mb-2">📊 Column Visibility</h6>
        <div class="row g-2" id="columnToggleContainer"></div>
      </div>
    </div>
  </div>
</div>

    
    
    <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 500px; overflow-y: auto; overflow-x: auto;">
            <table id="collectionReortTable" class="table table-striped table-bordered table-hover mb-0" style="min-width: 1200px;">
                <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Division</th>
                        <th>Village</th>
                        <th>Small Group</th>
                        <th>Date</th>
                        <th>Collection By</th>
                        <th class="sticky-col">Member Name</th>
                        <th>Member NIC</th>
                        <th>Old Account Number</th>
                        <th>Savings</th>
                        <th>Principal Amount</th>
                        <th>Interest Amount</th>
                        <th>Total Amount</th>
                    </tr>
                </thead>
                <tbody>
<?php
    $count = 1;
    $totalSaving = 0;
    $totalPrincipal = 0;
    $totalInterest = 0;
    $grandTotal = 0;
    $userRolesArray = $getUserRole->pluck('roleName')->toArray();
    $usersDataPer = json_decode($permissions, true);
?>

<?php $__currentLoopData = $getCollectionData; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php if($data['descriptions'] === 'Saving from Loan Overpayment') continue; ?>

    <?php
        $encryptedId = Crypt::encrypt($data['memberId']);
        $totalSaving += $data['totalSaving'];
        $totalPrincipal += $data['totalPrincipal'];
        $totalInterest += $data['totalInterest'];
        $grandTotal += $data['totalAmount'];
    ?>

    <?php
        $divArray = auth()->user()->division;
        $vilArray = auth()->user()->village;
    ?>

    <?php if(auth()->user()->userType == 'superAdmin' || (
        $divArray && $vilArray &&
        in_array($data['divisionId'], json_decode($divArray)) &&
        in_array($data['villageId'], json_decode($vilArray))
    )): ?>
    <tr>
        <td class="sticky-col"><?php echo e($count++); ?></td>
        <td><?php echo e($data['divisionName']); ?></td>
        <td><?php echo e($data['villageName']); ?></td>
        <td><?php echo e($data['smallGroupName']); ?></td>
        <td><?php echo e($data['collectionDate']); ?></td>
        <td><?php echo e($data['collectedBy']); ?></td>
        <td class="sticky-col">
            <?php if(auth()->user()->userType == 'superAdmin' || in_array('viewMember', $usersDataPer)): ?>
                <a href="<?php echo e(route('view_member', $encryptedId)); ?>">
                    <?php echo e($data['memberFirstName']); ?> <?php echo e($data['memberLastName']); ?>

                </a>
            <?php else: ?>
                <?php echo e($data['memberFirstName']); ?> <?php echo e($data['memberLastName']); ?>

            <?php endif; ?>
        </td>
        
        <td><?php echo e($data['nicNumber']); ?></td>
        <td><?php echo e($data['oldAccountNumber']); ?></td>
        <td><?php echo e(number_format($data['totalSaving'],2)); ?></td>
        <td><?php echo e(number_format($data['totalPrincipal'],2)); ?></td>
        <td><?php echo e(number_format($data['totalInterest'],2)); ?></td>
        <td><?php echo e(number_format($data['totalAmount'],2)); ?></td>
    </tr>
    <?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</tbody>
                <tfoot class="fw-bold bg-light" style="position: sticky; bottom: 0; z-index: 5;">
                    <tr>
                        <td colspan="9" class="text-end">Total</td>
                        <td><?php echo e(number_format($totalSaving,2)); ?></td>
                        <td><?php echo e(number_format($totalPrincipal,2)); ?></td>
                        <td><?php echo e(number_format($totalInterest,2)); ?></td>
                        <td><?php echo e(number_format($grandTotal,2)); ?></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>


   


    
    <div class="row g-3 mb-4">
        <div class="col-md-2">
            <div class="summary-card bg-gradient-primary text-center">
                <div class="label">Total Collectors</div>
                <div class="value"><?php echo e($getCollectionData->pluck('collectedBy')->unique()->count()); ?></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card bg-gradient-success text-center">
                <div class="label">Total Members</div>
                <div class="value"><?php echo e($getCollectionData->pluck('memberId')->unique()->count()); ?></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card bg-gradient-warning text-center">
                <div class="label">Total Divisions</div>
                <div class="value"><?php echo e($getCollectionData->pluck('divisionId')->unique()->count()); ?></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card bg-gradient-danger text-center">
                <div class="label">Total Villages</div>
                <div class="value"><?php echo e($getCollectionData->pluck('villageId')->unique()->count()); ?></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card bg-gradient-info text-center">
                <div class="label">Total Small Groups</div>
                <div class="value"><?php echo e($getCollectionData->pluck('smallGroupId')->unique()->count()); ?></div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="summary-card bg-gradient-secondary text-center">
                <div class="label">Total Amount</div>
                <div class="value"><?php echo e(number_format($grandTotal,2)); ?></div>
            </div>
        </div>
    </div>

</div>

<script>
(function () {
  const COL = {
    IDX: 0,
    DIVISION: 1,
    VILLAGE: 2,
    GN_DIVISION: 3,
    GROUP: 4,
    FO: 5,
    // ...continue with your other columns
  };

  const table = document.getElementById("collectionReortTable");
  if (!table) return;

  const rows = Array.from(table.querySelectorAll("tbody tr"));

  const searchInput = document.getElementById("searchInput");
  const divisionFilter = document.getElementById("divisionFilter");
  const villageFilter = document.getElementById("villageFilter");
  const gnDivisionFilter = document.getElementById("gnDivisionFilter");
  const smallGroupFilter = document.getElementById("smallGroupFilter");
  const foFilter = document.getElementById("foFilter");

  function text(row, colIndex) {
    return row.children[colIndex]?.textContent?.trim() ?? "";
  }
  function escapeHtml(s) {
    return s.replace(/[&<>"']/g, m => ({
      "&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#039;"
    }[m]));
  }
  function uniqueColumnValues(colIndex) {
    const set = new Set();
    rows.forEach(r => set.add(text(r, colIndex)));
    set.delete("");
    return Array.from(set).filter(v=>v && v!=="-").sort();
  }
  function populateSimpleSelect(selectEl, values, placeholder) {
    selectEl.innerHTML = `<option value="">${placeholder}</option>`;
    values.forEach(v => {
      selectEl.innerHTML += `<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`;
    });
  }

  // populate dropdowns
  populateSimpleSelect(divisionFilter, uniqueColumnValues(COL.DIVISION), "All Divisions");
  populateSimpleSelect(villageFilter, uniqueColumnValues(COL.VILLAGE), "All Villages");
  populateSimpleSelect(gnDivisionFilter, uniqueColumnValues(COL.GN_DIVISION), "All GN Divisions");
  populateSimpleSelect(smallGroupFilter, uniqueColumnValues(COL.GROUP), "All Small Groups");
  populateSimpleSelect(foFilter, uniqueColumnValues(COL.FO), "All FOs");

  function applyFilters() {
    const searchValue = (searchInput.value || "").toLowerCase();
    const divisionValue = divisionFilter.value;
    const villageValue = villageFilter.value;
    const gnValue = gnDivisionFilter.value;
    const groupValue = smallGroupFilter.value;
    const foValue = foFilter.value;

    rows.forEach(row => {
      const matchesSearch = row.textContent.toLowerCase().includes(searchValue);
      const matchesDivision = !divisionValue || text(row, COL.DIVISION) === divisionValue;
      const matchesVillage = !villageValue || text(row, COL.VILLAGE) === villageValue;
      const matchesGN = !gnValue || text(row, COL.GN_DIVISION) === gnValue;
      const matchesGroup = !groupValue || text(row, COL.GROUP) === groupValue;
      const matchesFO = !foValue || text(row, COL.FO) === foValue;

      row.style.display = (matchesSearch && matchesDivision && matchesVillage && matchesGN && matchesGroup && matchesFO) ? "" : "none";
    });
  }

  // events
  [searchInput, divisionFilter, villageFilter, gnDivisionFilter, smallGroupFilter, foFilter].forEach(el => {
    el.addEventListener("input", applyFilters);
    el.addEventListener("change", applyFilters);
  });

  // init
  applyFilters();
})();
</script>
<?php /**PATH /home/techhdyz/new.technathi.cloud/resources/views/pages/allpages/reports/collection_reports.blade.php ENDPATH**/ ?>