<style type="text/css"> 
    .nav-tabs-custom>.nav-tabs>li.active {
        border-top-color: #faa21c;
    }
</style>

<?php
$currency_symbol = $this->customlib->getSchoolCurrencyFormat();
?>

<div class="content-wrapper" style="min-height: 946px;">
    <section class="content-header">
        <h1>
            <i class="fa fa-line-chart"></i> <?php echo $this->lang->line('financial_reports'); ?> 
        </h1>
        <a href="<?php echo base_url(); ?>uniformreport" class="col-md pull-right">Uniform Report</a>
        <b style="padding-left:5px;padding-right:5px;" class="pull-right"> | </b>                                                 
        <a href="<?php echo base_url(); ?>admin/payroll/payrollreport" class="col-md pull-right">Payroll Report</a> 
        <b style="padding-left:5px;padding-right:5px;" class="pull-right"> | </b>
        <a href="<?php echo base_url(); ?>admin/transaction/searchtransaction" class="col-md pull-right">Transaction Report</a> 
        <b style="padding-left:5px;padding-right:5px;" class="pull-right"> | </b>
        <a href="<?php echo base_url(); ?>admin/transaction/studentacademicreport" class="col-md pull-right">Balance Fees Report</a> 
    </section>

    <!-- Main content --> 
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">
                            <i class="fa fa-balance-scale"></i> 
                            <?php echo $this->lang->line('totalfees'); ?>
                        </h3>
                    </div>

                    <div class="box-body">
                        <div class="row"> 
                            <div class="col-md-12">
                                <form id="reportForm" role="form" action="<?php echo site_url('admin/BIreports/total_fees'); ?>" method="post" class="form-horizontal">
                                    <?php echo $this->customlib->getCSRF(); ?> 

                                    <!-- Show Total Fees Checkbox -->
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="show_total_fees" name="show_total_fees" value="1" <?= (isset($show_total_fees) && $show_total_fees == '1') ? 'checked' : '' ?> onchange="toggleFilters()"> 
                                                Show Total Fees
                                            </label>
                                        </div>
                                    </div>

                                    <!-- View Mode + Dates in one row -->
                                    <div class="form-group" id="filters_section">
                                        <!-- View Mode -->
                                        <div class="col-sm-4">
                                            <label>View Mode</label>
                                            <select id="view_mode" name="view_mode" class="form-control" onchange="toggleBreakdown()">
                                                <option value="overall" <?= (isset($view_mode) && $view_mode == 'overall') ? 'selected' : '' ?>>Overall</option>
                                                <option value="broken" <?= (isset($view_mode) && $view_mode == 'broken') ? 'selected' : '' ?>>Broken Down</option>
                                            </select>
                                        </div>

                                        <!-- Date From -->
                                        <div class="col-sm-4">
                                            <label><?php echo $this->lang->line('date_from'); ?></label>
                                            <input id="datefrom" name="date_from" type="text" class="form-control date"  
                                                   value="<?php echo set_value('date_from', date($this->customlib->getSchoolDateFormat())); ?>" />
                                        </div>

                                        <!-- Date To -->
                                        <div class="col-sm-4">
                                            <label><?php echo $this->lang->line('date_to'); ?></label>
                                            <input id="dateto" name="date_to" type="text" class="form-control date"  
                                                   value="<?php echo set_value('date_to', date($this->customlib->getSchoolDateFormat())); ?>" />
                                        </div>
                                    </div>

                                    <!-- Fee Group Filter (hidden until 'Broken Down') -->
                                    <div class="form-group" id="fee_group_filter" style="display:none;">
                                        <div class="col-sm-4">
                                            <label>Fee Group</label>
                                            <select id="fee_group_id" name="fee_group_id" class="form-control">
                                                <option value="">-- Select Fee Group --</option>
                                                <?php 
                                                if (!empty($fee_groups)) {
                                                    foreach ($fee_groups as $group) { 
                                                ?>
                                                    <option value="<?php echo $group->id; ?>" <?= (isset($fee_group_id) && $fee_group_id == $group->id) ? 'selected' : '' ?>>
                                                        <?php echo $group->name; ?>
                                                    </option>
                                                <?php 
                                                    }
                                                } 
                                                ?>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Search Button -->
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <button type="submit" name="search" value="search_filter" class="btn btn-primary btn-sm pull-right">
                                                <i class="fa fa-search"></i> <?php echo $this->lang->line('search'); ?>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Table Section -->
                    <?php if (!empty($total_fees)) { ?>
                        <div class="box-body table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Created At</th>
                                        <th>Receipt</th>
                                        <th>Fee Group Name</th>
                                        <th>Amount (<?php echo $currency_symbol; ?>)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php 
                                    $grand_total = 0; 
                                    foreach ($total_fees as $row) { 
                                        $grand_total += $row->amount; 
                                    ?>
                                        <tr>
                                            <td><?php echo $row->id; ?></td>
                                            <td><?php echo $row->created_at; ?></td>
                                            <td><?php echo $row->receipt; ?></td>
                                            <td><?php echo $row->fee_group_name; ?></td>
                                            <td><?php echo $currency_symbol . " " . number_format($row->amount, 2); ?></td>
                                        </tr>
                                    <?php } ?>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="4" class="text-right">Grand Total:</th>
                                        <th><?php echo $currency_symbol . " " . number_format($grand_total, 2); ?></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    <?php } else { ?>
                        <p class="text-center">No records found.</p>
                    <?php } ?>

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

<script>
function toggleBreakdown() {
    var viewMode = document.getElementById('view_mode').value;
    var feeGroupFilter = document.getElementById('fee_group_filter');
    
    if (viewMode == 'broken') {
        feeGroupFilter.style.display = 'block';
    } else {
        feeGroupFilter.style.display = 'none';
    }
}

function toggleFilters() {
    var showTotalFees = document.getElementById('show_total_fees').checked;
    var filtersSection = document.getElementById('filters_section');
    var feeGroupFilter = document.getElementById('fee_group_filter');
    
    if (showTotalFees) {
        filtersSection.style.display = 'none';
        feeGroupFilter.style.display = 'none';
    } else {
        filtersSection.style.display = 'block';
        toggleBreakdown();
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleFilters();
    toggleBreakdown();
});
</script>