<!DOCTYPE html>
<html lang="en">

<head>

    <?php include "includes2/header-links.php" ?>
<style>
    /* The Modal (background) */
    .custom-modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        padding-top: 60px;
    }

    /* Modal Content */
    .custom-modal-content {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 680px;
        border-radius: 10px;
    }

    /* Close Button */
    .custom-modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .custom-modal-close:hover,
    .custom-modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .address-wrap {
        word-break: break-word;
        overflow-wrap: break-word;
        /*white-space: pre-wrap;*/
    }
</style>
</head>

<body class="selection:text-white selection:bg-primary">
    <!-- Main wrapper start -->
    <div id="main-wrapper" class="relative">
        <?php include "includes2/header.php" ?>
        <?php include "includes2/sidebar.php" ?>
        <!-- Content body start -->
        <div class="content-body">
            <div class="container-fluid">
                <div class="row dz-tab-area">
                    <div class="flex justify-between items-center mb-5">
                        <a href="<?= base_url('admin_Dashboard/add_account/' . encryptId($user['0']['id'])) ?>" class="py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[18px] inline-block border border-primary duration-500 hover:bg-hover-primary hover:border-hover-primary ml-auto">+ Add Account</a><br>
                    </div>
                    <div class="flex items-center">
                        <h3 style="font-size: 25px; margin: 10px;color: #454592;">View Account list</h3>
                        <ul class="nav nav-pills mix-chart-tab user-m-tabe flex flex-wrap">
                            <li class="nav-item">
                                <button class="nav-link py-[3px] px-2 mx-1 rounded text-[13px] block tab-btn active" data-tab="pills-colm">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24  24" version="1.1" class="svg-main-icon">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <rect x="0" y="0" width="24" height="24" />
                                            <path d="M10.5,5 L19.5,5 C20.3284271,5 21,5.67157288 21,6.5 C21,7.32842712 20.3284271,8 19.5,8 L10.5,8 C9.67157288,8 9,7.32842712 9,6.5 C9,5.67157288 9.67157288,5 10.5,5 Z M10.5,10 L19.5,10 C20.3284271,10 21,10.6715729 21,11.5 C21,12.3284271 20.3284271,13 19.5,13 L10.5,13 C9.67157288,13 9,12.3284271 9,11.5 C9,10.6715729 9.67157288,10 10.5,10 Z M10.5,15 L19.5,15 C20.3284271,15 21,15.6715729 21,16.5 C21,17.3284271 20.3284271,18 19.5,18 L10.5,18 C9.67157288,18 9,17.3284271 9,16.5 C9,15.6715729 9.67157288,15 10.5,15 Z" fill="var(--dark)" />
                                            <path d="M5.5,8 C4.67157288,8 4,7.32842712 4,6.5 C4,5.67157288 4.67157288,5 5.5,5 C6.32842712,5 7,5.67157288 7,6.5 C7,7.32842712 6.32842712,8 5.5,8 Z M5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 C6.32842712,10 7,10.6715729 7,11.5 C7,12.3284271 6.32842712,13 5.5,13 Z M5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 C6.32842712,15 7,15.6715729 7,16.5 C7,17.3284271 6.32842712,18 5.5,18 Z" fill="var(--dark)" opacity="0.3" />
                                        </g>
                                    </svg>
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="w-full active-p">
                    <div class="tab-content-area">
                        <div class="tab-content show active" id="pills-colm">
                            <div class="card">
                                <div class="sm:py-5 py-4">
                                    <div class="overflow-x-auto active-projects user-tbl ItemsCheckboxSec dt-filter">
                                        <table id="user-tbl" class="table">
                                            <thead>
                                                <tr>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 pl-4 pr-0 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap style-1">
                                                        S No.
                                                    </th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Account Holder<br> Name</th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Bank name</th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Branch</th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Account No.</th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">IFSC Code</th>
                                                     <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Total Amount</th>
                                                    <th class="border-b border-b-color text-[13px] py-2.5 px-4 bg-primary-light text-primary capitalize font-medium bg-none whitespace-nowrap text-left">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php $i=0;
                                                if (!empty($account)) {
                                                    foreach ($account as $account_info) { $i++;
                                                ?>
                                                        <tr>
                                                            <td class="border-b border-b-color py-2.5 px-4 pr-0 text-[13px] font-normal text-body-color whitespace-nowrap">
                                                                <?= $i ?>
                                                            </td>
                                                            <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"><?= $account_info['holder'] ?></td>
                                                            <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"><?= $account_info['bank_name'] ?></td>
                                                            <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"><?= $account_info['branch_name'] ?></td>
                                                            <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"><?= $account_info['account_no'] ?></td>
                                                                <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"><?= $account_info['ifsc_code'] ?></td>
                                                                <td class="border-b border-b-color py-2.5 px-4 text-[13px] font-normal text-body-color whitespace-nowrap"  onclick="openModal('<?= $account_info['id'] ?>')"></td>
                                                          
                                                            <td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
						<div class="dropdown">
							<button type="button" class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-primary rounded-md dz-dropdown bg-primary-light hover:bg-primary duration-300 light sharp" data-dz-dropdown="dropdown-<?=$account_info['id']?> ">
								<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
							</button>
							<div class="dz-dropdown-menu dropdown-menu-end border py-2 rounded-md min-w-[10rem] z-[9] translate-x-[-96px] translate-y-1 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden border-b-color absolute bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] hidden" id="dropdown-<?=$account_info['id']?>">
								<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="<?= base_url('Admin_Dashboard/edit_account?id=' . $account_info['id'] . '&user_id=' . $user['0']['id']); ?>">Edit</a>
                                
                                                                            <a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]"
                                                                                href="javascript:void(0);"
                                                                                onclick="openModal('<?= $account_info['id'] ?>')">View
                                                                                Transaction</a>
                                <a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="<?= base_url('Admin_Dashboard/account/' . encryptId($user[0]['id']) . '?id=' . $account_info['id']); ?>" onclick="return confirm('Are you sure you want to delete this Account?')">Delete</a>
							</div>
						</div>
                        <div id="payModal<?= $account_info['id'] ?>" class="custom-modal">
                                                        <div class="custom-modal-content">
                                                            <span class="custom-modal-close" onclick="closeModal('<?= $account_info['id'] ?>')">&times;</span>
                                                            <h2 id="payModalLabel">Transaction Details</h2>
                                                            <div class="modal-body">
                                                                <div class="row mb-12">
                                                                    <div class="mt-6 lg:w-1/2 md:w-1/2 w-full detail">
                                                                      
                                                                        <div class="text-body-color sm:text-sm text-xs">
                                                                            <strong>Bank Name:</strong> <?= $account_info['bank_name'] ?>
                                                                        </div>
                                                                        <div class="text-body-color sm:text-sm text-xs">
                                                                            <strong>Branch Name:</strong> <?= $account_info['branch_name'] ?>
                                                                        </div>
                                                                        <div class="text-body-color sm:text-sm text-xs">
                                                                            <strong>IFSC Code:</strong> <?= $account_info['ifsc_code'] ?>
                                                                        </div>
                                                                    </div>

                                                                    <div class="mt-6 lg:w-1/2 md:w-1/2 w-full detail">
                                                                        <div class="text-body-color sm:text-sm text-xs">
                                                                            <strong>Account Holder Name:</strong><?= $account_info['holder'] ?>
                                                                        </div>
                                                                        <div class="text-body-color sm:text-sm text-xs">
                                                                            <strong>Account No.:</strong> <?= $account_info['account_no'] ?>
                                                                        </div>
                                                                    </div>

                                                                       

                                                                    <!-- New Interest Section with Condition -->
                                                                    <div class="w-full mt-6">
                                                                        <h3 class="text-lg font-bold"> Details</h3>

                                                                       <div class="responsive overflow-x-auto active-projects user-tbl ItemsCheckboxSec dt-filter">
                                                                            <table class="w-full border-collapse border border-gray-300 mt-2 text-center table">
                                                                                <thead>
                                                                                    <tr class="bg-gray-200">
                                                                                        <th class="border border-gray-300 px-3 py-2">Date</th>
                                                                                        <th class="border border-gray-300 px-3 py-2">Credit</th>
                                                                                        <th class="border border-gray-300 px-3 py-2">Debit</th>
                                                                                        <th class="border border-gray-300 px-3 py-2">Total</th>
                                                                                     
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody>
                                                                                    
                                                                                </tbody>
                                                                            </table>
                                                                      </div>
                                                                    </div>

                                                                    <!-- End Interest Section -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
					</td>
                                                        </tr>
                                                <?php
                                                    }
                                                } 
                                                ?>
                                            </tbody>
                                        </table>
 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<script>
   function openModal(account_id) {
    var modal = document.getElementById(`payModal${account_id}`);
    var modalBody = modal.querySelector(".modal-body");

    // Clear old data
    var tableBody = modalBody.querySelector("tbody");
    tableBody.innerHTML = `<tr><td colspan="4">Loading...</td></tr>`;

    // Show modal
    modal.style.display = "block";

    // Fetch data
    fetch(`<?= base_url('admin_Dashboard/getAccountTransactions/') ?>${account_id}`)
        .then(res => res.json())
        .then(data => {
            if (data.length === 0) {
                tableBody.innerHTML = `<tr><td colspan="4">No transactions found.</td></tr>`;
                return;
            }

            let rows = "";
            data.forEach(item => {
                rows += `
                    <tr>
                        <td class="border border-gray-300 px-3 py-2">${item.date}</td>
                        <td class="border border-gray-300 px-3 py-2">${item.credit > 0 ? '₹' + item.credit : '-'}</td>
                        <td class="border border-gray-300 px-3 py-2">${item.debit > 0 ? '₹' + item.debit : '-'}</td>
                        <td class="border border-gray-300 px-3 py-2">₹${item.total}</td>
                    </tr>`;
            });
            tableBody.innerHTML = rows;
        })
        .catch(err => {
            console.error("Error loading transactions:", err);
            tableBody.innerHTML = `<tr><td colspan="4" class="text-red-500">Error loading data</td></tr>`;
        });
}
function closeModal(account_id) {
    var modal = document.getElementById(`payModal${account_id}`);
    modal.style.display = "none";
}
// Close modal when clicking outside of it
window.onclick = function(event) {
    var modals = document.getElementsByClassName('custom-modal');
    Array.from(modals).forEach(function(modal) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    });
}
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("tr").forEach(tr => {
        let totalAmountCell = tr.querySelector("td:nth-child(7)"); // 7th column = Total Amount
        let accountId = tr.querySelector("[onclick*='openModal']");
        if (accountId) {
            accountId = accountId.getAttribute("onclick").match(/openModal\('(\d+)'\)/);
            if (accountId && accountId[1]) {
                fetch(`<?= base_url('admin_Dashboard/getAccountTransactions/') ?>${accountId[1]}`)
                    .then(res => res.json())
                    .then(data => {
                        if (data.length > 0) {
                            const last = data[data.length - 1];
                            const formatted = new Intl.NumberFormat('en-IN', {
                                style: 'currency',
                                currency: 'INR',
                                minimumFractionDigits: 2
                            }).format(last.total);
                            totalAmountCell.innerHTML = `<span style="color:green;font-weight:600">${formatted}</span>`;
                        } else {
                            totalAmountCell.innerHTML = `<span style="color:#777">₹0.00</span>`;
                        }
                    })
                    .catch(err => {
                        console.error("Error fetching account total:", err);
                        totalAmountCell.innerHTML = `<span style="color:red">Error</span>`;
                    });
            }
        }
    });
});
</script>
    <?php include "includes2/footer-links.php" ?>
    </div>
    <?php include "includes2/footer.php" ?>
</body>

</html>