@extends('layouts.master')

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

@section('main')

    <!-- Edit User -->
    <div class="modal fade" id="modal-edit-user">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit User</h4>
                </div>
                <div class="modal-body">
                    {{ Form::open(['action' => ['UsersController@update']]) }}
                    <input name="id" id="id" type="hidden"></input>
                    <div class="form-group">
                        <label for="name" class="control-label">Name</label>
                        <p id="name" name="name" class="form-control-static"></p>
                    </div>
                    <div class="form-group">
                        <!--                     <label for="email" class="control-label">Email</label> -->
                        {{ Form::label('email', 'Email') }}
                        {{ Form::email('email', Input::old('email'), ['class' => 'form-control']) }}
                        <span style="color: red;">Changing the email may cause the user to lose access to OLAS.</span>
                    </div>
                    <!--
                    <div class="form-group">
                        <label for="" class="control-label">Email</label>
                        <p id="email" name="email" class="form-control-static"></p>
    <!~~
                         {{ Form::label('email', 'Email') }}
                        <input id="email" type="email" name="email" class="role form-control" value="">
                        </input>
     ~~>
                   </div>
     -->
                    <div class="form-group">
                        {{ Form::label('role', 'Role') }}
                        <select id="role" name="role" class="role form-control">
                            <option value="1">Administrator</option>
                            <option value="2">School Coordinator</option>
                            <option value="3">Program Coordinator</option>
                            <option value="4">Professor</option>
                        </select>
                    </div>
                    <div class="form-group">
                        {{ Form::label('school', 'School or College') }}
                        <select name="school" class="school form-control">
                            <option value="0">All</option>
                            @foreach ($schools as $school)
                                <option value="{{ $school->id }}">
                                    {{ $school->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{ Form::label('program', 'Program(s)') }}
                    <div class="programs">
                        <div class="form-group">
                            <select class="program form-control" name="programs[]"></select>
                        </div>
                    </div>

                    <p id="add-program-wrapper" class="text-right">
                        <button id="add-program" class="add-program btn-xs btn btn-success"><span
                                class="glyphicon glyphicon-plus"></span></button>
                    </p>

                    <div class="form-group">
                        {{ Form::label('has_access', 'Active (has access)') }}
                        <select name="has_access" id="has_access" class="form-control">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button name="submit_roles" class="btn btn-primary" value="Save" type="submit">Save</button>
                    {{ Form::close() }}
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- New User -->
    <div class="modal fade" id="modal-new-user">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">New User</h4>
                </div>
                <div class="modal-body">
                    {{ Form::open(['action' => ['UsersController@store']]) }}
                    <input name="new_id" id="new_id" type="hidden"></input>
                    <div class="form-group">
                        <label for="new_first_name" class="control-label">Name</label>
                        {{ Form::text('new_first_name', Input::old('new_first_name'), ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        <label for="new_surnames" class="control-label">Surnames</label>
                        {{ Form::text('new_surnames', Input::old('new_surnames'), ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        <label for="new_email" class="control-label">Email</label>
                        {{ Form::text('new_email', Input::old('new_email'), ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        {{ Form::label('new_role', 'Role') }}
                        <select id="new_role" name="new_role" class="role form-control">
                            <option value="1">Administrator</option>
                            <option value="2">School Coordinator</option>
                            <option value="3">Program Coordinator</option>
                            <option value="4">Professor</option>
                        </select>
                    </div>
                    <div class="form-group">
                        {{ Form::label('new_school', 'School or College') }}
                        <select id="new_school" name="new_school" class="school form-control">
                            <option value="0">All</option>
                            @foreach ($schools as $school)
                                <option value="{{ $school->id }}">
                                    {{ $school->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{ Form::label('new_programs', 'Program(s)') }}
                    <div class="programs">
                        <div class="form-group">
                            <select class="program form-control" name="new_programs[]"></select>
                        </div>
                    </div>

                    <p id="new-add-program-wrapper" class="text-right">
                        <button id="new-add-program" class="add-program btn-xs btn btn-success"><span
                                class="add-program glyphicon glyphicon-plus"></span></button>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button name="submit_new_user" class="btn btn-primary" value="Save" type="submit">Save</button>
                    {{ Form::close() }}
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <div class="row">
        <div class="col-md-12">

            @if (count($users))
                <div class="table-responsive">
                    <table id="user_table" class="table table-striped table-condensed datatable-user">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>College/School</th>
                                <th>Program(s)</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Active</th>
                                <th>Office Phone</th>
                                <th>Cell Phone</th>
                                <th>Edit</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr class="column-search">
                                <th><input class="column-search-bar form-control" type="text" placeholder="Search" /></th>
                                <th><select class="column-search-select form-control">
                                        <option value=""></option>
                                    </select></th>
                                <th><input class="column-search-bar form-control" type="text" placeholder="Search" /></th>
                                <th><input class="column-search-bar form-control" type="text" placeholder="Search" /></th>
                                <th><select class="column-search-select form-control">
                                        <option value=""></option>
                                    </select></th>
                                <th><select class="column-search-select form-control">
                                        <option value=""></option>
                                    </select></th>
                                <th><input class="column-search-bar form-control" type="text" placeholder="Search" /></th>
                                <th><input class="column-search-bar form-control" type="text" placeholder="Search" /></th>
                                <th></th>
                            </tr>
                        </tfoot>
                        <tbody>
                            @foreach ($users as $user)
                                <tr>
                                    <td data-user-id="{{ $user->id }}" class="user-name">{{ $user->surnames }},
                                        {{ $user->first_name }}</td>

                                    <!-- If user has school, set school data -->
                                    @if ($user->school_id)
                                        <td class="user-school" data-school-id="{{ $user->school_id }}">
                                            {{ $user->school->name }}
                                        </td>
                                    @elseif(count($user->programs) > 0)
                                        <td class="user-school" data-school-id="{{ $user->programs[0]->school_id }}">
                                            {{ $user->programs[0]->school->name }}
                                        </td>
                                    @else
                                        <td>
                                            All
                                        </td>
                                    @endif

                                    <!-- If user has programs, set program data -->
                                    @if (count($user->programs))
                                        <td class="user-program">
                                            @foreach ($user->programs as $program)
                                                <p data-program-id="{{ $program->id }}">{{ $program->name }}</p>
                                            @endforeach
                                        </td>
                                    @else
                                        <td>
                                            All
                                        </td>
                                    @endif

                                    <td class="user-email">{{ $user->email }}</td>
                                    @if ($user->role == 4)
                                        <td data-role-number="4" class="user-role">Professor</td>
                                    @elseif($user->role == 3)
                                        <td data-role-number="3" class="user-role">Program Coordinator</td>
                                    @elseif($user->role == 2)
                                        <td data-role-number="2" class="user-role">School Coordinator</td>
                                    @elseif($user->role == 1)
                                        <td data-role-number="1" class="user-role">Administrator</td>
                                    @endif

                                    @if ($user->has_access)
                                        <td class="user-has-access" data-value="1">Yes</td>
                                    @else
                                        <td class="user-has-access" data-value="0">No</td>
                                    @endif
                                    <td class="col-md-2">
                                        {{ $user->office_phone }}
                                        @if ($user->office_extension)
                                            x. {{ $user->office_extension }}
                                        @endif
                                    </td>

                                    <td>
                                        {{ $user->cell_phone }}
                                    </td>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil edit-user icon-btn"></span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div>
                    <button class="btn btn-primary pull-right" id="new_user"><span class="glyphicon glyphicon-plus"></span>
                        New User</button>
                </div>

                <br><br>
            @endif
        </div>

    </div>
    <div class="row">
        <div class="col-md-3">
            <h3>User Access</h3>
            <p>Use this section to control application access. Select the preferred access level and click 'Update'.</p>

            {{ Form::open(['action' => 'UsersController@updateAccess']) }}
            <div class="form-group">
                <select name="access_level" class="form-control">
                    @if ($access_level == 1)
                        <option selected="selected" value="1">Only Administrators</option>
                    @else
                        <option value="1">Only Administrators</option>
                    @endif

                    @if ($access_level == 2)
                        <option selected="selected" value="2">Only Administrators and School Coordinators</option>
                    @else
                        <option value="2">Only Administrators and School Coordinators</option>
                    @endif

                    @if ($access_level == 3)
                        <option selected="selected" value="3">Only Administrators, School Coordinators, and Program
                            Coordinators</option>
                    @else
                        <option value="3">Only Administrators, School Coordinators, and Program Coordinators</option>
                    @endif

                    @if ($access_level == 4)
                        <option selected="selected" value="4">All users</option>
                    @else
                        <option value="4">All Users</option>
                    @endif
                </select>
            </div>

            <button type="submit" class="btn btn-primary">Update</button>
            {{ Form::close() }}
        </div>
    </div>

@stop

@section('included-js')
    @include('global._datatables_js')
@stop

@section('javascript')

    // ------------------------------------------------------------------------
    // Page Load
    // ------------------------------------------------------------------------


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

    function triggerEditModal(element)
    {
    // Set static info in modal
    var user= element.closest('tr');
    $('#id').val(user.find('.user-name').data('user-id'));
    $('#name').text(user.find('.user-name').text());
    /*         $('#email').text(user.find('.user-email').text()); */
    $('#email').val(user.find('.user-email').text());
    $('#has_access').val(user.find('.user-has-access').data('value'));



    // Select the selected user's current role
    var currentRole= user.find('.user-role').data('role-number');
    $('.role option[value="'+currentRole+'"]').prop('selected', true);

    selectSchoolandProgram(user, currentRole, $('#modal-edit-user'));

    //Open modal
    $('#modal-edit-user').modal();
    }



    // When user clicks on button to edit a user on the list
    $('.edit-user').on('click', function(e){
    triggerEditModal($(this));
    });

    // After user changes page (table is redrawn), bind modal trigger events
    $('table').on('draw.dt', function(e){

    // When user clicks on button to edit a user on the list
    $('.edit-user').on('click', function(e){
    triggerEditModal($(this));
    });
    });

    // When user clicks on button to create new user
    $('#new_user').on('click', function()
    {
    var modal = $('#modal-new-user');


    modal.find('.add-program').hide();

    // Remove all but first program
    modal.find('.program').not(':first').parent().remove();

    /* Select Admin role and "All" school and program */
    $('#new_role option[value="1"]').prop('selected', true);
    $('#new_school option[value="0"]').prop('selected', true);
    modal.find('.program option[value="0"]').prop('selected', true);

    fetchPrograms(modal);

    /* Disable school and program */
    $('#new_school').prop('disabled', true);
    modal.find('.program').prop('disabled', true);

    //Open modal
    modal.modal();
    });

    // Remove a program from the list
    $('.remove-program').on('click', function(e)
    {
    if($(this).parent().siblings().length > 0)
    $(this).parent().remove();
    });

    // On role change
    $('.role').on('change', function()
    {

    var modal = $(this).closest('.modal');
    switch($(this).find(':selected').val())
    {
    /* If admin, set both to All and disable selection on both*/
    case '1':

    modal.find('.school option[value="0"]').prop('selected', true);
    modal.find('.program option[value="0"]').prop('selected', true);
    modal.find('.school').prop('disabled', true);
    modal.find('.program').prop('disabled', true);

    // Remove all but first program
    modal.find('.program').not(':first').parent().remove();

    // Remove delete button and fix width of select
    modal.find('.program').removeClass('shortened-select');
    $('.remove-program').remove();

    //Hide button to add program
    modal.find('.add-program').hide();

    break;
    /* If scoord, set program to all and disable it */
    case '2':
    /* Disable "All" option in schools and program */
    modal.find('.school option[value="0"]').attr('disabled', true);

    if(modal.find('.school').find(':selected').val() == 0)
    {
    modal.find('.school option:enabled:first').prop('selected', true);
    }

    modal.find('.program option[value="0"]').prop('selected', true);
    modal.find('.school').prop('disabled', false);
    modal.find('.program').prop('disabled', true);

    // Remove all but first program
    modal.find('.program').not(':first').parent().remove();

    // Remove delete button and fix width of select
    modal.find('.program').removeClass('shortened-select');
    $('.remove-program').remove();

    //Hide button to add program
    modal.find('.add-program').hide();

    break;
    /* If pcoord or professor, enable everything */
    case '3':
    case '4':
    /* Disable "All" option in school */
    modal.find('.school option[value="0"]').attr('disabled', true);

    /* Enable School and select an available  option for school*/
    modal.find('.school').prop('disabled', false);

    if(modal.find('.school').find(':selected').val() == 0)
    {
    modal.find('.school option:enabled:first').prop('selected', true);
    }

    /* Enable program*/
    modal.find('.program').prop('disabled', false);

    // If it only has one child (most likely when changing from admin or scoord)
    if(modal.find('.programs').children().length == 1)
    {
    /* Fetch programs for the available school */
    fetchPrograms(modal);

    /* Disable "All" option in schools and program */
    modal.find('.program option[value="0"]').attr('disabled', true);

    /* Select available option */
    modal.find('.program option:enabled:first').prop('selected', true);
    }
    else
    {
    /* Disable "All" option in schools and program */
    modal.find('.program option[value="0"]').attr('disabled', true);
    }

    // Add delete button and fix width of select
    modal.find('.program').addClass('shortened-select');

    modal.find('.program').each(function() {

    if($(this).siblings().length ==0)
    {
    $(this).parent().append(
    ' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'
    );
    }

    });

    $('.remove-program').on('click', function(e)
    {
    if($(this).parent().siblings().length > 0)
    $(this).parent().remove();
    });

    //Hide button to add program
    modal.find('.add-program').show();
    break;
    default:
    break;
    }
    });

    $('.school').on('change', function()
    {
    var modal = $(this).closest('.modal');
    switch(modal.find('.role').find(':selected').val())
    {
    case '3':
    case '4':
    // Remove all but first program
    modal.find('.program').not(':first').parent().remove();

    fetchPrograms(modal);

    modal.find('.program option[value="0"]').attr('disabled', true);
    modal.find('.program option:enabled:first').prop('selected', true);

    break;
    }
    });

    $('.add-program').on('click', function(e)
    {
    e.preventDefault();
    var modal = $(this).closest('.modal');

    var clone = modal.find('.program:last')
    .parent()
    .clone();

    // Change name
    clone
    .children('select')
    .attr('name', 'programs[]');

    // Append
    modal.find('.programs').append(clone);


    modal.find('.remove-program').on('click', function(e)
    {
    if($(this).parent().siblings().length > 0)
    $(this).parent().remove();
    });
    });

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

    function selectSchoolandProgram(user, role, modal)
    {
    modal.find('.add-program').hide();

    switch(role)
    {
    case 1:
    fetchPrograms(modal);

    /* Select "All" in school and program */
    $('.school option[value="0"]').prop('selected', true);
    modal.find('.program option[value="0"]').prop('selected', true);

    /* Disable school and program */
    $('.school').prop('disabled', true);
    modal.find('.program').prop('disabled', true);

    break;
    case 2:

    /* Find and select user's school */
    var school_id = user.find('.user-school').data('school-id');
    $('.school option[value="'+school_id+'"]').prop('selected', true);

    /* Fetch programs */
    fetchPrograms(modal);

    /* Disable "All" option in school and select the next one*/
    $('.school option[value="0"]').attr('disabled', true);

    /* Disable all options in program */
    modal.find('.program').prop('disabled', true);

    break;
    case 3:
    case 4:
    /* Make sure school and program are not disabled */
    $('.school').prop('disabled', false);
    modal.find('.program').prop('disabled', false);

    var school_id = user.find('.user-school').data('school-id');
    $('.school option[value="'+school_id+'"]').prop('selected', true);


    var program_ids = new Array();
    modal.find('.programs').empty();

    user.find('.user-program').children().each(function(index, value)
    {
    $(this).parent().siblings().find('.remove-program').prop('disabled', true);

    var program_id = $(this).data('program-id');
    modal.find('.programs').append(
    '<div class="form-group">'+
        '<select class="program form-control shortened-select" name="programs[]"></select>'+
        ' <span class="remove-program glyphicon glyphicon-remove text-primary icon-btn"></span>'+
        '</div>'
    );

    $('.remove-program').on('click', function(e)
    {
    if($(this).parent().siblings().length > 0)
    $(this).parent().remove();
    });

    fetchPrograms(modal);
    program_ids.push(program_id);

    });

    for(var i =0; i < program_ids.length; i++) 
    { 
    	var program_id=program_ids[i]; 
    	modal.find('.program:eq('+i+') option[value="'+program_id+'" ]').prop('selected', true); 
    } 
    modal.find('.add-program').show(); 
    /* Disable "All"
        option in school and program*/
        $('.school option[value="0"]').attr('disabled', true);
        modal.find('.program option[value="0"]').attr('disabled', true);

        break;
        }
        }

        // Fetch programs associated to a specific school
        function fetchPrograms(modal, index = 1)
        {
        //If school is set to All, do not search for programs
        if(modal.find('.school').find(':selected').val()!=0)
        {
        $.ajax({
        type: 'POST',
        url: "{{ URL::action('ProgramsController@fetch') }}",
        data: { id: modal.find('.school').find(':selected').val()},
        success: function(data)
        {
        modal.find('.program').empty();
        modal.find('.program').append('<option value="0">All</option>');

        data.forEach( function (program)
        {
        modal.find('.program')
        .append('<option value="'+program.id+'">'+program.name+'</option>');
        });
        },
        async:false
        });
        }
        else
        {
        modal.find('.program').empty();
        modal.find('.program').append('<option value="0">All</option>');
        }
        }

    @stop