<div class="row">
    <div class="col-md-4">
        <!-- <div class="card" data-toggle="modal" data-target="#daily_expense_modal"> -->
        <div class="card" data-bs-toggle="modal" data-bs-target="#daily_expense_modal" style="cursor:pointer;">

            <div class="d-flex flex-row">
                <div class="p-10 bg-danger">
                    <h4 class="text-white box py-4">Add Expense</h4>
                </div>
                <div class="align-self-center py-3 px-3">
                    <h3 class="m-b-0 m-t-10 card-title">
                        <?php 
                        $this_month_total = array_sum(array_column($daily_expense, 'amount')); 
                        echo number_format($this_month_total);
                        ?>
                    </h3>
                    <small>In <?= date("M Y", strtotime("0 month")) ?></small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
            <div class="row">
                <div class="col-md-5">
                    <h4 class="card-title m-t-15">Monthly Expenses (<?= date('M Y', mktime(0, 0, 0, $selected_month, 1, $selected_year)) ?>)</h4>
                </div>
                <div class="col-md-7 text-right">
                    <form method="get" class="form-inline justify-content-end">
                    <div class="col-md-12 row">
                        <div class="col-md-4">
                        <!-- <label class="mr-2">Month</label> -->
                        <select name="month" class="form-control mr-2">
                            <?php for ($m = 1; $m <= 12; $m++): ?>
                                <option value="<?= $m ?>" <?= ($m == $selected_month ? 'selected' : '') ?>>
                                    <?= date('F', mktime(0, 0, 0, $m, 1)) ?>
                                </option>
                            <?php endfor; ?>
                        </select>
                        </div>    
                        <div class="col-md-4">
                        <!-- <label class="mr-2">Year</label> -->
                        <select name="year" class="form-control mr-2">
                            <?php for ($y = date('Y'); $y >= 2020; $y--): ?>
                                <option value="<?= $y ?>" <?= ($y == $selected_year ? 'selected' : '') ?>><?= $y ?></option>
                            <?php endfor; ?>
                        </select>
                        </div>    
                        <div class="col-md-4">
                        <!-- <input type="hidden" name="bar_year" value="<?= $bar_year ?>"> -->
                        <button type="submit" class="btn btn-primary" style="padding: 12px 32px;">Filter</button>
                        </div>    
                    </div>
                    </form>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-8">

        <?php $this->load->view('admin/expense/widgets/daily-expense-graph'); ?>
        <div class="card">
        <div class="card-body">
            <?php $this->load->view('admin/expense/widgets/expenses-table'); ?>
        </div>
    </div>

    </div>
</div>
<div class="row">
    <div class="col-lg-4">
        <?php $this->load->view('admin/expense/widgets/typewise-expense-graph'); ?>
        <?php $this->load->view('admin/expense/widgets/monthly-expense-graph'); ?>
    </div>
</div>

<!-- Modals -->
<?php $this->load->view('admin/expense/widgets/add-expense-modal'); ?>
<?php $this->load->view('admin/expense/widgets/edit-expense-modal'); ?>
<?php $this->load->view('admin/expense/widgets/edit-expense-type-modal'); ?>
<?php $this->load->view('admin/expense/widgets/edit-expense-subtype-modal'); ?>
<?php $this->load->view('admin/layout/form-status-notification'); ?>
<?php $this->load->view('admin/layout/delete-confirmation-modal'); ?>


<script>
$(document).ready(function () {
    $('#dailyExpenseTable, #expenseTypeTable, #subExpenseTypeTable').DataTable({
        pageLength: 10,
        order: [[0, 'desc']]
    });
});
</script>

<script>
$(document).ready(function () {
    // 1. Daily Expense Edit Modal
    $('.edit-expense-btn').click(function () {
        $('#editExpenseModal #edit-daily-expense-id').val($(this).data('id'));
        $('#editExpenseModal #edit-rate').val($(this).data('rate'));
        $('#editExpenseModal #edit-quantity').val($(this).data('quantity'));
        $('#editExpenseModal #edit-amount').val($(this).data('amount'));
        $('#editExpenseModal #edit-note').val($(this).data('note'));
        $('#editExpenseModal #edit-date').val($(this).data('date'));
        $('#editExpenseModal #edit-old-amount').val($(this).data('amount'));
        $('#editExpenseModal').modal('show');
    });
});
</script>
<script>
$(document).ready(function () {
  $('.edit-type-btn').click(function () {
    let typeId = $(this).data('id');
    let typeName = $(this).data('type');

    console.log("Clicked Edit:", typeId, typeName); // ✅ Console test

    $('#edit-type-id').val(typeId);
    $('#edit-type-name').val(typeName);

    $('#editTypeModal').modal('show');
  });
});
</script>

<script>
$(document).ready(function () {
  $('.edit-subtype-btn').click(function () {
    $('#edit-subtype-id').val($(this).data('id'));
    $('#edit-subtype-name').val($(this).data('name'));
    $('#edit-subtype-type-id').val($(this).data('type-id'));
    $('#edit-subtype-note').val($(this).data('note') || '');
    $('#editSubTypeModal').modal('show');
  });
});
</script>