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','id'=>'idClass']) !!}
                            @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><option value="All">All</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();
            var classID = $( "#idClass option:selected" ).val();
            if(routeID) {
                $.ajax({
                    url: "{{url('/school/route') }}"+'/'+ classID+ '/' +sectionID + "/students",
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('#routeTable').empty();
                        $('#routeTable').append('<table class="table" id="student_routes"><thead><th>Admission No.</th><th>EC No.</th><th>Name</th><th>Class</th><th>Section</th><th>Route</th><th>Select Stop</th></thead><tbody id="tbody"></tbody></table>');
                        $.each(data, function(key, value) {
                            $('#tbody').append('<tr><td>'+value['admissionNo']+'</td><td>'+value['ecNo']+'</td><td>'+value['firstName']+' '+value['lastName']+'</td><td>'+value['className']+'</td><td>'+value['sectionName']+'</td>\n\
                                    <td><select id = "routes'+value['idStudent']+'" name="routes['+value['idStudent']+'][idRoute]" class = "form-control show-tick ms" onchange = "getStops(this,'+value['idStudent']+')" >@foreach($busroutes as $key=>$value)<option value="{{$key}}">{{$value}}</option>@endforeach</select> <label style="font-weight:bold;">Not in List? <a href="{{url('/school/routes')}}">Add New</a></label></td>\n\
                                    <td><select name="routes['+value['idStudent']+'][idStop]"  id="routestop'+value['idStudent']+'" class="form-control show-tick ms" onchange = "getRoutes(this,'+value['idStudent']+')"><option value="">--Select --</option></select></td>\n\
                                    </tr>' );
                                         
                                         
                                               
                        });
                        $('#student_routes').DataTable();
                    }
                });
            }
        });
    });  
    function getRoutes(route,id){
        var idStop = route.value;
        if(idStop != ""){
            var idRoute = $('#routes'+id).find(":selected").val();
            $.ajax({
                    url: "{{url('/school/routes-assign') }}"+'/' +id + "/route/"+ idRoute + "/stop/"+ idStop,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        
                    }
            });
        }
    }
    function getStops(selected,keyid){
        var val = selected.value;
        if(val) {
                $.ajax({
                    url: "{{url('/school/routes') }}"+'/' +val + "/stops",
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('#routestop'+keyid).empty();
                        $('#routestop'+keyid).append('<option value="">---Select Stop---</option>');
                        $.each(data, function(key, value) {
                            $('#routestop'+keyid).append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                });
                /*$.ajax({
                    url: "{{url('/school/routes') }}"+'/' +val + "/buses",
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        $('#routebus'+keyid).empty();
                        $('#routebus'+keyid).append('<option value="">---Select Bus---</option>');
                        $.each(data, function(key, value) {
                            $('#routebus'+keyid).append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                });*/
            }
    }
    
    
    function disableRoute(keyid){
        if ($('#checkbox'+keyid).is(":checked")) {
            $('#routes'+keyid).attr('disabled', 'disabled');
        }else{
            $('#routes'+keyid).prop('disabled', false);
        }
    }
</script>
@stop
//<!--<td><input type="checkbox" id="checkbox'+value['idStudent']+'" onclick="disableRoute('+value['idStudent']+')"></td><td><select name="routes['+value['idStudent']+'][idBus]"  id="routebus'+value['idStudent']+'" class="form-control show-tick ms"><option value="">--Select Bus--</option></select></td>-->