@extends('layouts.master')

@section('css')

{{ HTML::style('vendor/datetimepicker-master/jquery.datetimepicker.css') }}

@stop

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

@section('main')

<div class="row">
    <div class="col-md-8">
        <p>Use this page to change the available semesters' start dates, end dates, and visibility. Start dates and end dates determine the range of time within which users enter data for each semester. Visibility determines whether a user can select that semester for viewing and/or entering data. Users cannot enter new data in a closed semester, even if it is visible.</p>
        <p><strong>Important: At least one semester must be visible, and must have started. While semesters may have overlapping dates, they cannot have the same dates.</strong></p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Visible</th>
                    <th>Save</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            @foreach ($semesters as $semester)
                <tr>
                    <td data-id="{{ $semester->id }}" class="semester-code">{{ $semester->code }}</td>
                    <td class="semester-name">{{ $semester->name }}</td>
                    <td class="semester-start"><input class="datetimepicker" type="text" value="{{ date('m/d/y H:i:s', strtotime($semester->start)) }}"></td>
                    <td class="semester-end"><input class="datetimepicker" type="text" value="{{ date('m/d/y H:i:s', strtotime($semester->end)) }}"></td>
                    <td class="semester-visible">
                        <select name="" id="">
                            @if($semester->is_visible)
                            <option selected="selected" value="1">Yes</option>
                            <option value="0">No</option>
                            @else
                            <option value="1">Yes</option>
                            <option selected="selected" value="0">No</option>
                            @endif
                        </select>
                        
                    </td>
                    <td class="semester-save"><span class="glyphicon glyphicon-floppy-disk"></span></td>
                </tr>

            @endforeach
        </table>
    </div>
</div>

@stop

@section('included-js')
<script src="{{ asset('vendor/datetimepicker-master/jquery.datetimepicker.js') }}"></script>
@stop


@section('javascript')

    // ------------------------------------------------------------------------
    // Page Load
    // ------------------------------------------------------------------------
    
    $('.datetimepicker').datetimepicker({
        format: 'm/d/y H:i:s'
    });
    

    // ------------------------------------------------------------------------
    // Events
    // ------------------------------------------------------------------------

    $('.semester-save').on('click', function(e)
    {
        e.preventDefault();

        var id = ($(this).siblings('.semester-code').data('id'));
        var start = ($(this).siblings('.semester-start').find('.datetimepicker').val());
        var end = ($(this).siblings('.semester-end').find('.datetimepicker').val());
        var visible = ($(this).siblings('.semester-visible').find(':selected').val());

        $.post(
            "{{ URL::action('SemestersController@update') }}",
            { 
                id: id,
                start: start,
                end: end,
                visible: visible
            },
            function(data)
            {
               location.reload(true);
            }
        ).fail(function() {
            alert( "error" );
        });
    });

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

    function selectSchoolandProgram(semester, role)
    {
        switch(role)
        {
            case 1:
                $('#school option[value="0"]').prop('selected', true);
                $('#program option[value="0"]').prop('selected', true);
                break;
            case 2:
                var school_id = semester.find('.semester-school').data('school-id');
                $('#school option[value="'+school_id+'"]').prop('selected', true);
                fetchPrograms();
                $('#program option[value="0"]').prop('selected', true);
                break;
            case 3:
            case 4:
                var school_id = semester.find('.semester-school').data('school-id');
                var program_id = semester.find('.semester-program').data('program-id');

                $('#school option[value="'+school_id+'"]').prop('selected', true);
                fetchPrograms();
                $('#program option[value="'+program_id+'"]').prop('selected', true);
                break;
        }
    }


@stop