@extends('layouts.admin')

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

@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 new framework</h4>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <a href="javascript:;" class="btn btn-success btn-min-width" onclick="event.preventDefault();document.getElementById('save').click();">Save framework</a>
        </div>
    </div>
</div>
@endsection
@php
    $is_update = false;
    if(isset($framework) && !empty($framework)){
        $is_update = true;
    }
@endphp
@section('content')
<form method="POST" action="{{ route('admin.framework.save') }}" class="framework-form" id="framework-form" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="">
                        <h5 class="font-size-18 pb-1">Framework 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">Framework name</label>
                                    <div class="col-xl-7">
                                        <input type="text" class="form-control input-validate" name="name" value="{{ $is_update ? $framework->name : old('name') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="col-xl-4 col-form-label">Age (Month)</label>
                                    <div class="col-xl-7">
                                        <div class="row">
                                            <div class="col">
                                                <input type="number" min="0" class="form-control from" name="minAge" id="minAge" value="{{ $is_update ? $framework->minAge : old('minAge') }}" placeholder="">
                                            </div>
                                            <span class="text-nowrap col-auto px-0 pt-3">To</span>
                                            <div class="col">
                                                <input type="number" min="0" class="form-control to" name="maxAge" id="maxAge" value="{{ $is_update ? $framework->maxAge : old('maxAge') }}" placeholder="">
                                            </div>
                                        </div>
                                    </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">
                                    <label for="goalrec" class="pt-2">
                                        Does this framework have learning goal recommendations?
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row form-group 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}}">{{$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}}">{{$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}}">{{$i}} words</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <div class="high-error"></div>
                            </div>
                        </div>
                        <div class="section-repeater" data-startingIndex="1" data-first-item-remove="false">
                            <div class="r-group row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">Country</label>
                                        <div class="col-xl-7">
                                            <select class="form-control country" data-plugin="customselect" name="country[0][_id]">
                                                <option value="">Select</option>
                                                @if(isset($countries) && !empty($countries))
                                                @foreach ($countries as $country)
                                                <option value="{{$country->_id}}">{{$country->name}}</option>  
                                                @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-xl-4 col-form-label">State</label>
                                        <div class="col-xl-7">
                                            <select class="form-control multiselect state" multiple name="country[0][states][]"></select>
                                        </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 r-btnRemove mt-1"><i class="uil uil-multiply"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-3 btn-div">
                                <button type="button" class="btn btn-success btn-min-width r-btnAdd">Add another country</button>
                            </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">
                        <div class="r-group" data-id="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" checked>
                                            <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 r-btnRemove 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>
                        <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"></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"></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" disabled data-placeholder="Select an aim"></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 framework</button>
    </div>
</form>
@include('school.curriculum.addGoalModal')
@include('school.curriculum.editGoalModal')
@include('school.curriculum.addAimModal')
@include('school.curriculum.editAimModal')
@endsection

@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/multiselect/bootstrap.multiselect.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 get_state = "{{ route('admin.state') }}"; </script>
<script defer src="{{ Helper::assets('assets/js/pages/framework-add.js') }}" type="text/javascript"></script>
@endsection