{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="is_mobile" value="{{!empty($isMobile) && $isMobile == true?1:''}}" id="">
    <input type="hidden" name="token" value="{{$token??''}}" id="">
    <div class="card shadow-sm">
        <!--begin::Card body-->
        <div class="card-body">
            <div class="accordion" id="kt_accordion_1">
                @include("backend.alerts")
                @include("backend.errors")

                @foreach ($questions as $index => $question)
                @php
                    $ans = $submitted_answer[$question->id] ?? "";
                    $str_arr = explode(",", $ans);
                    $isDisabled = !empty(array_filter($str_arr)) ? "disabled" : "";
                @endphp

                <div class="accordion-item">
                    <h2 class="accordion-header" id="kt_accordion_1_header_{{ $index + 1 }}">
                        <button class="accordion-button fs-4 fw-semibold {{ $index > 0 ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_{{ $index + 1 }}" aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="kt_accordion_1_body_{{ $index + 1 }}">
                            Question {{ $index + 1 }}: {{$question->question}}
                        </button>
                    </h2>
                    <div id="kt_accordion_1_body_{{ $index + 1 }}" class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}" aria-labelledby="kt_accordion_1_header_{{ $index + 1 }}" data-bs-parent="#kt_accordion_1">
                        <div class="accordion-body">
                            <div class="col-lg-12 col-xl-12 answer-options">
                                <div class="checkbox-list">
                                    <div class="row mb-2">
                                        <label class="checkbox">
                                            <input type="checkbox" class="form-check-input" name="answers[{{$question->id}}][0]" {{in_array("option_1", $str_arr) ? 'checked' : ''}} {{$isDisabled}} value="option_1">
                                            <span></span>{{$question->option_1}}
                                        </label>
                                    </div>
                                    @if($question->option_2 != '')
                                    <div class="row mb-2">
                                        <label class="checkbox">
                                            <input type="checkbox" class="form-check-input" name="answers[{{$question->id}}][1]" {{in_array("option_2", $str_arr) ? 'checked' : ''}} {{$isDisabled}} value="option_2">
                                            <span></span>{{$question->option_2}}
                                        </label>
                                    </div>
                                    @endif
                                    @if($question->option_3 != '')
                                    <div class="row mb-2">
                                        <label class="checkbox">
                                            <input type="checkbox" class="form-check-input" name="answers[{{$question->id}}][2]" {{in_array("option_3", $str_arr) ? 'checked' : ''}} {{$isDisabled}} value="option_3">
                                            <span></span>{{$question->option_3}}
                                        </label>
                                    </div>
                                    @endif
                                    @if($question->option_4 != '')
                                    <div class="row mb-2">
                                        <label class="checkbox">
                                            <input type="checkbox" class="form-check-input" name="answers[{{$question->id}}][3]" {{in_array("option_4", $str_arr) ? 'checked' : ''}} {{$isDisabled}} value="option_4">
                                            <span></span>{{$question->option_4}}
                                        </label>
                                    </div>
                                    @endif
                                    @if($question->option_all == 'All')
                                    <div class="row mb-2">
                                        <label class="checkbox">
                                            <input type="checkbox" class="form-check-input mark-all-answer" {{count($str_arr) >= 4 ? 'checked' : ''}} {{$isDisabled}} value="option_all">
                                            <span></span>All of the above
                                        </label>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            @if(!empty($questions->toArray()))
            <button type="button" id="saveForm" {{isset($submitted_answer) && !empty($submitted_answer)?"disabled":""}} class="btn btn-primary mr-2 btn-hover-rise">Submit</button>
            @endif
            @if (!empty($isMobile) && $isMobile == true)
            <button type="button" class="btn btn-secondary btn-hover-rise" onclick="cancelPostMessage();">Cancel</button>
            {{-- @elseif(!$is_disabled || $isAdmin) --}}
            @else
            <a href="{{route('staff_module.index', $module->category_id)}}"><button type="button" class="btn btn-secondary btn-hover-rise">Back</button></a>
            @endif
        </div>
    </div>
    <!--end::Card-->
    <input type="hidden" name="training_module_id" value="{{$training_module_id}}" />
</form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('.mark-all-answer').on('change', function() {
            $(this).parents('.answer-options:first').find('input:checkbox').not(this).prop('checked', $(this).prop('checked'));
        });
        $('#saveForm').on('click', function() {
            $('#manage_form').submit();
        });
    });
</script>
<script>
    function cancelPostMessage(){
        if (typeof AppBridge !== 'undefined' && AppBridge.postMessage) { AppBridge.postMessage(JSON.stringify({status: true})); }
    }
</script>
@endsection