<!-- Begin Page Content -->
<style>
/* Modern User Dashboard Styles */
.user-dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
    color: white;
}

.user-greeting-box {
    background: white;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.balance-display {
    background: rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
}

.balance-display h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.balance-display small {
    opacity: 0.9;
}

/* Stats Cards */
.user-stat-card {
    border-radius: 15px;
    padding: 20px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    min-height: 120px;
}

.user-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.user-stat-card .icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
}

.user-stat-card .icon i {
    font-size: 24px;
}

.user-stat-card.success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.user-stat-card.danger { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
.user-stat-card.warning { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
.user-stat-card.purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.user-stat-card.info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.user-stat-card.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.user-stat-card h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.user-stat-card p {
    margin: 5px 0 0 0;
    opacity: 0.9;
    font-size: 14px;
}

/* Quick Actions */
.user-quick-actions {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.user-quick-actions h5 {
    color: #333;
    font-weight: 700;
    margin-bottom: 20px;
}

.user-quick-action-item {
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.user-quick-action-item:hover {
    background: #f8f9fc;
    transform: translateY(-3px);
    text-decoration: none;
}

.user-quick-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 24px;
    color: white;
}

.user-quick-action-icon.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.user-quick-action-icon.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.user-quick-action-icon.orange { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
.user-quick-action-icon.red { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
.user-quick-action-icon.purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.user-quick-action-icon.cyan { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.user-quick-action-item span {
    color: #333;
    font-weight: 600;
    font-size: 13px;
}

/* Transaction Table */
.user-modern-table {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.user-modern-table h5 {
    color: #333;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.user-modern-table table {
    width: 100%;
}

.user-modern-table th {
    background: #f8f9fc;
    padding: 12px;
    font-weight: 600;
    color: #555;
    font-size: 13px;
    border: none;
}

.user-modern-table td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
}

.user-modern-table tr:last-child td {
    border-bottom: none;
}

.status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.success { background: #d4edda; color: #155724; }
.status-badge.pending { background: #fff3cd; color: #856404; }
.status-badge.failed { background: #f8d7da; color: #721c24; }
</style>

<div class="container-fluid">
    <!-- Dashboard Header -->
    <div class="user-dashboard-header">
        <div class="row align-items-center">
            <div class="col-md-3">
                <div class="user-greeting-box">
                    <i class="fas fa-sun"></i> Hello Good <?= date('H') < 12 ? 'Morning' : (date('H') < 17 ? 'Afternoon' : 'Evening'); ?>
                </div>
                <p class="mt-2 mb-0">Welcome, <?= $o->name; ?></p>
            </div>
            <div class="col-md-3">
                <div class="balance-display">
                    <small>Available Balance</small>
                    <h3><i class="fa fa-rupee-sign"></i> <?= number_format($o->amount_balance, 2); ?></h3>
                </div>
            </div>
            <div class="col-md-6 text-right">
                <form name="reports" id="reports" method="post" action="index.php" class="d-inline-flex align-items-center">
                    <input type="date" name="from_date" class="form-control mr-2" style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 10px;" value="<?=format_date_without_time($from_date);?>">
                    <input type="date" name="to_date" class="form-control mr-2" style="background: rgba(255,255,255,0.2); border: none; color: white; border-radius: 10px;" value="<?=format_date_without_time($to_date);?>">
                    <button type="submit" class="btn" style="background: white; color: #667eea; border-radius: 10px; font-weight: 600;">Search</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Stats Cards Row 1 -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card success" onclick="window.location.href='transaction.php?status=Success&transaction_type=Recharge&from=<?=$start_date;?>&to=<?=$end_date;?>'">
                <div class="icon"><i class="fas fa-check"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$success['amount'];?></h2>
                <p>Success Transactions</p>
                <small>Total: <?=$success['quantity'];?></small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card danger" onclick="window.location.href='transaction.php?status=Failed&transaction_type=Recharge&from=<?=$start_date;?>&to=<?=$end_date;?>'">
                <div class="icon"><i class="fas fa-times"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$failed['amount'];?></h2>
                <p>Failed Transactions</p>
                <small>Total: <?=$failed['quantity'];?></small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card warning" onclick="window.location.href='transaction.php?status=Pending&transaction_type=Recharge&from=<?=$start_date;?>&to=<?=$end_date;?>'">
                <div class="icon"><i class="fas fa-clock"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$pending['amount'];?></h2>
                <p>Pending Transactions</p>
                <small>Total: <?=$pending['quantity'];?></small>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card info" onclick="window.location.href='transaction.php?transaction_type=Refund&from=<?=$start_date;?>&to=<?=$end_date;?>'">
                <div class="icon"><i class="fas fa-undo"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$res_refunds[0]['amount'];?></h2>
                <p>Refund Amount</p>
                <small>Total: <?=$res_refunds[0]['quantity'];?></small>
            </div>
        </div>
    </div>

    <!-- Stats Cards Row 2 -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card primary" onclick="window.location.href='turnover.php'">
                <div class="icon"><i class="fas fa-chart-line"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$turnover;?></h2>
                <p>Turnover</p>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card success" onclick="window.location.href='commission.php'">
                <div class="icon"><i class="fas fa-percentage"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$revenue;?></h2>
                <p>Commission Earned</p>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card purple" onclick="window.location.href='investment.php'">
                <div class="icon"><i class="fas fa-wallet"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$money_input;?></h2>
                <p>Capital Invested</p>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="user-stat-card danger" onclick="window.location.href='disputes.php'">
                <div class="icon"><i class="fas fa-gavel"></i></div>
                <h2><i class="fa fa-rupee-sign"></i> <?=$res_disputes[0]['amount'];?></h2>
                <p>Disputes</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="user-quick-actions">
        <h5><i class="fas fa-bolt"></i> Quick Actions</h5>
        <div class="row">
            <div class="col-md-2 col-4">
                <a href="recharge.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon blue"><i class="fas fa-mobile-alt"></i></div>
                    <span>Recharge</span>
                </a>
            </div>
            <div class="col-md-2 col-4">
                <a href="transaction.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon green"><i class="fas fa-history"></i></div>
                    <span>Transactions</span>
                </a>
            </div>
            <div class="col-md-2 col-4">
                <a href="request_money.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon orange"><i class="fa fa-rupee-sign"></i></div>
                    <span>Request Money</span>
                </a>
            </div>
            <div class="col-md-2 col-4">
                <a href="commission.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon purple"><i class="fas fa-percentage"></i></div>
                    <span>Commission</span>
                </a>
            </div>
            <div class="col-md-2 col-4">
                <a href="disputes.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon red"><i class="fas fa-headset"></i></div>
                    <span>Support</span>
                </a>
            </div>
            <div class="col-md-2 col-4">
                <a href="profile.php" class="user-quick-action-item">
                    <div class="user-quick-action-icon cyan"><i class="fas fa-user"></i></div>
                    <span>Profile</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Recent Transactions Table -->
    <div class="row">
        <div class="col-12">
            <div class="user-modern-table">
                <h5><i class="fas fa-history"></i> Recent Transactions</h5>
                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Transaction Type</th>
                                <th>Number</th>
                                <th>Amount</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $sql_recent = "SELECT transaction_date, transaction_type, mobile_number, amount, status FROM wallet WHERE user_id = ".$o->user_id." ORDER BY wallet_id DESC LIMIT 10";
                            $res_recent = getXbyY($sql_recent);
                            foreach($res_recent as $txn) {
                                $status_class = strtolower($txn['status']);
                            ?>
                            <tr>
                                <td><?= date('d M Y H:i', strtotime($txn['transaction_date'])); ?></td>
                                <td><?= $txn['transaction_type']; ?></td>
                                <td><?= $txn['mobile_number']; ?></td>
                                <td><i class="fa fa-rupee-sign"></i> <?= number_format($txn['amount'], 2); ?></td>
                                <td><span class="status-badge <?= $status_class; ?>"><?= $txn['status']; ?></span></td>
                            </tr>
                            <?php } ?>
                            <?php if(count($res_recent) == 0) { ?>
                            <tr>
                                <td colspan="5" class="text-center">No transactions found</td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- End of Main Content -->

<!-- KYC Modal -->
<div class="modal fade" id="kyc_modal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px 15px 0 0;">
                <h4 class="modal-title" id="defaultModalLabel"><i class="fas fa-id-card"></i> Pending KYC</h4>
                <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> Please Complete Your KYC or your Account will be blocked on <strong><?=format_date_without_time($o->kyc_date);?></strong>.
                </div>
                <form name="kyc_form" id="kyc_form" method="post" action="kyc.php" enctype='multipart/form-data'>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Pan No</label>
                            <input type="text" name="reg_pan_no" id="reg_pan_no" value="<?=$o->pancard;?>" class="form-control" required="required" style="border-radius: 10px;" />
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Pan File</label>
                            <input type="file" name="pan_file" id="pan_file" value="" class="form-control" required="required" style="border-radius: 10px;" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>Document Type</label>
                            <select name="kyc_doc" id="kyc_doc" class="form-control" required="required" style="border-radius: 10px;">
                                <option value="">Select Document Type</option>
                                <option value="Adhaar">Adhaar Card</option>
                                <option value="Passport">Passport</option>
                                <option value="Driving Licence">Driving Licence</option>
                                <option value="Voter Card">Voter Card</option>
                                <option value="Udhyog Adhaar">Udhyog Adhaar</option>
                                <option value="Electricity Bill">Electricity Bill</option>
                                <option value="Telephone Bill">Telephone Bill</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Document File</label>
                            <input type="file" name="kyc_file" id="kyc_file" class="form-control" value="" required="required" style="border-radius: 10px;" />
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <input type="hidden" name="kyc_updte" id="kyc_updte" value="1" />
                            <button type="submit" class="btn btn-block" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 10px; padding: 12px;">
                                <i class="fas fa-upload"></i> Upload Documents
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
