<div class="page-title">
  <div>
    <h1><i class="fa fa-money"></i> School Bank Account Details</h1>
  </div>
 </div>

<div class="card">
    <div class="row">
        <div class="col-12">
            <div class="table-container">
                <table class="custom-table">
                    <caption>(!!! PLEASE PAY INTO THE CORRECT BANK ACCOUNT FOR THE CORRECT PURPOSE.!!!)</caption>
                    <thead>
                        <tr>
                            <th>S/N</th>
                            <th>BANK NAME</th>
                            <th>ACCT. NAME</th>
                            <th>ACCT NO.</th>
                            <th>PURPOSE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $query = "SELECT * FROM `account_details`";
                            $run_query = mysqli_query($connection, $query);
                            if (mysqli_num_rows($run_query) > 0) {
                                $i = 0;
                                while ($result = mysqli_fetch_assoc($run_query)) {
                                    $i++;
                                    echo "
                                        <tr>
                                            <td>{$i}</td>
                                            <td>{$result['bank_name']}</td>
                                            <td>{$result['account_name']}</td>
                                            <td>{$result['account_number']}</td>
                                            <td>{$result['account_purpose']}</td>
                                        </tr>
                                    ";
                                }
                            } else {
                                echo "<tr><td colspan='5' class='no-data'>No records found</td></tr>";
                            }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    /* Overall container styling */
    .table-container {
        margin: 20px auto;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 15px;
        background: #f9f9f9;
        max-width: 95%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Custom table styles */
    .custom-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 1.2rem;
        text-align: left;
        background: #fff;
    }

    .custom-table caption {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #d9534f; /* Highlighted warning color */
        text-align: center;
    }

    .custom-table thead {
        background: #007bff;
        color: white;
        font-size: 1.3rem;
    }

    .custom-table th, .custom-table td {
        padding: 15px 20px;
        border: 1px solid #ddd;
    }

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

    .custom-table tbody tr:hover {
        background: #e9ecef;
        transition: 0.3s ease;
    }

    /* No data row style */
    .no-data {
        text-align: center;
        font-style: italic;
        color: #888;
    }

    /* Adjustments for mobile screens */
    @media (max-width: 768px) {
        .custom-table {
            font-size: 1.1rem;
        }

        .custom-table caption {
            font-size: 1.2rem;
        }
    }

    @media (max-width: 480px) {
        .custom-table th, .custom-table td {
            padding: 10px;
            font-size: 1rem;
        }

        .custom-table caption {
            font-size: 1rem;
        }
    }
</style>
