@extends('layouts.registrarapp')
@section('content')
<style>
    .label{color: gray;}
</style>

<div class="row">
    <div class='col-sm-12'>
        <div id="imaginary_container">
            <h3>Subject Scheduling&nbsp;<small>AY: {{$school_year->school_year}} - {{$school_year->school_year+1}}</small></h3>
            <div class="form form-group">

                <div class="col-sm-12">

                    <input type="hidden" id="school_year" value="{{$school_year->school_year}}">
                    <input type="hidden" id="period" value="{{$school_year->period}}">

                    <div id="yearsection">
                        <div class="col-sm-6">
                            <label class="label">Level</label>
                            <select id="level" class="form form-control" onchange="getSection(this.value)">
                                <option value="">Select Level</option>
                                 @foreach ($levels as $level)
                            <option value="{{$level->level}}">{{$level->level}}</option>
                            @endforeach
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label class="label">Section</label>
                            <select id="section" class="form form-control" onchange="getyearsection()">
                                <option value="">Select Section</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-12" id="courses">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    function getyearsection() {
        array = {};
        array['school_year'] = $("#school_year").val();
        array['period'] = $("#period").val();
        array['level'] = $("#level").val();
        array['section'] = $("#section").val();
        $.ajax({
            type: "GET",
            url: "/registrar/ajax/getyearsection_jhs/",
            data: array,
            success: function (data) {
                $('#courses').html(data);
            }

        });
    }
    function getSection(level) {
    array = {};   
    array['track'] = "";
        $.ajax({
            type: "GET",
            url: "/registrar/ajax/jhs_course_schedule/getsection/" + level,
            data: array,
            success: function (data) {
                $('#section').html(data);
            }
        }
        );
    }
</script>
@stop