@extends('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" />
@endsection
@php
    $is_duplicate = false;
    if(Route::currentRouteName() == 'curriculum.duplicate'){
        $is_duplicate = true;
    }
    $is_update = false; $themes = [];
    if(isset($curriculum) && !empty($curriculum)){
        $is_update = true;
        foreach($curriculum->themes as $theme){
            $theme->key = $theme->_id;
            if(!isset($theme->aims) || (isset($theme->aims) && empty($theme->aims))){
                $theme->hasAim = false;
            }
            if(isset($theme->aims) && !empty($theme->aims)){
                foreach ($theme->aims as $aims) {
                    $aims->key = $aims->_id;
                    if(isset($aims->goals) && !empty($aims->goals)){
                        foreach ($aims->goals as $goal) {
                            $goal->key = $goal->_id;
                            $goal->keywords = implode(',', $goal->keywords);
                        }
                    }
                }
            }
            if(isset($theme->goals) && !empty($theme->goals)){
                foreach ($theme->goals as $goal) {
                    $goal->key = $goal->_id;
                    $goal->keywords = implode(',', $goal->keywords);
                }
            }
            $themes[] = $theme;
        }
    }
@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">{{$is_duplicate ? 'Add' : 'Edit' }} curriculum</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            @if($is_duplicate==false && $is_update && isset($curriculum->reference))
            <a href="{{ $is_update ? route('curriculum.reset',['id' =>$curriculum->_id]) : 'javascript:;' }}" class="btn btn-min-width text-danger">Reset curriculum</a>
            @endif
            <a href="javascript:;" class="btn btn-success btn-min-width" onclick="event.preventDefault();document.getElementById('save').click();">Save curriculum</a>
        </div>
    </div>
</div>
@endsection

@section('content')
<form method="POST" action="{{ $is_duplicate ? route('curriculum.save') : route('curriculum.update') }}" class="curriculum-form" id="curriculum-form" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" value="{{$is_update ? $curriculum->_id : old('id')}}">
    <input type="hidden" name="curriculumType" value="{{$is_update ? $curriculum->type : 9 }}">
    @if($is_update && isset($curriculum->reference))
    <input type="hidden" name="reference" value="{{$is_update ? $curriculum->reference : old('reference')}}">
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="">
                        <h5 class="font-size-18 pb-1">Curriculum details</h5>
                    </div>
                    <div class="mt-4">
                        <input type="hidden" value="" name="themearr" id="themearr">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Curriculum name</label>
                                    <div class="col-xl-7">
                                        <input type="text" class="form-control input-validate" name="name" value="{{ $is_update ? $curriculum->name : old('name') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <div class="checkbox big checkbox-pink pt-lg-1">
                                    <input type="checkbox" class="input-validate" name="hasKeywords" id="goalrec" value="1" {{ $is_update && $curriculum->hasKeywords == "true" ? 'checked' : '' }}>
                                    <label for="goalrec" class="pt-2">
                                        Does this curriculum have learning goal recommendations?
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row hasKeyword" style="display: none">
                            <div class="col-auto">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="mr-3">
                                        <span class="badge badge-warning">Low</span>
                                    </div>
                                    <div class="col-custom-width">
                                        <select class="form-control" data-plugin="customselect" name="low" id="low" data-error="low-error">
                                            <option value="">Select</option>
                                            @for($i = 1; $i <= 100; $i++)
                                            <option value="{{$i}}" {{ $is_update && isset($curriculum->low) && $curriculum->low == $i ? 'selected' : '' }}>{{$i}} words</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="low-error"></div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="mr-3">
                                        <span class="badge badge-secondary">Medium</span>
                                    </div>
                                    <div class="col-custom-width">
                                        <select class="form-control" data-plugin="customselect" name="medium" id="medium" data-error="medium-error">
                                            <option value="">Select</option>
                                            @for($i = 1; $i <= 100; $i++)
                                            <option value="{{$i}}" {{ $is_update && isset($curriculum->medium) && $curriculum->medium == $i ? 'selected' : '' }}>{{$i}} words</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="medium-error"></div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="mr-3">
                                        <span class="badge badge-success">High</span>
                                    </div>
                                    <div class="col-custom-width">
                                        <select class="form-control" data-plugin="customselect" name="high" id="high" data-error="high-error">
                                            <option value="">Select</option>
                                            @for($i = 1; $i <= 100; $i++)
                                            <option value="{{$i}}" {{ $is_update && isset($curriculum->high) && $curriculum->high == $i ? 'selected' : '' }}>{{$i}} words</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="high-error"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="">
                        <h5 class="font-size-18 pb-1">Add new theme</h5>
                    </div>
                    <div class="mt-4 section-repeater" data-startingIndex="1" data-first-item-remove="true">
                        <input type="hidden" class="removed" name="removed" value="">
                        @if($is_update && isset($curriculum->themes) && !empty($curriculum->themes))
                        @php $count=0; @endphp
                        @foreach($curriculum->themes as $theme)
                        <div class="r-group" data-id="{{$theme->_id}}" data-key="{{$theme->key}}">
                            <div class="row mb-2">
                                <div class="col-lg-6">
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Theme title</label>
                                        <div class="col-lg-7">
                                            <input type="text" class="form-control theme-title unique" name="theme[{{$count}}][name]" value="{{$theme->name}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group row">
                                        <div class="offset-lg-1 col-auto checkbox big checkbox-pink pt-lg-1">
                                            <input type="checkbox" class="has-aim" name="theme[{{$count}}][hasAim]" id="hasAim{{$count}}" value="1" {{$theme->hasAim==true && isset($theme->aims) && !empty($theme->aims) ?'checked':''}}>
                                            <label for="hasAim{{$count}}" class="pt-2">
                                                Does this theme have an aim?
                                            </label>
                                        </div>
                                        <div class="col-xl-1 col-auto ml-auto order-xl-3 order-2 input-group-append align-items-center justify-content-end" style="visibility:{{count($curriculum->themes)>1?'visible':'hidden'}};">
                                            <span class="input-group-btn">
                                                <a href="javascript:void(0);" class="text-danger remove-theme mt-1"><i class="uil uil-multiply"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row border-bottom mt-2 mb-4 mx-n5"></div>
                        </div>
                        @php $count++; @endphp
                        @endforeach
                        @else
                        <div class="r-group" data-id="0" data-key="0">
                            <div class="row mb-2">
                                <div class="col-lg-6">
                                    <div class="form-group row">
                                        <label class="col-lg-4 col-form-label">Theme title</label>
                                        <div class="col-lg-7">
                                            <input type="text" class="form-control theme-title unique" name="theme[0][name]" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group row">
                                        <div class="offset-lg-1 col-auto checkbox big checkbox-pink pt-lg-1">
                                            <input type="checkbox" class="has-aim" name="theme[0][hasAim]" id="hasAim0" value="1">
                                            <label for="hasAim0" class="pt-2">
                                                Does this theme have an aim?
                                            </label>
                                        </div>
                                        <div class="col-xl-1 col-auto ml-auto order-xl-3 order-2 input-group-append align-items-center justify-content-end" style="visibility:hidden;">
                                            <span class="input-group-btn">
                                                <a href="javascript:void(0);" class="text-danger remove-theme mt-1"><i class="uil uil-multiply"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row border-bottom mt-2 mb-4 mx-n5"></div>
                        </div>
                        @endif
                        <div class="pt-3 btn-div">
                            <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another theme</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <h5 class="font-size-18">Add new aim</h5>
                                {{-- <p class="text-danger">Note: Please tick the box 'Does this theme have an aim?' from above.</p> --}}
                            </div>
                            <div class="col-auto ml-auto">
                                <button type="button" class="btn btn-success btn-min-width mb-2 mb-sm-0 add-aim">Add new aim</button>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-4">
                                <label class="col-form-label">Select theme</label>
                                <select class="form-control aim-theme" data-plugin="customselect" name="theme" data-placeholder="Select a theme">
                                    @if($is_update)
                                    @foreach($curriculum->themes as $key => $theme)
                                        @if($theme->hasAim==true)
                                        <option value="{{$theme->_id}}" {{$key==0?"selected":""}}>{{$theme->name}}</option>
                                        @endif
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="">
                            <table id="aim-table" class="table table-striped dt-responsive" data-title="You can manage the aim and description">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="">
                        <div class="row align-items-center">
                            <div class="col-auto"><h5 class="font-size-18">Add learning goals</h5></div>
                            <div class="col-auto ml-auto">
                                <button type="button" class="btn btn-success btn-min-width mb-2 mb-sm-0 add-goal">Add new goal</button>
                            </div>
                        </div>
                        <h5 class="font-size-18 pb-1"></h5>
                        <div class="row form-group">
                            <div class="col-md-4">
                                <label class="col-form-label">Select theme</label>
                                <select class="form-control goal-theme" data-plugin="customselect" name="theme" data-placeholder="Select a theme">
                                    @if($is_update)
                                    @foreach($curriculum->themes as $key => $theme)
                                        <option value="{{$theme->_id}}" {{$key==0?"selected":""}}>{{$theme->name}}</option>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="col-form-label">Select an aim</label>
                                <select class="form-control goal-aim" data-plugin="customselect" name="aim" data-placeholder="Select an aim">
                                    @if($is_update)
                                    @foreach($curriculum->themes as $key => $theme)
                                        @if($key == 0 && isset($theme->aims) && !empty($theme->aims))
                                        @foreach($theme->aims as $key1 => $aim)
                                            <option value="{{$aim->_id}}" {{$key1==0?"selected":""}}>{{$aim->name}}</option>
                                        @endforeach
                                        @endif
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="">
                            <table id="goal-table" class="table table-striped dt-responsive" data-title="You can manage the learning goals and keywords">
                                <thead>
                                    <tr>
                                        <th>List of goals</th>
                                        <th class="hasKeyword">Keywords</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <button type="submit" class="btn btn-success btn-min-width" id="save">Save curriculum</button>
    </div>
</form>
@include('school.curriculum.addGoalModal')
@include('school.curriculum.editGoalModal')
@include('school.curriculum.addAimModal')
@include('school.curriculum.editAimModal')
@endsection

@php
// $themes = stripslashes(json_encode($themes, JSON_HEX_QUOT | JSON_HEX_APOS ));
// $themes = str_ireplace(array('u0022'),"\\'",$themes);
// $themes = str_ireplace(array('rnrn','rnt'),'',$themes);
// $themes = str_ireplace(array("\r\n\t",'\r\n\t',"\r\n",'\r\n',"\n",'\n',"\t",'\t'),'<br/>',$themes);
@endphp
@section('script-bottom')
<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/datatables/dataTables.editor.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/bootstrap-tagsinput/bootstrap-tagsinput.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">var themes=null</script>
<script defer src="{{ Helper::assets('assets/js/pages/curriculum-add.js') }}?v=1" type="text/javascript"></script>
@endsection