@extends('admin.layouts.app')
@section('content')
          <div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">{{ucfirst($course->course_name)}} Classes</h3>
              <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                  <a href="#">
                    <i class="icon-home"></i>
                  </a>
                </li>
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">{{ucfirst($course->course_name)}} Classes</a>
                </li>                
              </ul>
            </div>
            <div class="row">   

              <div class="col-md-12">
                @if(session('success_msg'))
                  <div class="alert alert-success">{{session('success_msg')}}</div>
                @endif
                @if(session('error_msg'))
		                <div class="alert alert-danger">{{session('error_msg')}}</div>
		            @endif
                <div class="card">
                  <div class="card-header">
                    <div class="d-flex align-items-center">
                      <h4 class="card-title">{{ucfirst($course->course_name)}} Classes</h4>                      
                      <!-- <a href="#addClass" role="button" class="btn btn-primary btn-round ms-auto" data-bs-toggle="modal">
                        <i class="fa fa-plus"></i>
                        Add Class
                      </a> -->
                    </div>
                  </div>
                  <div class="card-body">                   

                    <div class="table-responsive">
                      <table
                        id="add-row"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                            <th>S.No</th>
                            <th>Class</th>
                            <th>Series</th>                            
                            <th style="width: 20%">Action</th>
                          </tr>
                        </thead>
                        <tfoot>                          
                          <tr>
                            <th>S.No</th>
                            <th>Class</th>
                            <th>Series</th>
                            <th>Action</th>
                          </tr>
                        </tfoot>
                        <tbody>
                          @if(isset($classes) && !empty($classes))
                          @foreach($classes as $key => $class)
                          <tr>
                            <td>{{++$key}}</td>
                            <td>{{ucfirst($class->class->class)}}</td>
                            <td>{{$class->series ? ucfirst($class->series->series_name) : "-"}}</td>
                            
                            <td>
                              <div class="form-button-action">
                                <!-- <a
                                  href="{{route('classes.edit', [
                                      'id' => $course->id,
                                      'class' => $class->class_id,
                                  ])}}"
                                  data-bs-toggle="tooltip"
                                  title=""
                                  class="btn btn-link btn-primary btn-lg"
                                  data-original-title="Edit Task"
                                >
                                  Update Cover
                                </a> -->
                                @if(!empty($class->series_id))
                                 
                                 
                                    @if(!empty($class->cover_pic))

                                        

                                    @endif
                                <a
                                  class="edit btn btn-xs btn-info updateCover doc-btn"
                                  data-original-title="Edit Task"
                                  role="button" href="#updateCover" data-bs-toggle="modal"
                                  data-id="{{$class->id}}" data-classname="{{ucfirst($class->class->class)}}" data-sid="{{$class->series_id}}" data-series="{{ucfirst($class->series->series_name)}}" data-cover="{{$imageUrl}}"
                                >
                                 Update Cover
                                </a>
                                @endif
                                <a
                                  href="{{URL::to('admin/course/'.$course->id.'/class/'.$class->class_id.'/subjects')}}?series_id={{$class->series_id}}"
                                  data-bs-toggle="tooltip"
                                  title=""
                                  class="btn btn-xs btn-primary"
                                  data-original-title="Edit Task"
                                >
                                  Subjects
                                </a>
                                
                              </div>
                            </td>
                          </tr>
                          @endforeach
                          @endif
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal fade" id="addClass" tabindex="-1" role="dialog" aria-labelledby="modalConfirmLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">

                        <form role="form" name="add-form" id="add-form" method="POST"
                action="{{ route('classes.store', $course->id) }}">
                @csrf
                          <div class="modal-header">
                            <h3 class="modal-title thin" id="modalConfirmLabel">Add Class</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                          </div>
                          <div class="modal-body">
                              
                              <div class="form-group">
                                <label for="class_id">Class <span class="mandatory">*</span></label>
                                <select class="form-control" name="class_id" id="class_id" required>

                                  <option value="">Select Class</option>

                                  @if(isset($sipClasses) && $sipClasses->count())

                                    @foreach($sipClasses as $sipClass)


                                        <option value="{{$sipClass->id}}">{{$sipClass->class}}</option>


                                    @endforeach

                                  @endif
                                </select>
                              </div>


                              <div class="form-group">
                                <label for="series_id">Series <span class="mandatory">*</span></label>
                                <select class="form-control" name="series_id" id="series_id" required>

                                  <option value="">Select Series</option>

                                  @if(isset($bookSeries) && $bookSeries->count())

                                    @foreach($bookSeries as $bSeries)

                                        <option value="{{$bSeries->id}}">{{ucfirst($bSeries->series_name)}}</option>

                                    @endforeach

                                  @endif
                                </select>
                              </div>


                          </div>
                          <div class="modal-footer">
                            <button class="btn btn-red" type="button" data-bs-dismiss="modal" aria-hidden="true">Close</button>
                            <button class="btn btn-primary" type="submit">Submit</button>
                          </div>
                          </form>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal --> 
                    <div class="modal fade" id="updateCover" tabindex="-1" role="dialog" aria-labelledby="modalConfirmLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">

                          <form role="form" name="cover-form" id="cover-form" method="POST" action="" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="modal-header">
                            <h3 class="modal-title thin" id="modalConfirmLabel">Update Cover Pic</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                          </div>
                          <div class="modal-body">

                              <div class="form-group">
                                <label for="subject">Class <span class="mandatory">*</span></label>
                                <input type="text" autocomplete="off" class="form-control" id="cclass_name" name="class_name" readonly />
                                <input type="hidden" autocomplete="off" class="form-control" id="cclass_id" name="class_id" />
                                <input type="hidden" autocomplete="off" class="form-control" id="cover_pic_request" name="cover_pic_request" value="1" />
                              </div>


                              <div class="form-group">
                                <label for="series">Series <span class="mandatory">*</span></label>
                                <input type="text" autocomplete="off" class="form-control" id="cseries_name" name="series_name" readonly />
                                <input type="hidden" autocomplete="off" class="form-control" id="cseries_id" name="series_id" />
                              </div>


                              <div class="form-group"><br/>

                                <label for="cover_pic">Cover Pic <span class="mandatory"></span></label><br/>

                                <input type="file" autocomplete="off" class="form-control" id="cover_pic" name="cover_pic" />

                                <div class="row" id="cover_pic_fileview" style="display: none;">

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

                                          <!-- <a href="" type="button" class="btn btn-xs btn-info" id="cover_pic_file" target="_blank" style="margin-top: 10px;">View</a> -->

                                          <img src="" id="cover_pic_file" style="margin-top: 10px; width: 100px;" />

                                          <a href="javascript:void(0)" class="btn btn-xxs btn-danger removeCover" data-id="1" style="margin-top: 12px;"><i class="fa fa-minus"></i></a>

                                      </div>

                                </div>

                              </div>
                            

                          </div>
                          <div class="modal-footer">
                            <button class="btn btn-red" type="button" data-bs-dismiss="modal" aria-hidden="true">Close</button>
                            <button class="btn btn-primary" id="coverSubmitBtn" type="submit">Update</button>
                          </div>
                          </form>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal --> 
          <script src="{{asset('assets/admin/js/core/jquery-3.7.1.min.js')}}"></script>
          <script src="{{asset('assets/admin/js/plugin/datatables/datatables.min.js')}}"></script>
          <script type="text/javascript">
            $(document).ready(function () {

                // Add Row
                $("#add-row").DataTable({
                pageLength: 5,
                });
            });

             $(document).on('click','.updateCover',function(){
      var id = $(this).data('id');
      var sid = $(this).data('sid');
      var class_name = $(this).data('classname');
      var series_name = $(this).data('series');
      var cover = $(this).data('cover');

      var updateUrl = "{{ url('admin/course/' . $course->id . '/classes') }}/" + id;
      $('#cover-form').attr('action', updateUrl);

      $('#cover_pic_file').attr("src", "");
      $("#cover_pic_fileview").hide();

      $('#cclass_id').val(id);
      $('#cclass_name').val(class_name);

      $('#cseries_id').val(sid);
      $('#cseries_name').val(series_name);

      if(cover!="") {

        $("#cover_pic_file").attr("src", cover);
        $("#cover_pic_fileview").show();
      }

    });
            </script>
          @endsection