<?php
include "db.php";
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

<style>

/* ===== Universal Page Layout ===== */

body{
    background:#F5F5F5;
    font-family:'Poppins',sans-serif;
    margin:0;
}

.page-wrapper{
    width:65%;
    margin:40px auto;
}

.page-card{
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
    padding:24px;
}

/* ===== Header ===== */

.page-header{
    background:#F5F5F5;
    padding:16px 20px;
    border-bottom:3px solid #F37021;
    margin:-24px -24px 24px -24px;
}

.page-header h2{
    margin:0;
    font-size:18px;
    color:#0C1F3A;
}

/* ===== Table Style ===== */

.table-container{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

thead{
    background:#0C1F3A;
    color:#fff;
}

th{
    padding:12px;
    text-align:left;
}

td{
    padding:10px;
    border-bottom:1px solid #E0E0E0;
}

tbody tr:hover{
    background:#F9F9F9;
}

/* ===== Amount Styling ===== */

.amount{
    font-weight:600;
    color:#0C1F3A;
}

/* ===== Type Badge ===== */

.badge{
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    color:#fff;
}

.paid{
    background:#D9534F;
}

.received{
    background:#28A745;
}

/* ===== Action Buttons ===== */

.action-btn{
    text-decoration:none;
    padding:6px 10px;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

.edit-btn{
    background:#0C1F3A;
    color:#fff;
}

.delete-btn{
    background:#F37021;
    color:#fff;
}

/* ===== No Data ===== */

.no-data{
    text-align:center;
    padding:20px;
    color:#777;
}

/* ===== Responsive ===== */

@media(max-width:768px){
    .page-wrapper{
        width:92%;
    }
}

</style>
</head>
<body>

<div class="page-wrapper">
<div class="page-card">

<div class="page-header">
    <h2>🏦 Bank Transactions</h2>
</div>

<div class="table-container">
<table>

<thead>
<tr>
    <th>ID</th>
    <th>Bank Name</th>
    <th>Account #</th>
    <th>Date</th>
    <th>Description</th>
    <th>Amount</th>
    <th>Type</th>
    <th>Ref ID</th>
    <th>Actions</th>
</tr>
</thead>

<tbody>

<?php
$result = $conn->query("SELECT * FROM bank ORDER BY id DESC");

if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){

        $typeClass = strtolower($row['type']) == 'paid' ? 'paid' : 'received';

        echo "<tr>
            <td>{$row['id']}</td>
            <td>{$row['bank_name']}</td>
            <td>{$row['account_number']}</td>
            <td>{$row['date']}</td>
            <td>{$row['description']}</td>
            <td class='amount'>Rs. {$row['amount']}</td>
            <td><span class='badge $typeClass'>{$row['type']}</span></td>
            <td>{$row['reference_id']}</td>
            <td>
                <a href='bank_edit.php?id={$row['id']}' class='action-btn edit-btn'>Edit</a>
                <a href='bank_delete.php?id={$row['id']}' 
                   class='action-btn delete-btn'
                   onclick='return confirm(\"Are you sure?\")'>Delete</a>
            </td>
        </tr>";
    }
}else{
    echo "<tr><td colspan='9' class='no-data'>No Bank Transactions Found</td></tr>";
}
?>

</tbody>
</table>
</div>

</div>
</div>

</body>
</html>
