@extends('layouts.admin')

@section('content')
<div class="app-content my-3 my-md-5 profile-1">
    <div class="side-app">
        <x-page.header>Generic Survey Questions</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Create Generic Survey Questions</h5>
                    </div>
                    <div class="card-body">
                        <form id="create_new_survey_form" action="{{ route('admin.question.gensurvey.store') }}" method="post">
                            @csrf
                            <div id="loading_section" class="d-none" style="border-radius:5px;background:#ef9230;z-index:100;opacity:.5;position:absolute;top:0;left:0;width:100%;height:100%">
                                <div class="dimmer active" style="margin-top: 300px">
                                    <div class="lds-ring">
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                        <div></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                <input id="hash" type="hidden" class="form-control" name="hash" value="{{ $hash }}">
                                <input id="id" type="hidden" class="form-control" name="id" value="{{ $id }}">
                            </div>
                            <div id="sections_container">
                                <div class="form_section">
                                    <div class="row mb-12 mb-2">
                                        <div class="col-md-2">
                                            <label for="name_0" class="">Name</label>
                                        </div>
                                        <div class="col-md-10">
                                            <input id="name_0" type="text" class="form-control" name="name[0]" value="" required autocomplete="name" autofocus>
                                        </div>
                                    </div>
                                    <div class="choices_container">
                                        <div class="row mb-12 mb-2 choice">
                                            <div class="col-md-2">
                                                <label for="choice_0_1" class="">Choice #1</label>
                                            </div>
                                            <div class="col-md-4">
                                                <input id="choice_0_1" type="text" class="form-control" name="choices[0][]" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" style="height:40px;" class="btn btn-primary btn-sm add_choice">
                                        <span class="mdi mdi-plus"></span> Add Choice
                                    </button>
                                    <button type="button" style="height:40px;" class="btn btn-danger btn-sm remove_section"><span class="mdi mdi-delete-forever"></span>Remove Section</button>

                                    <div class="row mb-5 mt-4">
                                        <div class="col-md-2 mb-2">
                                            <label for="multi_0" class="form-label mt-2">Multi-Choice</label>
                                            <label class="form-switch">
                                                <input type="checkbox" id="multi_0" name="multi[0]" class="form-switch-input">
                                                <span class="form-switch-indicator"></span>
                                                <span class="form-switch-description"></span>
                                            </label>
                                        </div>
                                        <div class="col-md-2 mb-2">
                                            <label for="other_0" class="form-label mt-2">Put Other Option</label>
                                            <label class="form-switch">
                                                <input type="checkbox" id="other_0" name="other[0]" class="form-switch-input">
                                                <span class="form-switch-indicator"></span>
                                                <span class="form-switch-description"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <hr>
                                </div>
                            </div>
                            <button id="add_section" style="height:40px;" type="button" class="btn btn-success btn-sm mt-3">
                                <span class="mdi mdi-plus"></span> Add Question
                            </button>

                            <div class="">
                                <button id="create_new_survey_btn" type="submit" class="btn btn-primary d-block mx-auto w-25">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
<script>
    $(document).ready(function() {
        let sectionCount = 1;

        $('#add_section').click(function(e) {
            e.preventDefault();
            sectionCount++;
            const newSection = $('.form_section').first().clone(); // Clone the first section
            newSection.find('input[type="text"]').val(''); // Clear the input fields
            newSection.find('.choice').not(':first').remove(); // Remove all choices except the first one
            newSection.find('input[name^="name"]').attr('name', `name[${sectionCount}]`); // Update the name for the new question
            newSection.find('.choices_container input').attr('name', `choices[${sectionCount}][]`); // Update the name for the first choice in the new section
            newSection.find('label[for^="choice"]').attr('for', `choice_${sectionCount}_1`);
            newSection.find('input[id^="choice"]').attr('id', `choice_${sectionCount}_1`);

            // Update Multi-Choice and Other Option checkboxes
            newSection.find('input[id^="multi"]').attr('id', `multi_${sectionCount}`).attr('name', `multi[${sectionCount}]`);
            newSection.find('input[id^="other"]').attr('id', `other_${sectionCount}`).attr('name', `other[${sectionCount}]`);

            // Append the new section to the container
            newSection.appendTo('#sections_container');
        });

        // Add a new choice within a section
        $(document).on('click', '.add_choice', function(e) {
            e.preventDefault();
            const section = $(this).closest('.form_section');
            let choiceCount = section.find('.choice').length + 1;
            const sectionIndex = section.find('input[name^="name"]').attr('name').match(/\d+/)[0];
            const choiceHtml = `
            <div class="row mb-12 mb-2 choice">
                <div class="col-md-2">
                    <label for="choice_${sectionIndex}_${choiceCount}" class="">Choice #${choiceCount}</label>
                </div>
                <div class="col-md-4">
                    <input id="choice_${sectionIndex}_${choiceCount}" type="text" class="form-control" name="choices[${sectionIndex}][]" value="" required autocomplete="off">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm remove_choice"> <span class="mdi mdi-delete-forever"></span> Remove</button>
                </div>
            </div>
        `;
            $(this).siblings('.choices_container').append(choiceHtml);
        });

        // Remove a section
        $(document).on('click', '.remove_section', function() {
            if ($('#sections_container .form_section').length > 1) {
                $(this).closest('.form_section').remove();
            }
        });

        // Remove a choice
        $(document).on('click', '.remove_choice', function() {
            $(this).closest('.choice').remove();
        });
    });

</script>
@endsection