<?php $title = 'Field Templates'; ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-cube mr-2"></i>Field Templates</h1>
    <div>
        <a href="<?= $baseUrl ?>/forms" class="glass-btn mr-2"><i class="fas fa-arrow-left mr-1"></i>Back to Forms</a>
        <button type="button" class="glass-btn glass-btn-primary" data-toggle="modal" data-target="#newFieldTemplateModal"><i class="fas fa-plus mr-1"></i>New Field Template</button>
    </div>
</div>

<div class="glass-card mb-4">
    <p style="color: rgba(255,255,255,0.7);">Field templates let you save reusable field configurations. Use them when creating or editing forms to quickly add commonly used fields.</p>
</div>

<div class="row">
    <?php if (!empty($fieldTemplates)): ?>
        <?php foreach ($fieldTemplates as $ft): ?>
        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
            <div class="glass-card h-100" style="padding: 1rem;">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <span class="glass-badge" style="font-size: 0.7rem;"><?= htmlspecialchars(ucfirst($ft->field_type)) ?></span>
                        <h6 class="text-white font-weight-bold mt-1 mb-1"><?= htmlspecialchars($ft->name) ?></h6>
                        <small style="color: rgba(255,255,255,0.5);"><?= htmlspecialchars($ft->label) ?></small>
                        <?php if ($ft->created_by_name): ?>
                        <div><small style="color: rgba(255,255,255,0.3);">by <?= htmlspecialchars($ft->created_by_name) ?></small></div>
                        <?php endif; ?>
                    </div>
                    <form method="POST" action="<?= $baseUrl ?>/forms/field-templates/<?= $ft->id ?>/delete" style="display:inline;" onsubmit="return confirm('Delete this field template?');">
                        <button type="submit" class="btn btn-sm" style="color: #e74a3b; padding: 0;"><i class="fas fa-times"></i></button>
                    </form>
                </div>
                <div class="mt-2 p-2" style="background: rgba(255,255,255,0.03); border-radius: 6px;">
                    <small style="color: rgba(255,255,255,0.4);">
                        <?php if ($ft->placeholder): ?><i class="fas fa-text mr-1"></i><?= htmlspecialchars($ft->placeholder) ?><br><?php endif; ?>
                        <?php if ($ft->options): ?><i class="fas fa-list mr-1"></i><?= htmlspecialchars($ft->options) ?><br><?php endif; ?>
                        <?php if ($ft->is_required): ?><i class="fas fa-asterisk mr-1" style="color: #e74a3b;"></i>Required<?php else: ?><i class="fas fa-minus mr-1"></i>Optional<?php endif; ?>
                    </small>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    <?php else: ?>
    <div class="col-12"><div class="empty-state"><i class="fas fa-cube"></i><p>No field templates yet. Create one to save commonly used field configurations.</p></div></div>
    <?php endif; ?>
</div>

<!-- New Field Template Modal -->
<div class="modal fade" id="newFieldTemplateModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content glass-modal-content">
        <form method="POST" action="<?= $baseUrl ?>/forms/field-templates/store">
            <div class="modal-header"><h5 class="modal-title">New Field Template</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
            <div class="modal-body">
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Template Name</label>
                    <input type="text" name="name" class="form-control glass-input" placeholder="e.g. Full Name" required>
                </div>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Field Type</label>
                            <select name="field_type" class="form-control glass-input">
                                <option value="text">Text</option><option value="textarea">Textarea</option><option value="email">Email</option>
                                <option value="phone">Phone</option><option value="number">Number</option><option value="select">Select</option><option value="checkbox">Checkbox</option>
                                <option value="radio">Radio</option><option value="date">Date</option><option value="file">File</option><option value="url">URL</option>
                            </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label style="color: rgba(255,255,255,0.7);">Label</label>
                        <input type="text" name="label" class="form-control glass-input" placeholder="Field label" required>
                    </div>
                </div>
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Placeholder</label>
                    <input type="text" name="placeholder" class="form-control glass-input" placeholder="Placeholder text">
                </div>
                <div class="form-group">
                    <label style="color: rgba(255,255,255,0.7);">Options <small style="color: rgba(255,255,255,0.4);">(for select/radio, comma-separated)</small></label>
                    <input type="text" name="options" class="form-control glass-input" placeholder="Option 1, Option 2, Option 3">
                </div>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="ft_required" name="is_required" value="1">
                    <label class="custom-control-label" for="ft_required" style="color: rgba(255,255,255,0.7);">Required</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="glass-btn" data-dismiss="modal">Cancel</button>
                <button type="submit" class="glass-btn glass-btn-primary">Save Template</button>
            </div>
        </form>
    </div></div>
</div>
