@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 Edit</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($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>
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">Edit</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($class->class)}} {{ucfirst($subject->subject)}} Study Materials</h4>     -->
                       <h4 class="card-title">Edit Material</h4>
                          <a href="{{URL::to('admin/course/'.$course->id.'/class/'.$class->id)}}/study-materials/{{$subject->id}}?series_id={{$series_id}}" class="btn btn-primary btn-round ms-auto">Back</a>                  
                      
                    </div>
                  </div>
                  <div class="card-body">                   
                    <form class="form-horizontal form1" action="{{URL::to('admin/course/'.$course->id.'/class/'.$class->id)}}/study-materials/{{$subject->id}}/{{$studyMaterial->id}}?series_id={{$series_id}}" id="edit-form" role="form" method="POST" enctype="multipart/form-data">
                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="chapter_id">Chapter <span class="mandatory">*</span></label>
                              <div class="col-md-4">
                                <select class="form-control" autocomplete="off" id="chapter_id" name="chapter_id" required>

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

                                    @foreach($chapters as $chap)

                                      <option value="{{$chap->id}}" @if($studyMaterial->chapter_id==$chap->id) selected @endif>{{ucfirst($chap->chapter)}}</option>

                                    @endforeach

                                  @endif

                                </select>
                              </div>
                            </div>
                              
                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="topic">Topic <span class="mandatory"></span></label>
                              <div class="col-md-4">
                                <select class="form-control" autocomplete="off" id="topic_id" name="topic_id">

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

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

                                      @foreach($topics as $topic)

                                        <option value="{{$topic->id}}" @if(!empty($studyMaterial->topic_id) && $studyMaterial->topic_id==$topic->id) selected @endif>{{ucfirst($topic->topic)}}</option>

                                      @endforeach

                                    @endif

                                </select>
                              </div>
                            </div>

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="pre_recorded_video">Pre Recorded Video <span class="mandatory"></span></label>
                              <div class="col-md-4">
                                <input type="file" autocomplete="off" class="form-control" id="pre_recorded_video" name="pre_recorded_video[]" multiple />
                              </div>
                              <div class="col-md-2">
                                @if(!empty($studyMaterial->pre_recorded_video))
                                  <!-- <a href="{{URL::to('/file/materials/'.$studyMaterial->id)}}?field=pre_recorded_video" type="button" class="btn btn-xs btn-info" target="_blank" style="margin-top: 5px;">View Video</a> -->
                                @endif
                              </div>
                            </div>

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="two_three_dimension_video">2D / 3D Video <span class="mandatory"></span></label>
                              <div class="col-md-4">
                                <input type="file" autocomplete="off" class="form-control" id="two_three_dimension_video" name="two_three_dimension_video[]" multiple />
                              </div>
                              <div class="col-md-2">
                                @if(!empty($studyMaterial->two_three_dimension_video))
                                  <!-- <a href="{{URL::to('/file/materials/'.$studyMaterial->id)}}?field=two_three_dimension_video" type="button" class="btn btn-xs btn-info" target="_blank" style="margin-top: 5px;">View Video</a> -->
                                @endif
                              </div>
                            </div>                             

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="ppt">PPT <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="ppt" name="ppt[]" multiple />
                              </div>
                            </div>

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="worksheet_solutions">Worksheet and Solutions <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="worksheet_solutions" name="worksheet_solutions[]" multiple />
                              </div>
                            </div> 

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="question_paper">Question Paper <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="question_paper" name="question_paper[]" multiple />
                              </div>
                            </div>
                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="keynotes">Key Notes <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="keynotes" name="keynotes[]" multiple />
                              </div>
                            </div> 

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="lesson_plans">Lesson Plans <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="lesson_plans" name="lesson_plans[]" multiple />
                              </div>
                            </div> 

                            <div class="mb-3 form-group">
                              <label class="col-md-3 control-label" for="answer_key">Answer Key <span class="mandatory"></span></label>
                              <div class="col-md-4 form-file">
                                <input type="file" autocomplete="off" class="form-control" id="answer_key" name="answer_key[]" multiple />
                              </div>
                            </div> 

                              
                              <div class="mb-3">
                                <label class="col-md-3 control-label" for="documents">Documents <span class="mandatory"></span></label>

                                <div id="addDocument">

                                  @if(isset($studyMaterialDocuments) && count($studyMaterialDocuments)>0)


                                    @foreach($studyMaterialDocuments as $ke=>$docs)



                                        <div class="row" id="documentRow{{$document_counter}}" style="margin-top: 10px;">

                                          <div class="col-sm-3 form-group">

                                            <select name="document_type[{{$document_counter}}]" id="document_type[]" class="form-control" disabled>

                                                <option @if($docs->upload_type == "PPT") selected @endif value="PPT">PPT</option>

                                                <option @if($docs->upload_type == "WORKSHEETS") selected @endif value="WORKSHEETS">Worksheets & Solutions</option>

                                                <option @if($docs->upload_type == "QUESTION_PAPER") selected @endif value="QUESTION_PAPER">Question Papers</option>

                                                <option @if($docs->upload_type == "NOTES") selected @endif value="NOTES">Key Notes</option>

                                                <option @if($docs->upload_type == "PRE_RECORDED_VIDEO") selected @endif value="PRE_RECORDED_VIDEO">Pre Recorded Video</option>

                                                <option @if($docs->upload_type == "2D_3D_VIDEO") selected @endif value="2D_3D_VIDEO">2D / 3D Video</option>

                                                <option @if($docs->upload_type == "LESSON_PLANS") selected @endif value="LESSON_PLANS">Lesson Plans</option>

                                                <option @if($docs->upload_type == "ANSWER_KEY") selected @endif value="ANSWER_KEY">Answer Key</option>

                                            </select>

                                          </div>
                                          
                                            <div class="col-sm-1">

                                            <a href="{{URL::to('/file/materials/'.$docs->id)}}?field={{$docs->upload_type}}" type="button" class="btn btn-info" target="_blank" style="margin-top: 10px;">View</a>

                                          </div>

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

                                            <a href="javascript:void(0)" class="btn btn-danger removeDocs" data-id="{{$docs->id}}" style="margin-top: 10px;"><i class="fa fa-minus"></i></a>

                                          </div>
                                                                                 

                                        </div>

                                        

                                    @endforeach

                                @else


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

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

                                        <select name="document_type[1]" id="document_type[]" class="form-control">

                                            <option value="PPT">PPT</option>
                                            <option value="WORKSHEETS">Worksheets & Solutions</option>
                                            <option value="QUESTION_PAPER">Question Papers</option>
                                            <option value="NOTES">Key Notes</option>

                                        </select>

                                      </div>

                                      <div class="col-sm-3 form-file">

                                        <!-- <input type="file" autocomplete="off" class="form-control" id="documents[]" name="documents[1]" /> -->

                                        <input type="file" autocomplete="off" class="form-control" id="ppt[]" name="ppt[]" multiple />

                                      </div>

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

                                        <!-- <a href="javascript:void(0)" class="btn btn-xxs btn-danger removeDocument"><i class="fa fa-minus"></i></a> -->

                                      </div>

                                    </div>


                                @endif

                              </div>

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

                                  <div class="col-sm-3">
                                    <br/>
                                    <a href="javascript:void(0)" class="btn btn-xs btn-primary" id="addDoc"><i class="fa fa-plus"></i> Add Document</a>

                                  </div>

                                </div>

                            </div>

                        

                            @if(Auth()->guard('admin')->user()->role_id==1)

                            <div class="form-group form-footer">
                              <div class="col-sm-offset-4 col-sm-8 form-button-action">
                                <input type="hidden" name="document_counter" id="document_counter" value="{{$document_counter}}" />
                                <input type="hidden" name="_method" value="PUT" />
                                <button type="submit" class="btn btn-primary submitBtn">Update</button>
                                <a href="{{URL::to('admin/course/'.$course->id.'/class/'.$class->id)}}/study-materials/{{$subject->id}}?series_id={{$series_id}}" type="reset" class="btn btn-info">Cancel</a>
                              </div>
                            </div>

                            @endif


                          </form>
                    
                  </div>
                </div>
              </div>
            </div>
          </div>           
<script type="text/javascript">

  var documentTypeHtml = '<option value="PPT">PPT</option><option value="WORKSHEETS">Worksheets & Solutions</option><option value="QUESTION_PAPER">Question Papers</option><option value="NOTES">Key Notes</option>';

  $('#add-form').validate({
    submitHandler: function (form) {
      $('.submitBtn').attr('disabled','disabled');
      form.submit();
    }
  });


  $('#edit-form').validate({
    submitHandler: function (form) {
      $('.submitBtn').attr('disabled','disabled');
      form.submit();
    }
  });

  $('#chapter_id').change(function(){

        var chapterId = $('#chapter_id').val();
        var topicHtml = '<option value="">Select Topic</option>';

        if(chapterId!='') {

          $.ajax({
                  url: "{{URL::to('admin/topics-by-chapter')}}/"+chapterId,
                  method: 'GET',
                  success: function(response){
                      $.each(response, function(key, value) {
                        topicHtml += '<option value="'+value.id+'">'+value.topic+'</option>';
                      });
                      $('#topic_id').html(topicHtml);
                  }

            });

        } else {
          $('#topic_id').html(topicHtml);
        }

      });

  $(document).on('click','#addPpt',function(){
    var counter = $('#ppt_counter').val();
    counter = Number(counter)+1;


    var html = '<div id="pptRow'+counter+'"><br/>';
        html += '<input type="file" autocomplete="off" class="form-control" id="ppt_'+counter+'" name="ppt['+counter+']" />';
        html += '<br/><a href="javascript:void(0)" class="btn btn-xxs btn-danger removePpt" data-counter="'+counter+'"><i class="fa fa-minus"></i></a>';
        html += '</div>';

        $('#pptadd').append(html);

        $('#ppt_counter').val(counter);

  });

  $(document).on('click','.removePpt',function(){
    var counter = $(this).data('counter');
    $('#pptRow'+counter).remove();
  });

  $(document).on('click','.removeDocs',function(){
    var id = $(this).data('id');
    var confirmMsg = confirm('Are you sure want to delete this PPT?');
    if(confirmMsg) {
      window.location.href = "{{URL::to('admin/course/'.$course->id.'/class/'.$class->id)}}/study-materials/{{$subject->id}}/{{$studyMaterial->id}}/remove-document/"+id+"?series_id={{$series_id}}";
    }
  });

  $(document).on('click','#addDoc',function(){
    var counter = $('#document_counter').val();
    counter = Number(counter)+1;

    var html = '<div class="row" id="documentRow'+counter+'" style="margin-top: 10px;"><div class="col-sm-3">';
        html += '<select name="document_type['+counter+']" id="document_type_'+counter+'" class="form-control">'+documentTypeHtml+'</select></div>';
        html += '<div class="col-sm-3 form-file"><input type="file" autocomplete="off" class="form-control" id="documents_'+counter+'" name="documents['+counter+']" /></div>';
        html += '<div class="col-sm-1"><a href="javascript:void(0)" class="btn btn-xxs btn-danger removeDocument" data-counter="'+counter+'" style="margin-top:10px;"><i class="fa fa-minus"></i></a></div>';


    /*var html = '<div id="documentRow'+counter+'" style="clear:both;"><br/>';
        html += '<div style="width: 70%; float: left;"><input type="file" autocomplete="off" class="form-control" id="keynotes_'+counter+'" name="keynotes['+counter+']" /></div>';
        html += '<div style="width: 30%; float: left;"><a href="javascript:void(0)" class="btn btn-xxs btn-danger removeKn" data-counter="'+counter+'"><i class="fa fa-minus"></i></a></div>';
        html += '</div>';*/

        $('#addDocument').append(html);

        $('#document_counter').val(counter);

  });

  $(document).on('click','.removeDocument',function(){
    var counter = $(this).data('counter');
    $('#documentRow'+counter).remove();
  });

</script>

@endsection