@extends('admin.layouts.app')
@section('content')
          <div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">{{ucfirst($class->class)}} - {{ucfirst($subject->subject)}} Study Materials</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)}}</a>
                </li> 
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">{{ucfirst($series_name)}}</a>
                </li> 
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">{{ucfirst($class->class)}}</a>
                </li> 
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">{{ucfirst($subject->subject)}} Study Materials</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)}} / {{ucfirst($series_name)}} / {{ucfirst($class->class)}} / {{ucfirst($subject->subject)}} Study Materials</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>Chapter</th>
                            <th>Topic</th>                            
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>
                        <tfoot>                          
                          <tr>
                            <th>S.No</th>
                            <th>Chapter</th>
                            <th>Topic</th>
                            <th>Action</th>
                          </tr>
                        </tfoot>
                        <tbody>
                          @if(isset($studyMaterials) && !empty($studyMaterials))
                          @foreach($studyMaterials as $key => $material)
                          <tr>
                            <td>{{++$key}}</td>
                            <td>{{ucfirst($material->chapter)}}</td>
                            <td>{{ ucfirst($material->topic_name) }}</td>
                            
                            <td>
                              <div class="form-button-action">
                              <a class="edit btn btn-xs btn-info" href="{{URL::to('admin/course/'.$course->id.'/class/'.$class->id)}}/study-materials/{{$subject->id}}/{{$material->id}}?series_id={{$series_id}}" data-id="{{$material->id}}" data-chapter="{{$material->chapter_id}}" data-topic="{{$material->topic}}"  data-document="{{$material->document}}"  data-video="{{$material->video_link}}">Edit</a>
                                    
                                    <!-- <a class="delete deleteMaterial btn btn-xs btn-danger" href="#removeMaterial" data-bs-toggle="modal" data-id="{{$material->id}}">Delete</a> -->
                              </div>
                            </td>
                          </tr>
                          @endforeach
                          @endif
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Start Model -->
          <div class="modal fade" id="addMaterial" 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" enctype="multipart/form-data">
                          <div class="modal-header">
                            <h3 class="modal-title thin" id="modalConfirmLabel">Add Material</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="chapter_id">Chapter <span class="mandatory"></span></label>
                                <select class="form-control" autocomplete="off" id="chapter_id" name="chapter_id" required>

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

                                    @if(isset($chapters) && !empty($chapters))

                                      @foreach($chapters as $chap)

                                        <option value="{{$chap->id}}">{{ucfirst($chap->chapter)}}</option>

                                      @endforeach

                                    @endif

                                </select>
                              </div>
                              
                              <div class="form-group">
                                <label for="topic">Topic <span class="mandatory"></span></label>
                                <input type="text" autocomplete="off" class="form-control" id="topic" name="topic" />
                              </div>

                              <div class="form-group">
                                <label for="digital_textbook">Digital Textbook <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="digital_textbook" name="digital_textbook" required />
                              </div>

                              <div class="form-group">
                                <label for="pre_recorded_video">Pre Recorded Video <span class="mandatory"></span></label>
                                <input type="text" autocomplete="off" class="form-control" id="pre_recorded_video" name="pre_recorded_video" url="true" />
                              </div>

                              <div class="form-group">
                                <label for="2d_3d_video">2D / 3D Video <span class="mandatory"></span></label>
                                <input type="text" autocomplete="off" class="form-control" id="2d_3d_video" name="2d_3d_video" url="true" />
                              </div>

                              <div class="form-group">
                                <label for="digital_textbook">PPT <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="ppt" name="ppt" required />
                              </div>

                              <div class="form-group">
                                <label for="worksheets">Worksheets <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="worksheets" name="worksheets" required />
                              </div>

                              <div class="form-group">
                                <label for="worksheet_solutions">Worksheet Solutions <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="worksheet_solutions" name="worksheet_solutions" required />
                              </div>

                              <div class="form-group">
                                <label for="question_paper">Question Paper <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="question_paper" name="question_paper" required />
                              </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="editMaterial" tabindex="-1" role="dialog" aria-labelledby="modalConfirmLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">

                          <form role="form" name="edit-form" id="edit-form" method="post" enctype="multipart/form-data">
                          <div class="modal-header">
                            <h3 class="modal-title thin" id="modalConfirmLabel">Edit Material</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="chapter_id">Chapter <span class="mandatory"></span></label>
                                <select class="form-control" autocomplete="off" id="echapter_id" name="chapter_id" required>

                                    @if(isset($chapters) && !empty($chapters))

                                      @foreach($chapters as $chap)

                                        <option value="{{$chap->id}}">{{ucfirst($chap->chapter)}}</option>

                                      @endforeach

                                    @endif

                                </select>
                              </div>
                              
                              <div class="form-group">
                                <label for="topic">Topic <span class="mandatory"></span></label>
                                <input type="text" autocomplete="off" class="form-control" id="etopic" name="topic" />
                              </div>

                              <div class="form-group">
                                <label for="document">Document <span class="mandatory"></span></label>
                                <input type="file" autocomplete="off" class="form-control" id="edocument" name="document" />
                                <br/>
                                <a href="" id="edocument_link" type="button" class="btn btn-xs btn-info" target="_blank">View Document</a>
                              </div>

                              <div class="form-group">
                                <label for="video">Video Link <span class="mandatory"></span></label>
                                <input type="text" autocomplete="off" class="form-control" id="evideo" name="video" url="true" />
                              </div>

                          </div>
                          <div class="modal-footer">
                            <button class="btn btn-red" type="button" data-bs-dismiss="modal" aria-hidden="true">Close</button>
                            <input type="hidden" name="_method" value="PUT" />
                            <button class="btn btn-primary" type="submit">Update</button>
                          </div>
                          </form>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal --> 


                     <div class="modal fade" id="removeMaterial" tabindex="-1" role="dialog" aria-labelledby="modalConfirmLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <div class="modal-content">

                          <form role="form" name="delete-form" id="delete-form" method="post">
                          <div class="modal-header">
                            <h3 class="modal-title thin" id="modalConfirmLabel">Delete Material</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                          </div>
                          <div class="modal-body">
                              
                              <p>Are you sure want to delete this material?</p>
                              <input type="hidden" name="_method" value="DELETE" />


                          </div>
                          <div class="modal-footer">
                            <button class="btn btn-red" type="button" data-bs-dismiss="modal" aria-hidden="true">Cancel</button>
                            <button class="btn btn-primary" type="submit">Delete</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