@extends('layouts.admin')

@section('title', 'Create Survey')
@section('page-title', 'Create Survey')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <a href="{{ route('admin.surveys.index') }}" class="text-decoration-none text-secondary">
            <i class="bi bi-arrow-left"></i> Back to Surveys
        </a>
    </div>
</div>

<form action="{{ route('admin.surveys.store') }}" method="POST" id="survey-form">
    @csrf
    <div class="row">
        <!-- Survey Settings Panel -->
        <div class="col-lg-4 mb-4">
            <div class="admin-card">
                <h5 class="fw-bold mb-4">Survey Details</h5>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">Survey Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" class="form-control rounded-3" placeholder="e.g. Parent Feedback 2026" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Description / Instructions</label>
                    <textarea name="description" rows="3" class="form-control rounded-3" placeholder="Explain the purpose of this survey..."></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Target Audience <span class="text-danger">*</span></label>
                    <select name="target_type" id="target_type" class="form-select rounded-3" onchange="toggleSurveyTargetDropdowns()" required>
                        <option value="school">Entire School</option>
                        <option value="branch">Specific Branch</option>
                        <option value="class">Specific Class</option>
                        <option value="section">Specific Section</option>
                    </select>
                </div>

                <!-- Target IDs -->
                <div class="mb-3 d-none" id="target-branch-wrapper">
                    <label class="form-label fw-bold">Select Branch <span class="text-danger">*</span></label>
                    <select name="target_id_branch" id="target_id_branch" class="form-select rounded-3">
                        @foreach($branches as $b)
                            <option value="{{ $b->id }}">{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 d-none" id="target-class-wrapper">
                    <label class="form-label fw-bold">Select Class <span class="text-danger">*</span></label>
                    <select name="target_id_class" id="target_id_class" class="form-select rounded-3">
                        @foreach($classes as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3 d-none" id="target-section-wrapper">
                    <label class="form-label fw-bold">Select Section <span class="text-danger">*</span></label>
                    <select name="target_id_section" id="target_id_section" class="form-select rounded-3">
                        @foreach($sections as $s)
                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>

                <input type="hidden" name="target_id" id="target_id" value="">

                <hr>

                <div class="mb-3">
                    <label class="form-label fw-bold">Start Date</label>
                    <input type="date" name="start_date" class="form-control rounded-3" value="{{ date('Y-m-d') }}">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">End Date</label>
                    <input type="date" name="end_date" class="form-control rounded-3">
                </div>
            </div>
        </div>

        <!-- Dynamic Questions Panel -->
        <div class="col-lg-8 mb-4">
            <div class="admin-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0 fw-bold">Survey Questions</h5>
                    <button type="button" class="btn btn-outline-primary rounded-3 btn-sm" onclick="addQuestionField()">
                        <i class="bi bi-plus-lg"></i> Add Question
                    </button>
                </div>

                <!-- Questions Container -->
                <div id="questions-container">
                    <!-- Default first question -->
                    <div class="question-row border rounded-3 p-4 mb-3 bg-light" id="qrow-0">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-bold text-primary">Question #1</span>
                            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeQuestionField('qrow-0')">
                                <i class="bi bi-trash-fill"></i> Delete
                            </button>
                        </div>
                        <div class="mb-3">
                            <label class="form-label small fw-bold">Question Text</label>
                            <input type="text" name="questions[0][text]" class="form-control rounded-3" placeholder="e.g. Rate your satisfaction with the terminal reports" required>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label class="form-label small fw-bold">Response Type</label>
                                <select name="questions[0][type]" class="form-select rounded-3 q-type-select" data-row-id="0" onchange="handleTypeChange(this)">
                                    <option value="Text">Free Text Answer</option>
                                    <option value="Rating">Rating Scale (1-5 Star)</option>
                                    <option value="MCQ">Multiple Choice (MCQ)</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-2 d-none" id="mcq-options-0">
                                <label class="form-label small fw-bold">MCQ Options (Comma Separated)</label>
                                <input type="text" name="questions[0][options]" class="form-control rounded-3" placeholder="e.g. Excellent, Good, Average, Poor">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary rounded-3 w-100 py-2.5" onclick="setSurveyTargetIdBeforeSubmit()">
                        <i class="bi bi-clipboard2-check-fill me-1"></i> Launch Survey Questionnaire
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script>
    let questionIndex = 1;

    function addQuestionField() {
        const container = document.getElementById('questions-container');
        const id = 'qrow-' + questionIndex;
        const html = `
            <div class="question-row border rounded-3 p-4 mb-3 bg-light" id="${id}">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-bold text-primary">Question #${questionIndex + 1}</span>
                    <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeQuestionField('${id}')">
                        <i class="bi bi-trash-fill"></i> Delete
                    </button>
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold">Question Text</label>
                    <input type="text" name="questions[${questionIndex}][text]" class="form-control rounded-3" placeholder="Enter question..." required>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <label class="form-label small fw-bold">Response Type</label>
                        <select name="questions[${questionIndex}][type]" class="form-select rounded-3 q-type-select" data-row-id="${questionIndex}" onchange="handleTypeChange(this)">
                            <option value="Text">Free Text Answer</option>
                            <option value="Rating">Rating Scale (1-5 Star)</option>
                            <option value="MCQ">Multiple Choice (MCQ)</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-2 d-none" id="mcq-options-${questionIndex}">
                        <label class="form-label small fw-bold">MCQ Options (Comma Separated)</label>
                        <input type="text" name="questions[${questionIndex}][options]" class="form-control rounded-3" placeholder="e.g. Yes, No, Maybe">
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
        questionIndex++;
    }

    function removeQuestionField(id) {
        const container = document.getElementById('questions-container');
        if (container.children.length === 1) {
            alert('A survey must have at least one question.');
            return;
        }
        document.getElementById(id).remove();
    }

    function handleTypeChange(select) {
        const rowId = select.getAttribute('data-row-id');
        const mcqDiv = document.getElementById('mcq-options-' + rowId);
        
        if (select.value === 'MCQ') {
            mcqDiv.classList.remove('d-none');
            mcqDiv.querySelector('input').setAttribute('required', 'required');
        } else {
            mcqDiv.classList.add('d-none');
            mcqDiv.querySelector('input').removeAttribute('required');
        }
    }

    function toggleSurveyTargetDropdowns() {
        const type = document.getElementById('target_type').value;
        
        // Hide all
        document.getElementById('target-branch-wrapper').classList.add('d-none');
        document.getElementById('target-class-wrapper').classList.add('d-none');
        document.getElementById('target-section-wrapper').classList.add('d-none');

        // Show active
        if (type === 'branch') {
            document.getElementById('target-branch-wrapper').classList.remove('d-none');
        } else if (type === 'class') {
            document.getElementById('target-class-wrapper').classList.remove('d-none');
        } else if (type === 'section') {
            document.getElementById('target-section-wrapper').classList.remove('d-none');
        }
    }

    function setSurveyTargetIdBeforeSubmit() {
        const type = document.getElementById('target_type').value;
        let value = null;

        if (type === 'branch') {
            value = document.getElementById('target_id_branch').value;
        } else if (type === 'class') {
            value = document.getElementById('target_id_class').value;
        } else if (type === 'section') {
            value = document.getElementById('target_id_section').value;
        }

        document.getElementById('target_id').value = value;
    }

    document.addEventListener('DOMContentLoaded', () => {
        toggleSurveyTargetDropdowns();
    });
</script>
@endsection