@extends('layouts.master')

@section('css')
        <!-- third party css -->
        <link href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
        <!-- third party css end -->
@endsection

@section('content')

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box">
                                    <div class="page-title-right">
                                       
                                    </div>
                                    <h4 class="page-title">Subject Assignment</h4>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
              
                                        <form id="dataForm" name="dataForm" class="form-horizontal">
                                            @csrf 
                                            <div class="row">
                                                <div class="col-6">
                                            <div class="form-group">
                                                 <label for="courseid" class="col-sm-12 control-label">Course Name</label>
                                                 <div class="col-sm-12">
                                                    <select class="form-control" id="courseid" name="courseid">
                                                        <option value="">Select Course</option>
                                                        @foreach($courses as $course)
                                                          <option value="{{$course->id}}">{{$course->name}}</option>
                                                        @endforeach
                                                      </select>
                                                 </div>
                                             </div>

                                             <div class="form-group">
                                                <label for="batchid" class="col-sm-12 control-label">Batch</label>
                                                <div class="col-sm-12">
                                                    <select type="text" class="form-control" id="batchid" name="batchid" required="">
                                                        <option value="">Select Batch</option>
                                                    </select>       
                                                </div>
                                            </div>
                                             <div class="form-group">
                                                <label for="semester" class="col-sm-12 control-label">Semester/Year</label>
                                                <div class="col-sm-12">
                                                    <select type="text" class="form-control" id="semester" name="semester" required="">
                                                        <option value="">Select Semester</option>
                                                    </select>       
                                                </div>
                                            </div>
                                             <div class="col-sm-offset-2 col-sm-10">
                                              <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes
                                              </button>
                                             </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="form-group">
                                                         <label for="subjectid" class="col-sm-12 control-label">Subjects</label>
                                                         <div class="col-sm-12">
                                                            <select class="form-control" id="subjectid" name="subjectid[]" multiple style="height: 250px">
                                                            
                                                              </select>
                                                         </div>
                                                     </div>

                                                </div>
                                            </div>
                                         </form>



                                    </div> <!-- end card body-->
                                </div> <!-- end card -->
                            </div><!-- end col-->
                        </div>
                        <!-- end row-->


                        
                    </div> <!-- container -->
@endsection

@section('script')
         
        <!-- third party js -->
        <script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
          <!-- third party js ends -->

          <script>
            $(function () {
                $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }

         
    });

    populateBatchYear();
    saveData();

    $('#batchid').on('change', function() {
        populateSubjects();
    });

    $('#semester').on('change', function() {
        populateSubjects();
    });

   });

   function saveData()
   {
    $('#saveBtn').click(function (e) {
        e.preventDefault();
        $(this).html('Sending..');
    
        $.ajax({
          data: $('#dataForm').serialize(),
          url: "{{ route('batchwisesubject.store') }}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
            $('#saveBtn').html('Saved Changes');
         
          },
          error: function (data) {
              console.log('Error:', data);
              $('#saveBtn').html('Save Changes');
          }
      });
    });
   }

   function populateBatchYear()
   {
    $('#courseid').on('change', function() {
        var courseid = $(this).val();
        var url = '{{ route("course.show",":id") }}';
        url = url.replace(':id', courseid);

        var url1 = '{{ route("batch.showbatches",":id") }}';
        url1 = url1.replace(':id', courseid);
            if(courseid) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {                       
                        $('select[name="semester"]').empty();
                        $('select[name="semester"]').append('<option value="">Select Semester</option>');
                        for($i=1;$i<data.semester;$i++) {
                            $('select[name="semester"]').append('<option value="'+ $i +'">'+ $i +'</option>');
                        }
                        
                    }
                });

                $.ajax({
                    url: url1,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {                       
                        $('select[name="batchid"]').empty();
                        $('select[name="batchid"]').append('<option value="">Select Batch</option>');
                        $.each(data, function(i, value) {
                            //console.log(i,value);
                            $('select[name="batchid"]').append('<option value="'+ value.id +'">'+ value.batch +'</option>');
                        });   
                    }
                });
            }else{
                $('select[name="batchid"]').empty();
            }
        });
   }

   function populateSubjects()
   {
   
        var batchid = $("#batchid").val();
        var semester = $("#semester").val();
              
            if(batchid && semester) {
                var url = '{{ route("batchwisesubject.showsubjects",[":batchid",":semester"]) }}';
                url = url.replace(':batchid', batchid);
                url = url.replace(':semester', semester);
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {                       
                        $('select[name="subjectid[]"]').empty();
                        $.each(data, function(i, value) {
                            selected="";
                            if(value.selection==1)
                            {
                                selected="selected";
                            }
                            $('select[name="subjectid[]"]').append('<option value="'+ value.id +'" '+selected+'>'+ value.name +'</option>');
                        });   
                    }
                });

        
            }else{
                $('select[name="subjectid[]"]').empty();
            }
       
   }
       </script> 
        
@endsection