<!DOCTYPE html>
<html lang="en">
<head>
    <?= view('shared/head') ?>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .content-wrapper {
            min-height: 100vh;
            background: #f8f9fa;
            padding: 20px;
        }
        /* Optional: style the collapsed row content */
        .hiddenRow {
            padding: 0 !important;
        }
        .detail-row {
            background-color: #f2f2f2;
        }
        /* For difference cell highlights */
        .diff-green {
            background-color: #ccffcc !important; /* light green */
        }
        .diff-red {
            background-color: #ffcccc !important; /* light red */
        }
        /* Cursor pointer on main row for toggling collapse */
        tr.accordion-toggle {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <?= view('layouts/navbar', ['menuItems' => $menuItems]) ?>
    <div class="content-wrapper text-navy">
        <h1>Audit Liability Accounts</h1>

        <?php if (!empty($error)): ?>
            <div class="alert alert-danger">
                <?= esc($error) ?>
            </div>
        <?php endif; ?>

        <form method="post" action="<?= base_url('auditliabilityaccounts') ?>">
            <div class="form-row">
                <!-- FROM DATE -->
                <div class="col-sm-2">
                    <label for="from_date">From</label>
                    <input
                        type="date"
                        name="from_date"
                        id="from_date"
                        class="form-control"
                        value="<?= esc($from_date) ?>"
                    />
                </div>

                <!-- TO DATE -->
                <div class="col-sm-2">
                    <label for="to_date">To</label>
                    <input
                        type="date"
                        name="to_date"
                        id="to_date"
                        class="form-control"
                        value="<?= esc($to_date) ?>"
                    />
                </div>

                <!-- VIEW SELECT DROPDOWN (partial) -->
                <div class="col-sm-3">
                    <?= view('auditquickbooks/_view_select_dropdown', [
                        'view_select' => $view_select ?? 'pull',
                    ]) ?>
                </div>
            </div>

            <!-- Filter Button -->
            <div class="form-row mt-3">
                <div class="col-auto">
                    <button class="btn btn-primary" type="submit">
                        Filter
                    </button>
                </div>
            </div>
        </form>

        <hr/>

        <!-- Example of the older table (optional) -->
        <?php if (!empty($results)): ?>
            <div class="table-responsive mt-4">
                <table class="table table-bordered table-striped bg-white">
                    <thead class="thead-dark">
                    <tr>
                        <th>ID</th>
                        <th>Doc Number</th>
                        <th>Account</th>
                        <th>Liability Amount</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($results as $row): ?>
                        <tr>
                            <td><?= esc($row['id']) ?></td>
                            <td><?= esc($row['doc_number'] ?? '') ?></td>
                            <td><?= esc($row['some_account'] ?? '') ?></td>
                            <td><?= esc($row['some_amount'] ?? '0') ?></td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php else: ?>
            <p class="mt-4">No liability-account data found for the selected date range (old table).</p>
        <?php endif; ?>

        <hr />

        <!-- NEW: AuditPageTable to show Deal ID, o_type, Inv #, JE Liability, SR Liability, Difference -->
        <h3 class="mt-5">AuditPageTable</h3>
        <?php if (!empty($auditPageResults)): ?>
            <div class="table-responsive mt-4">
                <table class="table table-bordered table-striped bg-white">
                    <thead class="thead-dark">
                    <tr>
                        <th>Deal ID</th>
                        <th>o_type</th>
                        <th>Invoice Number</th>
                        <th>JE Liability Amount</th>
                        <th>SR Liability Amount</th>
                        <th>Difference</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($auditPageResults as $index => $rowData): ?>
                        <?php 
                            // Decide class for difference cell
                            $diffCellClass = ($rowData['difference'] == 0) ? 'diff-green' : 'diff-red';
                        ?>
                        <!-- Main row that toggles the collapse -->
                        <tr class="accordion-toggle"
                            data-toggle="collapse"
                            data-target="#detailRow<?= $index ?>"
                            aria-expanded="false"
                            aria-controls="detailRow<?= $index ?>"
                        >
                            <td><?= esc($rowData['deal_id']) ?></td>
                            <td><?= esc($rowData['o_type']) ?></td>
                            <td><?= esc($rowData['inv_no']) ?></td>
                            <td><?= number_format($rowData['je_liability'], 2) ?></td>
                            <td><?= number_format($rowData['sr_liability'], 2) ?></td>
                            <td class="<?= $diffCellClass ?>">
                                <?= number_format($rowData['difference'], 2) ?>
                            </td>
                        </tr>
                        <!-- Collapsible detail row -->
                        <tr class="detail-row">
                            <td colspan="6" class="hiddenRow">
                                <div id="detailRow<?= $index ?>" class="collapse">
                                    <div class="p-3">
                                        <strong>Journal Entries (Debit side):</strong>
                                        <?php if (!empty($rowData['journalEntriesDebitArray'])): ?>
                                            <ul>
                                                <?php foreach ($rowData['journalEntriesDebitArray'] as $jeId): ?>
                                                    <li>
                                                        <a href="https://qbo.intuit.com/app/journal?txnId=<?= $jeId ?>" target="_blank">
                                                            Journal #<?= $jeId ?>
                                                        </a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </ul>
                                        <?php else: ?>
                                            <p class="text-muted">None found</p>
                                        <?php endif; ?>

                                        <strong>Journal Entries (Credit side):</strong>
                                        <?php if (!empty($rowData['journalEntriesCreditArray'])): ?>
                                            <ul>
                                                <?php foreach ($rowData['journalEntriesCreditArray'] as $jeId): ?>
                                                    <li>
                                                        <a href="https://qbo.intuit.com/app/journal?txnId=<?= $jeId ?>" target="_blank">
                                                            Journal #<?= $jeId ?>
                                                        </a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </ul>
                                        <?php else: ?>
                                            <p class="text-muted">None found</p>
                                        <?php endif; ?>

                                        <strong>Sales Receipts (SR Liability):</strong>
                                        <?php if (!empty($rowData['salesReceiptsArray'])): ?>
                                            <ul>
                                                <?php foreach ($rowData['salesReceiptsArray'] as $srId): ?>
                                                    <li>
                                                        <a href="https://qbo.intuit.com/app/salesreceipt?txnId=<?= $srId ?>" target="_blank">
                                                            Sales Receipt #<?= $srId ?>
                                                        </a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </ul>
                                        <?php else: ?>
                                            <p class="text-muted">None found</p>
                                        <?php endif; ?>
                                    </div> <!-- /p-3 -->
                                </div> <!-- /collapse -->
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php else: ?>
            <p class="mt-4">No matching bbt_qb_sales_receipts rows found in this date range for update_status = 0.</p>
        <?php endif; ?>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- You could also add a little script if you want to toggle by clicking, but bootstrap does it automatically. -->
</body>
</html>
