<!-- CSS অংশ: এটি আপনার ফাইলের উপরে বা আলাদা CSS ফাইলে রাখুন -->
<style>
    /* Card Design & Gradients */
    .l-bg-blue-purple { background: linear-gradient(135deg, #3793FF 0%, #7B61FF 100%) !important; }
    .l-bg-teal-cyan { background: linear-gradient(135deg, #00CBA9 0%, #05D5E3 100%) !important; }
    .l-bg-red-orange { background: linear-gradient(135deg, #F86041 0%, #F84242 100%) !important; }
    .l-bg-dark-grey { background: linear-gradient(135deg, #434343 0%, #212529 100%) !important; }

    .card {
        border-radius: 20px;
        border: none;
        margin-bottom: 25px;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .card-statistic-3 {
        padding: 25px;
        position: relative;
        z-index: 1;
    }

    /* Background Large Icon positioning */
    .card-icon-large {
        font-size: 110px;
        position: absolute;
        right: -10px;
        top: -10px;
        opacity: 0.15;
        z-index: 0;
    }

    .card-title {
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: 10px;
        letter-spacing: 0.5px;
    }

    .card-content .value-text {
        font-size: 1.15rem;
        font-weight: 500;
        display: block;
        margin-bottom: 10px;
    }

    /* Custom Progress Bar matching screenshot */
    .progress-custom {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 15px;
        height: 10px !important;
        margin-bottom: 15px;
    }
    .progress-custom .progress-bar {
        background: #fff !important;
        border-radius: 15px;
    }

    .card-footer-info {
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
    }

    /* Period Button Styling */
    .btn-period-custom {
        background-color: #FF5252 !important;
        color: white !important;
        border-radius: 25px !important;
        padding: 8px 20px !important;
        box-shadow: 0 4px 12px rgba(255, 82, 82, 0.35);
        border: none;
        font-weight: 600;
    }

    .history-card-title {
        font-weight: 700;
        color: #333;
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .white-card {
        background: #fff;
        border-radius: 20px;
        padding: 30px;
        min-height: 450px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
</style>

<!-- HTML অংশ -->
<section class="section">
    <div class="row">
        <!-- Balance Card -->
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-blue-purple">
                <div class="card-statistic-3">
                    <div class="card-icon card-icon-large"><i class="fa fa-dollar-sign"></i></div>
                    <div class="card-content">
                        <h4 class="card-title">Balance</h4>
                        <span class="value-text"><?= currency_format(current_user('balance')); ?></span>
                        <div class="progress progress-custom">
                            <div class="progress-bar" role="progressbar" style="width: 85%;"></div>
                        </div>
                        <div class="card-footer-info">
                            <i class="fa fa-arrow-up"></i> Deposit Your Income
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Successful Transaction Card -->
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-teal-cyan">
                <div class="card-statistic-3">
                    <div class="card-icon card-icon-large"><i class="fa fa-briefcase"></i></div>
                    <div class="card-content">
                        <h4 class="card-title">Successful Transaction</h4>
                        <span class="value-text">Today <span class="success_trx">0</span></span>
                        <div class="progress progress-custom">
                            <div class="progress-bar" role="progressbar" style="width: 70%;"></div>
                        </div>
                        <div class="card-footer-info">
                            <i class="fa fa-check-circle"></i> Total Successful: <span class="total_success_trx">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Transaction Card -->
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-red-orange">
                <div class="card-statistic-3">
                    <div class="card-icon card-icon-large"><i class="fa fa-globe"></i></div>
                    <div class="card-content">
                        <h4 class="card-title">Pending Transaction</h4>
                        <span class="value-text">Today <span class="pending_trx">0</span></span>
                        <div class="progress progress-custom">
                            <div class="progress-bar" role="progressbar" style="width: 45%;"></div>
                        </div>
                        <div class="card-footer-info">
                            <i class="fa fa-history"></i> Total Pending: <span class="total_pending_trx">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payments Card -->
        <div class="col-xl-3 col-lg-6">
            <div class="card l-bg-dark-grey">
                <div class="card-statistic-3">
                    <div class="card-icon card-icon-large"><i class="fa fa-money-bill-alt"></i></div>
                    <div class="card-content">
                        <h4 class="card-title">Payments</h4>
                        <span class="value-text">Today earning ৳<span class="earning">0.00</span></span>
                        <div class="progress progress-custom">
                            <div class="progress-bar" role="progressbar" style="width: 55%;"></div>
                        </div>
                        <div class="card-footer-info">
                            <i class="fa fa-coins"></i> Total Payment: <span class="total_earning"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transaction History -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="white-card">
                <h4 class="history-card-title">Transactions History</h4>
                
                <div class="dropdown mb-4">
                    <button class="btn btn-period-custom dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                        Period
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item mydrp active" data-period="today">Today</a></li>
                        <li><a href="#" class="dropdown-item mydrp" data-period="week">Week</a></li>
                        <li><a href="#" class="dropdown-item mydrp" data-period="month">Month</a></li>
                        <li><a href="#" class="dropdown-item mydrp" data-period="year">This Year</a></li>
                    </ul>
                </div>

                <div id="top-5-scroll">
                    <ul id="type-list" class="list-unstyled list-unstyled-border">
                        <!-- Ajax data will load here -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript অংশ -->
<script>
    function get_dashboard_values(period) {
        $.post("<?= user_url('dashboard-data') ?>", {
            token: token,
            period: period
        }, function(result) {
            var data = jQuery.parseJSON(result);
            $.each(data, function(index, element) {
                // Update specific classes
                if($("." + index).length > 0) {
                    $("." + index).html(element);
                }
            });

            // Update the list items
            $('#type-list').html(data.listItems);
        });
    }

    $(document).ready(function() {
        var initialPeriod = $('.mydrp.active').data('period') || 'today';
        get_dashboard_values(initialPeriod);

        $('.mydrp').on('click', function(e) {
            e.preventDefault();
            $('.mydrp').removeClass('active');
            $(this).addClass('active');
            var period = $(this).data('period');
            get_dashboard_values(period);
        });
    });
</script>