@extends('layouts/ums_layout')
@section('title', '| Trimester')
@section('content')
@include('successMsg')


<div class="row">
  <div class="col-md-12">
    <div class="" style="">
      <div class="">
        <div class="panel panel-default" style="background-color:#708090;">
          <div class="panel-heading" style="padding-bottom:0px">
            <div class="panel-options">
              <a href="{{url('ums/addCgpa/')}}" class="btn btn-info pull-right addViewBtn" style=""><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add
                CGPA</a>
            </div>
            <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">CGPA LIST</h3>
          </div>
          <div class="panel-body panelBodyView">
            <div>

            </div>
            <table class="table table-striped table-bordered" id="accTrimesterTypeView">
              <thead>
                <tr>
                  <th width="32">SL#</th>
                  <th>Department</th>
                  <th>Exam</th>
                  <th>CGPA</th>
                  <th class="" width="80">Actions</th>
                </tr>
                {{ csrf_field() }}
              </thead>
              <tbody>
                                @foreach($cgpaViews as $cgpaView)
                <tr class="">
                  <td class="text-center slNo">{{++$no}}</td>
                  <td>{{$cgpaView->department->name}}</td>
                  <td>{{$cgpaView->exams->examName}}</td>
                  <td>{{$cgpaView->cgpa}}</td>
                  <td class="text-center" width="80">
                  <a id="editIcone" href="javascript:;" class="edit-modal" dataId="{{$cgpaView->id}}" cgpa="{{$cgpaView->cgpa}}" departmentId ="{{$cgpaView->department->id}}" departmentName="{{$cgpaView->department->name}}" examName="{{$cgpaView->exams->examName}}" examId="{{$cgpaView->exams->id}}">
                      <span class="glyphicon glyphicon-edit"></span>
                    </a>&nbsp;
                    <a id="deleteIcone" href="javascript:;" class="delete-modal" dataId="{{$cgpaView->id}}">
                      <span class="glyphicon glyphicon-trash"></span>
                    </a>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
            {{ $cgpaViews->links() }}
          </div>
        </div>
      </div>
    </div>
  </div> 
</div>

{{-- Edit Modal --}}
<div id="editModal" class="modal fade" style="margin-top:3%">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px;text-align:center">Update</h4>
      </div>
      <div class="modal-body">

        <div class="row" style="padding-bottom: 20px;">

          {!! Form::open(array('url' =>'','role' => 'form',  'class'=>'form-horizontal form-groups', 'id' =>
          'updateForm', 'name' => 'updateForm')) !!}

          {!! Form::hidden('EMCgpaHiddenId',null,['id'=>'EMCgpaHiddenId']) !!}
          <div class="col-md-12">
            <div class="col-md-12" style="padding-right:2%;">{{--1st col-md-6--}}
              <div class="form-horizontal form-groups">

                <div class="form-group">
                  {!! Form::label('department', 'Department:', ['class' => 'col-sm-4 control-label']) !!}
                  <div class="col-sm-8">
                    <select class="form-control input-sm" name="EMdepartment" id="EMdepartmentId"></select>
                  </div>
                </div>
                <div class="form-group">
                  {!! Form::label('exam', 'Exam:', ['class' => 'col-sm-4 control-label']) !!}
                  <div class="col-sm-8">
                    <select class="form-control input-sm" name="EMExam" id="EMExamId"></select>
                  </div>
                </div>
                <div class="form-group">
                  {!! Form::label('cgpa', 'CGPA:', ['class' => 'col-sm-4 control-label']) !!}
                  <div class="col-sm-8">
                    {!! Form::text('EMCgpa', null,['id'=>'EMCgpaId','class'=>'form-control','type' =>
                    'text','autocomplete'=>'off']) !!}
                  </div>
                </div>
              </div>{{--form-horizontal form-groups--}}
            </div>{{--End 1st col-md-6--}}
          </div>
        </div>{{--row--}}

        {{-- Edit ModalFooter--}}
        <div class="modal-footer">
          <button id="updateButton" class="btn actionBtn glyphicon glyphicon-check btn-success" type="submit" onclick="updateData();"><span>
              Update</span></button>
          <button class="btn btn-danger glyphicon glyphicon-remove" data-dismiss="modal" id="footer_action_button_dismis"
            type="button"><span id=""> Close</span></button>
        </div>
        {!! Form::close() !!}
      </div> {{-- End View Modal Body--}}

    </div>
  </div>
</div>
{{-- ENDS Edit Modal --}}



{{-- Delete Modal --}}
  <div id="deleteModal" class="modal fade" style="margin-top:3%">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" style="clear:both;background-color:black;color:white; padding:10px">Delete!</h4>
        </div>
        <div class="modal-body">
          <h2>Are You Confirm to Delete This Record?</h2>

          <div class="modal-footer">
          {!! Form::hidden('DMCgpaId',null,['id'=>'DMCgpaId']) !!}

            <button id="DMconfirmButton"  class="btn btn-danger" type="submit" onclick="deleteData();"> <span>Confirm</span></button>
            <button  class="btn btn-warning glyphicon glyphicon-remove" data-dismiss="modal" type="button"> Close</button>
            {!! Form::close() !!}

          </div>

        </div>
      </div>
    </div>
  </div>
  {{-- End Delete Modal --}}

@include('dataTableScript')
@endsection

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript">
$( document ).ready(function() {
 
  $(document).on('click', '.edit-modal', function() {
            $("#editModal").modal('show');
            var dataId         = $(this).attr('dataId');
            var cgpa           = $(this).attr('cgpa');
            var departmentId   = $(this).attr('departmentId');
            var departmentName = $(this).attr('departmentname');
            var examName       = $(this).attr('examName');
            var examId         = $(this).attr('examId');
            $("#EMCgpaId").val(cgpa);
            $("#EMCgpaHiddenId").val(dataId);                       
            $.ajax({
                type: 'POST',
                url: './getAllDepartment', 
                data :{departmentId:departmentId},          
                dataType: 'json',
                success: function( data ){
                   $("#EMdepartmentId").empty();
                   $("#EMdepartmentId").append("<option value="+departmentId+">"+departmentName+"</option>");

                   $("#EMExamId").empty();
                   $("#EMExamId").append("<option value="+examId+">"+examName+"</option>");

                   $.each(data['allDepartment'], function( key,obj){     
                             
                    $("#EMdepartmentId").append("<option value='"+obj.id+"'>"+obj.name+"</option>");
                   });   

                   $.each(data['allExams'], function( key,obj){                                     
                    $("#EMExamId").append("<option value='"+obj.id+"'>"+obj.examName+"</option>");
                   });             
                },
                error: function( data ){
                    // Handle error
                    //alert(data);
                    console.log(data);
                }
            });
        });


        $("#EMdepartmentId").change(function(event){
        var departmentId       =$("#EMdepartmentId").val();
        $.ajax({
            type: 'post',
            url: "./examFilteringByDepartment",
            data: {departmentId: departmentId},
            success: function(data) {
                 console.log(data);
                 $('#EMExamId').empty();
                  $("#EMExamId").append("<option value=''>Please Select Exam</option>");
                 $.each(data, function(key,value){
                   
                    $("#EMExamId").append("<option value='"+value.id+"'>"+value.examName+"</option>");
                });

            },
            error: function(argument) {
            }
        });
    });



         $(document).on('click', '.delete-modal', function() {
            $("#deleteModal").modal('show');
      
            var dataId =$(this).attr('dataId');
            $("#DMCgpaId").val(dataId);

        });

      
});


 function updateData(){    
   event.preventDefault();
   
    $.ajax({
                type: 'POST',
                url: './updateCgpa',
                data: $('#updateForm').serialize(),
                dataType: 'json',
                success: function( _response ){
                        if(_response.errors)
                        {
                           toastr.error("CGPA field is required");
                        }
                        else{
                           toastr.success("UPDATED");
                          setTimeout(function(){
                              location.reload();
                          }, 1500);  
                        }
                               
                },
                error: function( data ){
                    // Handle error
                    //alert(data);
                    console.log(data);
                }
            });
  }



  
    function deleteData() {

        event.preventDefault();
        var deleteId= $('#DMCgpaId').val();
        var csrf = "{{csrf_token()}}";

        $.ajax({
            type: 'post',
            url: './cgpaFullDelete',
            data: {deleteId: deleteId, _token: csrf},
            dataType: 'json',
            success: function( data ){


                toastr.warning("DELETED");

                setTimeout(function(){
                    location.reload();
                }, 1500);



            },
            error: function( data ){
                // Handle error
                //alert(_response.errors);
                alert('error');

            }
        });
    }

</script>