jweb/ac1/src/pages/agent-claim.php

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
    header('Location: ../../index.php');
    exit;
}

// Include database configuration
require_once '../../db.php';

// Get database connection
$database = new Database();
$db = $database->getConnection();

// Initialize variables with default values
$username = $_SESSION['username'] ?? 'User';
$email = $_SESSION['email'] ?? '';
$tier = $_SESSION['tier'] ?? 'basic';
$package = $_SESSION['package'] ?? 'Starter';
$balance = $_SESSION['balance'] ?? 0;
$total_deposits = $_SESSION['total_deposits'] ?? 0;
$total_withdrawals = $_SESSION['total_withdrawals'] ?? 0;
$rewards = $_SESSION['rewards'] ?? 0;
$earnings = $total_deposits - $total_withdrawals;


try {
    // Query to get user data
    $query = "SELECT u.*, up.first_name, up.last_name, up.profile_picture 
              FROM users u 
              LEFT JOIN user_profiles up ON u.id = up.user_id 
              WHERE u.id = :user_id";
    
    $stmt = $db->prepare($query);
    $stmt->bindParam(':user_id', $user_id);
    $stmt->execute();
    
    if ($stmt->rowCount() > 0) {
        $user = $stmt->fetch(PDO::FETCH_ASSOC);
        
        // Assign session variables and local variables
        $username = $_SESSION['username'] = $user['username'];
        $email = $_SESSION['email'] = $user['email'];
        $tier = $_SESSION['tier'] = $user['tier'];
        $package = $_SESSION['package'] = $user['package'];
        $balance = $_SESSION['balance'] = $user['balance'];
        $total_deposits = $_SESSION['total_deposits'] = $user['total_deposits'];
        $total_withdrawals = $_SESSION['total_withdrawals'] = $user['total_withdrawals'];
        $rewards = $_SESSION['rewards'] = $user['rewards'];
        $earnings = $total_deposits - $total_withdrawals;
        
        // Get active package info
        $package_query = "SELECT p.* FROM user_packages up 
                         JOIN packages p ON up.package_id = p.id 
                         WHERE up.user_id = :user_id AND up.status = 'active' 
                         ORDER BY up.end_date DESC LIMIT 1";
        
        $package_stmt = $db->prepare($package_query);
        $package_stmt->bindParam(':user_id', $user_id);
        $package_stmt->execute();
        
        if ($package_stmt->rowCount() > 0) {
            $active_package = $package_stmt->fetch(PDO::FETCH_ASSOC);
            $_SESSION['package_details'] = $active_package;
        }
        
        // Get claim statistics
        $claims_stats_query = "
            SELECT 
                COUNT(*) as total_claims,
                SUM(CASE WHEN status = 'approved' THEN 1 ELSE 0 END) as approved_claims,
                SUM(CASE WHEN status = 'pending' THEN 1 ELSE 0 END) as pending_claims,
                SUM(CASE WHEN status = 'rejected' THEN 1 ELSE 0 END) as rejected_claims,
                SUM(CASE WHEN status = 'approved' THEN amount ELSE 0 END) as approved_amount,
                SUM(CASE WHEN status = 'pending' THEN amount ELSE 0 END) as pending_amount,
                SUM(amount) as total_amount
            FROM agent_claims 
            WHERE user_id = :user_id
        ";
        
        $stats_stmt = $db->prepare($claims_stats_query);
        $stats_stmt->bindParam(':user_id', $user_id);
        $stats_stmt->execute();
        $claims_stats = $stats_stmt->fetch(PDO::FETCH_ASSOC);
        
        // Get pending claims
        $pending_claims_query = "
            SELECT ac.*, u.username, u.email 
            FROM agent_claims ac 
            JOIN users u ON ac.user_id = u.id 
            WHERE ac.user_id = :user_id AND ac.status = 'pending'
            ORDER BY ac.created_at DESC
        ";
        
        $pending_stmt = $db->prepare($pending_claims_query);
        $pending_stmt->bindParam(':user_id', $user_id);
        $pending_stmt->execute();
        $pending_claims = $pending_stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Get approved claims
        $approved_claims_query = "
            SELECT ac.*, u.username, u.email 
            FROM agent_claims ac 
            JOIN users u ON ac.user_id = u.id 
            WHERE ac.user_id = :user_id AND ac.status = 'approved'
            ORDER BY ac.approved_at DESC
        ";
        
        $approved_stmt = $db->prepare($approved_claims_query);
        $approved_stmt->bindParam(':user_id', $user_id);
        $approved_stmt->execute();
        $approved_claims = $approved_stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Get rejected claims
        $rejected_claims_query = "
            SELECT ac.*, u.username, u.email 
            FROM agent_claims ac 
            JOIN users u ON ac.user_id = u.id 
            WHERE ac.user_id = :user_id AND ac.status = 'rejected'
            ORDER BY ac.updated_at DESC
        ";
        
        $rejected_stmt = $db->prepare($rejected_claims_query);
        $rejected_stmt->bindParam(':user_id', $user_id);
        $rejected_stmt->execute();
        $rejected_claims = $rejected_stmt->fetchAll(PDO::FETCH_ASSOC);
        
    } else {
        $error_message = "User not found in database.";
    }
} catch(PDOException $exception) {
    $error_message = "Database error: " . $exception->getMessage();
}

// Initialize empty arrays if queries failed
if (!isset($claims_stats)) {
    $claims_stats = [
        'total_claims' => 0,
        'approved_claims' => 0,
        'pending_claims' => 0,
        'rejected_claims' => 0,
        'approved_amount' => 0,
        'pending_amount' => 0,
        'total_amount' => 0
    ];
}

if (!isset($pending_claims)) {
    $pending_claims = [];
}

if (!isset($approved_claims)) {
    $approved_claims = [];
}

if (!isset($rejected_claims)) {
    $rejected_claims = [];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Japanese Motors — Agent Claims</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        :root {
            --bg: #7b848d;
            --card: #7a2f3b;
            --card-2: #6f2630;
            --accent: #efdf2d;
            --muted: rgba(255,255,255,0.6);
            --glass: rgba(255,255,255,0.04);
            --promo-gradient: linear-gradient(180deg,#a13df0 0%, #ff2a79 50%, #d70b1a 100%);
            font-family: 'Poppins', system-ui, Arial;
            --banner-gradient-start: #a855f7;
            --banner-gradient-end: #ec4899;
            --spacing-unit: 1rem;
            --accent-primary: #7c3aed;
            --accent-secondary: #a855f7;
            --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.1);
            --premium-gold: #d97706;
        }
        
        body {
            background: var(--bg);
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            height: 100vh;
            background: #0d1321;
            color: #fff;
            position: fixed;
            top: 0;
            left: -250px;
            transition: all 0.3s ease;
            z-index: 1000;
            overflow-y: auto;
        }
        
        .sidebar.active {
            left: 0;
        }
        
        #content {
            margin-left: 0;
            transition: all 0.3s ease;
        }
        
        .sidebar.active ~ #content {
            margin-left: 250px;
        }
        
        header {
            background: #222;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 900;
            transition: all 0.3s ease;
        }
        
        .sidebar.active ~ #content header {
            margin-left: 250px;
        }
        
        .menu-toggle {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .logo-section {
            padding: 15px;
            border-bottom: 1px solid #1c2230;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .brand {
            font-size: 1.2rem;
            font-weight: 700;
            color: #ff9800;
        }
        
        .subtitle {
            font-size: 0.75rem;
            color: #aaa;
        }
        
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .menu li a {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: white;
            text-decoration: none;
            transition: background 0.3s;
        }
        
        .menu li a:hover {
            background: #1c2230;
        }
        
        .menu li a i {
            margin-right: 12px;
        }
        
        .user-footer {
            padding: 15px;
            background: #222;
            display: flex;
            align-items: center;
            gap: 10px;
            position: sticky;
            bottom: 0;
        }
        
        .avatar {
            width: 35px;
            height: 35px;
            background: #444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
        }
        
        .banner {
            max-width: 450px;
            margin: 0 auto calc(var(--spacing-unit) * 2);
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 12px;
            padding: calc(var(--spacing-unit) * 1.5);
            text-align: center;
            box-shadow: var(--shadow-hover);
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .banner .title {
            font-size: 1.25rem;
            margin-bottom: calc(var(--spacing-unit) * 1);
            color: #ffffff;
            font-weight: 700;
            animation: blink 1.5s infinite;
        }

        .banner p {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: calc(var(--spacing-unit) * 1);
            color: var(--premium-gold);
            animation: blink 1.5s infinite;
        }

        .banner .footer {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
            animation: blink 1.5s infinite;
        }
        
        .card {
            background: var(--card);
            border-radius: 12px;
            padding: 26px;
            color: white;
            box-shadow: 0 6px 0 rgba(0,0,0,0.08) inset;
            flex: 1;
        }
        
        .balance {
            background: rgba(255,255,255,0.03);
            padding: 14px;
            border-radius: 10px;
            margin: 18px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .form-group {
            margin: 12px 0;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: rgba(255,255,255,0.85);
        }
        
        input, select, textarea {
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.05);
            background: transparent;
            color: white;
        }
        
        .btn {
            display: inline-block;
            padding: 14px 24px;
            border-radius: 10px;
            background: var(--accent);
            color: #111;
            font-weight: 700;
            border: none;
            cursor: pointer;
            width: 100%;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--accent);
            color: var(--accent);
        }
        
        .btn-sm {
            padding: 8px 16px;
            font-size: 0.875rem;
        }
        
        .btn-success {
            background: #10B981;
            color: white;
        }
        
        .btn-danger {
            background: #EF4444;
            color: white;
        }
        
        .btn-info {
            background: #3B82F6;
            color: white;
        }
        
        .dashboard-card {
            background: rgba(0,0,0,0.2);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: rgba(0,0,0,0.15);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 16px;
        }
        
        .claim-card {
            background: rgba(0,0,0,0.15);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 16px;
            transition: transform 0.3s ease;
            border-left: 4px solid var(--accent);
        }
        
        .claim-card:hover {
            transform: translateY(-3px);
        }
        
        .faq-item {
            background: rgba(0,0,0,0.15);
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 16px;
            cursor: pointer;
        }
        
        .faq-answer {
            display: none;
            padding-top: 12px;
            color: var(--muted);
        }
        
        .active-page {
            background: #1c2230;
            border-right: 4px solid var(--accent);
        }
        
        .confirmation-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: var(--card);
            border-radius: 12px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            color: white;
        }
        
        .progress-bar {
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            overflow: hidden;
            margin: 15px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--accent);
            width: 0%;
            transition: width 0.5s ease;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .status-pending {
            background: rgba(245, 158, 11, 0.2);
            color: #F59E0B;
        }
        
        .status-approved {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981;
        }
        
        .status-rejected {
            background: rgba(239, 68, 68, 0.2);
            color: #EF4444;
        }
        
        .status-processing {
            background: rgba(59, 130, 246, 0.2);
            color: #3B82F6;
        }
        
        .search-box {
            background: rgba(0,0,0,0.15);
            border-radius: 10px;
            padding: 12px;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .search-box input {
            background: transparent;
            border: none;
            padding: 8px;
            margin-left: 8px;
            width: 100%;
        }
        
        .tabs {
            display: flex;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        
        .tab.active {
            opacity: 1;
            border-bottom: 2px solid var(--accent);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        @media (max-width: 768px) {
            .cards {
                flex-direction: column;
            }
            
            .promo {
                width: 92%;
            }
            
            .grid-cols-2 {
                grid-template-columns: 1fr;
            }
            
            .grid-cols-3 {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
                gap: 8px;
            }
            
            .action-buttons button {
                width: 100%;
            }
            
            .tabs {
                overflow-x: auto;
                white-space: nowrap;
            }
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .alert-success {
            background: rgba(16, 185, 129, 0.2);
            color: #10B981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .alert-error {
            background: rgba(239, 68, 68, 0.2);
            color: #EF4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: rgba(255,255,255,0.6);
        }
        
        .empty-state i {
            font-size: 48px;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
        <div class="logo-section">
            <i data-feather="zap" class="text-yellow-400"></i>
            <div>
                <h2 class="brand">JMOTORS</h2>
                <p class="subtitle">Marketing Platform</p>
            </div>
        </div>

         <ul class="menu">
            <li><a href="index.php"><i data-feather="home"></i> Dashboard</a></li>
            <li><a href="meta-uploads.php"><i data-feather="upload"></i> Meta Uploads</a></li>
            <li><a href="transactions.php"><i data-feather="repeat"></i> Transactions</a></li>
            <li><a href="transfer.php"><i data-feather="send"></i> Transfer</a></li>
            <li><a href="daily-product.php"><i data-feather="shopping-bag"></i> Daily Product</a></li>
            <li><a href="withdraw.php"><i data-feather="dollar-sign"></i> Withdraw</a></li>
            <li><a href="packages.php"><i data-feather="package"></i> Packages</a></li>
            <li><a href="loan.php"><i data-feather="credit-card"></i> Loan</a></li>
            <li><a href="recharge.php"><i data-feather="battery-charging"></i> Recharge</a></li>
            <li><a href="agent-approval.php"><i data-feather="user-check"></i> Agent Approval</a></li>
            <li><a href="access-token.php"><i data-feather="key"></i> Access Token</a></li>
            <li><a href="agent-claim.php" class="active-page"><i data-feather="tag"></i> Agent Claim</a></li>
            <li><a href="team.php"><i data-feather="users"></i> Team</a></li>
        </ul>

        <ul class="menu bottom">
            <li><a href="profile.php"><i data-feather="user"></i> Profile</a></li>
            <li><a href="settings.php"><i data-feather="settings"></i> Settings</a></li>
            <li><a href="whatsapp-channel.php"><i data-feather="message-square"></i> Whatsapp Channel</a></li>
            <li><a href="customer-care.php"><i data-feather="headphones"></i> Customer Care</a></li>
        </ul>

        <div class="user-footer">
            <div class="avatar"><?php echo !empty($username) ? substr($username, 0, 2) : 'US'; ?></div>
            <div>
                <h4><?php echo htmlspecialchars($username); ?></h4>
                <p><?php echo htmlspecialchars($tier); ?> - Marketer</p>
            </div>
        </div>
    </aside>

    <!-- Main Content -->
    <div id="content">
        <header class="bg-gray-800 text-white p-4">
            <div class="flex items-center">
                <button class="menu-toggle" id="menu-toggle">
                    <i data-feather="menu"></i>
                </button>
                <div class="ml-4 font-bold text-xl">Jmotors</div>
            </div>
            <nav class="flex items-center space-x-6">
                <a href="transfer.php" class="hover:text-yellow-300">Transfer</a>
                <a href="loan.php" class="hover:text-yellow-300">Loans</a>
                <a href="daily-product.php" class="hover:text-yellow-300">New Product</a>
                <div class="w-9 h-9 rounded-full bg-gradient-to-r from-yellow-300 to-orange-400 flex items-center justify-center font-bold"><?php echo !empty($username) ? substr($username, 0, 2) : 'US'; ?></div>
            </nav>
        </header>

        <main class="p-4">
            <?php if (!empty($error_message)): ?>
                <div class="alert alert-error">
                    <?php echo htmlspecialchars($error_message); ?>
                </div>
            <?php endif; ?>
            
            <?php if (isset($_GET['success'])): ?>
                <div class="alert alert-success">
                    <?php 
                    switch ($_GET['success']) {
                        case 'claim_submitted':
                            echo 'Claim submitted successfully! It will be reviewed within 3-5 business days.';
                            break;
                        case 'claim_approved':
                            echo 'Claim approved successfully!';
                            break;
                        case 'claim_rejected':
                            echo 'Claim rejected.';
                            break;
                        default:
                            echo 'Operation completed successfully.';
                    }
                    ?>
                </div>
            <?php endif; ?>

            <div class="banner">
                <div class="title">🏷️ Agent Claim Requests</div>
                <p>Manage commission claims and track your agent earnings</p>
                <div class="footer">💰 Commission tracking &nbsp; • &nbsp; Fast processing &nbsp; • &nbsp; Secure payments</div>
            </div>

            <div class="tabs">
                <div class="tab active" data-tab="pending">Pending Claims</div>
                <div class="tab" data-tab="approved">Approved Claims</div>
                <div class="tab" data-tab="rejected">Rejected Claims</div>
                <div class="tab" data-tab="new-claim">New Claim</div>
            </div>

            <div class="tab-content active" id="pending-tab">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
                    <div class="dashboard-card md:col-span-2">
                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                            <i data-feather="clock" class="text-blue-400"></i> Pending Claims
                        </h3>
                        
                        <div class="balance">
                            <div>
                                <p class="text-sm">Total Pending Claims</p>
                                <h3 class="text-xl font-bold"><?php echo $claims_stats['pending_claims'] ?? 0; ?></h3>
                            </div>
                            <div class="text-right">
                                <p class="text-sm">Total Amount</p>
                                <p class="font-bold"><?php echo number_format($claims_stats['pending_amount'] ?? 0, 2); ?> KES</p>
                            </div>
                        </div>
                        
                        <div class="search-box">
                            <i data-feather="search" class="text-gray-400"></i>
                            <input type="text" id="search-pending" placeholder="Search claims by description...">
                        </div>
                        
                        <div class="claim-list" id="pending-claims-list">
                            <?php if (!empty($pending_claims)): ?>
                                <?php foreach ($pending_claims as $claim): ?>
                                    <div class="claim-card">
                                        <div class="flex justify-between items-start mb-3">
                                            <div>
                                                <h4 class="font-bold"><?php echo htmlspecialchars($claim['username']); ?></h4>
                                                <p class="text-sm">Claim ID: JM-<?php echo $claim['id']; ?></p>
                                            </div>
                                            <span class="status-badge status-pending">
                                                <?php 
                                                if ($claim['status'] == 'pending') {
                                                    echo 'Pending Review';
                                                } elseif ($claim['status'] == 'processing') {
                                                    echo 'Processing';
                                                } else {
                                                    echo ucfirst($claim['status']);
                                                }
                                                ?>
                                            </span>
                                        </div>
                                        <div class="grid grid-cols-2 gap-4 mb-3">
                                            <div>
                                                <p class="text-xs text-gray-400">Claim Amount</p>
                                                <p class="text-sm font-bold"><?php echo number_format($claim['amount'], 2); ?> KES</p>
                                            </div>
                                            <div>
                                                <p class="text-xs text-gray-400">Submitted</p>
                                                <p class="text-sm"><?php echo date('d M Y', strtotime($claim['created_at'])); ?></p>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <p class="text-xs text-gray-400">Description</p>
                                            <p class="text-sm"><?php echo htmlspecialchars($claim['description']); ?></p>
                                        </div>
                                        <div class="mb-3">
                                            <p class="text-xs text-gray-400">Claim Type</p>
                                            <p class="text-sm"><?php echo ucfirst($claim['claim_type']); ?></p>
                                        </div>
                                        <div class="action-buttons flex gap-2">
                                            <button class="btn btn-success btn-sm flex-1" onclick="reviewClaim(<?php echo $claim['id']; ?>, '<?php echo $claim['username']; ?>', 'JM-<?php echo $claim['id']; ?>', '<?php echo number_format($claim['amount'], 2); ?>', '<?php echo htmlspecialchars($claim['description']); ?>', '<?php echo date('d M Y', strtotime($claim['created_at'])); ?>')">
                                                <i data-feather="eye" class="w-4 h-4 mr-1"></i> Review
                                            </button>
                                            <button class="btn btn-outline btn-sm" onclick="viewAgent(<?php echo $claim['user_id']; ?>)">
                                                <i data-feather="user" class="w-4 h-4 mr-1"></i> Profile
                                            </button>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <div class="empty-state">
                                    <i data-feather="inbox" class="mx-auto text-gray-400"></i>
                                    <p class="mt-2 text-gray-400">No pending claims to display</p>
                                    <p class="text-sm text-gray-400">All your claims have been processed</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <div class="dashboard-card">
                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                            <i data-feather="bar-chart-2" class="text-green-400"></i> Claims Statistics
                        </h3>
                        
                        <div class="stat-card">
                            <div class="flex justify-between items-center mb-2">
                                <span>Total Claims</span>
                                <span class="font-bold"><?php echo $claims_stats['total_claims'] ?? 0; ?></span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-green-400 h-2.5 rounded-full" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="flex justify-between items-center mb-2">
                                <span>Approved</span>
                                <span class="font-bold"><?php echo $claims_stats['approved_claims'] ?? 0; ?></span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-green-400 h-2.5 rounded-full" style="width: <?php echo $claims_stats['total_claims'] > 0 ? ($claims_stats['approved_claims'] / $claims_stats['total_claims'] * 100) : 0; ?>%"></div>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="flex justify-between items-center mb-2">
                                <span>Pending</span>
                                <span class="font-bold"><?php echo $claims_stats['pending_claims'] ?? 0; ?></span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-yellow-400 h-2.5 rounded-full" style="width: <?php echo $claims_stats['total_claims'] > 0 ? ($claims_stats['pending_claims'] / $claims_stats['total_claims'] * 100) : 0; ?>%"></div>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="flex justify-between items-center mb-2">
                                <span>Rejected</span>
                                <span class="font-bold"><?php echo $claims_stats['rejected_claims'] ?? 0; ?></span>
                            </div>
                            <div class="w-full bg-gray-700 rounded-full h-2.5">
                                <div class="bg-red-400 h-2.5 rounded-full" style="width: <?php echo $claims_stats['total_claims'] > 0 ? ($claims_stats['rejected_claims'] / $claims_stats['total_claims'] * 100) : 0; ?>%"></div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="font-bold mb-3 flex items-center gap-2">
                                <i data-feather="dollar-sign" class="text-yellow-400"></i> Amount Summary
                            </h4>
                            <div class="bg-gray-700 p-4 rounded-lg">
                                <div class="flex justify-between items-center mb-2">
                                    <span>Total Approved</span>
                                    <span class="font-bold"><?php echo number_format($claims_stats['approved_amount'] ?? 0, 2); ?> KES</span>
                                </div>
                                <div class="flex justify-between items-center mb-2">
                                    <span>Pending Approval</span>
                                    <span class="font-bold"><?php echo number_format($claims_stats['pending_amount'] ?? 0, 2); ?> KES</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span>Total Processed</span>
                                    <span class="font-bold"><?php echo number_format($claims_stats['total_amount'] ?? 0, 2); ?> KES</span>
                                </div>
                            </div>
                        </div>
                        
                        <button class="btn mt-6" onclick="exportClaimsReport()">
                            <i data-feather="download" class="w-4 h-4 mr-2"></i> Export Claims Report
                        </button>
                    </div>
                </div>
            </div>

            <div class="tab-content" id="approved-tab">
                <div class="dashboard-card mt-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                        <i data-feather="check-circle" class="text-green-400"></i> Approved Claims
                    </h3>
                    <?php if (!empty($approved_claims)): ?>
                        <div class="search-box">
                            <i data-feather="search" class="text-gray-400"></i>
                            <input type="text" id="search-approved" placeholder="Search approved claims...">
                        </div>
                        <div class="claim-list" id="approved-claims-list">
                            <?php foreach ($approved_claims as $claim): ?>
                                <div class="claim-card">
                                    <div class="flex justify-between items-start mb-3">
                                        <div>
                                            <h4 class="font-bold"><?php echo htmlspecialchars($claim['username']); ?></h4>
                                            <p class="text-sm">Claim ID: JM-<?php echo $claim['id']; ?></p>
                                        </div>
                                        <span class="status-badge status-approved">Approved</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4 mb-3">
                                        <div>
                                            <p class="text-xs text-gray-400">Claim Amount</p>
                                            <p class="text-sm font-bold"><?php echo number_format($claim['amount'], 2); ?> KES</p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-gray-400">Approved On</p>
                                            <p class="text-sm"><?php echo date('d M Y', strtotime($claim['approved_at'])); ?></p>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <p class="text-xs text-gray-400">Description</p>
                                        <p class="text-sm"><?php echo htmlspecialchars($claim['description']); ?></p>
                                    </div>
                                    <?php if (!empty($claim['approval_notes'])): ?>
                                        <div class="mb-3">
                                            <p class="text-xs text-gray-400">Approval Notes</p>
                                            <p class="text-sm"><?php echo htmlspecialchars($claim['approval_notes']); ?></p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php else: ?>
                        <div class="empty-state">
                            <i data-feather="check-square" class="mx-auto text-gray-400"></i>
                            <p class="mt-2 text-gray-400">No approved claims to display</p>
                            <p class="text-sm text-gray-400">Approved claims will appear here</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="tab-content" id="rejected-tab">
                <div class="dashboard-card mt-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                        <i data-feather="x-circle" class="text-red-400"></i> Rejected Claims
                    </h3>
                    <?php if (!empty($rejected_claims)): ?>
                        <div class="search-box">
                            <i data-feather="search" class="text-gray-400"></i>
                            <input type="text" id="search-rejected" placeholder="Search rejected claims...">
                        </div>
                        <div class="claim-list" id="rejected-claims-list">
                            <?php foreach ($rejected_claims as $claim): ?>
                                <div class="claim-card">
                                    <div class="flex justify-between items-start mb-3">
                                        <div>
                                            <h4 class="font-bold"><?php echo htmlspecialchars($claim['username']); ?></h4>
                                            <p class="text-sm">Claim ID: JM-<?php echo $claim['id']; ?></p>
                                        </div>
                                        <span class="status-badge status-rejected">Rejected</span>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4 mb-3">
                                        <div>
                                            <p class="text-xs text-gray-400">Claim Amount</p>
                                            <p class="text-sm font-bold"><?php echo number_format($claim['amount'], 2); ?> KES</p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-gray-400">Rejected On</p>
                                            <p class="text-sm"><?php echo date('d M Y', strtotime($claim['updated_at'])); ?></p>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <p class="text-xs text-gray-400">Description</p>
                                        <p class="text-sm"><?php echo htmlspecialchars($claim['description']); ?></p>
                                    </div>
                                    <?php if (!empty($claim['approval_notes'])): ?>
                                        <div class="mb-3">
                                            <p class="text-xs text-gray-400">Rejection Reason</p>
                                            <p class="text-sm"><?php echo htmlspecialchars($claim['approval_notes']); ?></p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php else: ?>
                        <div class="empty-state">
                            <i data-feather="alert-circle" class="mx-auto text-gray-400"></i>
                            <p class="mt-2 text-gray-400">No rejected claims to display</p>
                            <p class="text-sm text-gray-400">Rejected claims will appear here</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="tab-content" id="new-claim-tab">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
                    <div class="dashboard-card md:col-span-2">
                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                            <i data-feather="plus-circle" class="text-blue-400"></i> Submit New Claim
                        </h3>
                        
                        <form id="claim-form" action="process-claim.php" method="POST" enctype="multipart/form-data">
                            <div class="form-group">
                                <label for="claim-type">Claim Type</label>
                                <select id="claim-type" name="claim_type" required>
                                    <option value="">Select claim type</option>
                                    <option value="commission">Sales Commission</option>
                                    <option value="bonus">Performance Bonus</option>
                                    <option value="referral">Referral Bonus</option>
                                    <option value="override">Override Commission</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="claim-amount">Claim Amount (KES)</label>
                                <input type="number" id="claim-amount" name="claim_amount" placeholder="Enter amount" min="100" step="0.01" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="claim-description">Description</label>
                                <textarea id="claim-description" name="claim_description" rows="3" placeholder="Describe the reason for this claim..." required></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="claim-period">Claim Period</label>
                                <select id="claim-period" name="claim_period" required>
                                    <option value="">Select period</option>
                                    <option value="q3-2023">Q3 2023 (Jul - Sep)</option>
                                    <option value="q4-2023">Q4 2023 (Oct - Dec)</option>
                                    <option value="jan-2024">January 2024</option>
                                    <option value="feb-2024">February 2024</option>
                                    <option value="mar-2024">March 2024</option>
                                    <option value="apr-2024">April 2024</option>
                                    <option value="may-2024">May 2024</option>
                                    <option value="jun-2024">June 2024</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="claim-proof">Supporting Documents (Optional)</label>
                                <input type="file" id="claim-proof" name="claim_proof" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                <p class="text-xs text-gray-400 mt-1">Upload screenshots, reports, or other proof to support your claim (Max: 5MB)</p>
                            </div>
                            
                            <div class="form-group flex items-center">
                                <input type="checkbox" id="confirm-claim" name="confirm_claim" class="w-5 h-5 mr-2" required>
                                <label for="confirm-claim" class="mb-0">I confirm that this claim is accurate and valid</label>
                            </div>
                            
                            <button type="submit" class="btn mt-4" id="submit-claim">Submit Claim</button>
                        </form>
                    </div>
                    
                    <div class="dashboard-card">
                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                            <i data-feather="info" class="text-purple-400"></i> Claim Guidelines
                        </h3>
                        
                        <div class="bg-gray-700 p-4 rounded-lg mb-4">
                            <h4 class="font-bold mb-2">Commission Structure</h4>
                            <ul class="text-sm space-y-2">
                                <li class="flex items-start">
                                    <i data-feather="dollar-sign" class="text-green-400 mr-2 mt-1 w-4 h-4"></i>
                                    <span>Direct Sales: 15% commission</span>
                                </li>
                                <li class="flex items-start">
                                    <i data-feather="users" class="text-blue-400 mr-2 mt-1 w-4 h-4"></i>
                                    <span>Team Override: 5% on level 1 agents</span>
                                </li>
                                <li class="flex items-start">
                                    <i data-feather="gift" class="text-yellow-400 mr-2 mt-1 w-4 h-4"></i>
                                    <span>Referral Bonus: 1,000 KES per agent</span>
                                </li>
                            </ul>
                        </div>
                        
                        <div class="bg-yellow-400 bg-opacity-20 p-3 rounded-lg mb-4 flex items-start">
                            <i data-feather="alert-triangle" class="text-yellow-400 mr-2 mt-1"></i>
                            <p class="text-sm">Claims are processed within 3-5 business days. Ensure all information is accurate to avoid delays.</p>
                        </div>
                        
                        <div>
                            <h4 class="font-bold mb-2">Need Help?</h4>
                            <p class="text-sm mb-3">Contact support if you have questions about your claim</p>
                            <button class="btn btn-outline" onclick="contactSupport()">
                                <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> Contact Support
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="dashboard-card mt-8">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <i data-feather="help-circle" class="text-purple-400"></i> Claims FAQ
                </h3>
                
                <div class="faq-item">
                    <div class="flex justify-between items-center">
                        <h4 class="font-bold">How long does claim processing take?</h4>
                        <i data-feather="chevron-down" class="faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Standard claims are processed within 3-5 business days. Complex claims or those requiring additional verification may take up to 10 business days. You will receive a notification once your claim has been processed.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="flex justify-between items-center">
                        <h4 class="font-bold">What documents do I need to submit with my claim?</h4>
                        <i data-feather="chevron-down" class="faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>For commission claims: sales reports and transaction IDs. For bonus claims: performance metrics and achievement proof. For referral claims: agent IDs and signup dates. All claims benefit from supporting documentation like screenshots or exported reports.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="flex justify-between items-center">
                        <h4 class="font-bold">When will I receive payment for approved claims?</h4>
                        <i data-feather="chevron-down" class="faq-toggle"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Approved claims are paid out every Friday via your selected payment method. Payments are processed by 5 PM EAT. If your claim is approved on Thursday, you can expect payment the following day. Delays may occur during holidays or system maintenance.</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Review Modal -->
    <div class="confirmation-modal" id="review-modal">
        <div class="modal-content">
            <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
                <i data-feather="file-text" class="text-green-400"></i> Review Claim
            </h3>
            
            <div class="bg-gray-700 p-4 rounded-lg mb-4">
                <h4 class="font-bold mb-2" id="review-agent-name">John Kamau</h4>
                
                <div class="grid grid-cols-2 gap-4 mb-3">
                    <div>
                        <p class="text-xs text-gray-400">Claim ID</p>
                        <p class="text-sm" id="review-agent-id">JM-28746</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-400">Claim Amount</p>
                        <p class="text-sm font-bold" id="review-claim-amount">3,500 KES</p>
                    </div>
                </div>
                
                <div class="mb-3">
                    <p class="text-xs text-gray-400">Description</p>
                    <p class="text-sm" id="review-claim-desc">Q3 Commission - Team Sales Bonus</p>
                </div>
                
                <div>
                    <p class="text-xs text-gray-400">Submitted On</p>
                    <p class="text-sm" id="review-claim-date">15 Nov 2023</p>
                </div>
            </div>
            
            <form id="approval-form" action="process-claim-review.php" method="POST">
                <input type="hidden" id="review-claim-id" name="claim_id">
                <div class="form-group">
                    <label for="approval-notes">Review Notes</label>
                    <textarea id="approval-notes" name="approval_notes" rows="3" placeholder="Add any notes about this claim..."></textarea>
                </div>
                
                <div class="flex gap-3 mt-4">
                    <button type="button" class="btn btn-danger flex-1" id="reject-claim-btn" onclick="submitClaimReview('rejected')">
                        <i data-feather="x" class="w-4 h-4 mr-1"></i> Reject
                    </button>
                    <button type="button" class="btn btn-success flex-1" id="approve-claim-btn" onclick="submitClaimReview('approved')">
                        <i data-feather="check" class="w-4 h-4 mr-1"></i> Approve
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        feather.replace();
        
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('menu-toggle');
            const sidebar = document.getElementById('sidebar');
            const content = document.getElementById('content');
            
            toggleBtn.addEventListener('click', function() {
                sidebar.classList.toggle('active');
                content.classList.toggle('active');
            });
            
            // Tab functionality
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // Remove active class from all tabs
                    tabs.forEach(t => t.classList.remove('active'));
                    // Add active class to clicked tab
                    this.classList.add('active');
                    
                    // Hide all tab contents
                    document.querySelectorAll('.tab-content').forEach(content => {
                        content.classList.remove('active');
                    });
                    
                    // Show the selected tab content
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
            
            // FAQ toggle functionality
            const faqItems = document.querySelectorAll('.faq-item');
            faqItems.forEach(item => {
                item.addEventListener('click', function() {
                    const answer = this.querySelector('.faq-answer');
                    const icon = this.querySelector('.faq-toggle');
                    
                    if (answer.style.display === 'block') {
                        answer.style.display = 'none';
                        icon.setAttribute('data-feather', 'chevron-down');
                    } else {
                        answer.style.display = 'block';
                        icon.setAttribute('data-feather', 'chevron-up');
                    }
                    feather.replace();
                });
            });
            
            // Search functionality
            const searchPending = document.getElementById('search-pending');
            if (searchPending) {
                searchPending.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const claims = document.querySelectorAll('#pending-claims-list .claim-card');
                    
                    claims.forEach(claim => {
                        const text = claim.textContent.toLowerCase();
                        claim.style.display = text.includes(searchTerm) ? 'block' : 'none';
                    });
                });
            }
            
            const searchApproved = document.getElementById('search-approved');
            if (searchApproved) {
                searchApproved.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const claims = document.querySelectorAll('#approved-claims-list .claim-card');
                    
                    claims.forEach(claim => {
                        const text = claim.textContent.toLowerCase();
                        claim.style.display = text.includes(searchTerm) ? 'block' : 'none';
                    });
                });
            }
            
            const searchRejected = document.getElementById('search-rejected');
            if (searchRejected) {
                searchRejected.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const claims = document.querySelectorAll('#rejected-claims-list .claim-card');
                    
                    claims.forEach(claim => {
                        const text = claim.textContent.toLowerCase();
                        claim.style.display = text.includes(searchTerm) ? 'block' : 'none';
                    });
                });
            }
            
            // Modal functionality
            const reviewModal = document.getElementById('review-modal');
            
            // Close modal when clicking outside
            window.addEventListener('click', function(event) {
                if (event.target === reviewModal) {
                    reviewModal.style.display = 'none';
                }
            });
        });
        
        // Claim review function
        function reviewClaim(claimId, agentName, agentId, amount, desc, date) {
            document.getElementById('review-agent-name').textContent = agentName;
            document.getElementById('review-agent-id').textContent = agentId;
            document.getElementById('review-claim-amount').textContent = amount + ' KES';
            document.getElementById('review-claim-desc').textContent = desc;
            document.getElementById('review-claim-date').textContent = date;
            document.getElementById('review-claim-id').value = claimId;
            
            document.getElementById('review-modal').style.display = 'flex';
        }
        
        // Submit claim review
        function submitClaimReview(action) {
            const form = document.getElementById('approval-form');
            const formData = new FormData(form);
            formData.append('action', action);
            
            fetch('process-claim-review.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Claim ' + action + ' successfully!');
                    document.getElementById('review-modal').style.display = 'none';
                    // Reload the page to reflect changes
                    window.location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while processing your request.');
            });
        }
        
        // View agent function
        function viewAgent(agentId) {
            window.location.href = 'profile.php?id=' + agentId;
        }
        
        // Export claims report
        function exportClaimsReport() {
            // In a real application, this would generate and download a report
            alert('Exporting claims report... This feature would generate a CSV/PDF report in a real application.');
        }
        
        // Contact support
        function contactSupport() {
            window.location.href = 'customer-care.php';
        }
    </script>
</body>
</html>