IMMREX7

@extends('schools.school_layout')
@section('content')
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="card">
            <div class="header">
                <h2><strong>Assign Bus Route</strong></h2>
            </div>
            <div class="body">
                {!! Form::open(['url' => 'school/assignbus', 'class' => 'form-horizontal']) !!}
                <div class="row clearfix">
                    <div class="col-sm-2 form-control-label">
                        <label for="classname">Select Class</label>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            {!! Form::select('idClass',$classes,null,['class' => 'form-control show-tick ms']) !!}
                            @if ($errors->has('idClass'))
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong>{{ $errors->first('idClass') }}</strong>
                            </label>
                            @endif
                        </div>
                    </div>
                    <div class="col-sm-1 form-control-label">
                        <label for="classname">Section</label>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <select name='idSection' id="idSection" class="form-control show-tick ms"></select>
                            @if ($errors->has('idSection'))
                            <label id="minmaxlength-error" class="error" for="minmaxlength">
                                <strong>{{ $errors->first('idSection') }}</strong>
                            </label>
                            @endif
                        </div>
                    </div>
                    <div class="col-sm-2">
                        {!! Form::submit('SAVE',['class' => 'btn btn-raised btn-primary btn-round waves-effect']) !!}
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-sm-12">
                        <div class="body table-responsive">
                             <div id="routeTable"></div>
                        </div>
                    </div>
                </div>
                    {!! Form::close() !!} 
        </div>
    </div>
</div>
</div>
@stop
@section('script')
<script>
$(document).ready(function() {
        $('select[name="idClass"]').on('change', function() {
            var classID = $(this).val();
            if(classID) {
                $.ajax({
                    url: "{{url('/school/class') }}"+'/' +classID + "/sections",
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('select[name="idSection"]').empty();
                        $('select[name="idSection"]').append('<option value="">--- Select ---</option>');
                        $.each(data, function(key, value) {
                            $('select[name="idSection"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                    }
                });
            }else{
                $('select[name="idSection"]').empty();
            }
        });
        $('select[name="idSection"]').on('change', function() {
            var routeID = $(this).val();
            var sectionID = $( "#idSection option:selected" ).val();
            if(routeID) {
                $.ajax({
                    url: "{{url('/school/route') }}"+'/' +sectionID + "/students",
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('#routeTable').empty();
                        $('#routeTable').append('<table class="table"><thead><th>Admission No.</th><th>EC No.</th><th>Name</th><th>Class</th><th>Route</th><th>Dont need Transport</th></thead><tbody id="tbody"></tbody></table>');
                        $.each(data, function(key, value) {
                            $('#tbody').append('<td>'+value['admissionNo']+'</td><td>'+value['ecNo']+'</td><td>'+value['firstName']+' '+value['lastName']+'</td><td>'+value['className']+'</td>\n\
                                    <td><select id = "routes'+value['idStudent']+'" name="routes['+value['idStudent']+']" class = "form-control show-tick ms">@foreach($busroutes as $key=>$value)<option value="{{$key}}">{{$value}}</option>@endforeach</select> <label style="font-weight:bold;">Not in List? <a href="{{url('/school/busroutes')}}">Add New</a></label></td><td><input type="checkbox" id="checkbox'+value['idStudent']+'" onclick="disableRoute('+value['idStudent']+')"></td>');
                        });
                    }
                });
            }
        });
    });  
    function disableRoute(keyid){
        if ($('#checkbox'+keyid).is(":checked")) {
            $('#routes'+keyid).attr('disabled', 'disabled');
        }else{
            $('#routes'+keyid).prop('disabled', false);
        }
    }
</script>
@stop