<?php
require_once('includes/auth_check.php');
include_once('includes/header.php');
include_once('includes/sidebar.php');

?>
<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">Dashboard</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item active">Financial Deshboard</li>
        </ol>
        <div class="container-fluid px-4 py-4 bg-light">
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="card shadow-sm border-0 border-start border-info border-5 h-100">
                        <div class="card-body">
                            <li class="nav-item d-flex align-items-center ">
                                <div class="bg-light border rounded-pill px-3 py-1 shadow-sm">
                                    <i class="fas fa-user-graduate text-primary me-2"></i>
                                    <small class="fw-bold text-muted text-uppercase"
                                        style="font-size: 0.7rem;">Students:</small>
                                    <span class="fw-bold text-info ms-1">
                                        <?php echo number_format($total_students); ?>
                                    </span>
                                </div>
                            </li>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card shadow-sm border-0 border-start border-info border-5 h-100">
                        <div class="card-body">
                            <li class="nav-item d-flex align-items-center ">
                                <div class="bg-light border rounded-pill px-3 py-1 shadow-sm">
                                    <small class="fw-bold text-muted text-uppercase" style="font-size: 0.7rem;"></small>
                                    <span role="button" onclick="openRevenueModal('daily')">
                                        <i class="fas fa-chart-line"></i> Today's Summary
                                    </span>
                                </div>
                            </li>
                        </div>
                    </div>

                </div>
                <div class="col-md-4">
                    <div class="p-3 bg-white border-start border-success border-4 shadow-sm rounded position-relative">
                        <small class="text-muted d-block">Net Collected</small>
                        <h4 id="total_cash_display" class="mb-0 text-success fw-bold">₹0.00</h4>
                        <button class="btn btn-sm btn-outline-success position-absolute top-0 end-0 m-2"
                            onclick="openRevenueModal('uptodate')" title="Show from Year Start">
                            <i class="fas fa-sync-alt"></i> Up to Date
                        </button>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-4">
                <div class="col">
                    <div class="card shadow-sm border-0 border-start border-warning border-5 h-100 p-2">


                        <h6>Total Discounts</h6>
                        <h3 class="text-warning" id="totalDiscount">0.00</h3>

                    </div>
                </div>
            </div>
            <div class="row g-3 mb-4">

                <div class="col-md-3">
                    <div class="card shadow-sm border-0 border-start border-primary border-5 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-muted small fw-bold text-uppercase">Expected Revenue</div>
                                    <h2 class="fw-bold mb-0 mt-1 " style="color:#0d6efd" id="totalExpected">0.00</h2>
                                </div>
                                <div class="bg-primary bg-opacity-10 p-3 rounded-circle text-primary">
                                    <i class="bi bi-wallet2 fs-3"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card shadow-sm border-0 border-start border-success border-5 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-muted small fw-bold text-uppercase">Total Collection</div>
                                    <h2 class="fw-bold mb-0 mt-1 text-success" id="totalCollected">0.00</h2>
                                </div>
                                <div class="bg-success bg-opacity-10 p-3 rounded-circle text-success">
                                    <i class="bi bi-cash-stack fs-3"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card shadow-sm border-0 border-start border-danger border-5 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="text-muted small fw-bold text-uppercase">Total Outstanding</div>
                                    <h2 class="fw-bold mb-0 mt-1 text-danger" id="totalOutstanding">0.00</h2>
                                </div>
                                <div class="bg-danger bg-opacity-10 p-3 rounded-circle text-danger">
                                    <i class="bi bi-exclamation-octagon fs-3"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card shadow-sm border-0 border-start border-end border-success border-5 h-100">
                        <div class="card-body p-3">
                            <label class="form-label fw-bold text-primary small">
                                <i class="fas fa-chart-pie me-1"></i> Financial Reports
                            </label>
                            <div class="input-group">
                                <span class="input-group-text btn-primary text-white border-primary ">
                                    <i class="fas fa-calendar-check"></i>
                                </span>
                                <select id="reportPeriod" class="form-select border-primary shadow-none"
                                    onchange="generateReport(this.value)">
                                    <option value="">-- Select Period --</option>

                                    <option value="yearly">Full Year</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-header bg-white py-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0 text-dark fw-bold">
                            <i class="fas fa-file-invoice-dollar me-2 text-primary"></i>Fee Management
                        </h5>
                        <button id="clearFilters" class="btn btn-sm btn-outline-danger px-3"
                            onclick="FinanceDash.resetFilters()">
                            <i class="fas fa-sync-alt me-1"></i> Clear Filters
                        </button>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-bold small text-muted mb-1">Academic Year</label>
                            <select class="form-select form-select-sm shadow-none" id="pendingYear"
                                onchange="FinanceDash.refreshDashboard()">
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-bold small text-muted mb-1">Class</label>
                            <select class="form-select form-select-sm shadow-none" id="pendingClass"
                                onchange="FinanceDash.refreshDashboard()">
                                <option value="all">All Classes</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label fw-bold small text-muted mb-1">Fee Month</label>
                            <input type="month" class="form-select form-select-sm shadow-none" id="pendingMonth"
                                value="<?= date('Y-m')?>" onchange="FinanceDash.refreshDashboard()">
                        </div>

                        <div class="col-md-2">
                            <label class="form-label fw-bold small text-muted mb-1">Payment Status</label>
                            <select id="pendingStatus"
                                class="form-select form-select-sm shadow-none border-primary-subtle"
                                onchange="FinanceDash.renderTable()">
                                <option value="all">All Status</option>
                                <option value="Paid">Paid</option>
                                <option value="Pending">Unpaid</option>
                                <option value="Partial">Partially Paid</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-bold small text-muted mb-1">Medium</label>
                            <select class="form-select form-select-sm shadow-none" id="pendingMedium"
                                onchange="FinanceDash.refreshDashboard()">
                                <option value="all">All Medium</option>
                               
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="input-group border-custom">
                                <span class="input-group-text bg-light border-end-0"><i
                                        class="fas fa-search text-muted"></i></span>
                                <input type="text" class="form-control bg-light border-start-0 shadow-none"
                                    id="pendingSearch" placeholder="Search by name, roll no, or phone...">
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover align-middle custom-table">
                            <thead class="bg-light">
                                <tr class="text-secondary small uppercase">
                                    <th>Roll</th>
                                    <th>Student Details</th>
                                    <th>Class Nmae</th>
                                    <th>Fee Type</th>
                                    <th>Amount</th>
                                    <th>Discount</th>
                                    <th>Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody id="pendingBody"></tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div id="paginationInfo" class="text-muted small"></div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-secondary" onclick="FinanceDash.changePage(-1)"
                                id="prevBtn">Previous</button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="FinanceDash.changePage(1)"
                                id="nextBtn">Next</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</main>
<!-- ===============student view modal for pending list ============= -->
<div class="modal fade" id="statementModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <input type="hidden" id="m_student_id_hidden">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Student Fee Ledger</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="modalHeader" class="row mb-4 pb-3 border-bottom">
                    <div class="col-md-6">

                        <h4 id="m_student_name" class="text-primary mb-1"></h4>
                        <p class="mb-0"><strong>Roll:</strong> <span id="m_roll"></span> | <strong>Class:</strong> <span
                                id="m_class"> </span></p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <p class="mb-0"><strong>Parent:</strong> <span id="m_parent"></span></p>
                        <p class="mb-0 small text-muted"><strong>Address:</strong> <span id="m_address"></span></p>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered">
                        <thead class="table-secondary">
                            <tr>
                                <th>Month</th>
                                <th>Fee Description</th>
                                <th class="text-end">Amount</th>
                                <th class="text-end">Paid</th>
                                <th class="text-end">Discount</th>

                                <th class="text-end">Balance</th>
                            </tr>
                        </thead>
                        <tbody id="statementBody"></tbody>
                        <tfoot id="statementFooter" class="fw-bold bg-light"></tfoot>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

                <button type="button" class="btn btn-danger" onclick="FinanceDash.downloadPHPReport()">
                    <i class="fas fa-file-pdf"></i> Generate Official PDF
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ====================Finanacial Report modal ===================== -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-file-invoice-dollar me-2"></i>
                    Financial Summary: <span id="m_report_title" class="fw-light"></span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body bg-light">
                <div class="row g-3 mb-4">
                    <div class="col-md-2">
                        <div class="card border-0 shadow-sm p-3 border-start border-primary border-4">
                            <small class="text-muted text-uppercase fw-bold">Students</small>
                            <h4 id="m_total_students" class="mb-0 text-primary">0</h4>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card border-0 shadow-sm p-3 border-start border-info border-4">
                            <small class="text-muted text-uppercase fw-bold">Gross Assigned</small>
                            <h4 id="m_total_assign" class="text-info mb-0">₹0</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm p-3 border-start border-warning border-4">
                            <small class="text-muted text-uppercase fw-bold">Total Discounts</small>
                            <h4 id="m_total_discount" class="text-warning mb-0">₹0</h4>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="card border-0 shadow-sm p-3 border-start border-success border-4">
                            <small class="text-muted text-uppercase fw-bold">Net Collected</small>
                            <h4 id="m_total_collect" class="text-success mb-0">₹0</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-0 shadow-sm p-3 border-start border-danger border-4">
                            <small class="text-muted text-uppercase fw-bold">Net Outstanding</small>
                            <h4 id="m_total_out" class="text-danger mb-0">₹0</h4>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="fw-bold mb-0"><i class="fas fa-chart-pie me-2"></i>Fee-Wise & Class-Wise Detailed
                        Breakdown</h6>
                    <div class="col-md-4">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-white border-end-0"><i class="fas fa-search"></i></span>
                            <input type="text" id="classSearchInput" class="form-control border-start-0"
                                placeholder="Filter by Class..." onkeyup="filterClassTable()">
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="table-responsive" style="max-height: 70vh;">
                        <table class="table table-bordered table-hover align-middle mb-0 text-center"
                            style="font-size: 0.85rem;">
                            <thead id="m_header_row" class="table-dark sticky-top">
                            </thead>
                             <tbody id="m_breakdown_body">
                                <tr>
                                    <td colspan="15" class="text-center py-5">
                                        <div class="spinner-border text-primary" role="status"></div>
                                        <p class="text-muted mt-2">Aggregating Financial Data...</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white d-flex justify-content-between">
                <small class="text-muted italic">Report matches Net Revenue = (Assigned - Discount -
                    Outstanding)</small>
                <div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="printReport()">
                        <i class="fas fa-print me-1"></i> Print Summary
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- =================== Daily Summery Report ===================== -->
<div class="modal fade" id="revenueModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title" id="revenueModalLabel"><i class="fas fa-chart-line me-2"></i></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body bg-light">
                <div class="row mb-3 align-items-end">
                    <div class="col-md-6">
                        <label class="form-label small fw-bold">Select Date</label>
                        <input type="date" id="reportDate" class="form-control" value="<?php echo date('Y-m-d'); ?>"
                            onchange="loadRevenueReport()">
                    </div>
                </div>

                <div id="modal_report_loader" class="text-center d-none p-5">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="text-muted small mt-2">Fetching records...</p>
                </div>

                <div id="modal_report_content">
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <div class="p-3 bg-white border-start border-success border-4 shadow-sm rounded">
                                <small class="text-muted d-block">Net Collected</small>
                                <h4 id="modal_total_cash" class="mb-0 text-success fw-bold">₹0.00</h4>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-white border-start border-danger border-4 shadow-sm rounded">
                                <small class="text-muted d-block">Total Discount</small>
                                <h4 id="modal_total_disc" class="mb-0 text-danger fw-bold">₹0.00</h4>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white py-2"><span class="small fw-bold text-uppercase">Collection
                                Breakdown</span></div>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="table-light">
                                    <tr class="small text-muted">
                                        <th class="ps-3">Payment Mode</th>
                                        <th class="text-center">Count</th>
                                        <th class="text-end">Discount</th>
                                        <th class="text-end pe-3">Net Received</th>
                                    </tr>
                                </thead>
                                <tbody id="breakdown_body" class="small"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white py-2"><span class="small fw-bold text-uppercase">Revenue by
                                Class</span></div>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="table-light">
                                    <tr class="small text-muted">
                                        <th class="ps-3">Class Name</th>
                                        <th class="text-center">Transactions</th>
                                        <th class="text-end pe-3">Total Collected</th>
                                    </tr>
                                </thead>
                                <tbody id="class_breakdown_body" class="small"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card shadow-sm">
                        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
                            <span class="small fw-bold text-uppercase">Detailed Transactions</span>
                        </div>
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light sticky-top">
                                    <tr class="small text-muted">
                                        <th class="ps-3">Time</th>
                                        <th>Receipt</th>
                                        <th>Student & Class/Stream</th>
                                        <th class="text-center">Mode</th>
                                        <th class="text-end pe-3">Amount</th>
                                    </tr>
                                </thead>
                                <tbody id="transaction_list_body" class="small">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white">
                <button type="button" class="btn btn-outline-danger btn-sm" id="downloadPdfBtn"
                    onclick="downloadDailyRevenuePDF()">
                    <i class="fas fa-file-pdf me-1"></i> Download PDF
                </button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<?php include_once('includes/footer.php') ?>