@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/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" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/smartwizard/smart_wizard.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
$selectedRoom = $selectedChild = "";
if(app('request')->input('room')){
    $selectedRoom = app('request')->input('room');
}
if(app('request')->input('child')){
    $selectedChild = app('request')->input('child');
}
$keywordsGoals = [];
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Add learning story</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <div class="">
                <button type="button" class="btn btn-pink btn-min-width add-learning-story mr-1" onclick="event.preventDefault();document.getElementById('isDraft').value=1;document.getElementById('save').click();">Save as draft</button>
                <button type="button" class="btn btn-success btn-min-width add-learning-story" onclick="event.preventDefault();document.getElementById('isDraft').value=0;document.getElementById('save').click();">Publish</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body p-0">
                <form action="{{ route('learning-stories.save') }}" method="post" class="add-learningstory-form" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="utcOffset" class="utcOffset">
                    <input type="hidden" name="isDraft" value="0" id="isDraft">
                    <div id="smartwizard-default">
                        <ul>
                            <li><a href="#sw-default-step-1">Step 1</a></li>
                            <li><a href="#sw-default-step-2">Step 2</a></li>
                            <li><a href="#sw-default-step-3">Step 3</a></li>
                            <li><a href="#sw-default-step-4">Step 4</a></li>
                        </ul>

                        <div class="p-3">
                            <div id="sw-default-step-1">
                                <div class="row px-3">
                                    <div class="col-auto p-0">
                                        <ul class="nav nav-pills navtab-bg nav-child-tab">
                                            <li class="nav-item">
                                                <a href="#tab1" data-type="-1" data-toggle="tab" aria-expanded="true" class="nav-link active">
                                                    <span class="d-sm-block">All children</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a href="#tab1" data-type="1" data-toggle="tab" aria-expanded="false"  class="nav-link">
                                                    <span class="d-sm-block">Marked in children</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-4 ml-md-auto p-0">
                                        <select class="form-control" data-plugin="customselect" id="room" data-placeholder="Select a room">
                                            @if(isset($initial->rooms) && !empty($initial->rooms))
                                                @foreach ($initial->rooms as $key => $room)
                                                    <option value="{{ $room->_id }}" {{ ($selectedRoom!="" && $selectedRoom==$room->_id) || ($selectedRoom==""&&$key== 0) ? 'selected' : ''}}>{{ $room->name }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="tab-content">
                                    <div class="tab-pane show active" id="tab1">
                                        <div class="row align-items-center mb-3">
                                            <div class="col-auto"><h5 class="font-size-16">List of children in <span class="room-name">Toddle room</span></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($initial->firstRoomInfo->childs) && !empty($initial->firstRoomInfo->childs))
                                                @foreach($initial->firstRoomInfo->childs as $child)
                                                    <div class="col text-center child-item mb-sm-3 mb-2 {{$child->markedIn == true ? 'marked' : ''}}">
                                                        <label>
                                                            @php $dob = \Carbon\Carbon::parse($child->dob)->diffInMonths(\Carbon\Carbon::now()); @endphp
                                                            <input type="checkbox" class="checkbox-child input-validate" name="childList[]" value="{{$child->_id}}" {{$selectedChild!="" && $selectedChild==$child->_id ? "checked" : ""}} data-error="child-error" data-age="{{$dob}}">
                                                            <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
                                            @endif
                                            <div class="child-error col-12"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row border-bottom my-5 mx-n5"></div>
                                <h5 class="font-size-18">Questions</h5>
                                <p>Want to add or remove questions? Use the <a href="{{route('teachers.appConfiguration')}}" target="_blank">app configuration section.</a></p>
                                <div class="row mb-1">
                                    <div class="col-lg-9">
                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <label class="">Date</label>
                                                    <div class="position-relative">
                                                        <span class="flatpickr-arrow"></span>
                                                        <input type="text" class="form-control flatpickr flatpickr-input input-validate" name="date" value="{{\Carbon\Carbon::today()->format('d/m/Y')}}" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="col-lg-8">
                                                    <label class="">Name of learning story</label>
                                                    <textarea class="form-control input-validate" placeholder="" name="name" rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        @if(isset($initial->storyQuestions) && !empty($initial->storyQuestions))
                                        @foreach($initial->storyQuestions as $key => $question)
                                        <div class="form-group">
                                            <label class="">{{$question->question}}</label>
                                            <input type="hidden" name="storyQuestions[{{$key}}][_id]" value="{{$question->_id}}">
                                            <textarea rows="3" class="form-control story-question" placeholder="{{isset($question->example) ? $question->example : ''}}" name="storyQuestions[{{$key}}][answer]"></textarea>
                                        </div>
                                        @endforeach
                                        @endif
                                        <div class="form-group">
                                            <label class="">Optional comment</label>
                                            <textarea rows="3" class="form-control" placeholder="Type here..." name="comment"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row border-bottom my-5 mx-n5"></div>
                                <div class="row align-items-center">
                                    <label class="col-lg-auto">Select publisher</label>
                                    <div class="col-lg-4 col-xl-3">
                                        <select class="form-control wide select2-custom publisher input-validate" name="publisher" id="teacher" data-placeholder="Select publisher">
                                            <option value="" selected>Select publisher</option>
                                            @if(isset($initial->firstRoomInfo->teachers) && !empty($initial->firstRoomInfo->teachers))
                                                @foreach($initial->firstRoomInfo->teachers as $teacher)
                                                    <option value="{{ $teacher->_id }}" data-image="{{ $teacher->profileImage }}">{{ $teacher->firstName }} {{ $teacher->lastName }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-lg-5 col-xl-5">
                                        <div class="">
                                            <div class="checkbox big checkbox-pink">
                                                <input type="checkbox" class="isPublic" id="mark" name="isPublic" value="1">
                                                <label for="mark" class="pt-2">Make this learning story visible to parents.</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="sw-default-step-2">
                                <ul class="nav nav-pills navtab-bg nav-curricula">
                                    <li class="nav-item">
                                        <a href="#tab2-1" data-toggle="tab" aria-expanded="true" class="nav-link active">
                                            <span class="d-sm-block">Upload photos/videos</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#tab2-2" data-toggle="tab" aria-expanded="false"  class="nav-link">
                                            <span class="d-sm-block">Emerging interests</span>
                                        </a>
                                    </li>
                                    @if(isset($initial->activeCurricula) && !empty($initial->activeCurricula))
                                    @foreach($initial->activeCurricula as $curricula)
                                    <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 class="badge badge-success badge-rounded">3</span> --}}</span>
                                        </a>
                                    </li>
                                    @endforeach
                                    @endif
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane show active" id="tab2-1">
                                        <div class="upload-multiple-file">
                                            <div class="upload-item">
                                                <div class="upload-file">
                                                    <i class="icon-cross"></i>
                                                    <i class="icon-plus"></i>
                                                    <i class="icon-pdf"></i>
                                                    <img src="" class="icon-image" />
                                                    <video class="icon-video" controls><source src=""></video>
                                                    <input type="file" name="media[]" class="file" data-error="uploadfile-error" accept="application/pdf,image/*,video/mp4">
                                                </div>
                                                <span class="file-name"></span>
                                            </div>
                                        </div>
                                        <div class="uploadfile-error"></div>
                                    </div>
                                    <div class="tab-pane" id="tab2-2">
                                        <p class="font-size-14">List any emerging interests here.</p>
                                        <div class="row">
                                            <div class="form-group col-lg-6">
                                                <label class="">1st Keyword</label>
                                                <input type="text" class="form-control keyword input-validate" name="interests[]" placeholder="Example: Natural Materials" value="">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label class="">2nd Keyword</label>
                                                <input type="text" class="form-control keyword input-validate" name="interests[]" placeholder="Example: Natural Materials" value="">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label class="">3rd Keyword</label>
                                                <input type="text" class="form-control keyword input-validate" name="interests[]" placeholder="Example: Natural Materials" value="">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label class="">4th Keyword</label>
                                                <input type="text" class="form-control keyword input-validate" name="interests[]" placeholder="Example: Natural Materials" value="">
                                            </div>
                                            <div class="form-group col-lg-6">
                                                <label class="">5th Keyword</label>
                                                <input type="text" class="form-control keyword input-validate" name="interests[]" placeholder="Example: Natural Materials" value="">
                                            </div>
                                        </div>
                                    </div>
                                    @php $count = 0 @endphp
                                    @if(isset($initial->activeCurricula) && !empty($initial->activeCurricula))
                                    @foreach($initial->activeCurricula as $curricula)
                                    <div class="tab-pane tab-curricula" id="tab2-{{$curricula->_id}}">
                                        {{-- <p>2 recommendations in Approaches to Learning, English Language Learning</p> --}}
                                        <div class="accordion custom-accordionwitharrow" id="accordionTheme{{$curricula->_id}}">
                                        @if(isset($curricula->themes) && !empty($curricula->themes))
                                        @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)
                                                                        @if($curricula->hasKeywords == true)
                                                                        @php
                                                                        $keywordsGoals[$goal->_id] = [ 'high' => $curricula->high, 'low' => $curricula->low, 'medium' => $curricula->medium, 'keywords' => $goal->keywords];
                                                                        @endphp
                                                                        @endif
                                                                        {{-- <span class="badge badge-small mr-1 badge-warning">Low</span>
                                                                        <span class="badge badge-small mr-1 badge-secondary">Medium</span>
                                                                        <span class="badge badge-small mr-1 badge-success">High</span>--}}
                                                                        <div class="col-12 learning-goal" data-id="{{$goal->_id}}">
                                                                            <div class="checkbox big checkbox-pink mb-2">
                                                                                <input type="checkbox" class="" name="goals[]" id="goals-{{$goal->_id}}" value="{{$goal->_id}}">
                                                                                <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)
                                                                @if($curricula->hasKeywords == true)
                                                                @php
                                                                $keywordsGoals[$goal->_id] = [ 'high' => $curricula->high, 'low' => $curricula->low, 'medium' => $curricula->medium, 'keywords' => $goal->keywords];
                                                                @endphp
                                                                @endif
                                                                <div class="col-12 learning-goal" data-id="{{$goal->_id}}">
                                                                    <div class="checkbox big checkbox-pink mb-2">
                                                                        <input type="checkbox" class="" name="goals[]" id="goals-{{$goal->_id}}" value="{{$goal->_id}}">
                                                                        <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
                                        @endif
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                            <div id="sw-default-step-3">
                                <h4 class="font-size-18">Reflections</h4>
                                <p class="font-size-14">The reflection section is never shared with parents. This step is optional.</p>
                                <div class="row mb-1">
                                    <div class="col-lg-9">
                                        @if(isset($initial->reflections) && !empty($initial->reflections))
                                        @foreach($initial->reflections as $key => $reflections)
                                        <div class="form-group">
                                            <label class="">{{$reflections->question}}</label>
                                            <input type="hidden" name="reflections[{{$key}}][_id]" value="{{$reflections->_id}}">
                                            <textarea rows="3" class="form-control" placeholder="Type here..." name="reflections[{{$key}}][answer]"></textarea>
                                        </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div id="sw-default-step-4">
                                <div class="linked-story">

                                </div>

                                <div class="row border-bottom my-5 mx-n5"></div>
                                <div class="row align-items-center">
                                    <label class="col-lg-auto">Select publisher</label>
                                    <div class="col-lg-4 col-xl-3">
                                        <select class="form-control wide select2-custom publisher input-validate" name="publisher" id="teacher1" data-placeholder="Select publisher">
                                            <option value="" selected>Select publisher</option>
                                            @if(isset($initial->firstRoomInfo->teachers) && !empty($initial->firstRoomInfo->teachers))
                                                @foreach($initial->firstRoomInfo->teachers as $teacher)
                                                    <option value="{{ $teacher->_id }}" data-image="{{ $teacher->profileImage }}">{{ $teacher->firstName }} {{ $teacher->lastName }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-lg-5 col-xl-5">
                                        <div class="">
                                            <div class="checkbox big checkbox-pink">
                                                <input type="checkbox" class="isPublic" id="mark1" name="isPublic" value="1">
                                                <label for="mark1" class="pt-2">Make this learning story visible to parents.</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-success btn-min-width mr-2 d-none" id="save" >Add Learning Story</button>
                </form>
            </div>
        </div>
    </div>
</div>

@include('school.learning-stories.ls-modal')

@endsection

@section('script-bottom')
<script type="text/javascript"> var get_child_url = "{{ route('learning-stories.get.child.teacher') }}", get_linked_story="{{route('learning-stories.child.linked.learning.stories')}}", viewStoryDetails="{{route('learning-stories.show')}}", viewPrevStory="{{ route('learning-stories.previous.list') }}"; </script>
<script defer src="{{ Helper::assets('assets/libs/smartwizard/jquery.smartWizard.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/libs/sweetalert/sweetalert.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/flatpickr/flatpickr.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    var keywordsGoals =null;
</script>
<script defer src="{{ Helper::assets('assets/js/pages/learning-story-add.js') }}" type="text/javascript"></script>
@endsection