<?php 
session_start();

// 1. Error Reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 2. Access Control
if(!isset($_SESSION['customer_login'])) {
    header('location:index.php');
    exit;
}

// 3. Database Connection & Setup
include '_inc/dbconn.php';

$user_id = $_SESSION["cust_id"]; 
$user_query = mysqli_query($con, "SELECT * FROM users WHERE id = '$user_id'");
$user_data = mysqli_fetch_assoc($user_query);

$name     = $user_data['fullname'] ?? 'User';
$email    = $user_data['email'] ?? '';
$initials = !empty($name) ? strtoupper(substr($name, 0, 1)) : 'U';

$sql = "SELECT * FROM transactions WHERE user_id = '$user_id' ORDER BY created_at DESC LIMIT 100";
$result = mysqli_query($con, $sql);

include 'header.php'; 
include 'customer_navbar.php';
?>

<style>
    /* Desktop Layout */
    .main-content-wrapper {
        margin-left: 260px; /* Width of your sidebar */
        transition: all 0.3s ease;
        min-height: 100vh;
        background: #F8FAFC;
    }

    /* Mobile Layout Fix */
    @media (max-width: 992px) {
        .main-content-wrapper {
            margin-left: 0 !important; /* Remove margin on mobile */
            width: 100%;
        }
        
        /* Table responsiveness for small screens */
        .table-responsive-stack tr {
            display: block;
            border-bottom: 2px solid #f1f5f9;
            margin-bottom: 10px;
            padding: 10px 0;
        }
        .table-responsive-stack td {
            display: flex;
            justify-content: space-between;
            border: none;
            padding: 5px 15px !important;
            text-align: right !important;
        }
        .table-responsive-stack td::before {
            content: attr(data-label);
            font-weight: bold;
            text-align: left;
            color: #64748b;
        }
        .table-responsive-stack thead {
            display: none; /* Hide headers on mobile */
        }
    }

    .badge-success { background-color: #DEF7EC; color: #03543F; }
    .badge-warning { background-color: #FEF3C7; color: #92400E; }
    .badge-danger { background-color: #FDE8E8; color: #9B1C1C; }
    .badge-secondary { background-color: #F3F4F6; color: #374151; }
    .text-success { color: #16A34A !important; }
    .text-danger { color: #DC2626 !important; }

    @media print {
        .top-navbar, .btn, .customer_navbar, #sidebarToggle { display: none !important; }
        .main-content-wrapper { margin-left: 0 !important; }
    }
</style>

<div class="main-content-wrapper">
    <header class="top-navbar px-3 py-3 d-flex justify-content-between align-items-center bg-white shadow-sm sticky-top">
        <div class="d-flex align-items-center">
            <button class="btn btn-light d-lg-none mr-2" id="sidebarToggle"><i class="mdi mdi-menu"></i></button>
            <h5 class="mb-0 font-weight-bold text-dark" style="font-size: 1.1rem;">Statement</h5>
        </div>

        <div class="dropdown">
            <div class="user-avatar bg-primary text-white d-flex align-items-center justify-content-center dropdown-toggle" 
                 id="profileDropdown" data-toggle="dropdown" style="width: 35px; height: 35px; border-radius: 50%; cursor: pointer;">
                <?php echo $initials; ?>
            </div>
            <div class="dropdown-menu dropdown-menu-right border-0 shadow-lg mt-2" style="border-radius: 12px; width: 220px;">
                <div class="px-4 py-3 border-bottom">
                    <p class="mb-0 font-weight-bold text-dark small"><?php echo $name; ?></p>
                </div>
                <a class="dropdown-item py-2" href="customer_dashboard.php">Dashboard</a>
                <a class="dropdown-item py-2" href="customer_personal_details.php">Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item py-2 text-danger" href="customer_logout.php">Logout</a>
            </div>
        </div>
    </header>

    <div class="content-body p-3 p-md-4">
        <div class="container-fluid">
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 15px;">
                <div class="card-body p-4 d-flex flex-column flex-sm-row justify-content-between align-items-sm-center">
                    <div class="mb-3 mb-sm-0">
                        <h6 class="text-muted small font-weight-bold text-uppercase mb-1">Available Balance</h6>
                        <h3 class="font-weight-bold text-dark mb-0">$<?php echo number_format($user_data['balance'], 2); ?></h3>
                    </div>
                    <button onclick="window.print()" class="btn btn-primary btn-sm px-4 shadow-sm" style="border-radius: 8px; height: fit-content;">
                        <i class="mdi mdi-printer mr-1"></i> Print
                    </button>
                </div>
            </div>

            <div class="card border-0 shadow-sm" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <h5 class="mb-0 font-weight-bold">History</h5>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 table-responsive-stack">
                        <thead class="bg-light">
                            <tr>
                                <th class="border-0 px-4">Date</th>
                                <th class="border-0">Reference</th>
                                <th class="border-0">Description</th>
                                <th class="border-0">Status</th>
                                <th class="border-0 text-right px-4">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            if(mysqli_num_rows($result) > 0) {
                                while($row = mysqli_fetch_assoc($result)) {
                                    $is_credit = ($row['type'] == 'credit');
                                    $status = strtolower($row['status']);
                                    $status_class = ($status == 'completed') ? 'badge-success' : (($status == 'pending') ? 'badge-warning' : 'badge-danger');
                                    ?>
                                    <tr>
                                        <td class="px-4 py-3" data-label="Date">
                                            <span class="text-dark font-weight-bold"><?php echo date('M d, Y', strtotime($row['created_at'])); ?></span>
                                        </td>
                                        <td class="py-3" data-label="Reference">
                                            <span class="small text-muted"><?php echo $row['reference_id'] ?: 'N/A'; ?></span>
                                        </td>
                                        <td class="py-3" data-label="Description">
                                            <div class="font-weight-bold text-dark"><?php echo htmlspecialchars($row['description']); ?></div>
                                        </td>
                                        <td class="py-3" data-label="Status">
                                            <span class="badge <?php echo $status_class; ?> px-2 py-1">
                                                <?php echo strtoupper($row['status']); ?>
                                            </span>
                                        </td>
                                        <td class="text-right px-4 py-3 font-weight-bold <?php echo ($is_credit ? 'text-success' : 'text-danger'); ?>" data-label="Amount">
                                            <?php echo ($is_credit ? '+' : '-'); ?> $<?php echo number_format($row['amount'], 2); ?>
                                        </td>
                                    </tr>
                                    <?php
                                }
                            } else {
                                echo "<tr><td colspan='5' class='text-center py-5 text-muted'>No transactions found.</td></tr>";
                            }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>
