@extends('admin.layout.layout')
@section('content')
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Edit Question</h4>
            <form class="forms-sample" method="POST" action="{{ route('question.update', $question->id) }}">
                @csrf
                @method('PUT')
                <div class="form-group pt-3">
                    <label for="fitness_category_id">Fitness Category</label>
                    <div>
                        @foreach ($fitness_categories as $fitness_category)
                            <div class="form-check form-check-inline">
                                <input class="form-check-input ms-1 @error('fitness_category_id') is-invalid @enderror" type="checkbox" name="fitness_category_id[]" id="fitness_category_{{ $fitness_category->id }}" value="{{ $fitness_category->id }}" @if($question->fitnessCategoryQuestions->contains('fitness_category_id', $fitness_category->id)) checked @endif required>
                                <label class="form-check-label" for="fitness_category_{{ $fitness_category->id }}">
                                    {{ $fitness_category->name }}
                                </label>
                            </div>
                        @endforeach
                        @error('fitness_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="form-group pt-3">
                    <label for="question_type_id">Question Type</label>
                    <select class="form-control @error('question_type_id') is-invalid @enderror" id="question_type_id"
                        name="question_type_id" required>
                        <option value="">Select Question Type</option>
                        @foreach ($question_types as $question_type)
                            <option value="{{ $question_type->id }}" @if ($question->question_type_id == $question_type->id) selected @endif>
                                {{ $question_type->name }}</option>
                        @endforeach
                    </select>
                    @error('question_type_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="form-group pt-3">
                    <label>Question</label>
                    <input type="text" class="form-control @error('question') is-invalid @enderror" name="question"
                        id="question" placeholder="Enter question" value="{{ $question->question }}" required>
                    @error('question')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit" class="btn btn-primary me-2 text-white">Update</button>
            </form>
        </div>
    </div>

    {{-- Script to make at least one checkbox required --}}
    <script>
        const checkboxes = document.querySelectorAll('input[type=checkbox][name="fitness_category_id[]"]');

        const setCheckboxRequired = () => {
            const checked = Array.from(checkboxes).some((c) => c.checked);
            checkboxes.forEach((c) => c.required = !checked);
        }

        checkboxes.forEach((checkbox) => {
            checkbox.addEventListener('click', setCheckboxRequired);
        });

        // set checkbox required initially if no checkbox is checked
        setCheckboxRequired();
    </script>

@endsection