@extends($viewVars['loadTeacherLayout'] ? 'layouts.teacher' : 'layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
    $selectedChild = "";
    $is_child_exist = false;
    if(app('request')->input('child')){
        $selectedChild = app('request')->input('child');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-auto">
        <h4 class="mb-1 mt-0 font-weight-medium">Assessment</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.save') }}" class="assessment-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="room" value="{{$initital->room->_id}}">
            <input type="hidden" name="child" value="{{$selectedChild}}">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto"><h5 class="font-size-18">Select the relevant children below to begin</h5></div>
                        {{-- <div class="col-auto"><h5 class="font-size-18">Select other children of {{$initital->room->name}} to add the same assessment as well.</h5></div> --}}
                        <div class="col-auto ml-sm-auto">
                            <div class="checkbox big checkbox-pink">
                                <input type="checkbox" name="selectAll" id="selectAll" value="0">
                                <label for="selectAll" class="pt-2">Select all children </label>
                            </div>
                        </div>
                    </div>
                    <div class="childs row">
                        @if(isset($initital->children) && !empty($initital->children))
                            @foreach($initital->children as $child)
                                <div class="col text-center child-item mb-sm-3 mb-2">
                                    <label>
                                        <input type="checkbox" class="checkbox-child" name="children[]" value="{{$child->_id}}" {{ $selectedChild!="" && $selectedChild == $child->_id ? 'checked' : '' }} data-error="child-error">
                                        <div class="child-image position-relative ">
                                            <i class="uil uil-check icon-check"></i>
                                            <img src="{{ $child->profileImage }}" class="img-child medium" alt="Child" />
                                            <h5 class="mt-2 mb-0 font-size-18">{{$child->name}}</h5>
                                        </div>
                                    </label>
                                </div>
                            @endforeach
                            @php $is_child_exist = true; @endphp
                        @else
                        <div class="text-left col-md">
                            <p>No children found</p>
                            <a href="{{ route('children.create',['room' => $initital->room->_id]) }}" class="btn btn-success">Add child</a>
                        </div>
                        @endif
                        <div class="child-error col-12"></div>
                    </div>
                    @if($is_child_exist)
                    <div class="row border-bottom my-4 mx-n5"></div>

                    @if(isset($initital->questions) && !empty($initital->questions))
                    @foreach($initital->questions as $key => $question)
                    <div class="row">
                        <label class="col-12 font-size-16">{{$question->question}}</label>
                        <input type="hidden" name="questions[{{$key}}][question]" value="{{ $question->_id }}">
                        <input type="hidden" name="questions[{{$key}}][type]" value="{{ $question->type }}">
                        @if($question->type == 1)
                        <div class="col-12">
                            <textarea class="form-control answer-{{ $question->type }} input-validate" name="questions[{{$key}}][answer]" rows="3" placeholder="Type other information here…"></textarea>
                        </div>
                        @elseif($question->type == 2)
                        <div class="col-12">
                            <div class="mt-3 custom-control-inline">
                                <div class="custom-control custom-radio mb-2 mr-3">
                                    <input type="radio" id="customRadio1-{{$key}}" name="questions[{{$key}}][answer]" value="1" class="custom-control-input answer-{{ $question->type }} input-validate" data-error="answer-error-{{$key}}">
                                    <label class="custom-control-label" for="customRadio1-{{$key}}">Yes</label>
                                </div>
                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="customRadio2-{{$key}}" name="questions[{{$key}}][answer]" value="0" class="custom-control-input answer-{{ $question->type }} input-validate" data-error="answer-error-{{$key}}" checked>
                                    <label class="custom-control-label" for="customRadio2-{{$key}}">No</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 answer-error-{{$key}}"></div>
                        @elseif($question->type == 3)
                        <div class="col-md-6 col-xl-3">
                            <span class="flatpickr-arrow"></span>
                            <input type="text" class="form-control flatpickr flatpickr-input answer-{{ $question->type }} input-validate" name="questions[{{$key}}][answer]" value="">
                        </div>
                        @elseif($question->type == 4)
                        <div class="col-md-4">
                            <div id="signature-pad-{{$key}}" class="signature-pad">
                                <div class="m-signature-pad">
                                    <div class="m-signature-pad--body">
                                        <canvas></canvas>
                                    </div>
                                    <div class="m-signature-pad--footer">
                                        <div class="description my-1">Sign above</div>
                                        <div class="left">
                                            <button type="button" class="btn btn-sm btn-danger font-weight-normal clear" data-action="clear">Clear</button>
                                            <button type="button" class="btn btn-sm btn-success font-weight-normal undo" data-action="undo">Undo</button>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="questions[{{$key}}][signatures]" class="signature input-validate" id="signature-{{$key}}">
                            </div>
                        </div>
                        @endif
                    </div>

                    <div class="row border-bottom my-4 mx-n5"></div>
                    @endforeach
                    @endif
                    @endif
                </div>
            </div>
            @if($is_child_exist)
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Submit</button>
            </div>
            @endif
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/select2/select2.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/signature-pad/signature-pad.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/validation/validate.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/js/pages/learning-story-analysis-assessment.js') }}" type="text/javascript"></script>
@endsection