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

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/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/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    @media (max-width:576px) {
        .accordion .font-size-18 {
            font-size: 16px!important;
        }
    }
    .select-all-input{
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(15, 160, 91, 0.1);
        color: #0fa05b;
        border-radius: 25px;
        line-height: 18px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }
    .btn-view-shared-report.disabled{
        opacity: 0.5;
    }
</style>
@endsection

@php
$currentTab = 1;
if(app('request')->input('t')){
    $currentTab = app('request')->input('t');
}
$currentPage = 1;
if(app('request')->input('page')){
    $currentPage = app('request')->input('page');
}
$sroom = "";
if(app('request')->input('room')){
    $sroom = app('request')->input('room');
}
$schild = "";
if(app('request')->input('child')){
    $schild = app('request')->input('child');
}
$childWithReports = [];
if(isset($init->childWithReports) && !empty($init->childWithReports)) {
    $childWithReports = $init->childWithReports;
}
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-auto">
        <h4 class="mb-0 mt-0 font-weight-medium">Learning story analysis</h4>
        <p class="mb-0">Learn how to use the learning analysis section <a href="https://intercom.help/teachkloud/en/articles/5859332-learning-story-analysis-track-progress" target="_blank">here</a>.</p>
    </div>
    <div class="col-auto ml-sm-auto">
        <div class="form-inline float-md-right mt-3 mt-md-0">
            <div class="">
                <a href="https://www.teachkloud.com/free-preschool-activities/" target="_blank" class="btn btn-pink btn-min-width mr-2 mb-md-0 mb-2">View Preschool activities</a>
                <button type="button" class="btn btn-success btn-min-width mb-md-0 mb-2" data-toggle="modal" data-target="#downloadReport">Download report</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card no-loader">
            <div class="card-body pb-3">
                <div class="row px-3">
                    <div class="col-md-auto">
                        <ul class="nav nav-pills navtab-bg nav-main">
                            <li class="nav-item">
                                <a href="{{ $currentTab == 1 ? '#tab1' : route($viewVars['routePrefix'].'learning-story-analysis', ['t' => 1]) }}" {{ $currentTab == 2 ? 'data-toggle="tab"' : '' }} data-target="#tab1, #tab1_else" aria-expanded="{{ $currentTab == 1 ? true : false }}" class="nav-link {{ $currentTab == 1 ? 'active' : '' }}">Summary</a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ $currentTab == 2 ? '#tab2' : route($viewVars['routePrefix'].'learning-story-analysis', ['t' => 2]) }}" {{ $currentTab == 2 ? 'data-toggle="tab"' : '' }} data-target="#tab2, #tab2_else" aria-expanded="{{ $currentTab == 2 ? true : false }}"  class="nav-link {{ $currentTab == 2 ? 'active' : '' }}">Next steps</a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ $currentTab == 3 ? '#tab3' : route($viewVars['routePrefix'].'learning-story-analysis', ['t' => 3]) }}" {{ $currentTab == 2 ? 'data-toggle="tab"' : '' }} data-target="#tab3, #tab3_else" aria-expanded="{{ $currentTab == 3 ? true : false }}"  class="nav-link {{ $currentTab == 3 ? 'active' : '' }}">Profile</a>
                            </li>
                        </ul>
                    </div>
                    @if($currentTab == 3)
                    <div class="col-md-auto ml-md-auto align-self-center mt-3 mt-md-0">
                        <a data-href="{{ route($viewVars['routePrefix'].'learning-story-analysis.view.shared.reports', [ 'child' => "_child" ]) }}" class="text-pink font-weight-semibold btn-view-shared-report disabled">View shared reports</a>
                    </div>
                    @endif
                </div>
                <div id="tab-content" class="tab-content">
                    @if($currentTab == 1)
                    <div class="tab-pane {{ $currentTab == 1 ? 'show active' : '' }}" id="tab1">
                        <form action="" method="POST" class="">
                            @csrf
                            <div class="row">
                                <div class="col-xl-3 col-md-4 form-group">
                                    <label class="font-weight-medium">Select framework</label>
                                    <select class="form-control wide framework" data-plugin="customselect" name="framework" id="framework" data-placeholder="Select framework">
                                        {{-- <option value="">Select framework</option> --}}
                                        @if(isset($init->frameworks) && !empty($init->frameworks))
                                        @foreach($init->frameworks as $key => $framework)
                                            <option value="{{$framework->_id}}" {{ $key == 0 ? 'selected' : '' }}>{{$framework->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-xl-3 col-md-4 form-group">
                                    <label class="font-weight-medium">Select room</label>
                                    <select class="form-control wide room" data-plugin="customselect" name="room" id="room" data-placeholder="Select room">
                                        <option value="">Select room</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                        @foreach($init->roomList as $key => $room)
                                            <option value="{{$room->_id}}" {{ $key == 0 ? 'selected' : '' }}>{{$room->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-xl-3 col-md-4 form-group">
                                    <label>Select children</label>
                                    <select class="wide select2-custom children" name="child" id="children" data-placeholder="Select children">
                                        <option value="-1" selected data-count="0">All children</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                            @foreach ($init->roomList as $key => $room)
                                                @if(isset($room->childs) && !empty($room->childs))
                                                    @foreach ($room->childs as $child)
                                                        <option value="{{ $child->_id }}" {{ $key == 0 ? '' : 'disabled'}} data-room="{{ $room->_id }}" data-image="{{ $child->profileImage }}">{{ $child->name }}</option>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    @elseif($currentTab == 2)
                    <div class="tab-pane {{ $currentTab == 2 ? 'show active' : '' }}" id="tab2">
                        <form action="" method="POST" class="">
                            @csrf
                            <div class="row">
                                <div class="col-xl-3 col-md-4 form-group">
                                    <select class="form-control wide room" data-plugin="customselect" name="room" id="room1" data-placeholder="Select room">
                                        <option value="">Select room</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                        @foreach($init->roomList as $key => $room)
                                            <option value="{{$room->_id}}" {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) || $key == 0 ? 'selected' : '' }}>{{$room->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-xl-3 col-md-4 form-group has-child" style="display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}">
                                    <select class="wide select2-custom children" name="child" id="children1" data-placeholder="Select child">
                                        <option value="-1" {{ isset($schild) && $schild == "" ? 'selected' : '' }}>Select child</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                            @foreach ($init->roomList as $key => $room)
                                                @if(isset($room->childs) && !empty($room->childs))
                                                    @foreach ($room->childs as $key2 => $child)
                                                        <option value="{{ $child->_id }}" {{ (isset($schild) && $schild != "" && $schild == $child->_id ) || ( $schild == "" && $key == 0 && $key2 == 0) ? 'selected' : '' }} {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) || $key == 0 ? '' : 'disabled'}} data-room="{{ $room->_id }}" data-image="{{ $child->profileImage }}">{{ $child->name }}</option>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </form>
                        <div class="row border-bottom mb-5 mt-3 mx-n5"></div>
                        <div class="no-child" style="display:none">
                            <h3 class="font-size-19">There are no children in this room.</h3>
                            {{-- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p> --}}
                            @if($viewVars['userType'] == 0)
                            <a href="{{ route('children.create') }}" class="btn btn-success">Add child</a>
                            @endif
                        </div>
                        <div class="no-goal" style="display:none">
                            <h3 class="font-size-19">No learning goals</h3>
                            {{-- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p> --}}
                            <a data-href="{{ route($viewVars['routePrefix'].'learning-story-analysis.assign-next-steps', ['id' => '_room', 'child' => '_child']) }}" class="btn btn-success btn-assign-next-step">Add learning goals</a>
                        </div>
                        <div class="has-child has-goal" style="display:none">
                            <div class="row align-items-center mb-4">
                                <div class="col-auto"><h3 class="font-size-18">Next steps for <span class="child-name"></span></h3></div>
                                <div class="col-sm-auto ml-sm-auto mt-sm-0 mt-2">
                                    <a data-href="{{ route($viewVars['routePrefix'].'learning-story-analysis.assign-next-steps', ['id' => '_room', 'child' => '_child']) }}" class="btn btn-success btn-assign-next-step">Assign next steps</a>
                                </div>
                            </div>
                            <div class="accordion custom-accordionwitharrow next-steps" id="tab2-accordion">

                            </div>
                            <div class="">
                                <button type="button" class="btn btn-success btn-sm btn-prev float-left" data-page="1" style="display: none">Previous</button>
                                <button type="button" class="btn btn-success btn-sm btn-next float-right" data-page="2" style="display: none">Next</button>
                            </div>
                        </div>
                    </div>
                    @elseif($currentTab == 3)
                    <div class="tab-pane {{ $currentTab == 3 ? 'show active' : '' }}" id="tab3">
                        <form action="" method="POST" class="">
                            @csrf
                            <div class="row">
                                <div class="col-xl-3 col-md-4 form-group">
                                    <select class="form-control wide room" data-plugin="customselect" name="room" id="room2" data-placeholder="Select room">
                                        <option value="">Select room</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                        @foreach($init->roomList as $key => $room)
                                            <option value="{{$room->_id}}" {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) || $key == 0 ? 'selected' : '' }}>{{$room->name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-xl-3 col-md-4 form-group has-child" style="display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}">
                                    <select class="wide select2-custom children" name="child" id="children2" data-placeholder="Select child">
                                        <option value="-1" {{ isset($schild) && $schild == "" ? 'selected' : '' }}>Select child</option>
                                        @if(isset($init->roomList) && !empty($init->roomList))
                                            @foreach ($init->roomList as $key => $room)
                                                @if(isset($room->childs) && !empty($room->childs))
                                                    @foreach ($room->childs as $key2 => $child)
                                                        @php $dob = \Carbon\Carbon::parse($child->dob)->diffInMonths(\Carbon\Carbon::now()); @endphp
                                                        <option value="{{ $child->_id }}" {{ (isset($schild) && $schild != "" && $schild == $child->_id ) || ( $schild == "" && $key == 0 && $key2 == 0) ? 'selected' : '' }} {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) || $key == 0 ? '' : 'disabled'}} data-room="{{ $room->_id }}" data-image="{{ $child->profileImage }}" data-age="{{$dob}}">{{ $child->name }}</option>
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-auto">
                                    <a data-href="{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.add', [ 'child' => "_child", 'room' => '_room' ]) }}" class="btn btn-success text-white mr-2 btn-add-response mt-2 mt-md-0 has-child" style="width: 50px;height: 50px;padding: 13px;display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}"><i class="icon-small-plus" style="width: 21px;height: 21px;display:block;"></i></a>
                                    <a href="{{ route($viewVars['routePrefix'].'learning-story-analysis.edit-assessment-form')}}" class="btn btn-pink">Edit form</a>
                                </div>
                                <div class="col-md-auto ml-md-auto pl-md-0 form-group align-self-center has-child" style="display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}">
                                    <a href="javascript:;" class="btn btn-success text-white btn-make-visible mt-2 mt-md-0">Share reports with parents</a>
                                </div>
                            </div>
                        </form>
                        <div class="has-child mt-3 mt-md-0" style="display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}">
                            @if($viewVars['userType'] == 0)
                            <a data-href="{{ route('learning-stories', ['child' => '_child', 'room' => '_room', 'tracker' => 1]) }}" class="view-learning-story-link text-underline">View learning stories</a> for this child.
                            @endif
                        </div>
                        <div class="row no-child border-bottom mb-5 mt-3 mx-n5"></div>
                        <div class="no-child">
                            <h3 class="font-size-19">There are no children in this room.</h3>
                            {{-- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p> --}}
                            @if($viewVars['userType'] == 0)
                            <a href="{{ route('children.create') }}" class="btn btn-success">Add child</a>
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div id="tab-content-else" class="tab-content">
    @if($currentTab == 1)
    <div class="tab-pane {{ $currentTab == 1 ? 'show active' : '' }}" id="tab1_else">
        <div class="row">
            <div class="col-md-12">
                <div class="no-child card">
                    <div class="card-body">
                        <h3 class="font-size-19">There are no children in this room.</h3>
                        @if($viewVars['userType'] == 0)
                        <a href="{{ route('children.create') }}" class="btn btn-success">Add child</a>
                        @endif
                    </div>
                </div>
                <div class="has-child card">
                    <div class="card-body pb-3">
                        <h3 class="text-center font-size-20 mb-5">Goals in <span class="framework-name">-</span> framework</h3>
                        <div id="framework-bar-chart" class="chart-card"></div>
                        <div class="framework-bar-chart-no-data text-center pb-3" style="display:none;">No data found</div>
                    </div>
                </div>
                <div class="has-child card">
                    <div class="card-body">
                        <div class="summary-no-data text-center py-5" style="display:none;">No data found</div>
                        <div class="row px-3">
                            <ul class="nav nav-pills navtab-bg nav-summary"></ul>
                        </div>
                        <div id="tab-content" class="tab-content tab-summary-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @elseif($currentTab == 3)
    <div class="tab-pane {{ $currentTab == 3 ? 'show active' : '' }}" id="tab3_else">
        <div class="row">
            <div class="col-md-12">
                <div class="card has-child" style="display: {{ (isset($sroom) && $sroom != "" && $sroom == $room->_id) ? 'block' : 'none'}}">
                    <div class="card-body pb-3">
                        <div class="row">
                            <ul class="nav nav-pills navtab-bg nav-curricula nav-profile">
                                <li class="nav-item">
                                    <a href="#tab3-0" data-toggle="tab" aria-expanded="true"  class="nav-link active assessment">
                                        <span class="d-block">Assessment</span>
                                    </a>
                                </li>
                                @if(isset($init->frameworks) && !empty($init->frameworks))
                                @foreach($init->frameworks as $key => $framework)
                                <li class="nav-item">
                                    <a href="#tab3-fram-{{$key}}" data-toggle="tab" aria-expanded="{{ $key == 0 ? 'true' : 'false' }}"  class="nav-link {{ $key == 0 ? '' : 'collapsed' }}" data-id="{{$framework->_id}}" data-framework="{{$framework->isFramework}}" data-minAge="{{$framework->isFramework && isset($framework->minAge) && $framework->minAge > 0 ? $framework->minAge : '' }}" data-maxAge="{{$framework->isFramework && isset($framework->minAge) && $framework->minAge > 0 ? $framework->maxAge : '' }}" style="display:{{$framework->isFramework ? "none" : "block"}}">
                                        <span class="d-sm-block">{{$framework->name}} {{$framework->isFramework && (isset($framework->minAge) && $framework->minAge > 0 || isset($framework->maxAge) && $framework->maxAge > 0) ? '('. $framework->minAge .'-'. $framework->maxAge .' months)' : '' }}</span>
                                    </a>
                                </li>
                                @endforeach
                                @endif
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div class="tab-pane tab-curricula active" id="tab3-0">
                                <div class="not-assessment mt-2">
                                    <h5 class="font-size-19">Assessment details not added for this child.</h5>
                                    {{-- <p class="mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</p> --}}
                                    <a data-href="{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.add', [ 'child' => "child", 'room' => 'room' ]) }}" class="btn btn-success text-white btn-add-response">+ Add new</a>
                                </div>
                                <div class="has-assessment" style="display: none">
                                    <table class="table table-striped dt-responsive assessment-table">
                                        <thead>
                                            <tr>
                                                <th>Form submitted on</th>
                                                <th>Form submitted by</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                            @if(isset($init->frameworks) && !empty($init->frameworks))
                            @foreach($init->frameworks as $key => $framework)
                            <div class="tab-pane tab-curricula" id="tab3-fram-{{$key}}">
                                <div class="accordion custom-accordionwitharrow" id="tab3-2-accordion-{{$framework->_id}}">

                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<div class="modal modal-large fade" id="downloadReport" role="dialog" aria-labelledby="" aria-modal="true">
    <form id="download-form" action="{{ route($viewVars['routePrefix'].'learning-story-analysis.report.download') }}" method="GET" class="form-horizontal download-report-form">
        @csrf
        <input type="hidden" name="utcOffset" class="utcOffset" value="">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Download report</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2 pb-0">
                    <div class="">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Select date</label>
                                <div class="row date-group">
                                    <div class="col-md">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input from-date" name="fromDate" value="" placeholder="">
                                    </div>
                                    <span class="text-nowrap col-md-auto px-0 py-3 text-center">To</span>
                                    <div class="col-md">
                                        <span class="flatpickr-arrow"></span>
                                        <input type="text" class="form-control flatpickr flatpickr-input to-date" name="toDate" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label class="mb-3">Title</label>
                                <input class="form-control" type="text" name="title">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <div class="checkbox medium checkbox-pink">
                                        <input type="checkbox" class="checkbox-type" name="report[]" id="type1-1" value="1" checked data-error="type-error">
                                        <label for="type1-1" class="pt-1">Include observed or achieved areas</label>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="checkbox medium checkbox-pink">
                                        <input type="checkbox" class="checkbox-type" name="report[]" id="type1-2" value="2" data-error="type-error">
                                        <label for="type1-2" class="pt-1">Include not observed or achieved areas</label>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="checkbox medium checkbox-pink">
                                        <input type="checkbox" class="checkbox-type" name="report[]" id="type1-3" value="3" data-error="type-error">
                                        <label for="type1-3" class="pt-1">Include next steps</label>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="checkbox medium checkbox-pink">
                                        <input type="checkbox" class="checkbox-type" name="report[]" id="type1-4" value="4" data-error="type-error">
                                        <label for="type1-4" class="pt-1">Include assessments</label>
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="checkbox medium checkbox-pink">
                                        <input type="checkbox" class="checkbox-type" name="report[]" id="type1-5" value="5" data-error="type-error">
                                        <label for="type1-5" class="pt-1">Include developing areas</label>
                                    </div>
                                </div>
                            </div>
                            <div class="type-error"></div>
                        </div>
                        <div class="col-12 mt-2 child-section">
                            <div class="row align-items-center mb-3">
                                <label class="col mb-0">Select children</label>
                            </div>
                            <div class="form-group">
                                @if(isset($init->roomList) && !empty($init->roomList))
                                <div class="accordion custom-accordionwitharrow" id="accordionChild">
                                    @php $count = 1 @endphp
                                    @foreach($init->roomList as $room)
                                    @if(isset($room->childs) && !empty($room->childs))
                                    <div class="card shadow-none border">
                                        <div class="card-header mb-2" id="headingChild{{$count}}">
                                            <div class="row align-items-center">
                                                <a href="javascipt:;" data-toggle="collapse" data-target="#collapseChild{{$count}}" aria-expanded="{{ $count == 1 ? 'true' : 'false' }}" aria-controls="collapseChild{{$count}}" class="text-grey col order-1 {{ $count == 1 ? '' : 'collapsed' }}"><h5 class="m-0 font-size-18 policy-title">{{ $room->name }}</h5></a>
                                                <a href="javascipt:;" data-toggle="collapse" data-target="#collapseChild{{$count}}" aria-expanded="{{ $count == 1 ? 'true' : 'false' }}" aria-controls="collapseChild{{$count}}" class="text-grey col-auto order-2 order-sm-3 {{ $count == 1 ? '' : 'collapsed' }}"><i class="uil uil-angle-down d-inline-block accordion-arrow"></i></a>
                                            </div>
                                        </div>
                                        <div id="collapseChild{{$count}}" class="collapse {{ $count == 1 ? 'show' : '' }}" aria-labelledby="headingChild{{$count}}" data-parent="#accordionChild">
                                            <div class="card-body px-3">
                                                @if(isset($room->childs) && !empty($room->childs))
                                                    <div class="row">
                                                    @php $ccount = 1 @endphp
                                                    <div class="col-md-6 mb-3 px-3 child-list-item">
                                                        <div class="media">
                                                            <div class="select-all-input">{{ count($room->childs) }}</div>
                                                            <div class="media-body ml-2 pr-2">
                                                                <span class="font-weight-medium">Select all</span>
                                                            </div>
                                                            <div class="checkbox medium checkbox-pink">
                                                                <input type="checkbox" name="selectAll" class="selectAll" id="selectAll-{{$room->_id}}" value="{{$room->_id}}">
                                                                <label for="selectAll-{{$room->_id}}" class="pt-4 pl-4"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @foreach ($room->childs as $child)
                                                    <div class="col-md-6 mb-3 px-3 child-list-item">
                                                        <div class="media">
                                                            <img src="{{ $child->profileImage }}" alt="Child" class="img-child small">
                                                            <div class="media-body ml-2 pr-2">
                                                                <span class="font-weight-medium">{{ $child->name }}</span>
                                                            </div>
                                                            <div class="checkbox medium checkbox-pink">
                                                                <input type="checkbox" class="room-child input-validate" name="children[]" id="child-{{$count}}-{{$ccount}}" value="{{ $child->_id }}" data-error="child-errors">
                                                                <label for="child-{{$count}}-{{$ccount}}" class="pt-4 pl-4"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @php $ccount++ @endphp
                                                    @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    @php $count++ @endphp
                                    @endif
                                    @endforeach
                                </div>
                                @endif
                            </div>
                            <div class="child-errors"></div>
                        </div>
                        <div class="col-12 mt-2 framework-section">
                            <div class="row align-items-center mb-3">
                                <label class="col mb-0">Select frameworks (optional)</label>
                            </div>
                            <div class="form-group row">
                            @if(isset($init->frameworks) && !empty($init->frameworks))
                                <div class="col-md-6 mb-3 px-3 child-list-item">
                                    <div class="media">
                                        <div class="media-body ml-2">
                                            <span class="font-weight-medium">Select all</span>
                                        </div>
                                        <div class="checkbox medium checkbox-pink">
                                            <input type="checkbox" name="selectAll" class="selectAll" id="selectAll-0" value="1" data-target=".framewotk-input">
                                            <label for="selectAll-0" class="pt-4 pl-4"></label>
                                        </div>
                                    </div>
                                </div>
                                @foreach($init->frameworks as $key => $framework)
                                    <div class="col-md-6 mb-3 px-3 child-list-item">
                                        <div class="media">
                                            <div class="media-body ml-2">
                                                <span class="font-weight-medium">{{ $framework->name }}</span>
                                            </div>
                                            <div class="checkbox medium checkbox-pink">
                                                <input type="checkbox" class="input-validate framewotk-input" name="frameworks[]" id="framework-{{ $framework->_id }}" value="{{ $framework->_id }}" data-error="framework-errors">
                                                <label for="framework-{{ $framework->_id }}" class="pt-4 pl-4"></label>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            </div>
                            <div class="framework-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width">Download report</button>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal modal-large fade" id="viewAssessmentModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="media">
                    <img src="{{ Helper::assets('assets/images/dummy/children/1.png') }}" class="img-child">
                    <div class="media-body media-right">
                        <h3 class="modal-title mb-1" id="">Assessment details</h3>
                        <p class="mb-0"><span class="date"></span> <span class="before"></span>Details added by <span class="added-by"></span></p>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-2 pb-3">
            </div>
        </div>
    </div>
</div>

@if($currentTab == 3)
<div class="modal modal-large fade" id="makeVisibleToParentModal" role="dialog" aria-labelledby="" aria-modal="true">
    <form action="{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.change-setting') }}" method="POST" class="form-horizontal setting-form">
        @csrf
        <input type="hidden" name="utcOffset" class="utcOffset" value="">
        <input type="hidden" name="childs[]" class="child" value="">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title mb-1" id="">Share reports with <span class="child-name"></span>’s parents</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-0">
                    <div class="form-group row">
                        <div class="col-md-12">
                            <label class="mb-3">Select date range</label>
                            <div class="row date-group">
                                <div class="col-md">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input from-date" name="fromDate" value="" placeholder="">
                                </div>
                                <span class="text-nowrap col-md-auto px-0 py-3 text-center">To</span>
                                <div class="col-md">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control flatpickr flatpickr-input to-date" name="toDate" value="" placeholder="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3">
                            <div class="checkbox medium checkbox-pink">
                                <input type="checkbox" class="checkbox-setting-type" name="lsaSettings[]" id="setting-type-1" value="lsa1" checked data-error="type-error">
                                <label for="setting-type-1" class="pt-1">Share observed or achieved areas reports</label>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="checkbox medium checkbox-pink">
                                <input type="checkbox" class="checkbox-setting-type" name="lsaSettings[]" id="setting-type-2" value="lsa2" data-error="type-error">
                                <label for="setting-type-2" class="pt-1">Share not observed or achieved areas reports</label>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="checkbox medium checkbox-pink">
                                <input type="checkbox" class="checkbox-setting-type" name="lsaSettings[]" id="setting-type-3" value="lsa3" data-error="type-error">
                                <label for="setting-type-3" class="pt-1">Share next steps records</label>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="checkbox medium checkbox-pink">
                                <input type="checkbox" class="checkbox-setting-type" name="lsaSettings[]" id="setting-type-4" value="lsa4" data-error="type-error">
                                <label for="setting-type-4" class="pt-1">Share assessments reports</label>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="checkbox medium checkbox-pink">
                                <input type="checkbox" class="checkbox-setting-type" name="lsaSettings[]" id="setting-type-5" value="lsa5" data-error="type-error">
                                <label for="setting-type-5" class="pt-1">Share developing areas</label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3 mb-2">
                        <label>Select other children to share the same report with their parents:</label>
                    </div>
                    <div class="row other-childs">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-min-width btn-setting-save">Save</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endif
@endsection

@section('script-bottom')
@if($currentTab == 3)
<script>
    var children = @json($init->roomList ?? []);
    var childWithReports = @json($childWithReports);
</script>
@endif
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/moment/moment.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 defer src="{{ Helper::assets('assets/libs/apexcharts/apexcharts.min.js') }}" type="text/javascript"></script>
<script>
    var currentTab = parseInt("{{ $currentTab }}");
    var currentPage = parseInt("{{ $currentPage }}");
    var get_summary_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.summary') }}";
    var edit_step_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.edit-steps', ['id' => '_id', 'page' => '_page']) }}";
    var get_next_steps_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.get-next-steps') }}";
    var delete_steps_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.delete-steps') }}";
    var assessment_list_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.list') }}";
    var assessment_delete_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.delete') }}";
    var assessment_view_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.view') }}";
    var assessment_view_observed_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.view.observed') }}";
    var assessment_mark_observed_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.mark.observed') }}";
    var assessment_remove_observed_url = "{{ route($viewVars['routePrefix'].'learning-story-analysis.assessment.remove.observed') }}";
    var assessment_edit_url = "{{route($viewVars['routePrefix'].'learning-story-analysis.assessment.edit', ['id' => '_id', 'room' => '_room'])}}";
</script>
<script defer src="{{ Helper::assets('assets/js/pages/learning-story-analysis.js') }}?v=4" type="text/javascript"></script>
@endsection