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

if (!isset($_SESSION['email'])) {
    header('location: login.php');
    exit();
}

if (!isset($_GET['bank_id'])) {
    header('location: list_banks.php');
    exit();
}

$bank_id = $_GET['bank_id'];

// Default date range (Last month to today)
$end_date = isset($_GET['end_date']) ? $_GET['end_date'] : date('Y-m-d');
$start_date = isset($_GET['start_date']) ? $_GET['start_date'] : date('Y-m-d', strtotime('-1 month'));

// Fetch bank details including start_bank_date
try {
    $sql = "SELECT * FROM banks WHERE id = :bank_id";
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':bank_id', $bank_id);
    $stmt->execute();
    $bank = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$bank) {
        echo "Bank not found.";
        exit();
    }

    // Fetch deposit transactions (credits)
    $sql_deposit = "
        SELECT id, amount, status, payment_status, DATE(date_deposit) as date_deposit
        FROM cash_deposit
        WHERE bank_id = :bank_id AND date_deposit BETWEEN :start_date AND :end_date
        ORDER BY date_deposit ASC
    ";
    $stmt_deposit = $conn->prepare($sql_deposit);
    $stmt_deposit->bindParam(':bank_id', $bank_id);
    $stmt_deposit->bindParam(':start_date', $start_date);
    $stmt_deposit->bindParam(':end_date', $end_date);
    $stmt_deposit->execute();
    $deposits = $stmt_deposit->fetchAll(PDO::FETCH_ASSOC);

    // Fetch debit transactions
    $sql_debit = "
        SELECT id, amount, note, DATE(date) as date
        FROM bank_debit_amount
        WHERE bank_id = :bank_id AND date BETWEEN :start_date AND :end_date
        ORDER BY date ASC
    ";
    $stmt_debit = $conn->prepare($sql_debit);
    $stmt_debit->bindParam(':bank_id', $bank_id);
    $stmt_debit->bindParam(':start_date', $start_date);
    $stmt_debit->bindParam(':end_date', $end_date);
    $stmt_debit->execute();
    $debits = $stmt_debit->fetchAll(PDO::FETCH_ASSOC);

    // Fetch transactions before the start date to calculate the opening balance
    $sql_before_start = "
        SELECT amount, 'credit' as type FROM cash_deposit WHERE bank_id = :bank_id AND date_deposit < :start_date
        UNION ALL
        SELECT amount, 'debit' as type FROM bank_debit_amount WHERE bank_id = :bank_id AND date < :start_date
    ";
    $stmt_before_start = $conn->prepare($sql_before_start);
    $stmt_before_start->bindParam(':bank_id', $bank_id);
    $stmt_before_start->bindParam(':start_date', $start_date);
    $stmt_before_start->execute();
    $transactions_before_start = $stmt_before_start->fetchAll(PDO::FETCH_ASSOC);

    $balance = $bank['start_bank_balance'];
    $start_bank_date = $bank['start_bank_date']; // Fetch the start date for the bank

    // Calculate the opening balance before the start date
    foreach ($transactions_before_start as $transaction) {
        if ($transaction['type'] === 'credit') {
            $balance += $transaction['amount'];
        } elseif ($transaction['type'] === 'debit') {
            $balance -= $transaction['amount'];
        }
    }

} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
    exit();
}

$total_debit = 0;
$total_credit = 0;

$transactions = [];

foreach ($deposits as $deposit) {
    $particulars = !empty($deposit['status']) ? 'Customer Payment' : $deposit['payment_status'];
    $transactions[] = [
        'date' => $deposit['date_deposit'],
        'particulars' => $particulars,
        'debit' => 0,
        'credit' => $deposit['amount'],
        'type' => 'credit',
        'id' => $deposit['id']
    ];
}

foreach ($debits as $debit) {
    $transactions[] = [
        'date' => $debit['date'],
        'particulars' => $debit['note'],
        'debit' => $debit['amount'],
        'credit' => 0,
        'type' => 'debit',
        'id' => $debit['id']
    ];
}

usort($transactions, function ($a, $b) {
    return strcmp($a['date'], $b['date']);
});

$today_date = date('Y-m-d');
$opening_balance_today = $balance;
$closing_balance_today = $balance;

$previous_closing_balance = $balance;

foreach ($transactions as $transaction) {
    if ($transaction['date'] < $today_date) {
        if ($transaction['type'] === 'credit') {
            $previous_closing_balance += $transaction['credit'];
        } elseif ($transaction['type'] === 'debit') {
            $previous_closing_balance -= $transaction['debit'];
        }
    }
}

$opening_balance_today = $previous_closing_balance;

foreach ($transactions as $transaction) {
    if ($transaction['date'] === $today_date) {
        if ($transaction['type'] === 'credit') {
            $closing_balance_today += $transaction['credit'];
        } elseif ($transaction['type'] === 'debit') {
            $closing_balance_today -= $transaction['debit'];
        }
    }
}
?>

<!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 Banks</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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.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;
        }

        .form-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }

        .form-container h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        label {
            font-size: 14px;
            color: #555;
            margin-bottom: 8px;
            display: block;
        }

        input[type="date"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        button[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #45a049;
        }

        .form-container input:focus,
        .form-container button:focus {
            outline: none;
            box-shadow: 0 0 5px rgba(72, 181, 60, 0.5);
        }
    </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">Bank & Cash Accounts</a> > List Bank
                                    </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
                                    </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="opening_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" class="btn btn-primary">Save</button>
                                                </div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- add variation end -->
                            </div>

                            <!----------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-opening_date">Opening Date</label>
                                                    <input type="date" class="form-control" id="edit-opening_date" name="opening_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-opening_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>
                            <!-- buttons for export end -->
                            <div class="iq-card-body" style="overflow:auto;">


                                <!-- Date range form -->
                                <div class="form-container">
                                    <h2>Filter by Date</h2>
                                    <form method="GET" class="filter-form">
                                        <input type="hidden" name="bank_id" value="<?php echo $bank_id; ?>">

                                        <div class="input-group">
                                            <label for="start_date">Start Date:</label>
                                            <input type="date" name="start_date" value="<?php echo $start_date; ?>" required>
                                        </div>

                                        <div class="input-group">
                                            <label for="end_date">End Date:</label>
                                            <input type="date" name="end_date" value="<?php echo $end_date; ?>" required>
                                        </div>

                                        <button type="submit" class="btn-submit">Filter</button>
                                        <a href="bank_ledger.php?bank_id=<?php echo $bank_id; ?>">
                                            <button type="button" class="btn-submit">Clear Filter</button>
                                        </a>
                                    </form>
                                </div>

                                <h3 class="bank-title">Bank Ledger for <?php echo htmlspecialchars($bank['bank_name']); ?></h3>
                                <div class="container">
                                    <!-- Bank Transactions Table -->
                                    <table class="table table-hover table-bordered" id="table-to-pdf">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Particulars</th>
                                                <th>Debit</th>
                                                <th>Credit</th>
                                                <th>Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php if ($start_bank_date >= $start_date && $start_bank_date <= $end_date) { ?>
                                                <tr>
                                                    <td><?php echo htmlspecialchars($start_bank_date); ?></td>
                                                    <td>Bank Start Balance</td>
                                                    <td></td>
                                                    <td><?php echo number_format($balance, 2); ?></td>
                                                    <td><?php echo number_format($balance, 2); ?></td>
                                                </tr>
                                            <?php } ?>

                                            <!-- Display Transactions -->
                                            <?php
                                            foreach ($transactions as $transaction) {
                                                if ($transaction['type'] === 'credit') {
                                                    $balance += $transaction['credit'];
                                                    $total_credit += $transaction['credit'];
                                                } elseif ($transaction['type'] === 'debit') {
                                                    $balance -= $transaction['debit'];
                                                    $total_debit += $transaction['debit'];
                                                }
                                            ?>
                                                <tr>
                                                    <td><?php echo htmlspecialchars($transaction['date']); ?></td>
                                                    <td><?php echo htmlspecialchars($transaction['particulars']); ?></td>
                                                    <td>
                                                        <?php if ($transaction['debit'] > 0) { ?>
                                                            <?php echo number_format($transaction['debit'], 2); ?>
                                                            <div class="dropdown">
                                                                <button class="dropbtn">...</button>
                                                                <div class="dropdown-content">
                                                                    <a href="#" class="edit-debit" data-id="<?php echo $transaction['id']; ?>">Edit</a>
                                                                    <a href="#" class="delete-debit" data-id="<?php echo $transaction['id']; ?>">Delete</a>
                                                                </div>
                                                            </div>
                                                        <?php } ?>
                                                    </td>
                                                    <td>
                                                        <?php if ($transaction['credit'] > 0) { ?>
                                                            <?php echo number_format($transaction['credit'], 2); ?>
                                                            <div class="dropdown">
                                                                <button class="dropbtn">...</button>
                                                                <div class="dropdown-content">
                                                                    <a href="#" class="edit-credit" data-id="<?php echo $transaction['id']; ?>">Edit</a>
                                                                    <a href="#" class="delete-credit" data-id="<?php echo $transaction['id']; ?>">Delete</a>
                                                                </div>
                                                            </div>
                                                        <?php } ?>
                                                    </td>
                                                    <td><?php echo number_format($balance, 2); ?></td>
                                                </tr>
                                            <?php } ?>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="2"><strong>Total</strong></td>
                                                <td><strong><?php echo number_format($total_debit, 2); ?></strong></td>
                                                <td><strong><?php echo number_format($total_credit, 2); ?></strong></td>
                                                <td><strong><?php echo number_format($balance, 2); ?></strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    
                                    <div class="row" style="margin-bottom: 20px;">
    <div class="col-md-6">
        <div class="card" style="padding: 10px; border: 1px solid #ccc;">
            <h5>Total Debit</h5>
            <span style="color: green; font-weight: bold;">
                <?php echo number_format($total_debit, 2); ?>
            </span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card" style="padding: 10px; border: 1px solid #ccc;">
            <h5>Total Credit</h5>
            <span style="color: red; font-weight: bold;">
                <?php echo number_format($total_credit, 2); ?>
            </span>
        </div>
    </div>
</div>

                                    <button class="btn btn-success" id="download-pdf" style="margin-top: 20px;">Download PDF</button>

                                    <?php include 'open_close_balnace.php'; ?>
                                </div>

                                <script>
                                    document.getElementById('download-pdf').addEventListener('click', function() {
                                        const {
                                            jsPDF
                                        } = window.jspdf;
                                        const doc = new jsPDF();

                                        const dropdowns = document.querySelectorAll('.dropdown, .dropbtn, .dropdown-content');

                                        const removedDropdowns = [];
                                        dropdowns.forEach(function(dropdown) {
                                            removedDropdowns.push(dropdown);
                                            dropdown.remove();
                                        });

                                        doc.autoTable({
                                            html: '#table-to-pdf',
                                            startY: 20,
                                            margin: {
                                                horizontal: 10
                                            },
                                            tableWidth: 'auto',
                                            theme: 'grid',
                                            headStyles: {
                                                fillColor: [22, 160, 133]
                                            },
                                            styles: {
                                                cellPadding: 5,
                                                fontSize: 10,
                                            },
                                            didDrawPage: function(data) {
                                                if (doc.internal.pageSize.height - data.cursor.y < 30) {
                                                    doc.autoTable({
                                                        body: [
                                                            [
                                                                'Total', '',
                                                                '<?php echo number_format($total_debit, 2); ?>',
                                                                '<?php echo number_format($total_credit, 2); ?>',
                                                                '<?php echo number_format($balance, 2); ?>'
                                                            ]
                                                        ],
                                                        startY: data.cursor.y + 10,
                                                        theme: 'grid',
                                                        styles: {
                                                            fontSize: 10,
                                                            cellPadding: 5
                                                        }
                                                    });
                                                }
                                            }
                                        });

                                        removedDropdowns.forEach(function(dropdown) {
                                            document.body.appendChild(dropdown);
                                        });

                                        // Save the PDF as a file
                                        doc.save('bank_transactions.pdf');
                                    });
                                </script>
                                <style>
                                    /* Dropdown Button */
                                    .dropbtn {
                                        background-color: transparent;
                                        border: none;
                                        cursor: pointer;
                                    }

                                    /* Dropdown Content (hidden by default) */
                                    .dropdown-content {
                                        display: none;
                                        position: absolute;
                                        background-color: #f1f1f1;
                                        min-width: 100px;
                                        z-index: 1;
                                        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                                    }

                                    /* Links inside the dropdown */
                                    .dropdown-content a {
                                        color: black;
                                        padding: 8px 16px;
                                        text-decoration: none;
                                        display: block;
                                    }

                                    /* Change color of links on hover */
                                    .dropdown-content a:hover {
                                        background-color: #ddd;
                                    }

                                    /* Show the dropdown on hover */
                                    .dropdown:hover .dropdown-content {
                                        display: block;
                                    }

                                    /* Overall container for form and content */
                                    .container {
                                        display: flex;
                                        flex-direction: column-reverse;
                                        /* Reverse the order of the children */
                                        gap: 20px;
                                        /* Add some space between elements */
                                    }

                                    /* Form container styling */
                                    .form-container {
                                        background-color: #f8f9fa;
                                        padding: 20px;
                                        border-radius: 8px;
                                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                                        margin-bottom: 20px;
                                    }

                                    .form-container h2 {
                                        margin-bottom: 20px;
                                        font-size: 24px;
                                        color: #343a40;
                                    }

                                    .filter-form {
                                        display: flex;
                                        flex-direction: column;
                                        gap: 15px;
                                    }

                                    .input-group {
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    .input-group label {
                                        margin-bottom: 5px;
                                        font-size: 14px;
                                        color: #495057;
                                    }

                                    .input-group input {
                                        padding: 8px;
                                        font-size: 14px;
                                        border: 1px solid #ced4da;
                                        border-radius: 4px;
                                    }

                                    .btn-submit {
                                        padding: 10px 20px;
                                        background-color: #007bff;
                                        color: white;
                                        border: none;
                                        border-radius: 4px;
                                        font-size: 16px;
                                        cursor: pointer;
                                        transition: background-color 0.3s;
                                    }

                                    .btn-submit:hover {
                                        background-color: #0056b3;
                                    }

                                    /* Bank title styling */
                                    .bank-title {
                                        font-size: 28px;
                                        font-weight: bold;
                                        color: #007bff;
                                        margin-top: 20px;
                                    }

                                    /* Balance section styling */
                                    .balances {
                                        display: flex;
                                        justify-content: space-between;
                                        margin-top: 20px;
                                    }

                                    .balance-box {
                                        background-color: #f9f9f9;
                                        padding: 20px;
                                        border-radius: 8px;
                                        border: 1px solid #ddd;
                                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                                        text-align: center;
                                        width: 48%;
                                    }

                                    .balance-box h3 {
                                        font-size: 18px;
                                        color: #333;
                                        margin-bottom: 10px;
                                    }

                                    .balance-box p {
                                        font-size: 20px;
                                        font-weight: bold;
                                        color: #007bff;
                                    }

                                    /* Table Styling */
                                    .table {
                                        margin-top: 20px;
                                        border-collapse: collapse;
                                        width: 100%;
                                    }

                                    .table th,
                                    .table td {
                                        padding: 12px;
                                        text-align: center;
                                        border: 1px solid #ddd;
                                    }

                                    .table th {
                                        background-color: #f1f1f1;
                                        font-weight: bold;
                                    }

                                    .table tbody tr:nth-child(even) {
                                        background-color: #f9f9f9;
                                    }

                                    .table tbody tr:hover {
                                        background-color: #f1f1f1;
                                    }

                                    .table tfoot td {
                                        font-weight: bold;
                                        background-color: #f1f1f1;
                                    }
                                </style>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        document.querySelectorAll('.edit-debit').forEach(item => {
                                            item.addEventListener('click', function(e) {
                                                e.preventDefault();
                                                const transactionId = this.getAttribute('data-id');
                                                const newAmount = prompt('Enter the new debit amount:');
                                                if (newAmount) {
                                                    fetch('update_transaction.php', {
                                                            method: 'POST',
                                                            body: new URLSearchParams({
                                                                'id': transactionId,
                                                                'amount': newAmount,
                                                                'type': 'debit'
                                                            }),
                                                            headers: {
                                                                'Content-Type': 'application/x-www-form-urlencoded'
                                                            }
                                                        })
                                                        .then(response => response.text())
                                                        .then(data => {
                                                            alert('Transaction updated successfully');
                                                            location.reload();
                                                        })
                                                        .catch(error => console.error('Error:', error));
                                                }
                                            });
                                        });

                                        // Handle Delete click for Debit
                                        document.querySelectorAll('.delete-debit').forEach(item => {
                                            item.addEventListener('click', function(e) {
                                                e.preventDefault();
                                                const transactionId = this.getAttribute('data-id');
                                                if (confirm('Warning: This action cannot be undone. Are you sure you want to delete this transaction?')) {
                                                    fetch('action/delete_transaction.php', {
                                                            method: 'POST',
                                                            body: new URLSearchParams({
                                                                'id': transactionId,
                                                                'type': 'debit'
                                                            }),
                                                            headers: {
                                                                'Content-Type': 'application/x-www-form-urlencoded'
                                                            }
                                                        })
                                                        .then(response => response.text())
                                                        .then(data => {
                                                            alert('Transaction deleted successfully');
                                                            location.reload(); // Reload to reflect changes
                                                        })
                                                        .catch(error => console.error('Error:', error));
                                                }
                                            });
                                        });

                                        // Handle Edit click for Credit
                                        document.querySelectorAll('.edit-credit').forEach(item => {
                                            item.addEventListener('click', function(e) {
                                                e.preventDefault();
                                                const transactionId = this.getAttribute('data-id');
                                                const newAmount = prompt('Enter the new credit amount:');
                                                if (newAmount) {
                                                    fetch('update_transaction.php', {
                                                            method: 'POST',
                                                            body: new URLSearchParams({
                                                                'id': transactionId,
                                                                'amount': newAmount,
                                                                'type': 'credit'
                                                            }),
                                                            headers: {
                                                                'Content-Type': 'application/x-www-form-urlencoded'
                                                            }
                                                        })
                                                        .then(response => response.text())
                                                        .then(data => {
                                                            alert('Transaction updated successfully');
                                                            location.reload(); // Reload to reflect changes
                                                        })
                                                        .catch(error => console.error('Error:', error));
                                                }
                                            });
                                        });

                                        // Handle Delete click for Credit
                                        document.querySelectorAll('.delete-credit').forEach(item => {
                                            item.addEventListener('click', function(e) {
                                                e.preventDefault();
                                                const transactionId = this.getAttribute('data-id');
                                                if (confirm('Warning: This action cannot be undone. Are you sure you want to delete this transaction?')) {
                                                    fetch('action/delete_transaction.php', {
                                                            method: 'POST',
                                                            body: new URLSearchParams({
                                                                'id': transactionId,
                                                                'type': 'credit'
                                                            }),
                                                            headers: {
                                                                'Content-Type': 'application/x-www-form-urlencoded'
                                                            }
                                                        })
                                                        .then(response => response.text())
                                                        .then(data => {
                                                            alert('Transaction deleted successfully');
                                                            location.reload(); // Reload to reflect changes
                                                        })
                                                        .catch(error => console.error('Error:', error));
                                                }
                                            });
                                        });
                                    });
                                </script>
                                <a href="list_banks.php">Back to Banks List</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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


    <!-- 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>