@if(!empty($skills))
{!! Form::hidden('mt_skills_sync', 1) !!}
@component('components.widget', ['title' => __('managementtools::lang.user_skills_section')])
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            {!! Form::label('mt_skills', __('managementtools::lang.assign_skills') . ':') !!}
            @show_tooltip(__('managementtools::lang.assign_skills_hint'))
            {!! Form::select(
                'mt_skills[]',
                $skills,
                array_keys($assigned_skills),
                ['class' => 'form-control select2', 'id' => 'mt_user_skills_select', 'multiple' => true, 'style' => 'width:100%']
            ) !!}
        </div>
    </div>
    <div class="col-md-12" id="mt_skill_levels_wrap">
        @foreach($skills as $skill_id => $skill_title)
            <div class="form-group mt-skill-level-row" data-skill-id="{{ $skill_id }}" style="{{ in_array($skill_id, array_keys($assigned_skills)) ? '' : 'display:none;' }}">
                <label>{{ $skill_title }} — @lang('managementtools::lang.skill_level'):</label>
                {!! Form::select(
                    'mt_skill_levels['.$skill_id.']',
                    [1 => '1', 2 => '2', 3 => '3', 4 => '4', 5 => '5'],
                    $assigned_skills[$skill_id] ?? 1,
                    ['class' => 'form-control input-sm', 'style' => 'width:80px;display:inline-block;']
                ) !!}
            </div>
        @endforeach
    </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
    function mtToggleSkillLevels() {
        var selected = $('#mt_user_skills_select').val() || [];
        $('.mt-skill-level-row').each(function() {
            var id = String($(this).data('skill-id'));
            $(this).toggle(selected.indexOf(id) !== -1 || selected.indexOf(parseInt(id, 10)) !== -1);
        });
    }
    $('#mt_user_skills_select').on('change', mtToggleSkillLevels);
    mtToggleSkillLevels();
});
</script>
@endcomponent
@endif