<?php $isEdit = !empty($type); $title = $isEdit ? 'Edit Contribution Type' : 'New Contribution Type'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><?= $title ?></h1>
    <a href="<?= $baseUrl ?>/contribution-types" class="glass-btn"><i class="fas fa-arrow-left mr-1"></i>Back</a>
</div>
<div class="glass-card">
    <form method="POST" action="<?= $baseUrl ?>/contribution-types/<?= $isEdit ? $type->id . '/update' : 'store' ?>">
        <div class="row">
            <div class="col-md-6 form-group">
                <label style="color: rgba(255,255,255,0.7);">Name *</label>
                <input type="text" name="name" class="form-control glass-input" value="<?= htmlspecialchars($type->name ?? '') ?>" required>
            </div>
            <div class="col-md-3 form-group">
                <label style="color: rgba(255,255,255,0.7);">Amount (GHS) *</label>
                <input type="number" step="0.01" name="amount" class="form-control glass-input" value="<?= htmlspecialchars($type->amount ?? '0') ?>" required>
            </div>
            <div class="col-md-3 form-group">
                <label style="color: rgba(255,255,255,0.7);">Frequency</label>
                <select name="frequency" id="frequency" class="form-control glass-input">
                    <option value="one-time" <?= ($type->frequency ?? '') === 'one-time' ? 'selected' : '' ?>>One Time</option>
                    <option value="daily" <?= ($type->frequency ?? '') === 'daily' ? 'selected' : '' ?>>Daily</option>
                    <option value="weekly" <?= ($type->frequency ?? '') === 'weekly' ? 'selected' : '' ?>>Weekly</option>
                    <option value="monthly" <?= ($type->frequency ?? '') === 'monthly' ? 'selected' : '' ?>>Monthly</option>
                    <option value="quarterly" <?= ($type->frequency ?? '') === 'quarterly' ? 'selected' : '' ?>>Quarterly</option>
                    <option value="annual" <?= ($type->frequency ?? '') === 'annual' ? 'selected' : '' ?>>Annual</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label style="color: rgba(255,255,255,0.7);">Description</label>
            <textarea name="description" class="form-control glass-input" rows="3"><?= htmlspecialchars($type->description ?? '') ?></textarea>
        </div>
        <div class="row" id="durationRow">
            <div class="col-md-4 form-group">
                <label style="color: rgba(255,255,255,0.7);">Duration</label>
                <div class="input-group">
                    <input type="number" min="1" name="duration_months" id="duration_months" class="form-control glass-input" value="<?= htmlspecialchars($type->duration_months ?? '') ?>" placeholder="Leave empty for indefinite">
                    <div class="input-group-append"><span class="input-group-text glass-input" style="border-left: none;">months</span></div>
                </div>
                <small style="color: rgba(255,255,255,0.4);">Number of months to bill (e.g. 3, 6, 12). Leave empty for ongoing.</small>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="custom-control custom-checkbox mb-2">
                    <input type="checkbox" class="custom-control-input" id="is_mandatory" name="is_mandatory" value="1" <?= ($type->is_mandatory ?? 0) ? 'checked' : '' ?>>
                    <label class="custom-control-label" for="is_mandatory" style="color: rgba(255,255,255,0.7);">Mandatory contribution</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="custom-control custom-checkbox mb-2">
                    <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" <?= ($type->is_active ?? 1) ? 'checked' : '' ?>>
                    <label class="custom-control-label" for="is_active" style="color: rgba(255,255,255,0.7);">Active (visible to members)</label>
                </div>
            </div>
        </div>
        <div class="text-right">
            <a href="<?= $baseUrl ?>/contribution-types" class="glass-btn mr-2">Cancel</a>
            <button type="submit" class="glass-btn glass-btn-primary"><?= $isEdit ? 'Update' : 'Create' ?></button>
        </div>
    </form>
</div>

<script>
document.getElementById('frequency').addEventListener('change', function() {
    var row = document.getElementById('durationRow');
    if (this.value === 'one-time') {
        row.style.display = 'none';
        document.getElementById('duration_months').value = '';
    } else {
        row.style.display = '';
    }
});
if (document.getElementById('frequency').value === 'one-time') {
    document.getElementById('durationRow').style.display = 'none';
}
</script>