in accountant/manage_payments.php (<?php
session_start();
require_once '../db_connect.php';

// Check if the accountant is logged in
if (!isset($_SESSION['accountant_id'])) {
    header("Location: login.php");
    exit();
}

try {
    // Fetch payments along with patient name and invoice number
    $stmt = $pdo->prepare("
        SELECT payments.*, patients.name AS patient_name, invoices.id AS invoice_number
        FROM payments
        JOIN patients ON payments.patient_id = patients.id
        JOIN invoices ON payments.invoice_id = invoices.id
        ORDER BY payment_date DESC
    ");
    $stmt->execute();
    $payments = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    echo "Error fetching payments: " . $e->getMessage();
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage Payments</title>
    <!-- Meta tags for responsiveness -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS and DataTables CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <!-- Custom Styles -->
    <style>
        /* Import Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

        /* Root Variables */
        :root {
            --primary-color: #4F3F02;
            --secondary-color: #D1C287;
            --background-color: #F8F9FA;
            --card-background: #FFFFFF;
            --text-color: #333333;
            --font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--background-color);
            font-family: var(--font-family);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        .dashboard-header {
            background-color: var(--primary-color);
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-bottom: 30px;
        }

        .dashboard-header h1 {
            font-weight: 700;
            margin-bottom: 10px;
        }

        .dashboard-header p a {
            color: #fff;
            margin: 0 10px;
            text-decoration: none;
            font-weight: 600;
        }

        .dashboard-header p a:hover {
            text-decoration: underline;
        }

        .btn-custom {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            font-weight: 600;
            border: none;
            border-radius: 5px;
            transition: all 0.3s;
            padding: 10px 20px;
        }

        .btn-custom:hover {
            background-color: var(--primary-color);
            color: #fff;
        }

        .table thead {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            font-weight: 600;
        }

        .table tbody tr:hover {
            background-color: rgba(209, 194, 135, 0.2);
        }

        .pagination .page-link {
            color: var(--primary-color);
        }

        .pagination .page-item.active .page-link {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            color: var(--primary-color);
        }

        .form-control, .form-select {
            border-radius: 5px;
        }

        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
            margin-bottom: 20px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            background-color: var(--secondary-color) !important;
            border: none !important;
            border-radius: 5px !important;
            color: var(--primary-color) !important;
            margin: 0 2px;
            padding: 5px 10px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: var(--primary-color) !important;
            color: #fff !important;
            border: none;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: var(--primary-color) !important;
            color: #fff !important;
        }

        .dataTables_wrapper .dataTables_info {
            margin-top: 10px;
        }

        /* Responsive Adjustments */
        @media (max-width: 576px) {
            .dashboard-header h1 {
                font-size: 24px;
            }

            .table-responsive {
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <h1>Manage Payments</h1>
        <p>
            <a href="dashboard.php">Dashboard</a> |
            <a href="accountant_profile.php">Profile</a> |
            <a href="logout.php">Logout</a>
        </p>
    </div>

    <!-- Main Container -->
    <div class="container">
        <!-- Add New Payment Button -->
        <a href="create_payment.php" class="btn btn-custom mb-4">Add New Payment</a>

        <!-- Payment Table -->
        <div class="table-responsive">
            <table class="table table-striped table-hover" id="paymentsTable">
                <thead>
                    <tr>
                        <th>Payment ID</th>
                        <th>Patient Name</th>
                        <th>Invoice Number</th>
                        <th>Amount Paid</th>
                        <th>Payment Date</th>
                        <th>Payment Method</th>
                        <th>Notes</th>
                        <th>Actions</th> <!-- Added Actions Column -->

                    </tr>
                </thead>
                <tbody>
                    <?php if (count($payments) > 0): ?>
                        <?php foreach ($payments as $payment): ?>
                            <tr>
                                <td><?php echo htmlspecialchars($payment['id']); ?></td>
                                <td><?php echo htmlspecialchars($payment['patient_name']); ?></td>
                                <td><?php echo htmlspecialchars($payment['invoice_number']); ?></td>
                                <td>$<?php echo number_format($payment['amount_paid'], 2); ?></td>
                                <td><?php echo htmlspecialchars($payment['payment_date']); ?></td>
                                <td><?php echo htmlspecialchars($payment['payment_method']); ?></td>
                                <td><?php echo htmlspecialchars($payment['notes']); ?></td>
                                                                <td>
                                    <a href="view_payment.php?id=<?php echo $payment['id']; ?>" class="btn btn-sm btn-info">View</a>
                                    <a href="edit_payment.php?id=<?php echo $payment['id']; ?>" class="btn btn-sm btn-primary">Edit</a>
                                    <form action="manage_payments.php" method="POST" style="display:inline-block;">
                                        <input type="hidden" name="payment_id" value="<?php echo $payment['id']; ?>">
                                        <button type="submit" name="delete_payment" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this payment?');">Delete</button>
                                    </form>
                                </td>

                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="7" class="text-center">No payments found.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JS -->
    <script>
        $(document).ready(function() {
            $('#paymentsTable').DataTable({
                "ordering": true,
                "order": [[0, "desc"]],
                "lengthChange": true,
                "lengthMenu": [10, 20, 50, 100],
                "pageLength": 20,
                "language": {
                    "search": "",
                    "searchPlaceholder": "Search payments...",
                    "lengthMenu": "Show _MENU_ entries",
                    "info": "Showing _START_ to _END_ of _TOTAL_ payments",
                },
                "dom": '<"top"f><"table-responsive"tr><"bottom"lip><"clear">',
            });
        });
    </script>
</body>
</html>) create delete_payment.php file to delete payment and type full codes