<?php
include 'includes/config.php';
session_start();

if (!$_SESSION['email']) {
    header('location:login.php');
}
?>
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>List Payable Cheques</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css">
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <style>
        ion-icon {
            font-size: 20px;
            margin-bottom: -5px;
        }

        .search-container {
            margin-bottom: 20px;
            text-align: center;
        }

        .search-input {
            width: 50%;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
            outline: none;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            border-color: #007bff;
        }

        /* Add these styles to your stylesheet */

        .bg-success {
            background-color: #28a745;
            /* Softer green for cleared */
            color: #fff;
            font-size: 15px;
        }

        .bg-hold {
            background-color: #ffe5d9;
            /* Light beige for hold */
            color: rgb(17, 17, 17);
            /* Dark gray text */
            font-size: 15px;
        }

        .bg-danger {
            background-color: #f8d7da;
            /* Light red for bounced */
            color: #fff;
            font-size: 15px;
        }
    </style>
</head>

<body>
    <!-- loader Start -->
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <!-- loader END -->
    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Sidebar  -->
        <?php
        include 'includes/sidebar.php';
        ?>
        <!-- TOP Nav Bar -->
        <?php include 'includes/header.php'; ?>
        <!-- TOP Nav Bar END -->
        <!-- Page Content  -->
        <div id="content-page" class="content-page">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="iq-card">
                            <div class="iq-card-header d-flex justify-content-between row">
                                <div class="iq-header-title col-lg-6">
                                    <h4 class="card-title"><a href="list_expense_category.php">Cheque & Cheque Accounts</a> > List Payable Cheque
                                    </h4>
                                </div>
                                <div class="col-lg-6">
                                    <!-- <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#exampleModalCenter" style="float:inline-end;">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px;color:white">
                                            </ion-icon>Add Bank
                                    </button>
                                    <button type="button" class="btn btn-secondary mr-3" data-toggle="modal"
                                        data-target="#moneyModalCenter" style="float:inline-end;">
                                            <ion-icon name="add-outline" style="font-size:20px; margin-bottom:-4px;color:white">
                                            </ion-icon>New Income
                                    </button>
                                    <button type="button" class="btn btn-info mr-3" data-toggle="modal"
                                        data-target="#exampleModalCenter" style="float:inline-end;">
                                            <ion-icon name="send-outline" style="font-size:20px; margin-bottom:-4px;color:white">
                                            </ion-icon>Transfer Money
                                    </button> -->
                                </div>
                                <!-- add variation -->
                                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">Add New Account</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <form method="POST" action="">

                                                <div class="modal-body">
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Bank Name *</label>
                                                        <input type="text" name="bank_name" class="form-control" placeholder="Bank Name" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Opening Date *</label>
                                                        <input type="date" name="start_bank_date" class="form-control" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Account Number</label>
                                                        <input type="text" name="account_number" class="form-control" placeholder="Account Number" id="">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Opening Balance *</label>
                                                        <input type="text" name="start_bank_balance" class="form-control" placeholder="Opening Balance" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="" class="control-label">Description</label>
                                                        <input type="text" name="description" class="form-control" placeholder="Description" id="">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Close</button>
                                                    <button type="submit" name="submit_bank" class="btn btn-primary">Save</button>
                                                </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- add variation end -->
                            </div>

                            <!------------------------------Add money---------------------------------------->
                            <!-- add variation -->
                            <div class="modal fade" id="moneyModalCenter" tabindex="-1" role="dialog"
                                aria-labelledby="moneyModalCenterTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="moneyModalCenterTitle">Add New Income</h5>
                                            <button type="button" class="close" data-dismiss="modal"
                                                aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <form method="POST" action="">

                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label for="" class="control-label">Date *</label>
                                                    <input type="date" name="date_deposit" class="form-control" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="" class="control-label">Account *</label>
                                                    <?php

                                                    try {
                                                        $query = "SELECT `id`, `bank_name` FROM `banks`";
                                                        $stmt = $conn->query($query);
                                                        $datas = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                                    } catch (PDOException $e) {
                                                        die("Query failed: " . $e->getMessage());
                                                    }
                                                    ?>

                                                    <select name="bank_id" class="form-control">
                                                        <option value="">Plz Select Account</option>
                                                        <?php foreach ($datas as $data): ?>
                                                            <option value="<?= htmlspecialchars($data['id']) ?>">
                                                                <?= htmlspecialchars($data['bank_name']) ?>
                                                            </option>
                                                        <?php endforeach; ?>
                                                    </select>

                                                </div>

                                                <div class="form-group">
                                                    <label for="" class="control-label">Amount</label>
                                                    <input type="text" name="amount" class="form-control" placeholder="Enter Amount" id="">
                                                </div>

                                                <div class="form-group">
                                                    <label for="" class="control-label">Description</label>
                                                    <input type="text" name="payment_status" class="form-control" placeholder="Description" id="">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Close</button>
                                                <button type="submit" name="submit_money" class="btn btn-primary">Save</button>
                                            </div>
                                    </div>
                                    </form>
                                </div>
                            </div>

                            <!----------------------------------------End Add Money pop up------------------------->

                            <!----------Updated model---------->
                            <!-- Modal for Editing Bank Details -->
                            <div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="editModalLabel">Edit Bank Details</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeEditModal()">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <!-- Edit Form -->
                                            <form action="update_bank.php" method="POST">
                                                <input type="hidden" id="edit-bank_id" name="id">
                                                <div class="form-group">
                                                    <label for="edit-bank_name">Bank Name</label>
                                                    <input type="text" class="form-control" id="edit-bank_name" name="bank_name" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="edit-start_bank_date">Opening Date</label>
                                                    <input type="date" class="form-control" id="edit-start_bank_date" name="start_bank_date" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="edit-account_number">Account Number</label>
                                                    <input type="text" class="form-control" id="edit-account_number" name="account_number" required>
                                                </div>
                                                <div class="form-group">
                                                    <label for="edit-start_bank_balance">Opening Balance</label>
                                                    <input type="text" class="form-control" id="edit-start_bank_balance" name="start_bank_balance">
                                                </div>
                                                <div class="form-group">
                                                    <label for="edit-description">Description</label>
                                                    <textarea class="form-control" id="edit-description" name="description"></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Update</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <script>
                                function openEditModal(id, bankName, openingDate, accountNumber, openingBalance, description) {
                                    document.getElementById('edit-bank_id').value = id;
                                    document.getElementById('edit-bank_name').value = bankName;
                                    document.getElementById('edit-start_bank_date').value = openingDate;
                                    document.getElementById('edit-account_number').value = accountNumber;
                                    document.getElementById('edit-start_bank_balance').value = openingBalance;
                                    document.getElementById('edit-description').value = description;

                                    $('#editModal').modal('show');
                                }

                                function closeEditModal() {
                                    $('#editModal').modal('hide');
                                }
                            </script>

                            <!-----End Update model---------->
                            <!-- search bar -->
                            <!-- <form action="">
                                <div class="row mt-5" style="width:95%;margin:0 auto;">
                                    <div class="col-lg-5">
                                        <input type="search" name="" placeholder="Search" class="form-control" id="">
                                    </div>
                          
                                    <div class="col-lg-2">
                                        <button style="width:100%;" class="btn btn-primary p-2">Search</button>
                                    </div>
                                </div>
                            </form> -->
                            <!-- searchbar end -->
                            <!-- buttons for export -->
                            <div class="row mt-5">
                                <div class="col-lg-2"></div>
                                <!-- <div class="col-lg-8">
                                    <button class="btn btn-primary">
                                        <ion-icon name="document-outline"></ion-icon>Export to CSV
                                    </button>
                                    <button class="btn btn-info">
                                        <ion-icon name="document-outline"></ion-icon>Export to Excel
                                    </button>
                                    <button class="btn btn-warning">
                                        <ion-icon name="print-outline"></ion-icon>Print
                                    </button>
                                    <button class="btn btn-danger">
                                        <ion-icon name="stop-outline"></ion-icon>Column Visibility
                                    </button>
                                    <button class="btn btn-dark">
                                        <ion-icon name="document-outline"></ion-icon>Export to PDF
                                    </button>
                                </div> -->
                            </div>
                            <!-- Button to trigger modal -->
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#paymentModal">
                                Add Cheque Payment
                            </button>
                            <?php

                            //  and execute the SQL query to fetch customer data
                            $stmt = $conn->prepare("SELECT `id`, `name` FROM `contacts` WHERE `type` = 'supplier'");
                            $stmt->execute();

                            // Fetch all customers as an associative array
                            $customers = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            ?>
                            <!-- Modal -->
                            <div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="paymentModalLabel">Add Cheque Payment</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form action="insert_payablecheque_payment.php" method="POST">
                                                <div class="mb-3">
                                                    <label for="supplier_id" class="form-label">Suppliers</label>
                                                    <style>
                                                        .custom-dropdown {
                                                            position: relative;
                                                            width: 100%;
                                                        }

                                                        .dropdown-select {
                                                            width: 100%;
                                                            padding: 8px;
                                                            border: 1px solid #ddd;
                                                            border-radius: 4px;
                                                            cursor: pointer;
                                                            background: #fff;
                                                        }

                                                        .dropdown-menu {
                                                            display: none;
                                                            position: absolute;
                                                            top: 100%;
                                                            left: 0;
                                                            right: 0;
                                                            background: white;
                                                            border: 1px solid #ddd;
                                                            border-radius: 4px;
                                                            z-index: 1000;
                                                            margin-top: 5px;
                                                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                                        }

                                                        .search-box {
                                                            width: 100%;
                                                            padding: 8px;
                                                            border: none;
                                                            border-bottom: 1px solid #ddd;
                                                        }

                                                        .options-list {
                                                            max-height: 200px;
                                                            overflow-y: auto;
                                                        }

                                                        .option {
                                                            padding: 8px;
                                                            cursor: pointer;
                                                        }

                                                        .option:hover {
                                                            background-color: #f5f5f5;
                                                        }

                                                        .show {
                                                            display: block;
                                                        }
                                                    </style>

                                                    <div class="custom-dropdown">
                                                        <div class="dropdown-select" id="supplierSelect">
                                                            <span>Select Supplier</span>
                                                        </div>
                                                        <div class="dropdown-menu" id="dropdownMenu">
                                                            <input type="text" class="search-box" placeholder="Search supplier...">
                                                            <div class="options-list">
                                                                <?php foreach ($customers as $customer): ?>
                                                                    <div class="option" data-value="<?php echo $customer['id']; ?>">
                                                                        <?php echo $customer['name']; ?>
                                                                    </div>
                                                                <?php endforeach; ?>
                                                            </div>
                                                        </div>
                                                        <select class="form-control" id="supplier_id" name="supplier_id" required style="display:none;">
                                                            <option value="" disabled selected>Select Supplier</option>
                                                            <?php foreach ($customers as $customer): ?>
                                                                <option value="<?php echo $customer['id']; ?>"><?php echo $customer['name']; ?></option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>

                                                    <script>
                                                        document.addEventListener('DOMContentLoaded', function() {
                                                            const dropdown = document.querySelector('.custom-dropdown');
                                                            const select = document.querySelector('.dropdown-select');
                                                            const menu = document.querySelector('.dropdown-menu');
                                                            const search = document.querySelector('.search-box');
                                                            const options = document.querySelectorAll('.option');
                                                            const hiddenSelect = document.getElementById('supplier_id');

                                                            select.addEventListener('click', () => {
                                                                menu.classList.toggle('show');
                                                                if (menu.classList.contains('show')) {
                                                                    search.focus();
                                                                }
                                                            });

                                                            search.addEventListener('input', (e) => {
                                                                const text = e.target.value.toLowerCase();
                                                                options.forEach(option => {
                                                                    const value = option.textContent.toLowerCase();
                                                                    option.style.display = value.includes(text) ? 'block' : 'none';
                                                                });
                                                            });

                                                            options.forEach(option => {
                                                                option.addEventListener('click', () => {
                                                                    select.querySelector('span').textContent = option.textContent;
                                                                    hiddenSelect.value = option.dataset.value;
                                                                    menu.classList.remove('show');
                                                                });
                                                            });

                                                            document.addEventListener('click', (e) => {
                                                                if (!dropdown.contains(e.target)) {
                                                                    menu.classList.remove('show');
                                                                }
                                                            });
                                                        });
                                                    </script>

                                                </div>
                                                <div class="mb-3">
                                                    <label for="cheque_number" class="form-label">Cheque Number</label>
                                                    <input type="text" class="form-control" id="cheque_number" name="cheque_number" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="bank_name" class="form-label">Bank Name</label>
                                                    <input type="text" class="form-control" id="bank_name" name="bank_name" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="amount" class="form-label">Amount</label>
                                                    <input type="number" class="form-control" id="amount" name="amount" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="issued_date" class="form-label">Issued Date</label>
                                                    <input type="date" class="form-control" id="issued_date" name="issued_date" required>
                                                </div>
                                                <div class="mb-3" id="hold_until" style="display:none;">
                                                    <label for="hold_until" class="form-label">Hold Until</label>
                                                    <input type="date" class="form-control" name="hold_until">
                                                </div>
                                                <div class="mb-3" id="clearance_date" style="display:none;">
                                                    <label for="clearance_date" class="form-label">Clearance Date</label>
                                                    <input type="date" class="form-control" name="clearance_date">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="status" class="form-label">Status</label>
                                                    <select class="form-control" id="status" name="status">
                                                        <option value="clear">Clear</option>
                                                        <option value="clearance">Clearance</option>
                                                        <option value="hold">Hold</option>
                                                        <option value="bounce">Bounce</option>
                                                    </select>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const statusSelect = document.getElementById('status');
                                    const holdUntilField = document.getElementById('hold_until');
                                    const clearanceDateField = document.getElementById('clearance_date');

                                    function toggleDateFields() {
                                        holdUntilField.style.display = 'none';
                                        clearanceDateField.style.display = 'none';

                                        if (statusSelect.value === 'hold') {
                                            holdUntilField.style.display = 'block';
                                        } else if (statusSelect.value === 'clearance') {
                                            clearanceDateField.style.display = 'block';
                                        }
                                    }

                                    toggleDateFields();

                                    statusSelect.addEventListener('change', toggleDateFields);
                                });
                            </script>

                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">
                                <?php
                                $sql = "SELECT `id` AS cheque_id, `supplier_id`, `cheque_number`, `bank_name`, `amount`, `issued_date`, `hold_until`, `cleared_date`, `bounced_date`, `clearance_date`, `status` FROM `payable_cheque` ORDER BY id DESC";
                                $stmt = $conn->query($sql);

                                // Fetch bank names
                                $bankQuery = "SELECT `id`, `bank_name` FROM `banks`";
                                $bankStmt = $conn->query($bankQuery);
                                $banks = [];
                                while ($row = $bankStmt->fetch(PDO::FETCH_ASSOC)) {
                                    $banks[$row['id']] = $row['bank_name'];
                                }

                                // Fetch customer names
                                $customerQuery = "SELECT `id`, `name` FROM `contacts` WHERE `type` = 'supplier'";
                                $customerStmt = $conn->query($customerQuery);
                                $customers = [];
                                while ($row = $customerStmt->fetch(PDO::FETCH_ASSOC)) {
                                    $customers[$row['id']] = $row['name'];
                                }
                                ?>

                                <!-- Filter Form -->
                                <div class="filter-container">
                                    <h3 class="filter-title">Filter Options</h3>
                                    <div class="filter-fields">
                                        <div class="filter-field">
                                            <label for="statusFilter">Filter by Status:</label>
                                            <select id="statusFilter">
                                                <option value="">All</option>
                                                <option value="hold">Hold</option>
                                                <option value="cleared">Cleared</option>
                                                <option value="clearance">Clearance</option>
                                                <option value="bounced">Bounced</option>
                                            </select>
                                        </div>

                                        <div class="filter-field">
                                            <label for="dateRangeStart">Start Date:</label>
                                            <input type="date" id="dateRangeStart">
                                        </div>

                                        <div class="filter-field">
                                            <label for="dateRangeEnd">End Date:</label>
                                            <input type="date" id="dateRangeEnd">
                                        </div>

                                        <div class="filter-field">
                                            <label for="searchBar">Search:</label>
                                            <input type="text" id="searchBar" placeholder="Search...">
                                        </div>

                                        <div class="filter-action">
                                            <button onclick="applyFilters()" class="apply-btn">Apply Filters</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Table of Cheques -->
                                <table class="table table-hover table-bordered" id="bankTable">
                                    <thead>
                                        <tr>
                                            <th>Status</th>
                                            <th>Customer</th>
                                            <th>Cheque Number</th>
                                            <th>Bank Name</th>
                                            <th>Amount</th>
                                            <th>Issued Date</th>
                                            <th>Hold Until</th>
                                            <th>Cleared Date</th>
                                            <th>Clearance Date</th>
                                            <th>Bounced Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody">
                                        <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                            // Determine the row class based on the cheque status
                                            $rowClass = '';
                                            if ($row['status'] === 'cleared') {
                                                $rowClass = 'bg-success'; // Green for cleared
                                            } elseif ($row['status'] === 'hold') {
                                                $rowClass = 'bg-hold'; // Beige for hold
                                            } elseif ($row['status'] === 'bounced') {
                                                $rowClass = 'bg-danger'; // Red for bounced
                                            }
                                        ?>
                                            <tr class="<?php echo $rowClass; ?>" data-status="<?php echo htmlspecialchars($row['status']); ?>" data-issue-date="<?php echo htmlspecialchars($row['issued_date']); ?>">
                                                <td style="text-transform:capitalize;"><?php echo htmlspecialchars($row['status']); ?></td>
                                                <td><?php echo isset($customers[$row['supplier_id']]) ? htmlspecialchars($customers[$row['supplier_id']]) : 'N/A'; ?></td>
                                                <td><?php echo htmlspecialchars($row['cheque_number']); ?></td>
                                                <td><?php echo htmlspecialchars($row['bank_name']); ?></td>
                                                <td><?php echo htmlspecialchars($row['amount']); ?></td>
                                                <td><?php echo htmlspecialchars($row['issued_date']); ?></td>
                                                <td ondblclick="openPopup(this, '<?php echo $row['cheque_id']; ?>', '<?php echo htmlspecialchars($row['hold_until']); ?>')" <?php echo $row['status'] === 'bounced' ? 'style="cursor:pointer;"' : ''; ?>>
                                                    <?php echo htmlspecialchars($row['hold_until']); ?>
                                                </td>
                                                <td><?php echo htmlspecialchars($row['cleared_date']); ?></td>
                                                <td><?php echo htmlspecialchars($row['clearance_date']); ?></td>
                                                <td><?php echo htmlspecialchars($row['bounced_date']); ?></td>
                                                <td>
                                                    <!-- Status change form -->
                                                    <?php if ($row['status'] !== 'cleared') { ?>
                                                        <form method="post" action="update_status_payable.php" id="statusForm_<?php echo $row['cheque_id']; ?>" style="display:inline;">
                                                            <input type="hidden" name="cheque_id" value="<?php echo htmlspecialchars($row['cheque_id']); ?>">
                                                            <select name="status" class="form-control" style="width: 8em;" onchange="handleStatusChange(this, '<?php echo $row['cheque_id']; ?>')" required>
                                                                <option value="hold" <?php echo $row['status'] === 'hold' ? 'selected' : ''; ?>>Hold</option>
                                                                <option value="cleared" <?php echo $row['status'] === 'cleared' ? 'selected' : ''; ?>>Cleared</option>
                                                                <option value="clearance" <?php echo $row['status'] === 'clearance' ? 'selected' : ''; ?>>Clearance</option>
                                                                <option value="bounced" <?php echo $row['status'] === 'bounced' ? 'selected' : ''; ?>>Bounced</option>
                                                            </select>
                                                        </form>
                                                    <?php } ?>

                                                    <br><br>
                                                    <!-- Delete button with confirmation -->
                                                    <form method="post" action="action/delete_payablecheque.php" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this cheque?');">
                                                        <input type="hidden" name="cheque_id" value="<?php echo htmlspecialchars($row['cheque_id']); ?>">
                                                        <button type="submit" class="btn btn-danger">Delete</button>
                                                    </form>
                                                </td>
                                            </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>

                                <!-- <div id="bankModal">
    <div class="close">&times;</div> 
    <h4>Select Bank and Confirm</h4>
    <form method="post" action="insert_cash_deposit.php">
        <input type="hidden" name="cheque_id" id="modalChequeId">
        <input type="hidden" name="customer_id" id="modalCustomerId">
        <input type="hidden" name="status" id="modalStatus">
        <label for="bankSelect">Select Bank:</label>
        <select name="bank_id" id="bankSelect" required>
            <?php foreach ($banks as $id => $name) { ?>
                <option value="<?php echo $id; ?>"><?php echo htmlspecialchars($name); ?></option>
            <?php } ?>
        </select>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>
</div> -->
                                <!-- Mini Popup for updating Hold Until -->
                                <div id="popup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000; background:white; padding:20px; box-shadow:0 4px 8px rgba(0,0,0,0.2);">
                                    <form method="post" action="update_payable_hold_until.php" id="popupForm">
                                        <input type="hidden" name="cheque_id" id="popupChequeId">
                                        <label for="popupHoldUntil">Hold Until:</label>
                                        <input type="date" name="hold_until" id="popupHoldUntil" required>
                                        <br><br>
                                        <button type="submit" class="btn btn-primary">Update</button>
                                        <button type="button" class="btn btn-secondary" onclick="closePopup()">Cancel</button>
                                    </form>
                                </div>

                                <script>
                                    function openPopup(td, chequeId, currentDate) {
                                        const popup = document.getElementById('popup');
                                        const popupForm = document.getElementById('popupForm');
                                        document.getElementById('popupChequeId').value = chequeId;
                                        document.getElementById('popupHoldUntil').value = currentDate;
                                        popup.style.display = 'block';
                                    }

                                    function closePopup() {
                                        document.getElementById('popup').style.display = 'none';
                                    }
                                </script>
                                <script>
                                    function handleStatusChange(selectElement, chequeId) {
                                        const selectedStatus = selectElement.value;
                                        if (selectedStatus === 'cleared') {
                                            // document.getElementById('modalChequeId').value = chequeId;
                                            // document.getElementById('modalStatus').value = 'cleared';
                                            // document.getElementById('bankModal').style.display = 'block';
                                            document.getElementById('statusForm_' + chequeId).submit();
                                        }
                                        if (selectedStatus === 'bounced' || selectedStatus === 'hold' || selectedStatus === 'clearance') {
                                            document.getElementById('statusForm_' + chequeId).submit();
                                        }
                                    }

                                    function applyFilters() {
                                        const status = document.getElementById('statusFilter').value;
                                        const startDate = document.getElementById('dateRangeStart').value;
                                        const endDate = document.getElementById('dateRangeEnd').value;
                                        const searchText = document.getElementById('searchBar').value.toLowerCase();

                                        const rows = document.querySelectorAll('#tableBody tr');
                                        rows.forEach(row => {
                                            const rowStatus = row.getAttribute('data-status').toLowerCase();
                                            const rowIssueDate = row.getAttribute('data-issue-date');
                                            const isMatchingStatus = status ? rowStatus === status : true;
                                            const isMatchingDate = (startDate && rowIssueDate < startDate) || (endDate && rowIssueDate > endDate) ? false : true;
                                            const isMatchingSearch = row.textContent.toLowerCase().includes(searchText);

                                            if (isMatchingStatus && isMatchingDate && isMatchingSearch) {
                                                row.style.display = '';
                                            } else {
                                                row.style.display = 'none';
                                            }
                                        });
                                    }
                                </script>

                                <style>
                                    .filter-container {
                                        background-color: #f8f9fa;
                                        padding: 20px;
                                        border-radius: 8px;
                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                                        max-width: 1200px;
                                        margin: 20px auto;
                                    }

                                    .filter-title {
                                        font-size: 1.6rem;
                                        font-weight: bold;
                                        color: #343a40;
                                        margin-bottom: 15px;
                                        text-align: center;
                                    }

                                    .filter-fields {
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: 20px;
                                        justify-content: space-between;
                                    }

                                    .filter-field {
                                        flex: 1 1 20%;
                                        max-width: 220px;
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    .filter-field label {
                                        font-size: 1rem;
                                        font-weight: 600;
                                        color: #495057;
                                        margin-bottom: 8px;
                                    }

                                    .filter-field input,
                                    .filter-field select {
                                        padding: 8px 12px;
                                        font-size: 1rem;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                        background-color: #fff;
                                        width: 100%;
                                        box-sizing: border-box;
                                        transition: border 0.3s ease;
                                    }

                                    .filter-field input:focus,
                                    .filter-field select:focus {
                                        border-color: #007bff;
                                        outline: none;
                                    }

                                    .filter-action {
                                        flex: 1 1 100%;
                                        display: flex;
                                        justify-content: center;
                                        margin-top: 20px;
                                    }

                                    .apply-btn {
                                        background-color: #28a745;
                                        color: white;
                                        padding: 12px 30px;
                                        font-size: 1rem;
                                        border: none;
                                        border-radius: 5px;
                                        cursor: pointer;
                                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                        transition: background-color 0.3s ease, box-shadow 0.3s ease;
                                    }

                                    .apply-btn:hover {
                                        background-color: #218838;
                                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                                    }

                                    @media (max-width: 768px) {
                                        .filter-fields {
                                            flex-direction: column;
                                            align-items: center;
                                        }

                                        .filter-field {
                                            flex: 1 1 100%;
                                            max-width: none;
                                        }
                                    }


                                    #bankModal {
                                        background: rgba(0, 0, 0, 0.5);
                                        /* Semi-transparent background */
                                        position: fixed;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        /* Centers the modal */
                                        width: 400px;
                                        /* Adjust the width of the modal */
                                        max-width: 90%;
                                        /* Ensure the modal is responsive on small screens */
                                        padding: 20px;
                                        border-radius: 5px;
                                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
                                        z-index: 1050;
                                        /* Ensures the modal appears on top of other content */
                                        background-color: white;
                                        /* Modal background */
                                        display: none;
                                        /* Hidden by default */
                                    }

                                    #bankModal h4 {
                                        margin-bottom: 20px;
                                        font-size: 1.2rem;
                                        text-align: center;
                                    }

                                    #bankModal input,
                                    #bankModal select {
                                        width: 100%;
                                        margin-bottom: 15px;
                                        padding: 8px;
                                        font-size: 1rem;
                                        border: 1px solid #ccc;
                                        border-radius: 4px;
                                    }

                                    #bankModal button {
                                        width: 100%;
                                        padding: 10px;
                                        font-size: 1rem;
                                        background-color: #28a745;
                                        color: white;
                                        border: none;
                                        border-radius: 4px;
                                        cursor: pointer;
                                    }

                                    #bankModal button:hover {
                                        background-color: #218838;
                                    }

                                    #bankModal .close {
                                        position: absolute;
                                        top: 10px;
                                        right: 10px;
                                        font-size: 1.5rem;
                                        color: #333;
                                        cursor: pointer;
                                        font-weight: bold;
                                    }

                                    #bankModal .close:hover {
                                        color: #ff0000;
                                    }
                                </style>






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

        </div>
    </div>
    </div>
    <script>
        function filterTable() {
            var input = document.getElementById("searchInput");
            var filter = input.value.toLowerCase();

            // Get the table and rows
            var table = document.getElementById("bankTable");
            var rows = table.getElementsByTagName("tr");

            for (var i = 1; i < rows.length; i++) {
                var cells = rows[i].getElementsByTagName("td");
                var matchFound = false;

                for (var j = 0; j < cells.length; j++) {
                    var cell = cells[j];
                    if (cell) {
                        if (cell.textContent.toLowerCase().indexOf(filter) > -1) {
                            matchFound = true;
                            break;
                        }
                    }
                }

                if (matchFound) {
                    rows[i].style.display = "";
                } else {
                    rows[i].style.display = "none";
                }
            }
        }
    </script>

    <!-- Wrapper END -->
    <!-- Footer -->
    <?php include 'includes/footer.php'; ?>
    <nav class="iq-float-menu">
        <input type="checkbox" href="#" class="iq-float-menu-open" name="menu-open" id="menu-open" />
        <label class="iq-float-menu-open-button" for="menu-open">
            <span class="lines line-1"></span>
            <span class="lines line-2"></span>
            <span class="lines line-3"></span>
        </label>
        <button class="iq-float-menu-item bg-info" data-toggle="tooltip" data-placement="top" title="Direction Mode"
            data-mode="rtl"><i class="ri-text-direction-r"></i></button>
        <button class="iq-float-menu-item bg-danger" data-toggle="tooltip" data-placement="top" title="Color Mode"
            id="dark-mode" data-active="true"><i class="ri-sun-line"></i></button>
        <button class="iq-float-menu-item bg-warning" data-toggle="tooltip" data-placement="top" title="Comming Soon"><i
                class="ri-palette-line"></i></button>
    </nav>
    <!-- Footer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.min.js"></script>
    <!-- Rtl and Darkmode -->
    <script src="js/rtl.js"></script>
    <script src="js/customizer.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="js/lottie.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/custom.js"></script>
</body>

</html>