@extends('layouts.admin')

@section('title', 'Add Scheme')

@section('content')
<div class="page-header">
    <h1 class="page-title">Add Scheme</h1>
    <p class="page-subtitle">Create a new government welfare scheme with eligibility criteria and dynamic fields.</p>
</div>

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="form-card-title">Scheme Details</span>
        <a href="{{ route('admin.schemes.index') }}" class="btn btn-light">← Back to Schemes</a>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.schemes.store') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">Scheme Name</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="max_income" class="form-label">Maximum Income (Optional)</label>
                    <input type="number" step="0.01" class="form-control" id="max_income" name="max_income">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="min_age" class="form-label">Minimum Age (Optional)</label>
                    <input type="number" class="form-control" id="min_age" name="min_age">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="max_age" class="form-label">Maximum Age (Optional)</label>
                    <input type="number" class="form-control" id="max_age" name="max_age">
                </div>
                <div class="col-12 mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                </div>
                <div class="col-12">
                    <div class="d-flex align-items-center gap-2 p-3 bg-light rounded mb-2">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
                        <div>
                            <label class="form-label mb-0" for="is_active">Scheme Active</label>
                            <div style="font-size:0.75rem;color:#94a3b8;">Uncheck to save as disabled</div>
                        </div>
                    </div>
                </div>
            </div>

            <hr style="border:none;border-top:1px solid #f1f5f9;margin:1.5rem 0;">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:#64748b;margin-bottom:1rem;">Dynamic Application Form Builder</div>
            <div class="alert alert-light border mb-3 py-2 px-3">
                <small class="text-muted">
                    Build scheme-specific application form fields. Use a unique <strong>Field Key</strong> (example: <code>family_income</code>) for reliable storage.
                </small>
            </div>
            <div id="dynamic-fields-container"></div>
            <button type="button" class="btn btn-outline-primary btn-sm mb-3" onclick="addField()">+ Add Form Field</button>
            <hr style="border:none;border-top:1px solid #f1f5f9;margin:1rem 0 1.5rem;">

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">Save Scheme</button>
                <a href="{{ route('admin.schemes.index') }}" class="btn btn-light">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    let fieldCount = 0;
    function addField() {
        const container = document.getElementById('dynamic-fields-container');
        const html = `
            <div class="p-3 bg-light rounded mb-3 border" id="field-${fieldCount}">
                <div class="row g-2 align-items-center">
                    <div class="col-md-4">
                        <label class="form-label small mb-1">Field Label</label>
                        <input type="text" class="form-control" name="fields[${fieldCount}][label]" placeholder="e.g., Family Income" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small mb-1">Field Key</label>
                        <input type="text" class="form-control" name="fields[${fieldCount}][key]" placeholder="e.g., family_income">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small mb-1">Type</label>
                        <select class="form-select field-type" name="fields[${fieldCount}][type]" onchange="toggleOptions(${fieldCount})" required>
                            <option value="text">Text</option>
                            <option value="textarea">Textarea</option>
                            <option value="number">Number</option>
                            <option value="date">Date</option>
                            <option value="select">Dropdown</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="file">File Upload</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small mb-1 d-block">Required</label>
                        <div class="d-flex align-items-center gap-2 pt-2">
                            <input class="form-check-input" type="checkbox" name="fields[${fieldCount}][required]" value="1" id="req-${fieldCount}" style="width:18px;height:18px;accent-color:#6366f1;">
                            <label for="req-${fieldCount}" style="font-size:0.82rem;font-weight:600;color:#374151;margin:0;">Yes</label>
                        </div>
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-5">
                        <label class="form-label small mb-1">Placeholder (Optional)</label>
                        <input type="text" class="form-control" name="fields[${fieldCount}][placeholder]" placeholder="e.g., Enter annual income">
                    </div>
                    <div class="col-md-5">
                        <label class="form-label small mb-1">Help Text (Optional)</label>
                        <input type="text" class="form-control" name="fields[${fieldCount}][help_text]" placeholder="Shown below input field">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-outline-danger btn-sm w-100" onclick="removeField(${fieldCount})">Remove</button>
                    </div>
                </div>
                <div class="row g-2 mt-1 options-row" id="options-row-${fieldCount}" style="display:none;">
                    <div class="col-md-12">
                        <label class="form-label small mb-1">Options (for Dropdown/Checkbox)</label>
                        <textarea class="form-control" name="fields[${fieldCount}][options]" rows="2" placeholder="Option 1, Option 2, Option 3"></textarea>
                        <small class="text-muted">Use comma or new line separated values.</small>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        fieldCount++;
    }

    function toggleOptions(id) {
        const wrapper = document.getElementById(`field-${id}`);
        if (!wrapper) return;
        const typeSelect = wrapper.querySelector('.field-type');
        const optionsRow = document.getElementById(`options-row-${id}`);
        const show = ['select', 'checkbox'].includes(typeSelect.value);
        optionsRow.style.display = show ? 'flex' : 'none';
    }

    function removeField(id) {
        document.getElementById('field-' + id).remove();
    }
</script>
@endsection