@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
    $sroom = "";
    if(app('request')->input('room')){
        $sroom = app('request')->input('room');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-auto">
        <div class="media">
            <div class="media-body">
                <h4 class="mb-1 mt-0 font-weight-medium">Edit assessment details</h4>
                <p class="mb-0">{{date('d/m/Y, h:i A', strtotime($initital->_createdAt))}} <span class="before"></span> Details added by {{$initital->publisher->firstName}} {{$initital->publisher->lastName}}</p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.update') }}" class="assessment-form" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="room" value="{{$sroom}}">
            <input type="hidden" name="child" value="{{$initital->child->_id}}">
            <input type="hidden" name="id" value="{{$initital->_id}}">
            <div class="card">
                <div class="card-body">
                    <div class="media">
                        <img src="{{$initital->child->profileImage}}" class="img-child small-medium mr-3" alt="Child" />
                        <div class="media-body">
                            <h4 class="m-0 font-weight-medium font-size-18">{{$initital->child->name}}</h4>
                        </div>
                    </div>

                    <div class="row border-bottom my-4 mx-n5"></div>

                    @if(isset($initital->assessments) && !empty($initital->assessments))
                    @foreach($initital->assessments 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…">{{ isset($question->answer) ? $question->answer : '' }}</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}}" {{ isset($question->answer) && $question->answer != "" && ($question->answer == true || $question->answer == "true")  ? 'checked' : '' }}>
                                    <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}}" {{ isset($question->answer) && $question->answer != "" && ($question->answer == "false" || $question->answer == false) ? '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="{{ isset($question->answer) ? \Carbon\Carbon::parse($question->answer)->format('d/m/Y') : '' }}">
                        </div>
                        @elseif($question->type == 4)
                        <div class="col-md-4">
                            @if(isset($question->answer) && !empty($question->answer))
                            <div class="">
                                <img src="{{ $question->answer }}" class="img-sign big" alt="Sign" />
                            </div>
                            @endif
                            <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}}">
                                @if(isset($question->answer) && !empty($question->answer))
                                <input type="hidden" name="questions[{{$key}}][old_signatures]" class="old-signature" value="{{ $question->answer }}">
                                @endif
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="row border-bottom my-4 mx-n5"></div>
                    @endforeach
                    @endif

                    {{--
                    <div class="row">
                        <label class="col-12 font-size-16">Add signature</label>
                        <div class="col-md-4">
                            <div class="">
                                <img src="{{ Helper::assets('assets/images/dummy/sign.jpg') }}" class="img-sign big" alt="Sign" />
                            </div>
                            <div id="signature-pad" 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="question[4][answer]" class="signature input-validate" id="signature">
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Save changes</button>
            </div>
        </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