@extends('layouts.admin')

@section('content')
<!-- App-Content -->
<div class="app-content my-3 my-md-5 profile-1">
    <div class="side-app">
        <x-page.header>Course Generic Survey</x-page.header>
        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Survey Form</h5>
                    </div>
                    <div class="card-body">
                        <!-- Begin::Form -->
                        <form id="survey_form">

                            @foreach ($questions as $question)
                            <div class="card border-0 mb-4 shadow-sm">
                                <div class="card-body p-4">
                                    <!-- Question Header -->
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h2 class="text-dark fw-bold">{{ $question->name }}</h2>
                                        <button class="btn btn-link text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#question-{{ $question->id }}">
                                            <i class="fa fa-chevron-down"></i>
                                        </button>
                                    </div>
                                    <!-- Question Choices -->
                                    <div id="question-{{ $question->id }}" class="collapse show">
                                        <div class="row">
                                            @foreach ($choices->where('survey_question_id', $question->id) as $choice)
                                            <div class="col-6 mb-2">
                                                <label class="btn btn-outline-success d-flex align-items-center rounded p-2 w-100">
                                                    <div class="form-check me-2">
                                                        <input data-question-id="{{ $question->id }}" class="normal-checkbox form-check-input" type="{{ $question->question_type == 'single' ? 'radio' : 'checkbox' }}" name="{{ $question->id }}[]" value="{{ $choice->id }}" />
                                                    </div>
                                                    <span class="fs-5 fw-semibold text-dark">{{ $choice->choice_name }}</span>
                                                </label>
                                            </div>
                                            <div class="col-6 mb-2">
                                            </div>
                                            @endforeach
                                            @if ($question->is_other)
                                            <!-- Other Option -->
                                            <div class="col-6 mb-2">
                                            <label class="btn btn-outline-primary d-flex align-items-center mb-2 rounded p-3">
                                                <div class="form-check me-3">
                                                    <input onclick="other();" id="other-checkbox-{{ $question->id }}" data-question-id="{{ $question->id }}" class="other-checkbox form-check-input" type="{{ $question->question_type == 'single' ? 'radio' : 'checkbox' }}" name="{{ $question->id }}[]" value="" />
                                                </div>
                                                <span class="fs-6 fw-semibold text-dark">Other</span>
                                            </label>
                                            <input class="other-input-{{ $question->id }} form-control mt-2 d-none border-primary bg-light text-dark" type="text" placeholder="Please specify" />
                                            @endif
                                        </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            @endforeach

                            <!-- Submit Button -->
                            {{-- <div class="text-center mt-4">
                                <button type="button" class="finish_btn btn btn-primary w-50">
                                    <span class="me-2">
                                        <i class="fa fa-check"></i>
                                    </span>
                                    Finish
                                    <span class="spinner-border spinner-border-sm align-middle ms-2 d-none"></span>
                                </button>
                            </div> --}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')
<script>
    $(document).ready(function() {

        $('.other-checkbox').on('change', function() {
            var question_id = $(this).data('question-id');
            var other_input = $(`.other-input-${question_id}`);

            if ($(this).is(':checked')) {
                other_input.removeClass('d-none').attr('required', true);
                other_input.on('input', function() {
                    var other_value = $(this).val();
                    $(`#other-checkbox-${question_id}`).val(other_value);
                });
            } else {
                other_input.addClass('d-none').attr('required', false);
            }
        });


        // Event listener for the "Normal" checkboxes
        $('.normal-checkbox').on('change', function() {
            var question_id = $(this).data('question-id');
            var other_input = $(`.other-input-${question_id}`);

            if ($(this).is(':checked')) {
                other_input.addClass('d-none').attr('required', false);
            }
        });
    });

</script>
@endsection