<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container mt-4">
    <h1>Apply Discount Voucher</h1>
    <?= $this->include('partials/academic_filter') ?>

    <form method="post" action="">
        <?= csrf_field() ?>
        <div class="d-flex gap-2 mb-3 justify-content-end">
            <div>
                <button type="submit" class="btn btn-success">Apply Voucher</button>
                <button type="button" class="btn btn-info" onclick="window.location.href='/discounts/list'">Cancel</button>
            </div>
        </div>

        <div class="mb-3">
            <label for="voucher_id" class="form-label">Select Voucher Code</label>
            <select name="voucher_id" id="voucher_id" class="form-select" required>
                <option value="">-- Select Voucher --</option>
                <?php foreach ($vouchers as $voucher): ?>
                    <option value="<?= esc($voucher['id']) ?>">
                        <?= esc($voucher['code']) ?> (<?= esc(ucfirst($voucher['discount_type'])) ?> - <?= esc($voucher['discount_value']) ?><?= $voucher['discount_type'] === 'percent' ? '%' : '$' ?>)
                    </option>
                <?php endforeach; ?>
            </select>
        </div>

        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="allowAdditional" name="allow_additional" value="1" checked>
            <label class="form-check-label" for="allowAdditional">
                Allow additional discounts for parents who already have discounts
            </label>
        </div>

        <div class="mb-3">
            <label class="form-label">Select Parents</label>
            <div class="table-responsive">
                <table class="table table-bordered" id="parentsTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll"></th>
                            <th>Parent ID</th>
                            <th>Parent Name</th>
                            <th>Email</th>
                            <th>Has Discount?</th> <!-- NEW -->
                            <th>Total Discount Amount</th> <!-- NEW -->
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($parents as $parent): ?>
                            <tr>
                                <td>
                                    <input
                                        type="checkbox"
                                        name="parent_ids[]"
                                        value="<?= esc($parent['id']) ?>"
                                        class="parent-check"
                                        data-has-discount="<?= $parent['has_discount'] ? '1' : '0' ?>"
                                        <?= $parent['has_discount'] ? 'disabled' : '' ?>>
                                </td>

                                <td><?= esc($parent['school_id'] ?? 'N/A') ?></td>
                                <td><?= esc($parent['firstname'] . ' ' . $parent['lastname']) ?></td>
                                <td><?= esc($parent['email']) ?></td>
                                <td>
                                    <?= isset($parent['has_discount']) && $parent['has_discount'] ? 'Yes' : 'No' ?>
                                </td>
                                <td>
                                    $<?= number_format($parent['total_discount'] ?? 0, 2) ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>

            </div>
        </div>
    </form>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    $(document).ready(function() {
        const table = $('#parentsTable').DataTable();

        function syncDiscountLocks() {
            const allowAdditional = $('#allowAdditional').is(':checked');
            $('.parent-check').each(function() {
                const hasDiscount = $(this).data('has-discount') === 1 || $(this).data('has-discount') === '1';
                if (hasDiscount) {
                    if (allowAdditional) {
                        $(this).prop('disabled', false);
                    } else {
                        $(this).prop('checked', false).prop('disabled', true);
                    }
                }
            });
        }

        $('#allowAdditional').on('change', syncDiscountLocks);
        $('#allowAdditional').prop('checked', true);
        syncDiscountLocks();

        table.on('draw', function() {
            syncDiscountLocks();
        });

        $('#checkAll').click(function() {
            $('.parent-check:enabled').prop('checked', this.checked);
        });
    });
</script>

<?= $this->endSection() ?>
