<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <?php
            // Set default empty collections if variables are not defined
            $divisions = $divisions ?? collect();
            $villages = $villages ?? collect();
            $gnDivisions = $gnDivisions ?? collect();
            $smallGroups = $smallGroups ?? collect();
            $products = $products ?? collect();
        ?>
        
        <div class="row">
            <div class="col mb-4">
                <div class="card shadow">
                    <div class="card-header text-uppercase custom-header bg-primary text-bg-info fw-bold">
                        <div class="col-6">
                            <i class="menu-icon ti ti-list"></i> Manage Loan
                        </div>
                        <div class="col-6 d-flex justify-content-end">
                            <?php if($userType == 'superAdmin'): ?>
                                <a href="/create_old_loan" class="d-none d-md-inline-block">
                                    <button class="btn btn-success btn-sm me-2"><i
                                            class="menu-icon ti ti-circle-plus"></i>
                                        Create Old Loan</button>
                                </a>
                                <a href="/create_loan" class="d-none d-md-inline-block">
                                    <button class="btn btn-success btn-sm"><i class="menu-icon ti ti-circle-plus"></i>
                                        Create New Loan</button>
                                </a>
                            <?php else: ?>
                                <?php
                                    $userRolesArray = $getUserRole->pluck('roleName')->toArray();
                                ?>

                                <?php if(in_array($userType, $userRolesArray)): ?>
                                    <?php
                                        $usersDataPer = $permissions;
                                        $usersDataPer = json_decode($usersDataPer, true);
                                    ?>

                                    <?php if(in_array('addOldLoan', $usersDataPer)): ?>
                                        <a href="/create_old_loan" class="d-none d-md-inline-block">
                                            <button class="btn btn-success btn-sm me-2"><i
                                                    class="menu-icon ti ti-circle-plus"></i>
                                                Create Old Loan</button>
                                        </a>
                                    <?php endif; ?>
                                    <?php if(in_array('addLoan', $usersDataPer)): ?>
                                        <a href="/create_loan" class="d-none d-md-inline-block">
                                            <button class="btn btn-success btn-sm"><i
                                                    class="menu-icon ti ti-circle-plus"></i>
                                                Create New Loan</button>
                                        </a>
                                    <?php endif; ?>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="<?php echo e(route('loans.list')); ?>" method="GET" id="filterForm">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="division" class="form-label">Division</label>
                                    <select name="division" id="division" class="form-select" onchange="loadVillages(this.value)">
                                        <option value="">All Divisions</option>
                                        <?php $__currentLoopData = $divisions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $division): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($division->id); ?>" <?php echo e(request('division') == $division->id ? 'selected' : ''); ?>>
                                                <?php echo e($division->divisionName); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="village" class="form-label">Village</label>
                                    <select name="village" id="village" class="form-select" onchange="loadSmallGroups(this.value)" <?php echo e(!request('division') ? 'disabled' : ''); ?>>
                                        <option value="">All Villages</option>
                                        <?php if(request('division')): ?>
                                            <?php $__currentLoopData = $villages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $village): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($village->id); ?>" <?php echo e(request('village') == $village->id ? 'selected' : ''); ?>>
                                                    <?php echo e($village->villageName); ?>

                                                </option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <?php endif; ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="gnDivision" class="form-label">GN Division</label>
                                    <select name="gnDivision" id="gnDivision" class="form-select">
                                        <option value="">All GN Divisions</option>
                                        <?php $__currentLoopData = $gnDivisions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $gnDivision): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($gnDivision->id); ?>" <?php echo e(request('gnDivision') == $gnDivision->id ? 'selected' : ''); ?>>
                                                <?php echo e($gnDivision->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="smallGroup" class="form-label">Small Group</label>
                                    <select name="smallGroup" id="smallGroup" class="form-select" <?php echo e(!request('village') ? 'disabled' : ''); ?>>
                                        <option value="">All Groups</option>
                                        <?php if(request('village')): ?>
                                            <?php $__currentLoopData = $smallGroups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($group->id); ?>" <?php echo e(request('smallGroup') == $group->id ? 'selected' : ''); ?>>
                                                    <?php echo e($group->smallGroupName); ?>

                                                </option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        <?php endif; ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="product" class="form-label">Product</label>
                                    <select name="product" id="product" class="form-select">
                                        <option value="">All Products</option>
                                        <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($product->id); ?>" <?php echo e(request('product') == $product->id ? 'selected' : ''); ?>>
                                                <?php echo e($product->productName); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="amountRange" class="form-label">Amount Range</label>
                                    <div class="input-group">
                                        <input type="number" name="minAmount" id="minAmount" class="form-control" placeholder="Min" value="<?php echo e(request('minAmount')); ?>">
                                        <span class="input-group-text">-</span>
                                        <input type="number" name="maxAmount" id="maxAmount" class="form-control" placeholder="Max" value="<?php echo e(request('maxAmount')); ?>">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label for="loanStatus" class="form-label">Loan Status</label>
                                    <select name="loanStatus" id="loanStatus" class="form-select">
                                        <option value="">All Statuses</option>
                                        <option value="Active" <?php echo e(request('loanStatus') == 'Active' ? 'selected' : ''); ?>>Active</option>
                                        <option value="Pending" <?php echo e(request('loanStatus') == 'Pending' ? 'selected' : ''); ?>>Pending</option>
                                        <option value="Rejected" <?php echo e(request('loanStatus') == 'Rejected' ? 'selected' : ''); ?>>Rejected</option>
                                        <option value="Closed" <?php echo e(request('loanStatus') == 'Closed' ? 'selected' : ''); ?>>Closed</option>
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <div class="d-grid w-100">
                                        <button type="submit" class="btn btn-primary me-2">
                                            <i class="ti ti-search me-1"></i> Apply Filters
                                        </button>
                                        <button type="button" class="btn btn-secondary" onclick="resetFilters()">
                                            <i class="ti ti-refresh me-1"></i> Reset
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Table Card -->
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0"><i class="ti ti-list me-2"></i>Loan Table</h5>
                        
                    </div>

                    <div class="card-body">
                        <!-- Search and Filter Options -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="ti ti-search"></i></span>
                                    <input type="text" id="tableSearch" class="form-control" placeholder="Search in table...">
                                    <button class="btn btn-primary" type="button" id="clearSearch">Clear</button>
                                </div>
                            </div>
                            
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover table-striped" id="loansTable">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Division</th>
                                        <th>Village</th>
                                        <th>GN Division</th>
                                        <th>Small Group</th>
                                        <th>Loan ID</th>
                                        <th>Member Name</th>
                                        <th>Loan Date</th>
                                        <th>Product</th>
                                        <th>Loan Amount</th>
                                        <th>Status</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php $count = ($loans->currentPage() - 1) * $loans->perPage() + 1; ?>
                                    <?php $__currentLoopData = $loans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $loan): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php $loanEncId = Crypt::encrypt($loan->id); ?>
                                        <tr data-status="<?php echo e($loan->loanStatus); ?>">
                                            <td><?php echo e($count++); ?></td>
                                            <td>
                                                <?php if($loan->member && $loan->member->division): ?>
                                                    <?php $divIdEnc = Crypt::encrypt($loan->member->divisionId); ?>
                                                    <a href="<?php echo e(route('division_details', $divIdEnc)); ?>" class="text-decoration-none">
                                                        <?php echo e($loan->member->division->divisionName); ?>

                                                    </a>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if($loan->member && $loan->member->village): ?>
                                                    <?php $villageIdEnc = Crypt::encrypt($loan->member->villageId); ?>
                                                    <a href="<?php echo e(route('village_details', $villageIdEnc)); ?>" class="text-decoration-none">
                                                        <?php echo e($loan->member->village->villageName); ?>

                                                    </a>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if($loan->member && $loan->member->gnDivision): ?>
                                                    <?php echo e($loan->member->gnDivisionId); ?>

                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <?php if($loan->member && $loan->member->smallgroup): ?>
                                                    <?php $smallgroupIdEnc = Crypt::encrypt($loan->member->smallGroupId); ?>
                                                    <a href="<?php echo e(route('smallgroup_details', $smallgroupIdEnc)); ?>" class="text-decoration-none">
                                                        <?php echo e($loan->member->smallgroup->smallGroupName); ?>

                                                    </a>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <a href="<?php echo e(route('view_loan_details', $loanEncId)); ?>" class="text-decoration-none fw-medium">
                                                    <?php echo e($loan->loanId); ?>

                                                </a>
                                            </td>
                                            <td>
                                                <?php if($loan->member): ?>
                                                    <?php $encryptedId = encrypt($loan->member->id); ?>
                                                    <a href="<?php echo e(route('view_member', $encryptedId)); ?>" class="text-decoration-none">
                                                      <?php echo e($loan->member->oldAccountNumber); ?> - <?php echo e($loan->member->firstName); ?> <?php echo e($loan->member->lastName); ?>

                                                    </a>
                                                <?php endif; ?>
                                            </td>
                                            <td><?php echo e(\Carbon\Carbon::parse($loan->created_at)->format('d-m-Y')); ?></td>
                                            <td><?php echo e($loan->product->productName ?? ''); ?></td>
                                            <td class="text-end"><?php echo e(number_format($loan->principal, 2)); ?></td>
                                            <td>
                                                <?php
                                                    $statusClass = 'bg-primary';
                                                    if ($loan->loanStatus == 'Active') $statusClass = 'bg-success';
                                                    elseif ($loan->loanStatus == 'Rejected') $statusClass = 'bg-danger';
                                                    elseif ($loan->loanStatus == 'Pending') $statusClass = 'bg-warning text-dark';
                                                    elseif ($loan->loanStatus == 'Closed') $statusClass = 'bg-secondary';
                                                ?>
                                                <span class="badge <?php echo e($statusClass); ?>"><?php echo e($loan->loanStatus); ?></span>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical"></i>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="<?php echo e(route('view_loan_details', $loanEncId)); ?>">
                                                            <i class="ti ti-eye me-1"></i> View
                                                        </a>
                                                        <a class="dropdown-item" href="#">
                                                            <i class="ti ti-pencil me-1"></i> Edit
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="pagination-container d-flex justify-content-end align-items-center mt-3">
                            <?php echo e($loans->appends(request()->except('page'))->links('pagination::bootstrap-5')); ?>

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

<script>
// Preload all villages and small groups
const allVillages = [
    <?php $__currentLoopData = $villages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $village): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        { id: <?php echo e($village->id); ?>, villageName: "<?php echo e($village->villageName); ?>", divisionId: <?php echo e($village->divisionId); ?> },
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
];

const allSmallGroups = [
    <?php $__currentLoopData = $smallGroups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        { id: <?php echo e($group->id); ?>, smallGroupName: "<?php echo e($group->smallGroupName); ?>", villageId: <?php echo e($group->villageId); ?> },
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
];

function resetFilters() {
    // Reset the form and submit
    document.getElementById('filterForm').reset();
    window.location.href = "<?php echo e(route('loans.list')); ?>";
}

function loadVillages(divisionId) {
    const villageSelect = document.getElementById('village');
    const smallGroupSelect = document.getElementById('smallGroup');
    
    // Reset village and small group dropdowns
    villageSelect.innerHTML = '<option value="">All Villages</option>';
    smallGroupSelect.innerHTML = '<option value="">All Groups</option>';
    smallGroupSelect.disabled = true;
    
    if (!divisionId) {
        villageSelect.disabled = true;
        return;
    }
    
    villageSelect.disabled = false;
    
    // Filter villages by divisionId
    const filteredVillages = allVillages.filter(village => village.divisionId == divisionId);
    
    // Populate village dropdown
    filteredVillages.forEach(village => {
        const option = document.createElement('option');
        option.value = village.id;
        option.textContent = village.villageName;
        villageSelect.appendChild(option);
    });
}

function loadSmallGroups(villageId) {
    const smallGroupSelect = document.getElementById('smallGroup');
    
    // Reset small group dropdown
    smallGroupSelect.innerHTML = '<option value="">All Groups</option>';
    
    if (!villageId) {
        smallGroupSelect.disabled = true;
        return;
    }
    
    smallGroupSelect.disabled = false;
    
    // Filter small groups by villageId
    const filteredSmallGroups = allSmallGroups.filter(group => group.villageId == villageId);
    
    // Populate small group dropdown
    filteredSmallGroups.forEach(group => {
        const option = document.createElement('option');
        option.value = group.id;
        option.textContent = group.smallGroupName;
        smallGroupSelect.appendChild(option);
    });
}

// Table search and filter functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize division/village/small group dropdowns
    const divisionSelect = document.getElementById('division');
    if (divisionSelect.value) {
        loadVillages(divisionSelect.value);
        
        const villageSelect = document.getElementById('village');
        if (villageSelect.value) {
            loadSmallGroups(villageSelect.value);
        }
    }
    
    // Table search functionality
    const tableSearch = document.getElementById('tableSearch');
    const clearSearch = document.getElementById('clearSearch');
    const loansTable = document.getElementById('loansTable');
    const tableRows = loansTable.querySelectorAll('tbody tr');
    
    // Status filter buttons
    const showAll = document.getElementById('showAll');
    const showActive = document.getElementById('showActive');
    const showPending = document.getElementById('showPending');
    const showClosed = document.getElementById('showClosed');
    
    // Search input event
    tableSearch.addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();
        
        tableRows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        
        updateShowingCount();
    });
    
    // Clear search button
    clearSearch.addEventListener('click', function() {
        tableSearch.value = '';
        tableRows.forEach(row => {
            row.style.display = '';
        });
        updateShowingCount();
    });
    
    // Status filter buttons
    showAll.addEventListener('click', function() {
        setActiveButton(this);
        tableRows.forEach(row => {
            row.style.display = '';
        });
        updateShowingCount();
    });
    
    showActive.addEventListener('click', function() {
        setActiveButton(this);
        filterByStatus('Active');
    });
    
    showPending.addEventListener('click', function() {
        setActiveButton(this);
        filterByStatus('Pending');
    });
    
    showClosed.addEventListener('click', function() {
        setActiveButton(this);
        filterByStatus('Closed');
    });
    
    function filterByStatus(status) {
        tableRows.forEach(row => {
            if (row.getAttribute('data-status') === status) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
        updateShowingCount();
    }
    
    function setActiveButton(activeBtn) {
        // Remove active class from all buttons
        document.querySelectorAll('.btn-group .btn').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Add active class to clicked button
        activeBtn.classList.add('active');
    }
    
    function updateShowingCount() {
        const visibleRows = Array.from(tableRows).filter(row => row.style.display !== 'none');
        const showingCount = document.getElementById('showingCount');
        const toCount = document.getElementById('toCount');
        
        if (visibleRows.length > 0) {
            showingCount.textContent = '1';
            toCount.textContent = visibleRows.length;
        } else {
            showingCount.textContent = '0';
            toCount.textContent = '0';
        }
    }
});
</script>

<style>
/* Banking/Microfinance UI Styles */


/* Table styles */
.table {
    font-size: 0.9rem;
}

.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
}

.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

.table td, .table th {
    padding: 0.75rem;
    vertical-align: middle;
}

/* Button styling */
.btn {
    border-radius: 0.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    color: white;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5c636a;
    border-color: #565e64;
    transform: translateY(-1px);
    color: white;
}

.btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.btn-outline-primary.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Form control styling */
.form-control, .form-select {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}

.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* Badge styling */
.badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
}


.dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    padding-left: 1.25rem;
}

/* Spacing between cards */
.mb-4 {
    margin-bottom: 2rem !important;
}

/* Space between title card and table */
.card-header.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Search and filter styling */
.input-group .form-control {
    border-right: none;
}

.input-group .btn {
    border-left: none;
}

.input-group .input-group-text {
    background-color: #fff;
    border-right: none;
}

.btn-group {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.8rem;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .card-header div {
        margin-top: 0.5rem;
        width: 100%;
    }
    
    .card-header div .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .d-grid {
        display: flex !important;
        gap: 0.5rem;
    }
    
    .d-grid .btn {
        flex: 1;
    }
    
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
    }
}
</style><?php /**PATH /home/techhdyz/new.technathi.cloud/resources/views/pages/allpages/loan/list_of_loan.blade.php ENDPATH**/ ?>