@csrf
@if(isset($template)) @method('put') @endif

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <label class="form-label small text-navy-300">Template Name</label>
        <input type="text" name="name" value="{{ old('name', $template->name ?? '') }}" class="form-control @error('name') is-invalid @enderror" required>
        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
        <label class="form-label small text-navy-300">Linked Zone (optional)</label>
        <select name="zone_id" class="form-select">
            <option value="">— All Zones (global template) —</option>
            @foreach ($zones as $zone)
                <option value="{{ $zone->id }}" @selected(old('zone_id', $template->zone_id ?? '') == $zone->id)>{{ $zone->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2 d-flex align-items-end">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" name="status" value="1" id="statusSwitch" {{ old('status', $template->status ?? true) ? 'checked' : '' }}>
            <label class="form-check-label small text-navy-300" for="statusSwitch">Active</label>
        </div>
    </div>
    <div class="col-12">
        <label class="form-label small text-navy-300">Description</label>
        <textarea name="description" rows="2" class="form-control">{{ old('description', $template->description ?? '') }}</textarea>
    </div>
</div>

<div class="panel p-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="fw-semibold text-heading small">Questions</span>
        <button type="button" id="addQuestionBtn" class="btn btn-sm btn-outline-primary"><i class="bi bi-plus-lg"></i> Add Question</button>
    </div>
    <div id="questionsContainer"></div>
</div>

<div class="mt-3">
    <button type="submit" class="btn btn-primary"><i class="bi bi-check2"></i> {{ isset($template) ? 'Update Template' : 'Create Template' }}</button>
    <a href="{{ route('admin.questionnaires.index') }}" class="btn btn-outline-secondary">Cancel</a>
</div>

<template id="questionRowTemplate">
    <div class="row g-2 align-items-start question-row border-bottom border-navy py-2">
        <div class="col-md-4">
            <input type="text" class="form-control form-control-sm" placeholder="Question text" data-field="question_text">
        </div>
        <div class="col-md-2">
            <select class="form-select form-select-sm" data-field="field_type">
                @foreach (\App\Models\QuestionnaireQuestion::FIELD_TYPES as $type)
                    <option value="{{ $type }}">{{ ucfirst($type) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <textarea class="form-control form-control-sm options-field d-none" rows="1" placeholder="One option per line" data-field="options_text"></textarea>
        </div>
        <div class="col-md-1 text-center">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" data-field="is_required">
                <label class="form-check-label small text-navy-300">Req.</label>
            </div>
        </div>
        <div class="col-md-1 text-end">
            <button type="button" class="btn btn-sm btn-outline-danger remove-question-btn"><i class="bi bi-x-lg"></i></button>
        </div>
    </div>
</template>

@push('scripts')
<script>
(function () {
    const container = document.getElementById('questionsContainer');
    const rowTemplate = document.getElementById('questionRowTemplate');
    let index = 0;

    const choiceTypes = ['radio', 'checkbox', 'dropdown'];

    function addRow(data = null) {
        const fragment = rowTemplate.content.cloneNode(true);
        const row = fragment.querySelector('.question-row');
        const i = index++;

        row.querySelectorAll('[data-field]').forEach((el) => {
            const field = el.dataset.field;
            const name = field === 'is_required'
                ? `questions[${i}][is_required]`
                : `questions[${i}][${field}]`;
            el.setAttribute('name', name);

            if (data) {
                if (field === 'is_required') el.checked = !!data.is_required;
                else if (field === 'options_text') el.value = (data.options || []).join('\n');
                else el.value = data[field] ?? '';
            }
        });

        const typeSelect = row.querySelector('[data-field="field_type"]');
        const optionsField = row.querySelector('[data-field="options_text"]');
        const toggleOptions = () => optionsField.classList.toggle('d-none', !choiceTypes.includes(typeSelect.value));
        typeSelect.addEventListener('change', toggleOptions);
        toggleOptions();

        row.querySelector('.remove-question-btn').addEventListener('click', () => row.remove());

        container.appendChild(row);
    }

    document.getElementById('addQuestionBtn').addEventListener('click', () => addRow());

    const existingQuestions = @json($template->questions ?? []);
    if (existingQuestions.length) {
        existingQuestions.forEach((q) => addRow(q));
    } else {
        addRow();
    }
})();
</script>
@endpush