@if(!isset($extension))
    @php($extension = '')
@endif

@if(!isset($display))
    @php($display = '')
@endif

@if(!isset($showLevels))
    @php($showLevels = false)
@endif

@if(!isset($showBylawLevels))
    @php($showBylawLevels = false)
@endif

@if(!isset($showPlans))
    @php($showPlans = true)
@endif

@if(!isset($plansFilter))
    @php($plansFilter = 'all')
@endif

@if(!isset($planId))
    @php($planId = null)
@endif

@if(!isset($bylaw))
    @php($bylaw = null)
@endif

@if(!isset($levelId))
    @php($levelId = null)
@endif

@if(!isset($class))
    @php($class = '')
@endif

@if(!isset($col_num_bylaw))
    @php($col_num_bylaw = 'col-md-2')
@endif

@if(!isset($col_num_plan))
    @php($col_num_plan = 'col-md-4')
@endif

@if(!isset($col_num_level))
    @php($col_num_level = 'col-md-4')
@endif


<div class="{{$col_num_bylaw}}" style="display:{{$display}}">
    <label>@lang('tr.Bylaw') <span class="required_field">*</span></label>
    <select id="search{{$extension}}_bylaw" name="bylaw" class='{{ $class }}' required>
        <option value="">@lang('tr.Select Bylaw')</option>
        @foreach($bylaws as $tempBylaw)
            <option {{($bylaw==$tempBylaw->code)?"selected":""}} value="{{ $tempBylaw->code }}">{{ strtoupper($tempBylaw->code) }}</option>
        @endforeach
    </select>
</div>
@if($showPlans)
    <div class="{{$col_num_plan}}" style="display:{{$display}}" required>
        <label>@lang('tr.Program') <span class="required_field">*</span></label>
        <select id="search{{$extension}}_plan_id" name="plan_id" class='{{ $class }}'>
            <option value="">@lang('tr.Select Program')</option>
        </select>
    </div>
@endif

@if($showLevels || $showBylawLevels)
    <div class="{{$col_num_level}}" style="display:{{$display}}">
        <select id="search{{$extension}}_level_id" name="search_level_id" class='{{ $class }}'>
            <option value="">@lang('tr.Select Level')</option>
        </select>
    </div>
@endif

<script type="text/javascript">
    $(document).ready(function() {

        var submitToken = '{{ csrf_token() }}';

        $('#search{{$extension}}_bylaw').on('change', function(){
            var plansURL = '{{ route('graduates_bylaws_plans', ['bylaw'=>'#id']) }}?filter={{$plansFilter}}';
            plansURL = plansURL.replace('#id', $(this).val());
            $.post(plansURL,  {
                "_token": submitToken
            }, function(response) {
                $('#search{{$extension}}_plan_id').find('option').remove();
                $('#search{{$extension}}_plan_id').find('optgroup').remove();
                $('#search{{$extension}}_plan_id').append($('<option>', {value:'', text:'@lang('tr.Select Study Plan')'}));
                response.forEach(function(entry) {
                    var optionGroup = $('<optgroup></optgroup>');
                    optionGroup.attr('label', entry.name);
                    entry.plans.forEach(function(entry) {
                        var option = $('<option></option>');
                        option.attr('value', entry.id).text(entry.name);
                        if(entry.id=='{{$planId}}')
                            option.attr('selected', true);
                        optionGroup.append(option);
                    });
                    $('#search{{$extension}}_plan_id').append(optionGroup);
                });
                $('#search{{$extension}}_plan_id').trigger('change');
            },'json');
        });

        $('#search{{$extension}}_bylaw').trigger('change');

        @if($showLevels)
        var levelsURL = '{{ route('studies_plan_levels', ['plan_id'=>'#id']) }}';
        $('#search{{$extension}}_plan_id').autoFill($('#search{{$extension}}_level_id'), levelsURL, submitToken, {{($levelId)?$levelId:"null"}});
        @endif

        @if($showBylawLevels)
        var levelsURL = '{{ route('studies_bylaw_levels', ['bylaw'=>'#id']) }}';
        $('#search{{$extension}}_bylaw').autoFill($('#search{{$extension}}_level_id'), levelsURL, submitToken, {{($levelId)?$levelId:"null"}});
        @endif
    });
</script>