<div class="card card-inverse card-info">
  <div class="card-header">
    <div class="row align-items-center justify-content-between">
      <div class="col-sm-auto">
        <h4 class="mb-10">Expense Headers</h4>
        <h6 class="card-subtitle">Categorized your expense headers</h6>  
      </div>
    </div>
  </div>
  <div class="col-sm-12 p-4">
    <div class="row mb-3">
      <div class="col-md-8">
          <div class="table-responsive">
            <table id="expenseTypeTreeTable" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Type / Subtype</th>
                  <th class="text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                <?php foreach ($expense_types as $type): ?>
                  <tr class="bg-light font-weight-bold">
                    <td><?= $type->id ?></td>
                    <td><?= $type->expense_type ?></td>
                    <td class="text-right">
                      <a href="#" class="badge  bg-light-success edit-type-btn btn-warning"
                         data-id="<?= $type->id ?>"
                         data-type="<?= htmlspecialchars($type->expense_type, ENT_QUOTES) ?>">
                        <i data-feather="edit"></i>
                      </a>
                      <a href="javascript:void(0);" class="badge  bg-light-danger delete-confirmation-modal btn-danger"
                         data-url="<?= base_url('admin/DailyExpense/delete_expense_type/' . $type->id) ?>">
                        <i data-feather="trash"></i>
                      </a>
                    </td>
                  </tr>

                  <?php foreach ($sub_expense_types as $sub): ?>
                    <?php if ($sub->expense_type_id == $type->id): ?>
                      <tr>
                        <td><?= $sub->id ?></td>
                        <td>↳ <?= $sub->sub_expense_type ?></td>
                        <td class="text-right">
                          <a href="#" class="badge  bg-light-success edit-subtype-btn btn-warning"
                             data-id="<?= $sub->id ?>"
                             data-type-id="<?= $sub->expense_type_id ?>"
                             data-name="<?= htmlspecialchars($sub->sub_expense_type, ENT_QUOTES) ?>"
                             data-note="<?= htmlspecialchars($sub->note, ENT_QUOTES) ?>">
                           <i data-feather="edit"></i>
                          </a>
                          <a href="javascript:void(0);" class="badge  bg-light-danger delete-confirmation-modal"
                   data-url="<?= base_url('admin/DailyExpense/delete_sub_expense_type/' . $sub->id) ?>">
                   <i data-feather="trash"></i>
                </a>

                      </td>
                      </tr>
                    <?php endif; ?>
                  <?php endforeach; ?>
                <?php endforeach; ?>
              </tbody>
            </table>
          </div>
      </div>
      <div class="col-md-4">
        <div class="card prod-p-card bg-primary mb-3"
               data-bs-toggle="modal"
               data-bs-target="#addExpenseTypeModal"
               style="cursor:pointer;">
          <div class="card-body">
            <div class="row align-items-center m-b-0">
              <div class="col">
                <h6 class="m-b-0 text-white">Add Expense Type</h6>
              </div>
              <div class="col-auto">
                <i class="material-icons-two-tone text-white">money_off</i>
              </div>
            </div>
          </div>
        </div>
        <div class="card prod-p-card bg-primary mb-3"
               data-bs-toggle="modal"
               data-bs-target="#editSubTypeModal"
               style="cursor:pointer;">
            <div class="card-body">
              <div class="row align-items-center m-b-0">
                <div class="col">
                  <h6 class="m-b-0 text-white">Add Expense Sub-Type</h6>
                </div>
                <div class="col-auto">
                  <i class="material-icons-two-tone text-white">money_off</i>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>
<!-- Include modals once -->
<?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/expense/widgets/add-expense-type-modal'); ?>
<?php $this->load->view('admin/expense/widgets/add-expense-subtype-modal'); ?>
<?php $this->load->view('admin/layout/form-status-notification'); ?>
<?php $this->load->view('admin/layout/delete-confirmation-modal'); ?>

<!-- JS -->
<script>
$(document).ready(function () {
  // Edit type button
  $('.edit-type-btn').click(function () {
    let typeId = $(this).data('id');
    let typeName = $(this).data('type');
    console.log("Clicked Edit:", typeId, typeName);
    $('#edit-type-id').val(typeId);
    $('#edit-type-name').val(typeName);
    $('#editTypeModal').modal('show');
  });

  // Edit sub-type button
  $('.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>