@extends('layouts.master')

@section('navigation')
    @include('local.managers.admins._new_navigation')
@stop
@section('main')

    <!-- New Rubric Modal -->
    <div class="modal fade" id="newRubricModal" tabindex="-1" role="dialog" aria-labelledby="newRubricModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="newRubricModalLabel">New Instrument</h4>
                </div>
                <div class="modal-body">
                    {{ Form::open(['action' => ['RubricsController@create']]) }}
                    <div class="form-group">
                        {{ Form::label('name', 'Name') }}
                        {{ Form::text('name', Input::old('name'), ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        {{ Form::label('criteria', 'Criteria') }}
                        <select id="criteria" name="criteria" class="form-control" multiple required>
                        </select>
                        {{ Form::textarea('criteria', Input::old('description'), ['class' => 'form-control', 'rows' => 5, 'placeholder' => 'Minimum 10 characters']) }}
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-default btn-primary">Submit</button>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Create new activity
                </div>
                <div class="panel-body">
                    {{ Form::open(['action' => 'ActivitiesController@update']) }}
                    <div class="form-group">
                        {{ Form::label('activity_type', 'Activity Type') }}
                        <select id="activity_type" name="activity_type" class="form-control">
                            @foreach ($activity_types as $activity_type)
                                {{-- @if (Input::old('activity_type') != $activity_type) --}}
                                {{-- <option value="{{ $activity_type }}">{{ $activity_type }} ({{ $program->school->name }})</option> --}}
                                {{-- @else --}}
                                {{-- <option selected value="{{ $program->id }}">{{ $program->name }} ({{ $program->school->name }})</option> --}}
                                {{-- @endif --}}
                            @endforeach
                        </select>
                        {{-- {{ Form::text('activity_type', Input::old('activity_Type'), array('class' => 'form-control', 'placeholder'=>'TEST', 'maxLength'=>5)) }} --}}
                    </div>


                    <div class="form-group">
                        {{ Form::label('outcome', 'Learning Outcome') }}
                        <select id="outcome" name="outcome" class="form-control">
                            @foreach ($outcomes as $outcome)
                                @if (Input::old('outcome') != $outcome->id)
                                    <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @else
                                    <option selected value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        {{ Form::label('objective', 'Learning Objective') }}
                        <select id="objective" name="objective[]" class="form-control" multiple required>
                            @if (Input::old('outcome') != null)
                                @foreach ($objectives_by_outcome[Input::old('outcome')] as $objective)
                                    @if (Input::old('objective') != $objective->id)
                                        <option value="{{ $objective->id }}">{{ $objective->text }}</option>
                                    @else
                                        <option selected value="{{ $objective->id }}">{{ $objective->text }}</option>
                                    @endif
                                @endforeach
                            @else
                                @foreach ($objectives_by_outcome[$outcomes->first()->id] as $objective)
                                    <option value="{{ $objective->id }}">{{ $objective->text }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="form-group">
                        {{ Form::label('instrument', 'Instrument') }}
                        <select id="instrument" name="instrument" class="form-control">
                            @foreach ($instruments as $instrument)
                                @if (Input::old('instrument') != $instrument->id)
                                    <option value="{{ $instrument->id }}">{{ $instrument->name }}</option>
                                @else
                                    <option selected value="{{ $instrument->id }}">{{ $instrument->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="button" data-toggle="modal" data-target="#newRubricModal"
                            class="btn btn-sm btn-default">New Instrument</button>
                    </div>
                    <div class="form-group">
                        {{ Form::label('transforming_action', 'Transformative Actions') }}
                        <select id="transforming_action" name="transforming_action[]" class="form-control" multiple>
                            @foreach ($transforming_actions as $transforming_action)
                                {{-- @if (Input::old('transforming_action') != $transforming_action->id) --}}
                                {{-- <option value="{{ $transforming_action->id }}">{{ $transforming_action->name }}</option> --}}
                                {{-- @else --}}
                                {{-- <option selected value="{{ $transforming_action->id }}">{{ $transforming_action->name }}</option> --}}
                                {{-- @endif --}}
                            @endforeach
                        </select>
                    </div>

                    <br>

                    {{ Form::submit('Submit', ['class' => 'btn btn-primary btn-block', 'name' => 'create_activity']) }}
                    {{ Form::close() }}
                </div>
            </div>
        </div>


    </div>
@stop

@section('javascript')

    // --------------------------------------------------------------------------
    // Page load
    // --------------------------------------------------------------------------
    const objectives = {{ $objectives_by_outcome->toJson() }};
    const criteria = {{ $criteria_by_objective->toJson() }};
    const outcomesSelect = document.getElementById('outcome');
    const objectivesSelect = document.getElementById('objective');
    const criteriaSelect = document.getElementById('criteria');

    // --------------------------------------------------------------------------
    // Functions
    // --------------------------------------------------------------------------

    // --------------------------------------------------------------------------
    // Events
    // --------------------------------------------------------------------------
    outcomesSelect.addEventListener('change', (event) => {
    var objectivesSelectOptions = [];
    objectives[event.target.value].forEach((objective) => {
    objectivesSelectOptions.push(`<option value="${objective.id}">${objective.text}</option>`);
    });
    objectivesSelect.innerHTML = objectivesSelectOptions.join();
    });

    objectivesSelect.addEventListener('change', (event) => {
    var criteriaSelectOptions = [];
    var selectedObjectives = Array.from(objectivesSelect.selectedOptions).map(v => value);
    selectedObjectives.forEach((objectiveId) => {
    criteria[objectiveId].forEach((criteriaArray) => {
    criteriaArray.forEach((criteria) => {
    criteriaSelectOptions.push(`<option value="${criteria.id}">${criteria.name}</option>`);
    });
    });
    });
    criteriaSelect.innerHTML = criteriaSelectOptions.join();
    });


@stop