@extends('layouts.master')

@section('navigation')
    @include('local.managers.admins._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(array('action' => array('RubricsController@create'))) }}
                    <div class="form-group">
                        {{ Form::label('name', 'Name') }}
                        {{ Form::text('name', Input::old('name'), array('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'), array('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(array('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', array('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