<?php 
include 'db.php'; 
include 'layout.php'; 
include 'auth.php';
require_right('Expense List');

?>

<div class="main-wrapper">

    <div class="page-wrapper" style="margin-left: 250px; padding: 100px;">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h4 class="page-title">Expenses</h4>
            <div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#externalAddExpenseModal">+ Add New Expense</button>
            </div>
        </div>

        <!-- Filters -->
        <form method="GET" class="row g-2 mb-3">
            <div class="col-md-3">
                <input type="date" name="from_date" class="form-control" value="<?= $_GET['from_date'] ?? '' ?>">
            </div>
            <div class="col-md-3">
                <input type="date" name="to_date" class="form-control" value="<?= $_GET['to_date'] ?? '' ?>">
            </div>
            <div class="col-md-4">
                <select name="category_id" class="form-select select2">
                    <option value="">All Categories</option>
                    <?php
                    $res = mysqli_query($conn, "SELECT * FROM expense_categories");
                    while ($row = mysqli_fetch_assoc($res)) {
                        $selected = ($_GET['category_id'] ?? '') == $row['id'] ? 'selected' : '';
                        echo "<option value='{$row['id']}' $selected>{$row['name']}</option>";
                    }
                    ?>
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary w-100">Filter</button>
            </div>
        </form>

        <!-- Expense Table -->
        <div class="card card-body">
            <table class="table datatable">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Account</th>
                        <th>Amount</th>
                        <th>Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $where = [];

                    if (!empty($_GET['from_date']) && !empty($_GET['to_date'])) {
                        $from = $_GET['from_date'];
                        $to = $_GET['to_date'];
                        $where[] = "e.expense_date BETWEEN '$from' AND '$to'";
                    }

                    if (!empty($_GET['category_id'])) {
                        $catId = $_GET['category_id'];
                        $where[] = "ea.category_id = '$catId'";
                    }

                    $sql = "SELECT e.*, ea.name AS account_name 
                            FROM expenses e 
                            JOIN expense_accounts ea ON e.account_id = ea.id";

                    if ($where) {
                        $sql .= " WHERE " . implode(" AND ", $where);
                    }

                    $sql .= " ORDER BY e.expense_date DESC";

                    $res = mysqli_query($conn, $sql);
                    while ($row = mysqli_fetch_assoc($res)) {
                        echo "<tr>
                                <td>{$row['expense_date']}</td>
                                <td>{$row['account_name']}</td>
                                <td>{$row['amount']}</td>
                                <td>{$row['remarks']}</td>
                              </tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- External Modal -->
<div class="modal fade" id="externalAddExpenseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Expense</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <iframe src="add_expense.php" style="width:100%; height:400px; border:0;"></iframe>
            </div>
        </div>
    </div>
</div>


