@extends('layouts.master')
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('eliteadmin/node_modules/rateyo/jquery.rateyo.css') }}">
@endsection
@section('content')
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
      <h4 class="text-themecolor">Assessment</h4>
  </div>
  <div class="col-md-7 align-self-center text-right">
      <div class="d-flex justify-content-end align-items-center">         
          
      </div>
  </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
            <div class="row">
            <div class="col-sm-12">
              
                <div class="row">
                  <div class="col-sm-2">
                  <div class="avatar">
                    <center>
                        <img style="width: 150px;height: 150px" src="{{ asset('eliteadmin/images/users/user.png') }} " alt="Photo">
                     
                    </center>
                  </div>
                  <center></center>
                  
                </div>
                <div class="col-sm-3">
                  <div class="desc">
                    <div class="title text-muted">Current School Year</div>
                    <strong>{{$current->meta_value}}</strong><br>
                    <div class="title text-muted">Semester</div>
                    <strong>Odd Semester</strong><br>
                    
                    </div>

                    
                  </div>
                  <div class="col-sm-3">
                  <div class="desc">
                    <div class="title text-muted">Full Name</div>
                    <strong>{{$student->nama_lengkap}}</strong>
                    <div class="title text-muted">NIK</div>
                    <strong>{{$student->NIS}}</strong>
                    
                  </div>
                  
                </div>
                   
                  <div class="col-sm-4">
                            <div class="desc">
                            <div class="title text-muted">Class</div>
                            <strong>{{$student->nama_kelas}}</strong>
                            <div class="title text-muted">Grade</div>
                            <strong>{{$student->nama}}</strong>
                            </div>
                          </div>
                  
                  
                </div>
             
              
                </div>              
                
            </div>
          </div>
                  
                  <hr>
                <div class="col-12 row">

                  <div class="table-responsive col-12">
                    {{-- @if (isset($kelas)) --}}
                    <div class="ribbon-wrapper card">
                     <div class="ribbon ribbon-bookmark  ribbon-success">
                      @if ($assess->kategori == 'pyp')
                      {{-- expr --}}{{$course->unit_of_inquiry}}
                      @elseif ($assess->kategori == 'course')
                      {{$course->mata_pelajaran}}
                      @elseif ($assess->kategori == 'leaner')
                      Learner Profile
                      @endif
                      </div>
                      <div class="card-body">
                        <form id="form_score">
                          <input type="hidden" name="id_assessment_detail" value="{{$assess->id}}">
                          
                        
                        <div class="card-title row">
                        </div>
                        <table id="" class="table table-striped table-bordered"  >
                          <thead>
                              <tr>
                                  <th width="5%">No</th>
                                  <th>the subject of the assessment</th>
                                  <th>Achievenment <br> NI | G | VG | E</th>
                              </tr>
                          </thead>
                          <tbody>
                            @php
                              $no=1;
                            @endphp
                            @foreach ($subject as $row)
                              <tr>
                                <td>{{$no++}}</td>
                                <td>
                                  @if ($assess->kategori == 'pyp')
                                   {{$row->line_inquiry}}
                                  @elseif ($assess->kategori == 'course')
                                  {{$row->detail}}
                                  @elseif ($assess->kategori == 'leaner')
                                  <b>{{$row->subject}}</b> <br> <small>{{$row->detail}}</small>
                                  @endif
                                  
                                </td>
                                <td><div class="rateyo" data-rateyo-rating="{{$row->score}}" data-row="{{$row->id}}"></div>
                                <input type="hidden" name="skor-{{$row->id}}" id="skor-{{$row->id}}" value="{{$row->score}}"></td>
                              </tr>
                            @endforeach
                          
                      </table>
                      <div class="form-group">
                        <label class="col-form-label" for="nm_activity">Teachers Comment<b style="color: red">*</b></label>
                        <br>
                        <textarea rows="3" class="form-control" name="comment" id="comment" maxlength="350">{{$assess->comment}}
                        </textarea>
                      </div>
                      <div class="row">
                        <div class="col-md-12" style="text-align: center"><button type="button"class="btn waves-effect waves-light btn-success save">Save</button>&nbsp;<button type="button"class="btn waves-effect waves-light btn-danger">Cancel</button>
                      </div>
                      </div>
                      </form>
                    </div>
                      
                    {{-- @endif --}}
                      
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
    

@endsection

@section('js')
<script src="{{ asset('eliteadmin/node_modules/rateyo/jquery.rateyo.js') }}"></script>

<script>
 $( document ).ready(function(){
     $(".rateyo").each(function (e) {
            $(this).rateYo({
                onSet: function (rating, rateYoInstance) {
                console.log(rating)
                    $(this).next().val(rating);
                    
                    row         = $(this).attr('data-row');
                    rate_baru   = rating;
                    $('#skor-'+row).val(rate_baru);
                   console.log(rate_baru);
                    
                },
                rating: 0,
                starWidth: "20px",
                numStars: 4,
                maxValue: 4,
                fullStar: true
            });
        });
 }) 

        // $(".rateyo").rateYo({
        //   starWidth: "20px",
        //   fullStar: true,
        //   onSet: function (rating, rateYoInstance) {
        //     console.log(rating);
        //   }
        // });
       
        // $(".rateyo").rateYo().on("rateyo.change", function (e, data) {
        //   var rating = data.rating;
        //   // $(this).parent().find('.score').text('score :'+ $(this).attr('data-rateyo-score'));
        //   console.log(rating);
          
        //  });
       

  $('.save').click(function(){
   swal({
      title: "Are you sure?",
      text: "You will save this assessment?",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes!",
      closeOnConfirm: true,
      showLoaderOnConfirm: true
      },
      function(isConfirm){
      if(isConfirm){
        console.log('confirm');
       $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url : '{{route('assessment.scoreupdate', $assess->id)}}',
        data : $('#form_score').serialize(),
        type : 'post',
        dataType : 'json',
        success:function(response){
          console.log(response)
         // table.ajax.reload();
           $.toast({
                        heading: 'Success',
                        text: 'data successfully saved',
                        icon: 'success',
                        loader: true,        // Change it to false to disable loader
                        loaderBg: '#9EC600',  // To change the background
                        hideAfter: 5000,
                        position: 'top-right',
                    });
      
        },
        
        error:function(xhr){
          console.log(xhr)
          // table.ajax.reload();
            $.toast({
                    heading: 'Upsss...',
                    text: 'data was not successfully saved',
                    icon: 'warning',
                    loader: true,        // Change it to false to disable loader
                    loaderBg: '#9EC600',  // To change the background
                    hideAfter: 7000,
                    position: 'top-right',
                });
        
              }
       });
       
       }
      }); 
  })
</script>
@endsection