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

<div id="categoriesPage" dir="rtl" class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-primary urdu-bold mb-1">زمرہ جات کا انتظام (Manage Categories)</h2>
            <p class="text-muted urdu-regular fs-5">آمدنی اور اخراجات کے زمرے یہاں سے بنائیں یا تبدیل کریں</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-success px-4 py-2 rounded-3 urdu-regular fs-5" id="btnNewCategory">
                <i class="bi bi-plus-lg me-2"></i> نیا زمرہ
            </button>
            <a href="accounts_dashboard" class="btn btn-outline-dark px-4 py-2 rounded-3 urdu-regular fs-5">
                <i class="bi bi-arrow-right me-2"></i> واپس
            </a>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light urdu-bold">
                        <tr>
                            <th class="px-4 py-3">#</th>
                            <th class="py-3">زمرہ کا نام (Category Name)</th>
                            <th class="py-3">قسم (Type)</th>
                            <th class="px-4 py-3 text-center">ایکشن</th>
                        </tr>
                    </thead>
                    <tbody id="categoriesTableBody">
                        <!-- Loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Category Modal -->
<div class="modal fade" id="catModal" tabindex="-1" dir="rtl">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header bg-primary text-white py-3 px-4 border-0">
                <h5 class="modal-title urdu-bold fs-4" id="catModalTitle">نیا زمرہ</h5>
                <button type="button" class="btn-close btn-close-white ms-0 me-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form id="catForm">
                    <input type="hidden" id="catId">
                    <div class="mb-3 text-end">
                        <label class="form-label urdu-bold fs-5">زمرہ کا نام</label>
                        <input type="text" class="form-control form-control-lg" id="catName" required placeholder="مثلاً: تنخواہ، عطیہ وغیرہ">
                    </div>
                    <div class="mb-3 text-end">
                        <label class="form-label urdu-bold fs-5">قسم (Type)</label>
                        <select class="form-select form-select-lg" id="catType" required>
                            <option value="income">آمدنی (Income)</option>
                            <option value="expense">اخراجات (Expense)</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 p-4">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">کینسل</button>
                <button type="submit" form="catForm" class="btn btn-primary px-4" id="btnSaveCat">محفوظ کریں</button>
            </div>
        </div>
    </div>
</div>

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