<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/tax" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Tax Groups
        </a>
        <h1>Edit Tax Group</h1>
    </div>
</div>

<div class="card max-w-2xl mx-auto" style="max-width: 600px;">
    <form action="<?= APP_URL ?>/tax/<?= $taxGroup['id'] ?>/update" method="POST">
        <?= Security::csrfField() ?>
        
        <div class="form-group">
            <label class="form-label">Name <span class="required">*</span></label>
            <input type="text" name="name" class="form-control" required value="<?= e($taxGroup['name']) ?>">
        </div>
        
        <div class="form-row">
            <div>
                <label class="form-label">Type <span class="required">*</span></label>
                <select name="type" class="form-control" required onchange="toggleRateField()">
                    <option value="percentage" <?= $taxGroup['type'] === 'percentage' ? 'selected' : '' ?>>Percentage</option>
                    <option value="fixed" <?= $taxGroup['type'] === 'fixed' ? 'selected' : '' ?>>Fixed Amount</option>
                </select>
            </div>
            <div>
                <label class="form-label">Rate <span class="required">*</span></label>
                <input type="number" step="0.01" name="rate" class="form-control" required value="<?= $taxGroup['rate'] ?>">
                <div style="font-size:0.75rem; color:var(--text-muted); margin-top:4px;" id="rateHint">Percentage value (e.g., 15 for 15%)</div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="3"><?= e($taxGroup['description'] ?? '') ?></textarea>
        </div>
        
        <div class="form-group">
            <label class="flex items-center gap-2" style="cursor:pointer;">
                <input type="checkbox" name="is_active" value="1" <?= $taxGroup['is_active'] ? 'checked' : '' ?>>
                <span>Active</span>
            </label>
        </div>
        
        <div class="flex justify-end mt-6 gap-3">
            <a href="<?= APP_URL ?>/tax" class="btn btn-ghost">Cancel</a>
            <button type="submit" class="btn btn-primary">Update Tax Group</button>
        </div>
    </form>
</div>

<script>
function toggleRateField() {
    const type = document.querySelector('select[name="type"]').value;
    const hint = document.getElementById('rateHint');
    hint.textContent = type === 'percentage' ? 'Percentage value (e.g., 15 for 15%)' : 'Fixed amount (e.g., 5.00)';
}
</script>
