<?php
// accounts_dashboard.php
?>
<link rel="stylesheet" href="assets/css/accounts.css">

<div id="accountsDashboard" dir="rtl" class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-primary urdu-bold mb-1">آمدنی و اخراجات کی تفصیل (Accounts Dashboard)</h2>
            <p class="text-muted urdu-regular fs-5">آج کی سرگرمی اور مالی خلاصہ</p>
        </div>
        <div class="d-flex gap-2">
            <a href="accounts_transactions" class="btn btn-primary px-4 py-2 rounded-3 urdu-regular fs-5">
                <i class="bi bi-list-task me-2"></i> تمام ٹرانزیکشنز
            </a>
            <a href="dashboard" class="btn btn-outline-dark px-4 py-2 rounded-3 urdu-regular fs-5">
                <i class="bi bi-house me-2"></i> مین ڈیش بورڈ
            </a>
        </div>
    </div>

    <!-- Quick Stats (Today) -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card stats-card border-0 shadow-sm bg-success text-white">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase opacity-75 urdu-regular fs-6 mb-2">آج کی آمدنی (Today's Income)</h6>
                            <h2 class="fw-bold mb-0" id="todayIncome">Rs. 0</h2>
                        </div>
                        <div class="fs-1 opacity-50"><i class="bi bi-arrow-down-circle"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stats-card border-0 shadow-sm bg-danger text-white">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase opacity-75 urdu-regular fs-6 mb-2">آج کے اخراجات (Today's Expense)</h6>
                            <h2 class="fw-bold mb-0" id="todayExpense">Rs. 0</h2>
                        </div>
                        <div class="fs-1 opacity-50"><i class="bi bi-arrow-up-circle"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stats-card border-0 shadow-sm bg-info text-white">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-uppercase opacity-75 urdu-regular fs-6 mb-2">آج کی بچت (Today's Balance)</h6>
                            <h2 class="fw-bold mb-0" id="todayBalance">Rs. 0</h2>
                        </div>
                        <div class="fs-1 opacity-50"><i class="bi bi-wallet2"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Overall Stats -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-header bg-white border-0 py-3 px-4">
            <h5 class="mb-0 fw-bold urdu-bold text-dark">کل مالی حیثیت (Overall Financial Status)</h5>
        </div>
        <div class="card-body p-4">
            <div class="row g-4 text-center">
                <div class="col-md-4 border-start">
                    <div class="text-muted mb-1 urdu-regular fs-6">کل آمدنی (Total Income)</div>
                    <h3 class="fw-bold text-success" id="totalIncome">Rs. 0</h3>
                </div>
                <div class="col-md-4 border-start">
                    <div class="text-muted mb-1 urdu-regular fs-6">کل اخراجات (Total Expense)</div>
                    <h3 class="fw-bold text-danger" id="totalExpense">Rs. 0</h3>
                </div>
                <div class="col-md-4">
                    <div class="text-muted mb-1 urdu-regular fs-6">موجودہ بیلنس (Current Balance)</div>
                    <h3 class="fw-bold text-primary" id="totalBalance">Rs. 0</h3>
                </div>
            </div>
        </div>
    </div>
</div>

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