@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <h1 class="page-title">Edit Scheme</h1>
    <p class="page-subtitle">Modify the details of <strong>{{ $scheme->name }}</strong>.</p>
</div>

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="form-card-title">Modify Scheme</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.update', $scheme) }}" method="POST">
            @csrf
            @method('PUT')
            <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" value="{{ old('name', $scheme->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" value="{{ old('max_income', $scheme->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" value="{{ old('min_age', $scheme->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" value="{{ old('max_age', $scheme->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>{{ old('description', $scheme->description) }}</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" {{ old('is_active', $scheme->is_active) ? 'checked' : '' }}>
                        <div>
                            <label class="form-label mb-0" for="is_active">Scheme Active</label>
                            <div style="font-size:0.75rem;color:#94a3b8;">Uncheck to disable this scheme</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">Each scheme can have a separate dynamic application form. Keep <strong>Field Key</strong> stable to preserve application data mapping.</small>
            </div>
            <div id="dynamic-fields-container">
                @if($scheme->dynamic_fields && is_array($scheme->dynamic_fields))
                    @foreach($scheme->dynamic_fields as $index => $field)
                        <div class="p-3 bg-light rounded mb-3 border" id="field-{{ $index }}">
                            <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[{{ $index }}][label]" value="{{ $field['label'] ?? '' }}" 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[{{ $index }}][key]" value="{{ $field['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[{{ $index }}][type]" onchange="toggleOptions({{ $index }})" required>
                                        <option value="text" {{ ($field['type'] ?? 'text') == 'text' ? 'selected' : '' }}>Text</option>
                                        <option value="textarea" {{ ($field['type'] ?? '') == 'textarea' ? 'selected' : '' }}>Textarea</option>
                                        <option value="number" {{ ($field['type'] ?? '') == 'number' ? 'selected' : '' }}>Number</option>
                                        <option value="date" {{ ($field['type'] ?? '') == 'date' ? 'selected' : '' }}>Date</option>
                                        <option value="select" {{ ($field['type'] ?? '') == 'select' ? 'selected' : '' }}>Dropdown</option>
                                        <option value="checkbox" {{ ($field['type'] ?? '') == 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                        <option value="file" {{ ($field['type'] ?? '') == 'file' ? 'selected' : '' }}>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[{{ $index }}][required]" value="1" id="req-{{ $index }}" {{ !empty($field['required']) ? 'checked' : '' }} style="width:18px;height:18px;accent-color:#6366f1;">
                                        <label for="req-{{ $index }}" 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[{{ $index }}][placeholder]" value="{{ $field['placeholder'] ?? '' }}">
                                </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[{{ $index }}][help_text]" value="{{ $field['help_text'] ?? '' }}">
                                </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({{ $index }})">Remove</button>
                                </div>
                            </div>
                            <div class="row g-2 mt-1 options-row" id="options-row-{{ $index }}" style="display: {{ in_array($field['type'] ?? 'text', ['select','checkbox']) ? 'flex' : 'none' }};">
                                <div class="col-md-12">
                                    <label class="form-label small mb-1">Options (for Dropdown/Checkbox)</label>
                                    <textarea class="form-control" name="fields[{{ $index }}][options]" rows="2">{{ is_array($field['options'] ?? null) ? implode(', ', $field['options']) : ($field['options'] ?? '') }}</textarea>
                                    <small class="text-muted">Use comma or new line separated values.</small>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </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">Update Scheme</button>
                <a href="{{ route('admin.schemes.index') }}" class="btn btn-light">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
    let fieldCount = {{ $scheme->dynamic_fields ? count($scheme->dynamic_fields) : 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