<?php
session_start();
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
include("header.php");
//include("../config/theconfig.php");



if (!(isset($_SESSION['customerid']))) {
    header('Location:login.php?error=nologin');
    exit();
}

$dts = date("Y-m-d H:i:s");

// Update last login
$stmt = $con->prepare("UPDATE customers SET lastlogin=? WHERE customerid=?");
$stmt->bind_param("ss", $dts, $_SESSION['customerid']);
$stmt->execute();
$stmt->close();

// Fetch pending transactions
$sqlq = $con->prepare("SELECT * FROM transactions WHERE paymentstat=?");
$pending = "Pending";
$sqlq->bind_param("s", $pending);
$sqlq->execute();
$transactionResult = $sqlq->get_result();
$sqlq->close();


// Fetch account details
$results = $con->prepare("SELECT accno, accstatus, accopendate, accounttype, accountbalance
                          FROM accounts WHERE customerid=?");
$results->bind_param("s", $_SESSION['customerid']);
$results->execute();
$res = $results->get_result();

while ($arrow = $res->fetch_assoc()) {
    $acno       = $arrow['accno'];
    $status     = $arrow['accstatus'];    
    $accopen    = $arrow['accopendate'];
    $acctype    = $arrow['accounttype'];
    $accbal     = $arrow['accountbalance'];
}
$results->close();

// Fetch customer details
$result = $con->prepare("SELECT email, phone, gender, dob, accstatus, country, ifsccode, lastlogin
                           FROM customers WHERE customerid=?");
$result->bind_param("s", $_SESSION['customerid']);
$result->execute();
$rowrec = $result->get_result()->fetch_assoc();
$result->close();

?>

<style>
    :root {
        /* --- UPDATED TO BLUE THEME --- */
        --primary-blue: #003399; 
        --secondary-blue: #005D9D;
        --light-gray: #f8fafc;
        --medium-gray: #64748b;
        --dark-gray: #1e293b;
        --success-green: #059669;
        --warning-orange: #d97706;
        --border-color: #e2e8f0;
        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    body {
        background-color: #f8fafc;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    .account-overview-card {
        background: white;
        border-radius: 24px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .card-header-custom {
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        padding: 24px 32px;
        border-bottom: 1px solid var(--border-color);
        position: relative;
    }

    .card-header-custom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.3;
        pointer-events: none;
    }

    .card-title-custom {
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .card-title-custom::before {
        content: '';
        display: block;
        width: 4px;
        height: 24px;
        background: var(--primary-blue);
        border-radius: 4px;
    }

    .card-body-custom {
        padding: 32px;
        background: white;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
        margin: 0;
    }

    .info-item {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 20px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .info-item:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--secondary-blue);
    }

    .info-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary-blue);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    .info-item:hover::before {
        transform: scaleY(1);
    }

    .icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: #f0f4ff; /* Light blue tint */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 18px;
        flex-shrink: 0;
        transition: all 0.3s ease;
        border: 1px solid #e6efff;
    }

    .info-item:hover .icon-wrapper {
        background: var(--primary-blue);
        color: white !important;
        border-color: var(--primary-blue);
        transform: scale(1.05);
    }
    
    .info-item:hover .icon-wrapper svg {
        fill: white;
        stroke: white;
    }
    
    /* Updated individual icon colors to match the new blue theme */
    .icon-user { color: var(--primary-blue); }
    .icon-email { color: #005D9D; }
    .icon-phone { color: #003399; }
    .icon-calendar { color: #005D9D; }
    .icon-lock { color: #0891b2; }
    .icon-card { color: #003399; }
    .icon-login { color: #005D9D; }
    .icon-gender { color: #003399; }
    .icon-account { color: #005D9D; }

    .info-content {
        flex: 1;
        min-width: 0;
    }

    .info-label {
        font-size: 0.8rem;
        color: var(--medium-gray);
        font-weight: 600;
        margin: 0 0 4px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        font-size: 1.05rem;
        color: var(--dark-gray);
        font-weight: 700;
        margin: 0;
        word-break: break-word;
    }

    .status-active {
        background: #dcfce7;
        color: #166534;
        padding: 5px 12px;
        border-radius: 30px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-inactive {
        background: #fee2e2;
        color: #991b1b;
        padding: 5px 12px;
        border-radius: 30px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
</style>

<body data-sidebar="colored">

    <div id="layout-wrapper">
        
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid py-4">
                    
                    <div class="row mb-4">
                        <div class="col-12">
                            <h2 class="fw-bold text-dark mb-1">My Profile</h2>
                            <p class="text-muted">Manage your personal information and security.</p>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-12">
                            <div class="account-overview-card">
                                <div class="card-header-custom">
                                    <h5 class="card-title-custom">Personal Details</h5>
                                </div>
                                <div class="card-body-custom">
                                    <div class="info-grid">
                                        
                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-user fs-3 icon-user"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Account Holder</p>
                                                <p class="info-value"><?php echo htmlspecialchars($_SESSION['customername']); ?></p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-envelope fs-3 icon-email"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Email Address</p>
                                                <p class="info-value"><?php echo htmlspecialchars($rowrec['email']); ?></p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-phone fs-3 icon-phone"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Phone Number</p>
                                                <p class="info-value"><?php echo htmlspecialchars($rowrec['phone']); ?></p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-calendar fs-3 icon-calendar"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Account Opening</p>
                                                <p class="info-value">
                                                    <?php
                                                    if (!empty($accopen)) {
                                                        echo date("d M Y", strtotime($accopen));
                                                    } else {
                                                        echo "N/A";
                                                    }
                                                    ?>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-shield-quarter fs-3 icon-lock"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Account Status</p>
                                                <p class="info-value">
                                                    <?php if(strtolower($rowrec['accstatus']) == 'active'): ?>
                                                        <span class="status-active">Active</span>
                                                    <?php else: ?>
                                                        <span class="status-inactive"><?php echo htmlspecialchars($rowrec['accstatus']); ?></span>
                                                    <?php endif; ?>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-building-house fs-3 icon-card"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Branch Code</p>
                                                <p class="info-value"><?php echo htmlspecialchars($rowrec['ifsccode']); ?></p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-log-in-circle fs-3 icon-login"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Last Login</p>
                                                <p class="info-value">
                                                    <?php
                                                    if (!empty($rowrec['lastlogin'])) {
                                                        echo date("d M Y h:i A", strtotime($rowrec['lastlogin']));
                                                    } else {
                                                        echo "N/A";
                                                    }
                                                    ?>
                                                </p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-male-female fs-3 icon-gender"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Gender</p>
                                                <p class="info-value"><?php echo htmlspecialchars($rowrec['gender']); ?></p>
                                            </div>
                                        </div>

                                        <div class="info-item">
                                            <div class="icon-wrapper">
                                                <i class="bx bx-credit-card fs-3 icon-account"></i>
                                            </div>
                                            <div class="info-content">
                                                <p class="info-label">Account Number</p>
                                                <p class="info-value" style="font-family: monospace; letter-spacing: 1px;"><?php echo htmlspecialchars($acno); ?></p>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            
            <?php include 'footer.php' ?>
            
        </div>
    </div>
    
    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/node-waves/waves.min.js"></script>

    <script src="assets/js/app.js"></script>

</body>