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

@section('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">Assign next learning goals</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <form method="post" action="{{ route($viewVars['routePrefix'].'learning-story-analysis.save-steps') }}" class="learning-story-analysis-goals-form">
            @csrf
            <input type="hidden" name="room" value="{{$init->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 other children of {{$init->room->name}} to set their next goals 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($init->children) && !empty($init->children))
                            @foreach($init->children as $child)
                                <div class="col text-center child-item mb-sm-3 mb-2">
                                    <label>
                                        @php $dob = \Carbon\Carbon::parse($child->dob)->diffInMonths(\Carbon\Carbon::now()); @endphp
                                        <input type="checkbox" class="checkbox-child" name="childList[]" value="{{$child->_id}}" {{$selectedChild!="" && $selectedChild==$child->_id ? "checked" : ""}} data-error="child-error" data-age="{{$dob}}" data-goals="{{ isset($child->goals) ? implode(',',$child->goals) : ''}}">
                                        <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' => $init->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-5 mx-n5"></div>
                    <h5 class="font-size-18">Write comment</h5>
                    <div class="">
                        <textarea class="form-control" name="comment" rows="5" placeholder="Type your comment here…"></textarea>
                    </div>
                    <div class="row border-bottom my-5 mx-n5"></div>
                    <ul class="nav nav-pills navtab-bg nav-curricula">
                        @if(isset($init->frameworks) && !empty($init->frameworks))
                        @foreach($init->frameworks as $curricula)
                        @if(isset($curricula->themes) && !empty($curricula->themes))
                        <li class="nav-item">
                            <a href="#tab2-{{$curricula->_id}}" data-toggle="tab" aria-expanded="false"  class="nav-link" data-framework="{{$curricula->isFramework}}" data-minAge="{{$curricula->isFramework && isset($curricula->minAge) && $curricula->minAge > 0 ? $curricula->minAge : '' }}" data-maxAge="{{$curricula->isFramework && isset($curricula->minAge) && $curricula->minAge > 0 ? $curricula->maxAge : '' }}" style="display:{{$curricula->isFramework ? "none" : "block"}}">
                                <span class="d-sm-block">{{$curricula->name}} {{$curricula->isFramework && (isset($curricula->minAge) && $curricula->minAge > 0 || isset($curricula->maxAge) && $curricula->maxAge > 0) ? '('. $curricula->minAge .'-'. $curricula->maxAge .' months)' : '' }}</span>
                            </a>
                        </li>
                        @endif
                        @endforeach
                        @endif
                    </ul>
                    <div class="tab-content">
                        @php $count = 0 @endphp
                        @if(isset($init->frameworks) && !empty($init->frameworks))
                        <p>The following are goals which haven’t been achieved yet.</p>
                        @foreach($init->frameworks as $curricula)
                        @if(isset($curricula->themes) && !empty($curricula->themes))
                        <div class="tab-pane tab-curricula" id="tab2-{{$curricula->_id}}">
                            <div class="accordion custom-accordionwitharrow" id="accordionTheme{{$curricula->_id}}">
                            @foreach($curricula->themes as $theme)
                                <div class="card shadow-none border">
                                    <div class="card-header" id="headingTheme-{{$theme->_id}}-{{$count}}">
                                        <div class="row align-items-center">
                                            <a href="javascipt:;" data-toggle="collapse" data-target="#collapseTheme-{{$theme->_id}}-{{$count}}" aria-expanded="{{ $count == 1 ? 'true' : 'false' }}" aria-controls="collapseTheme-{{$theme->_id}}-{{$count}}" class="text-grey col {{ $count == 1 ? '' : 'collapsed' }}"><h5 class="m-0 font-size-18">{{$theme->name}}</h5></a>
                                            <div class="col-auto ml-auto">
                                                <a href="javascipt:;" data-toggle="collapse" data-target="#collapseTheme-{{$theme->_id}}-{{$count}}" aria-expanded="{{ $count == 1 ? 'true' : 'false' }}" aria-controls="collapseTheme-{{$theme->_id}}-{{$count}}" class="text-grey col {{ $count == 1 ? '' : 'collapsed' }}"><i class="uil uil-angle-down d-inline-block accordion-arrow"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseTheme-{{$theme->_id}}-{{$count}}" class="collapse {{ $count == 1 ? 'show' : '' }}" aria-labelledby="headingTheme-{{$theme->_id}}-{{$count}}" data-parent="#accordionTheme{{$curricula->_id}}">
                                        <div class="card-body">
                                            <div class="">
                                                @if($theme->hasAim == true && isset($theme->aims) && !empty($theme->aims))
                                                    @foreach($theme->aims as $aims)
                                                    <p class="font-size-14 mt-3">
                                                        <strong>{{$aims->name}}</strong>
                                                        @if(isset($aims->description) && !empty($aims->description)) ({{$aims->description}}) @endif
                                                    </p>
                                                    <div class="row">
                                                        @if(isset($aims->goals) && !empty($aims->goals))
                                                        @foreach($aims->goals as $goal)
                                                            <div class="col-12 learning-goal" data-id="{{$goal->_id}}">
                                                                <div class="checkbox big checkbox-pink mb-2">
                                                                    <input type="checkbox" class="goal-checkbox" name="goals[]" id="goals-{{$goal->_id}}" value="{{$goal->_id}}" data-error="goal-error">
                                                                    <label for="goals-{{$goal->_id}}" class="pt-2 font-weight-normal">{{$goal->description}}</label>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                        @endif
                                                    </div>
                                                    @endforeach
                                                @else
                                                    @if(isset($theme->goals) && !empty($theme->goals))
                                                    @foreach($theme->goals as $goal)
                                                    <div class="col-12 learning-goal" data-id="{{$goal->_id}}">
                                                        <div class="checkbox big checkbox-pink mb-2">
                                                            <input type="checkbox" class="goal-checkbox" name="goals[]" id="goals-{{$goal->_id}}" value="{{$goal->_id}}" data-error="goal-error">
                                                            <label for="goals-{{$goal->_id}}" class="pt-2 font-weight-normal">{{$goal->description}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @php $count++ @endphp
                            @endforeach
                            </div>
                        </div>
                        @endif
                        @endforeach
                        @endif
                    </div>
                    <div class="goal-error"></div>
                    @endif
                </div>
            </div>
            @if($is_child_exist)
            <div class="mt-3">
                <button type="submit" class="btn btn-success btn-min-width" id="save">Save details</button>
            </div>
            @endif
        </form>
    </div>
</div>
@endsection

@section('script-bottom')
<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-goals.js') }}" type="text/javascript"></script>
@endsection