@extends('layouts.main')
@section('title','Manage Series')
@section('content')
<div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
</div> 
<div class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="main-body">
            <div class="page-wrapper p-0">
                <div class="page-header p-15 m-b-0 pro-page-heading1">
                    <div class="page-header-title">
                       <h4>New Series</h4>
                    </div>
                    @if(!session()->has('new_portal_redirect'))
                    <div class="page-header-breadcrumb p-r-10">
						<ul class="breadcrumb-title">
							<li class="breadcrumb-item">
			                    <a href="{{ secure_url('company/dashboard') }}">
								   <span class="hiremee-home"></span>
                                </a>
							</li>
						</ul>
					</div>
          @endif
                </div>
                <div class="page-body p-15">
                  <input type="hidden" name="allowcated_assessment_count" id="allowcated_assessment_count" value="{{ $series->no_of_test }}">
                    <div class="row">
                        <div class="col-12 hme-pro-tab">
                            <ul class="nav nav-tabs md-tabs bg-none" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link disabled " data-toggle="tab" href="javascript:;" role="tab">Step <span class="number-round">1</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#series2" role="tab">Step <span class="number-round">2</span></a>
                                </li>
                            </ul>
                            <div class="tab-content min-h-unset">
                                <div class="tab-pane active" id="series2" role="tabpanel">
                                     <div class="row mx-0">
                                       <p style="color: #525050;"><strong>Note:</strong> Which assessment have to added, that order will be showing assessment while updating.</p>
                                     </div>
                                     <div class="row">
                                         <!--iteration starts-->
                                           <!--placeholder card starts-->
                                           @php
                                                $no_test = $series->no_of_test;
                                                $j=0;
                                            @endphp

                                        @if($no_test)
                                            @for($i=1;$i<=$no_test;$i++)
                                            @if(count($series_assessments) < $i)
                                            <div class="col-lg-4 col-md-4">
                                                <input type="hidden" class="series_assessment_id" id="series_ass_id{{$i}}">
                                                <div class="card series-placeholder-card assessment_div assessment_div{{$i}}" id="{{$i}}">
                                                  <input type="hidden" class="assessment_num" value="{{$i}}">

                                                    <div class="card-body py-3 text-center assessment-notmapped{{$i}}">
                                                        <i class="fa far fa-plus-circle pt-2"></i>
                                                    </div>
                                                    <div class="card-footer border-0 text-center pt-0 assessment-notmapped{{$i}}" style="background-color: #d7e3f1;">
                                                    <p class="pt-2 mb-0">Add Assessment</p>
                                                    </div>

                                                    <div class="card-body px-3 py-3 d-none assessment-mapped{{$i}}">
                                                      <div class="row justify-content-end mx-0">
                                                          <i class="fa far fa-edit cursor-pointer" data-toggle="modal" data-target="#seriesAddAssessment"></i>
                                                      </div>
                                                        <span>Assessment</span>
                                                        <p class="font-weight-bold mb-0" id="js-assessment-name{{$i}}">Introduction to System Techniques</p>
                                                    </div>

                                                    <div class="card-footer border-0 pt-0 d-none assessment-mapped{{$i}}" style="background-color: #01389117;">
                                                        <div class="badge-assessment-type inventory ">
                                                            <span class="mr-2 d-inline-flex justify-content-center align-items-center bg-white rounded-circle">
                                                              <i class="fa fas fa-ellipsis-h" style="color: #7c7777;"></i>
                                                            </span>
                                                            <span class="assessment-type{{$i}}">Inventory</span>
                                                        </div>
                                                    </div>
                                              </div>
                                            </div>
                                              @else

                                              @php
                                                
                                                //echo "<pre>";print_r(count($series_assessments));exit();
                                                
                                              @endphp
                                           
                                              @if(count($series_assessments) >= $i)
                                              <div class="col-lg-4 col-md-4">
                                                <input type="hidden" class="series_assessment_id" id="series_ass_id{{$series_assessments[$j]->id}}" value="{{$series_assessments[$j]->id}}">
                                                <div class="card series-details-card assessment_div assessment_div{{$series_assessments[$j]->id}} " id="{{$series_assessments[$j]->id}}">
                                                  <input type="hidden" class="assessment_num" value="{{$i}}">
                                                    <div class="card-body px-3 py-3">
                                                      <div class="row justify-content-end mx-0">
                                                          <i class="fa far fa-edit cursor-pointer" data-toggle="modal" data-target="#seriesAddAssessment"></i>
                                                      </div>
                                                        <span>Assessment</span>
                                                        <p class="font-weight-bold mb-0" id="js-assessment-name{{$series_assessments[$j]->id}}">{{ $series_assessments[$j]->assessment['name'] }}</p>
                                                    </div>
                                                    <div class="card-footer border-0 pt-0" style="background-color: #01389117;">
                                                        <div class="badge-assessment-type inventory">
                                                            <span class="mr-2 d-inline-flex justify-content-center align-items-center bg-white rounded-circle">
                                                              <i class="fa fas fa-ellipsis-h" style="color: #7c7777;"></i>
                                                            </span>
                                                            <span class="assessment-type{{$i}}">@if($series_assessments[$j]->assessment->is_ops) Inventory @else Corporate @endif </span>
                                                        </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              @endif
                                              @endif

                                            @php $j++; @endphp

                                            @endfor
                                       @endif
                                        <!--placeholder card ends-->
   
                                      <!--iteration ends-->
                                       <div class="col-12 d-flex justify-content-end flex-wrap mt-3">
                                           <a  href="{{ secure_url('pro/series/1').'/'.$series_id }}" class="btn col-lg-2 col-md-4 col-12 btn-secondary mr-sm-3 mb-3 mb-sm-0 max-w-169">Previous</a>
                                            @if(count($series_assessments) == $no_test)
                                           <button class="btn col-lg-2 col-md-4 col-12 btn-primary max-w-169" data-toggle="modal" data-target="#series-success" id="save_step2_btn">Save & Proceed</button>
                                           @else
                                           <button class="btn col-lg-2 col-md-4 col-12 btn-primary max-w-169" data-toggle="modal" data-target="#series-success" disabled="" id="save_step2_btn">Save & Proceed</button>
                                           @endif
                                       </div>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--add assessment modal code-->
<div class="modal fade seriesAddPopup" id="seriesAddAssessment" tabindex="-1" data-animation="false" aria-labelledby="seriesAssessment" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-center" id="exampleModalLabel">Add Assessment</h5>
        <button type="button" class="close d-flex justify-content-center align-items-center bg-white rounded-circle" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      {!! Form::open(array('class'=>'form-horizontal','name'=>'add-rzseries-step2','id'=>'add-rzseries-step2')) !!}
        <input type="hidden" id="card_id">
        <input type="hidden" id="series_id" value="{{ $series_id }}">
        <input type="hidden" id="card_no">

        <div class="modal-body px-4">
          <label class="text-dark f-s-95r font-weight-bold">Choose Assessment Type</label>
          <div class="row mx-0 mb-2">
              <div class="col-md-6 col-12 pl-0">
                  <input type="radio" id="series-corporate" value="1" class="assessment_type" name="assessment_type" checked>
                  <label for="series-corporate">Corporate</label>
              </div>
              <div class="col-md-6 col-12">
                  <input type="radio" id="series-inventory" value="2" class="assessment_type" name="assessment_type">
                  <label for="series-inventory">Inventory</label>
              </div>
          </div>
          <label class="text-dark f-s-95r font-weight-bold">Choose Assessment</label>
            <div class="input-group">
            {!! Form::select('assessment', $assessments, $assessment_id ? $assessment_id : '', ['class' => 'form-control js-select2', 'id'=>'js-assessment', 'placeholder' => 'Select Assessment']) !!}
          </div>
        </div>
        <div class="modal-footer px-4">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="js-add-assessment">Add</button>
        </div>
      {!! Form::close() !!}
    </div>
  </div>
</div>
<!--add assessment modal ends-->

<!--series created popup successfully start-->
<div class="modal fade seriesAddPopup" id="series-success" tabindex="-1" aria-labelledby="seriesAssessment" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-center" id="exampleModalLabel">Series Created</h5>
        <button type="button" class="close d-flex justify-content-center align-items-center bg-white rounded-circle" data-dismiss="modal" aria-label="Close" id="btn-series-success-popup">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center px-4">
          <i class="fa fal fa-check-circle" style="font-size: 60px; color: #8FC740;"></i>
          <p class="pt-2" style="color: #8FC740; font-weight: 500; font-size: 1rem;">New Series Created Successfully</p>
          <p style="color: #131313; font-size: 1rem; font-weight: 500;">Do you want to Book Slots ?</p>
          <button class="btn btn-primary mr-sm-3 mb-3 mb-sm-0 max-w-169" id="btn-booknow">Book Now</button>
           <button type="button" class="btn  btn-secondary " data-dismiss="modal" aria-label="Close" id="btn-series-cancel-popup" >Cancel</button>
      </div>
    </div>
  </div>
</div>
<!--series created popup successfully end-->

@endsection

@section('footer')
<script>
$(document).ready(function(){
  $('#js-assessment').select2({
    dropdownParent: $('#seriesAddAssessment')
  });

$('.assessment_div').click(function(){
//alert($(this).attr('id'));

$('#js-assessment-error-custom').removeClass("js-tootletip hiremee-info text-danger tooltip-validate tooltipped");

  var card_id = $(this).attr('id');
  $('#card_id').val(card_id);
  var series_assessment_id= $('#series_ass_id'+card_id).val();
  var series_id=$("#series_id").val();

  var card_no = $(this) .find('.assessment_num').val();
    $('#card_no').val(card_no);

  $('#seriesAddAssessment').modal('show');

    $.ajax({
      method:"get",
      url: "{{ secure_url('pro/series-get-series-assessment') }}",
      data:{"series_id":series_id,"series_assessment_id":series_assessment_id,"_token": $('meta[name=csrf-token]').attr('content') },
      success:function(response){
        console.log('response',response);
        if (response.status == 200) {
          if(response.assessment_id) {
            if(response.is_ops && response.is_ops !="0"){
              $("#series-inventory").attr('checked', true).trigger('click');
              opt = 2;
            }else{
              $("#series-corporate").attr('checked', true).trigger('click');
              opt = 1;
            }

            $.ajax({
                url: "{{ secure_url('company/get-cor-asessment-data') }}" ,
                data:{'type':opt},
                dataType:'json',
                type:'get',
                beforeSend:function(){
                  $('.hme-loading-mask').fadeIn();
                },
                success:function(res){
                  $('.hme-loading-mask').fadeOut();
                  $('#assessment option').remove();
                  $('#js-assessment').html('<option value="">Select Assessment</option>'+res.response);
                  
                  $('#js-assessment').val(response.assessment_id);
                  $('#js-assessment').select2();
                  $('#js-assessment').select2({
                    dropdownParent: $('#seriesAddAssessment')
                  });
                },
                error: function(error){
                  $('.hme-loading-mask').fadeOut();
                }
              })
          }else{
            $('#js-assessment').val('');
            $('#js-assessment').select2();
            $('#js-assessment').select2({
              dropdownParent: $('#seriesAddAssessment')
            });
          }
        }
      }
    });


});
  

  // $('#js-add-assessment').click(function(){
  //   var card_id = $('#card_id').val()
  //   var dropdown_text_value = document.getElementById("js-assessment").options[document.getElementById("js-assessment").selectedIndex].text;
  //   $(".assessment-notmapped"+card_id).addClass("d-none");
  //   $(".assessment-mapped"+card_id).removeClass("d-none");

  //   $('#seriesAddAssessment').modal('hide');

  //   // Finding all elements of a class (creates an array of results)
  //   let x = $('#assessment_div'+card_id).getElementsByClassName("series-placeholder-card");
  //  // let x = document.getElementsByClassName("series-placeholder-card");

  //   // If it exists, remove it.
  //   if(x.length > 0) {
  //      x[0].classList.remove("series-placeholder-card"); 
  //      $('#assessment_div'+card_id).addClass('series-details-card');
  //   }
  // });

});

$("#add-rzseries-step2").submit(function(e) {
    e.preventDefault();
  }).validate({
     errorElement: 'span',
      errorPlacement: function (error,element){
          var parent = $(element).parent();
          $('.tooltip').tooltip('hide');
          $("body").find('#'+error[0].id+'-custom').remove();
          parent.append('<span data-position="left" data-delay="0" data-toggle="tooltip" data-original-title="'+error[0].innerText+'" class="js-tootletip hiremee-info text-danger tooltip-validate tooltipped" id="'+error[0].id+'-custom"></span>');
          $('#'+error[0].id+'-custom').tooltip(tooltip_direction_options);
      },
      success: function (element){
        $("body").find('#'+element[0].id+'-custom').remove();
        $('#'+element[0].id+'-custom').tooltip('hide');
        $('.js-tooltip-validate').tooltip();
      },
      onfocusout: false,
      rules: {
          assessment: {
                required: true,
        },
      },
      messages: {
        assessment: {
                required: "Please select a assessment",
            },
      },
      submitHandler: function(form) {
        $("#js-add-assessment").text("Processing...").attr("disabled",true);
          var series_id=$("#series_id").val();

          var card_id = $('#card_id').val();
          console.log('card_id',card_id);
           var card_no =  $('#card_no').val();

          var assessment_id= $('#js-assessment').val();
          var series_assessment_id= $('#series_ass_id'+card_id).val();

          $.ajax({
            method:"POST",
            url: "{{ secure_url('pro/series/2') }}",
            data:{"steps":2, "series_id":series_id,"assessment_id":assessment_id,"series_assessment_id":series_assessment_id,"order_no":card_id,"_token": $('meta[name=csrf-token]').attr('content') },
            beforeSend:function(){
              $('.hme-loading-mask').fadeIn();
            },
            success:function(response){
              if (response.status == 200) {
                $('#series_ass_id'+card_id).val(response.series_assessment_id);
                var dropdown_text_value = document.getElementById("js-assessment").options[document.getElementById("js-assessment").selectedIndex].text;
                $("#js-assessment-name"+card_id).text(dropdown_text_value);
                $(".assessment-notmapped"+card_id).addClass("d-none");
                $(".assessment-mapped"+card_id).removeClass("d-none");

                if(response.assess_type && response.assess_type !="0"){
                     $(".assessment-type"+card_no).text('Inventory');
                }else{
                     $(".assessment-type"+card_no).text('Corporate');
                }

                $('#seriesAddAssessment').modal('hide');

                // Finding all elements of a class (creates an array of results)
                //let x = $('#assessment_div'+card_id).getElementsByClassName("series-placeholder-card");
                let x = $('.assessment_div'+card_id);
              // let x = document.getElementsByClassName("series-placeholder-card");

                // If it exists, remove it.
                if(x.length > 0) {
                  x[0].classList.remove("series-placeholder-card"); 
                  $('.assessment_div'+card_id).addClass('series-details-card');
                }
              }else{
                swal({
                                html: true,
                                title: '<span class="sweet-warning-text">Warning</span>',
                                text: response.message,
                                type: "warning",
                                showCancelButton: false,
                                confirmButtonText: "OK",
                                closeOnConfirm: false,
                                confirmButtonColor: '#f0443a',

                          });
              }
              var allowcated_assessment_count =$('#allowcated_assessment_count').val();
              if(allowcated_assessment_count == response.get_series_assessment_count){
                $('#save_step2_btn').removeAttr('disabled');
              }

              $('.hme-loading-mask').fadeOut();
            },
            error: function(error){
              $('.hme-loading-mask').fadeOut();
            }
          });
          $("#js-add-assessment").text("Add").attr("disabled",false);
          return false;
      }
});

$('#btn-series-success-popup,#btn-series-cancel-popup').click(function(){
  window.location='/pro/series-listing';
});

$('#btn-booknow').click(function(){
  var series_id=$("#series_id").val();
  window.location = '/pro/book-slot/1/'+series_id;
});

$('.assessment_type').change(function(e){	
	e.preventDefault();
	opt = $(this).val();
  $("#js-add-assessment").text("Processing...").attr("disabled",true);

	$.ajax({
		url:"{{ secure_url('company/get-cor-asessment-data') }}",
		data:{'type':opt},
		dataType:'json',
		type:'get',
		beforeSend:function(){
			$('.hme-loading-mask').fadeIn();
		},
		success:function(res){
			 $('.hme-loading-mask').fadeOut();
			 $('#assessment option').remove();
			 $('#js-assessment').html('<option value="">Select Assessment</option>'+res.response);
       $("#js-add-assessment").text("Add").attr("disabled",false);
		},
		 error: function(error){
		 	$('.hme-loading-mask').fadeOut();
       $("#js-add-assessment").text("Add").attr("disabled",false);
		 }
	})
})


</script>
@endsection