<div class="page-header">
    <h1>Edit Householder Name</h1>
    <a class="button button-secondary button-sm"
       href="/householder-names/<?= e($name['id']) ?>">← Back</a>
</div>

<div class="section-panel">
    <?php if (!empty($errors['_token'])): ?>
        <div class="alert alert-error"><?= e($errors['_token'][0]) ?></div>
    <?php endif; ?>

    <form method="POST" action="/householder-names/<?= e($name['id']) ?>" novalidate>
        <?= csrf_field() ?>

        <div class="form-grid">
            <div class="field" style="grid-column:1/-1">
                <label for="household_id">Household <span style="color:#c0392b">*</span></label>
                <select class="input <?= isset($errors['household_id']) ? 'input-error' : '' ?>"
                        id="household_id" name="household_id" required>
                    <option value="">Select a household…</option>
                    <?php foreach ($households as $h): ?>
                        <option value="<?= e($h['id']) ?>"
                            <?= (string) $name['household_id'] === (string) $h['id'] ? 'selected' : '' ?>>
                            <?= e($h['address']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <?php if (isset($errors['household_id'])): ?>
                    <span class="field-error"><?= e($errors['household_id'][0]) ?></span>
                <?php endif; ?>
            </div>

            <div class="field" style="grid-column:1/-1">
                <label for="name">Name <span style="color:#c0392b">*</span></label>
                <input class="input <?= isset($errors['name']) ? 'input-error' : '' ?>"
                       type="text" id="name" name="name"
                       value="<?= e((string) ($name['name'] ?? '')) ?>" required autofocus>
                <?php if (isset($errors['name'])): ?>
                    <span class="field-error"><?= e($errors['name'][0]) ?></span>
                <?php endif; ?>
            </div>

            <div class="field" style="grid-column:1/-1">
                <label class="checkbox-label">
                    <input type="checkbox" name="letter_returned" value="1"
                           id="lr_check"
                           <?= $name['letter_returned'] ? 'checked' : '' ?>
                           onchange="document.getElementById('lr_date_field').style.display=this.checked?'grid':'none'">
                    Letter Returned
                </label>
            </div>

            <div id="lr_date_field" class="field" style="grid-column:1/-1;display:<?= $name['letter_returned'] ? 'grid' : 'none' ?>">
                <label for="return_date">Return Date</label>
                <input class="input" type="datetime-local" id="return_date" name="return_date"
                       value="<?= e((string) ($name['return_date'] ?? '')) ?>">
            </div>
        </div>

        <div class="form-actions" style="margin-top:1.5rem">
            <button class="button button-primary" type="submit">Save Changes</button>
            <a class="button button-secondary" href="/householder-names/<?= e($name['id']) ?>">Cancel</a>
        </div>
    </form>
</div>
