@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Challenges
@endsection

@section('styles')
  <link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
    
  <!-- Responsive Tab Css -->
  <link rel="stylesheet" type="text/css" href="{{asset('assets/plugins/responsive-tab/easy-responsive-tabs.css')}}" />
@endsection

@section('content')
  <!-- MAIN BODY CONTENT -->
  <div class="top-header">
      <h1>Company Challenge</h1>      
  </div>

  @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

        
    <div class="top-header">
            <a href="{{ route('companyAdmin.companyChallenge') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Challenges</h1>
            </a>
            
            <div class="filter-group">
                          </div>
            
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="card">
                  <div class="card-header">
                  <h2>                  
                    {{ $heading }}
                  </h2>  
                   
                
                
                                Deactivated
                               
                </div>
                  <div class="card-body">                    
                   <!-- add Company-->
                  <form action="{{ route('companyAdmin.updateCompanyChallenge') }}" method="post" enctype="multipart/form-data">
                    @csrf
                   <div class="row">
                   <div class="col-md-6">
                     <h5>Challenge Details</h5>
                     <input type="hidden" name="challenge_id" id="challenge_id" value="{{ $getchallengesDetails->id }}" >
                     <div class="form-group">
                       <label for="" class="form-label">Point Value<span class="text-danger">*</span></label>
                       <input type="number" class="form-control" name="point-value" id="point-value" value="{{ $getchallengesDetails->point_value }}" min="2">
                     </div>                     
                     @if($getchallengesDetails->challenge_taking_type == 2)
                    <div class="form-group">
                       <label for="challenge_name" class="form-label">Challenge name<span class="text-danger">*</span></label>
                       <input type="text" class="form-control" name="challenge_name" id="challenge_name" value="{{ $getchallengesDetails->challenge_name }}">
                     </div>
                     <div class="form-group">
                      <label for="" class="form-label">Challenge description<span class="text-danger">*</span></label>
                      <textarea name="challenge_description" id="challenge_description" cols="" rows="" class="form-control">{{ $getchallengesDetails->challenge_desc }}</textarea>
                    </div>
                    @else  

                     <div class="form-group">
                      <label for="" class="form-label">Question<span class="text-danger">*</span></label>
                      <textarea name="challenge_question" id="challenge_question" cols="" rows="" class="form-control">{{ $getchallengesDetails->challenge_question  }}</textarea>
                    </div>                   
                    <div class="form-group">
                      <label for="" class="form-label">Answer Options</label>
                      <label for="answer-option1" class="custom-radio-fill left">
                        <input type="radio" name="answer-option" value="option1" id="answer-option1" class="d-none" @if($getQuestionAnswerDetails[0]['is_correct'] == 1) checked="checked" @endif >
                        <input type="hidden" value="{{ $getQuestionAnswerDetails[0]['id'] }}" name="answer-option1-id">
                        <span>Option 1</span>
                      </label></br></br>
                      <input type="text" class="form-control" name="answer-option1-value" value="{{ $getQuestionAnswerDetails[0]['answer'] }}"></br>
                      <label for="answer-option2" class="custom-radio-fill left">
                        <input type="radio" name="answer-option" value="option2" id="answer-option2" class="d-none" @if($getQuestionAnswerDetails[1]['is_correct'] == 1) checked="checked" @endif>
                        <input type="hidden" value="{{ $getQuestionAnswerDetails[1]['id'] }}" name="answer-option2-id">
                        <span>Option 2</span>
                      </label></br></br>
                      <input type="text" class="form-control" name="answer-option2-value" value="{{ $getQuestionAnswerDetails[1]['answer'] }}">

                    </div>
                    @endif                                    
                    <ul class="select-items">
                        <li class="item-radio"><label for="regular_challenge_patterns" class="custom-radio-fill left">
                            <input type="radio" name="challenge_patterns" value="0" id="regular_challenge_patterns" class="d-none challenge_patterns" @if($getchallengesDetails->challenge_patterns == 0) checked @endif ><span>Regular Patterns</span>
                            </label>
                        </li>
                        <li class="item-radio"><label for="recurrence_challenge_patterns" class="custom-radio-fill left">
                            <input type="radio" name="challenge_patterns" value="1" id="recurrence_challenge_patterns" class="d-none challenge_patterns" @if($getchallengesDetails->challenge_patterns == 1) checked @endif><span>Recurrence Patterns</span>
                            </label>
                        </li>
                    </ul>                     
                    <div class="form-group custom">
                      <label for="" class="form-label">Start Date<span class="text-danger">*</span></label>
                      <div id="datepicker" class="input-group date" data-date-format="d-m-yyyy">
                        <input class="form-control" name="start_date" id="start_date" type="text" value="{{ date('d-m-Y',strtotime($getchallengesDetails->start_date)) }}" />
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                      </div>
                    </div>

                    <div class="form-group">
                      <label for="" class="form-label">Start Time<span class="text-danger">*</span></label>
                      <div class="input-group time" id="timepicker">
                        <input class="form-control" name="start_time" value="{{ $getchallengesDetails->start_time }}" placeholder="HH:MM AM/PM" />
                          <span class="input-group-append input-group-addon">
                              <span class="input-group-text">
                                <i class="fa fa-clock-o"></i>
                              </span>
                          </span>
                      </div>
                    </div>                    

                    <div class="form-group custom">
                      <label for="" class="form-label">End Date<span class="text-danger">*</span></label>
                      <div id="endDatepicker"  class="input-group date" data-date-format="d-m-yyyy">
                        <input class="form-control" type="text" name="end_date" id="end_date" value="{{ date('d-m-Y',strtotime($getchallengesDetails->end_date)) }}" />
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                      </div>
                    </div> 
                                      
                    <div class="form-group extra-div-wrapper" @if(isset($getChallengeRecurrenceData)) style="display:block;" @else style="display:none;" @endif>
                        <div class="form-group extra-div">
                          <ul class="select-items">
                             <li class="item-radio"><label for="daily" class="custom-radio-fill left">
                                <input type="radio" name="recurrence_patterns" value="1" id="daily" class="d-none" @if(isset($getChallengeRecurrenceData->recurrence_patterns) && ($getChallengeRecurrenceData->recurrence_patterns == 1)) checked @endif><span>Daily</span>
                                </label>
                            </li>                            
                            <li class="item-radio"><label for="weekly" class="custom-radio-fill left">
                                <input type="radio" name="recurrence_patterns" value="2" id="weekly" class="d-none" @if(isset($getChallengeRecurrenceData->recurrence_patterns) && ($getChallengeRecurrenceData->recurrence_patterns == 2)) checked @endif ><span>Weekly</span>
                                </label>
                            </li>
                            <li class="item-radio"><label for="monthly" class="custom-radio-fill left">
                                <input type="radio" name="recurrence_patterns" value="3" id="monthly" class="d-none" @if(isset($getChallengeRecurrenceData->recurrence_patterns) && ($getChallengeRecurrenceData->recurrence_patterns == 3)) checked @endif ><span>Monthly</span>
                                </label>
                            </li>
                            <li class="item-radio"><label for="yearly" class="custom-radio-fill left">
                                <input type="radio" name="recurrence_patterns" value="4" id="yearly" class="d-none" @if(isset($getChallengeRecurrenceData->recurrence_patterns) && ($getChallengeRecurrenceData->recurrence_patterns == 4)) checked @endif ><span>Yearly</span>
                                </label>
                            </li>
                          </ul>
                        </div>
                        <div class="form-group extra-div-daily">
                          <div class="daily-block-1">
                            <ul class="select-items">
                              <li class="item-radio"><label for="daily_1_day" class="custom-radio-fill left">
                                <input type="radio" name="daily_patterns" value="1" id="daily_1_day" class="d-none" @if(isset($getChallengeRecurrenceData->daily_patterns) && ($getChallengeRecurrenceData->daily_patterns == 1)) checked @endif><span>Every 1 day(s)</span>
                                </label>
                            </li>
                            <li class="item-radio"><label for="every_week_day" class="custom-radio-fill left">
                                <input type="radio" name="daily_patterns" value="2" id="every_week_day" class="d-none" @if(isset($getChallengeRecurrenceData->daily_patterns) && ($getChallengeRecurrenceData->daily_patterns == 2)) checked @endif><span>Every week days</span>
                                </label>
                            </li>
                            </ul>
                          </div>  
                          
                         {{-- <div class="form-group daily-block-2">
                            <select name="daily_days" id="daily_days" class="form-control">
                              <option>Please select days</option>                             
                              @foreach($weekDaysList as $key => $value)                              
                                <option value="{{ $key }}" @if( isset($getChallengeRecurrenceData->daily_days) && ($key == $getChallengeRecurrenceData->daily_days)) {{'selected'}} @endif>{{ $value }}</option>                                
                              @endforeach                              
                            </select>
                          </div>--}}

                        </div>
                       
                        <div class="form-group extra-div-weekly">
                          <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <select name="weekly_days[]" class="form-control" multiple>
                                      <option>Please select days</option>
                                    @foreach($daysList as $key => $value)
                                      <option value="{{ $key }}" @if(in_array($key,$week_days)) {{'selected'}} @endif >{{ $value }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="form-group extra-div-monthly">
                            <div class="monthly-block-1">
                              <ul class="select-items">
                                  <li class="item-radio"><label for="monthly_option_1" class="custom-radio-fill left">
                                    <input type="radio" name="monthly_option" value="1" id="monthly_option_1" class="d-none"  @if( isset($getChallengeRecurrenceData->monthly_option) && $getChallengeRecurrenceData->monthly_option == 1) checked @endif><span>Particular date of every month</span>
                                    </label>
                                </li>
                                <li class="item-radio"><label for="monthly_option_2" class="custom-radio-fill left">
                                    <input type="radio" name="monthly_option" value="2" id="monthly_option_2" class="d-none"  @if( isset($getChallengeRecurrenceData->monthly_option) && $getChallengeRecurrenceData->monthly_option == 2) checked @endif><span>Particular day of specific week in  month</span>
                                    </label>
                                </li>
                              </ul>
                            </div>

                          <div class="monthly-block-2">
                            <div class="row">
                              <div class="col-md-12">
                                <div class="form-group">
                                  <select name="monthly_date" id="monthly_date" class="form-control">  
                                  <option value="0">Please Select Date</option>                        
                                    @for($i=1;$i<=30;$i++)
                                      <option value="{{ $i }}" @if( isset($getChallengeRecurrenceData->monthly_date) &&  $i == $getChallengeRecurrenceData->monthly_date) {{'selected'}} @endif>{{ $i }}</option>
                                    @endfor                        
                                  </select>
                                </div>
                              </div>
                            </div>                            
                          </div>
                          <div class="monthly-block-3">
                            <div class="row">
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select name="monthly_week" id="monthly_week" class="form-control">
                                    <option value="0">Please Select Week</option>
                                    <option value="1" @if( isset($getChallengeRecurrenceData->monthly_week) && 1== $getChallengeRecurrenceData->monthly_week) {{'selected'}} @endif>1st Week</option>
                                    <option value="2" @if( isset($getChallengeRecurrenceData->monthly_week) && 2 == $getChallengeRecurrenceData->monthly_week) {{'selected'}} @endif>2nd Week</option>
                                    <option value="3" @if( isset($getChallengeRecurrenceData->monthly_week) && 3 == $getChallengeRecurrenceData->monthly_week) {{'selected'}} @endif>3rd Week</option>
                                    <option value="4" @if(isset($getChallengeRecurrenceData->monthly_week) && 4== $getChallengeRecurrenceData->monthly_week) {{'selected'}} @endif>4th Week</option>
                                    <option value="5" @if(isset($getChallengeRecurrenceData->monthly_week) && 5 == $getChallengeRecurrenceData->monthly_week) {{'selected'}} @endif>5th Week</option>
                                  </select>

                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select names="monthly_days" id="monthly_days" class="form-control">
                                      <option>Please select days</option>
                                    @foreach($daysList as $key => $value)
                                      <option value="{{ $key }}" @if( isset($getChallengeRecurrenceData->monthly_days) && $key == $getChallengeRecurrenceData->monthly_days) {{'selected'}} @endif>{{ $value }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            </div> 
                          </div>
                        </div>                    
                        <div class="form-group extra-div-yearly">
                          <div class="yearly-block-1">
                              <ul class="select-items">
                                  <li class="item-radio"><label for="yearly_option_1" class="custom-radio-fill left">
                                    <input type="radio" name="yearly_option" value="1" id="yearly_option_1" class="d-none"  @if( isset($getChallengeRecurrenceData->yearly_option) && $getChallengeRecurrenceData->yearly_option == 1) checked @endif><span>Specific date of a specific month</span>
                                    </label>
                                </li>
                                <li class="item-radio"><label for="yearly_option_2" class="custom-radio-fill left">
                                    <input type="radio" name="yearly_option" value="2" id="yearly_option_2" class="d-none" @if( isset($getChallengeRecurrenceData->yearly_option) && $getChallengeRecurrenceData->yearly_option == 2) checked @endif ><span>Particular day of specific week in  month</span>
                                    </label>
                                </li>
                              </ul>
                            </div>
                            
                          <div class="yearly-block-2">
                            <div class="row">
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select name="yearly_date" id="yearly_date" class="form-control">
                                    <option value="0">Please Select date</option>
                                    @for($i=1;$i<=30;$i++)
                                      <option value="{{ $i }}"  @if( isset($getChallengeRecurrenceData->yearly_date) && $i == $getChallengeRecurrenceData->yearly_date) {{'selected'}} @endif >{{ $i }}</option>
                                    @endfor
                                  </select>
                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select name="yearly_month" id="yearly_month" class="form-control">
                                    <option>Please select month</option>
                                    @foreach($monthsList as $key => $value)
                                    <option value="{{ $key }}"  @if(isset($getChallengeRecurrenceData->yearly_month) && $key == $getChallengeRecurrenceData->yearly_month) {{'selected'}} @endif>{{ $value }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            </div>                            
                            
                            </div>
                          <div class="yearly-block-3">
                            <div class="row">
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select name="yearly_week" id="yearly_week" class="form-control">
                                    <option value="0">Please Select</option>
                                    <option value="1" @if(isset($getChallengeRecurrenceData->yearly_week) && 1== $getChallengeRecurrenceData->yearly_week) {{'selected'}} @endif>1st Week</option>
                                    <option value="2" @if(isset($getChallengeRecurrenceData->yearly_week) && 2 == $getChallengeRecurrenceData->yearly_week) {{'selected'}} @endif>2nd Week</option>
                                    <option value="3" @if(isset($getChallengeRecurrenceData->yearly_week) && 3 == $getChallengeRecurrenceData->yearly_week) {{'selected'}} @endif>3rd Week</option>
                                    <option value="4" @if(isset($getChallengeRecurrenceData->yearly_week) && 4== $getChallengeRecurrenceData->yearly_week) {{'selected'}} @endif>4th Week</option>
                                    <option value="5" @if(isset($getChallengeRecurrenceData->yearly_week) && 5 == $getChallengeRecurrenceData->yearly_week) {{'selected'}} @endif>5th Week</option>
                                  </select>

                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="form-group">
                                  <select name="yearly_days" id="yearly_days"  class="form-control">
                                      <option>Please select</option>
                                    @foreach($daysList as $key => $value)
                                      <option value="{{ $key }}" @if(isset($getChallengeRecurrenceData->yearly_days) && $key == $getChallengeRecurrenceData->yearly_days) {{'selected'}} @endif >{{ $value }}</option>
                                    @endforeach
                                  </select>

                                </div>
                              </div>
                              <div class="col-md-12">
                                <div class="form-group">
                                  <select name="yearly_2_month" id="yearly_2_month" class="form-control">
                                    <option>Please select month</option>
                                    @foreach($monthsList as $key => $value)
                                    <option value="{{ $key }}" @if(isset($getChallengeRecurrenceData->yearly_2_month) && $key == $getChallengeRecurrenceData->yearly_2_month) {{'selected'}} @endif >{{ $value }}</option>
                                    @endforeach
                                  </select>

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

                   <div class="col-md-6">
                     <h5>Submission Details</h5>

                     <div class="form-group">
                       <label for="" class="form-label">Model Header Description</label>
                       <textarea class="form-control" name="modal_header" id="modal_header" cols="" rows="">{{ $getchallengesDetails->modal_header  }}</textarea>
                     </div>
                      @if($getchallengesDetails->challenge_taking_type == 2)
                     <div class="form-group">
                      <label for="" class="form-label">Model Description</label>
                      <textarea class="form-control" name="modal_desc" id="modal_desc" cols="" rows="">{{ $getchallengesDetails->modal_desc  }}</textarea>
                    </div>
                    @else
                     <div class="form-group">
                      <label for="" class="form-label">Model Description True</label>
                      <textarea class="form-control" name="modal_desc_true" id="modal_desc_true" cols="" rows="">{{ $getchallengesDetails->modal_desc_true  }}</textarea>
                    </div>

                    <div class="form-group">
                      <label for="" class="form-label">Model Description False</label>
                      <textarea class="form-control" name="modal_desc_false" id="modal_desc_false" cols="" rows="">{{ $getchallengesDetails->modal_desc_false  }}</textarea>
                    </div>
                    @endif
                                       </div>
                 </div>
                  </form>                    
                    
                    <h2>Challenge Assignment</h2>
                    <div class="c-assignment">
                      @if(count($assignEmployeeDetails) > 0)
                      <ul>
                        @foreach($assignEmployeeDetails as $key => $val)
                        <li><label for="" class="specific-label">{{ $key }}</label>       

                           @if( isset($val) && (count($val) > 0))               
                          <div class="dropdown custom-dropdown company-dropdown details-dropdown">
                             
                              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="dropdown-text">Assigned Employees</span>
                              <span class="caret"></span></button>
                              <ul class="dropdown-menu">                                  
                                   @foreach( $val as $k => $v) 
                                  <li><a href="javascript:void(0)"><label><input name='emp_name[]' type="checkbox" class="option justone  checked_loc checked_all_loc" value='{{$v->getEmployeeName->name}}' checked="checked" />{{$v->getEmployeeName->name}}</label></a></li>
                                  @endforeach                                 
                                </ul>  
                          </div>
                           @else
                          <p class="for-all-emp">For All Employee</p>                       
                          @endif   
                        
                        

                        </li>
                        @endforeach
                      </ul>
                      @else
                      Company wide Challenge
                      @endif
                    </div>
                   

                  </div>
                </div>
              </div>
@endsection

@section('scripts')
<!-- Data tables -->
  <!--<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
  <script src="{{ asset('assets/js/datatable.js') }}"></script>-->

   <!-- Datepicker Bootstrap -->  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css">
  <!-- Bootstrap Timepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
 
  <script type="text/javascript">
  $(document).ready(function(){

    /*$("#datepicker").datepicker({ 
            autoclose: true,             
            format: 'd-m-yyyy',   
            minDate: new Date('d-m-yyyy'),         
      }).datepicker('startDate', new Date("{{ date('d-m-yyyy',strtotime($getchallengesDetails->start_date)) }}"));

      $("#endDatepicker").datepicker({ 
            autoclose: true,            
            format: 'd-m-yyyy',
             minDate:0,    
      }).datepicker('startDate', new Date("{{ date('d-m-yyyy',strtotime($getchallengesDetails->end_date)) }}"));*/
      
       $("#start_date").datepicker({
          todayBtn:  1,
          autoclose: true,
          format: 'd-m-yyyy',
          startDate:new Date(),
      }).on('changeDate', function (selected) {
          var minDate = new Date(selected.date.valueOf());        
          $('#end_date').datepicker('setStartDate', minDate);        
      });

      $("#end_date").datepicker({
        format: 'd-m-yyyy',
         startDate:new Date(),
      }).on('changeDate', function (selected) {
              var maxDate = new Date(selected.date.valueOf());
              $('#start_date').datepicker('setEndDate', maxDate);
      });
    
      $("#timepicker").datetimepicker({
      format: "LT",
      icons: {
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down"
      }
    });

        $(".d-none").click(function(){
            var radioValue = $("input[name='selectstatus']:checked").val();
            var id = $(this).attr('data-id');
            if(radioValue){
               // alert("Your are a - " + id);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('companyAdmin.changeCompanychallengeStatus') }}",
                method: 'post',
                dataType: 'json',
                data : { 
                    is_active: radioValue,                     
                    id: id, 
                    _token: $('meta[name="csrf_token"]').attr('content')
                },
                success: function (result) {
                    if (result.success == true) {
                        oTable.draw();
                    } else {
                        //Do nothing
                    }
                }
            });

            }
        });
        var challenge_patterns = $('input[name="challenge_patterns"]:checked').val();
        var recurrence_patterns = $('input[name="recurrence_patterns"]:checked').val();
      //  console.log(challenge_patterns);
       // console.log(recurrence_patterns);

        if(challenge_patterns == 0){
          $('.extra-div-wrapper').hide();           
          $('input[name="recurrence_patterns"]').prop('checked', false); 
          $('input[name="daily_patterns"]').prop('checked', false);  
          //$('#daily_days').prop('selectedIndex',0);        
          $('#weekly_days').prop('selectedIndex',0);

          $('input[name="monthly_option"]').prop('checked', false);
          $('#monthly_date').prop('selectedIndex',0);   
          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);  

          $('input[name="yearly_option"]').prop('checked', false);
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);
        }else{
          $('.extra-div-wrapper').show();
          if(recurrence_patterns == 1){
            $('.extra-div-daily').show();
            $('.extra-div-weekly').hide();
            $('.extra-div-monthly').hide();
            $('.extra-div-yearly').hide();
            var daily_patterns = $('input[name="daily_patterns"]:checked').val();
            if(daily_patterns == '1') {
                //$('.daily-block-2').hide();
                //$('#daily_days').prop('selectedIndex',0);
                $('#weekly_days').prop('selectedIndex',0);
                $('input[name="monthly_option"]').prop('checked', false);
                $('#monthly_date').prop('selectedIndex',0);   
                $('#monthly_week').prop('selectedIndex',0);   
                $('#monthly_days').prop('selectedIndex',0); 
                $('input[name="yearly_option"]').prop('checked', false);
                $('#yearly_date').prop('selectedIndex',0);
                $('#yearly_month').prop('selectedIndex',0);
                $('#yearly_week').prop('selectedIndex',0);
                $('#yearly_days').prop('selectedIndex',0);
                $('#yearly_2_month').prop('selectedIndex',0);
            } else {              
              //$('.daily-block-2').show();
            }            
          }else if(recurrence_patterns == 2){
            $('.extra-div-daily').hide();
            $('.extra-div-weekly').show();
            $('.extra-div-monthly').hide();
            $('.extra-div-yearly').hide();

            //$('#daily_days').prop('selectedIndex',0);
            $('input[name="daily_patterns"]').prop('checked', false);
            $('input[name="monthly_option"]').prop('checked', false);
            $('#monthly_date').prop('selectedIndex',0);   
            $('#monthly_week').prop('selectedIndex',0);   
            $('#monthly_days').prop('selectedIndex',0);  

            $('input[name="yearly_option"]').prop('checked', false);
            $('#yearly_date').prop('selectedIndex',0);
            $('#yearly_month').prop('selectedIndex',0);
            $('#yearly_week').prop('selectedIndex',0);
            $('#yearly_days').prop('selectedIndex',0);
            $('#yearly_2_month').prop('selectedIndex',0);
            
          }else if(recurrence_patterns == 3){
            $('.extra-div-daily').hide();
            $('.extra-div-weekly').hide();
            $('.extra-div-monthly').show();
            $('.extra-div-yearly').hide();
            var monthly_option = $('input[name="monthly_option"]:checked').val();
            if(monthly_option == '1') {
              $('.monthly-block-2').show(); 
              $('.monthly-block-3').hide();

              //$('#daily_days').prop('selectedIndex',0);
              $('input[name="daily_patterns"]').prop('checked', false);          
              $('#weekly_days').prop('selectedIndex',0);

              $('#monthly_week').prop('selectedIndex',0);   
              $('#monthly_days').prop('selectedIndex',0);


              $('input[name="yearly_option"]').prop('checked', false);
              $('#yearly_date').prop('selectedIndex',0);
              $('#yearly_month').prop('selectedIndex',0);
              $('#yearly_week').prop('selectedIndex',0);
              $('#yearly_days').prop('selectedIndex',0);
              $('#yearly_2_month').prop('selectedIndex',0);

            } else {
              $('.monthly-block-2').hide();
              $('.monthly-block-3').show();

              //$('#daily_days').prop('selectedIndex',0);
              $('input[name="daily_patterns"]').prop('checked', false);          
              $('#weekly_days').prop('selectedIndex',0);

              $('#monthly_date').prop('selectedIndex',0); 

              $('input[name="yearly_option"]').prop('checked', false);
              $('#yearly_date').prop('selectedIndex',0);
              $('#yearly_month').prop('selectedIndex',0);
              $('#yearly_week').prop('selectedIndex',0);
              $('#yearly_days').prop('selectedIndex',0);
              $('#yearly_2_month').prop('selectedIndex',0);
            }
            
          }else if(recurrence_patterns == 4){

              $('.extra-div-daily').hide();
              $('.extra-div-weekly').hide();
              $('.extra-div-monthly').hide();
              $('.extra-div-yearly').show();
              var yearly_option = $('input[name="yearly_option"]:checked').val();
              if(yearly_option == 1){
                $('.yearly-block-2').show(); 
                $('.yearly-block-3').hide(); 

                //$('#daily_days').prop('selectedIndex',0);
                $('input[name="daily_patterns"]').prop('checked', false);          
                $('#weekly_days').prop('selectedIndex',0);

                $('input[name="monthly_option"]').prop('checked', false);
                $('#monthly_date').prop('selectedIndex',0);   
                $('#monthly_week').prop('selectedIndex',0);   
                $('#monthly_days').prop('selectedIndex',0);  
                
                $('#yearly_week').prop('selectedIndex',0);
                $('#yearly_days').prop('selectedIndex',0);
                $('#yearly_2_month').prop('selectedIndex',0);         

              }else{

                $('.yearly-block-2').hide();
                $('.yearly-block-3').show();

                //$('#daily_days').prop('selectedIndex',0);
                $('input[name="daily_patterns"]').prop('checked', false);          
                $('#weekly_days').prop('selectedIndex',0);

                $('input[name="monthly_option"]').prop('checked', false);
                $('#monthly_date').prop('selectedIndex',0);   
                $('#monthly_week').prop('selectedIndex',0);   
                $('#monthly_days').prop('selectedIndex',0);  
                
                $('#yearly_date').prop('selectedIndex',0);
                $('#yearly_month').prop('selectedIndex',0);

              }
            
          } 
        }

        $('.challenge_patterns').change(function() {
        if (this.value == 0) {          
          $('.extra-div-wrapper').hide();
           
          $('input[name="recurrence_patterns"]').prop('checked', false); 
          $('input[name="daily_patterns"]').prop('checked', false);  
          //$('#daily_days').prop('selectedIndex',0);        
          $('#weekly_days').prop('selectedIndex',0);

          $('input[name="monthly_option"]').prop('checked', false);
          $('#monthly_date').prop('selectedIndex',0);   
          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);  

          $('input[name="yearly_option"]').prop('checked', false);
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);

        }
        else if (this.value == 1) {          
            $('.extra-div-wrapper').show();
            $('.extra-div-daily').hide();
            $('.extra-div-weekly').hide();
            $('.extra-div-monthly').hide();
            $('.extra-div-yearly').hide();
            //$('.daily-block-2').hide();
            $('.monthly-block-2').hide();
            $('.monthly-block-3').hide();
            $('.yearly-block-2').hide();
            $('.yearly-block-3').hide();
        }
    });
     
    $(document).on('click', '#daily', function(event) {
      $('.extra-div-daily').show();
      $('.extra-div-weekly').hide();
      $('.extra-div-monthly').hide();
      $('.extra-div-yearly').hide();
      
    });
    $(document).on('click', '#weekly', function(event) {
      $('.extra-div-daily').hide();
      $('.extra-div-weekly').show();
      $('.extra-div-monthly').hide();
      $('.extra-div-yearly').hide();

      //$('input[name="recurrence_patterns"]').prop('checked', false);         
      //$('#daily_days').prop('selectedIndex',0);
      $('input[name="daily_patterns"]').prop('checked', false);
      $('input[name="monthly_option"]').prop('checked', false);
      $('#monthly_date').prop('selectedIndex',0);   
      $('#monthly_week').prop('selectedIndex',0);   
      $('#monthly_days').prop('selectedIndex',0);  

      $('input[name="yearly_option"]').prop('checked', false);
      $('#yearly_date').prop('selectedIndex',0);
      $('#yearly_month').prop('selectedIndex',0);
      $('#yearly_week').prop('selectedIndex',0);
      $('#yearly_days').prop('selectedIndex',0);
      $('#yearly_2_month').prop('selectedIndex',0);      
    });
    $(document).on('click', '#monthly', function(event) {
      $('.extra-div-daily').hide();
      $('.extra-div-weekly').hide();
      $('.extra-div-monthly').show();
      $('.extra-div-yearly').hide();

     // $('input[name="recurrence_patterns"]').prop('checked', false);         
      //$('#daily_days').prop('selectedIndex',0);

      $('input[name="daily_patterns"]').prop('checked', false);          
      $('#weekly_days').prop('selectedIndex',0);

      $('input[name="yearly_option"]').prop('checked', false);
      $('#yearly_date').prop('selectedIndex',0);
      $('#yearly_month').prop('selectedIndex',0);
      $('#yearly_week').prop('selectedIndex',0);
      $('#yearly_days').prop('selectedIndex',0);
      $('#yearly_2_month').prop('selectedIndex',0);

    });
    $(document).on('click', '#yearly', function(event) {
      $('.extra-div-daily').hide();
      $('.extra-div-weekly').hide();
      $('.extra-div-monthly').hide();
      $('.extra-div-yearly').show();

      //$('input[name="recurrence_patterns"]').prop('checked', false);         
      //$('#daily_days').prop('selectedIndex',0);

      $('input[name="daily_patterns"]').prop('checked', false);          
      $('#weekly_days').prop('selectedIndex',0);

      $('input[name="monthly_option"]').prop('checked', false);
      $('#monthly_date').prop('selectedIndex',0);   
      $('#monthly_week').prop('selectedIndex',0);   
      $('#monthly_days').prop('selectedIndex',0);
    });

    $("input[name='daily_patterns']").change(function(e){
        if($(this).val() == '1') {
          //$('.daily-block-2').hide(); 
                 
          //$('#daily_days').prop('selectedIndex',0);
                  
          $('#weekly_days').prop('selectedIndex',0);

          $('input[name="monthly_option"]').prop('checked', false);
          $('#monthly_date').prop('selectedIndex',0);   
          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);  

          $('input[name="yearly_option"]').prop('checked', false);
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);

        } else {
         // $('.daily-block-2').show();
        }
    });

    $("input[name='monthly_option']").change(function(e){
        if($(this).val() == '1') {
          $('.monthly-block-2').show(); 
          $('.monthly-block-3').hide(); 

          //$('#daily_days').prop('selectedIndex',0);
          $('input[name="daily_patterns"]').prop('checked', false);          
          $('#weekly_days').prop('selectedIndex',0);

          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);


          $('input[name="yearly_option"]').prop('checked', false);
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);

        } else {
          $('.monthly-block-2').hide();
          $('.monthly-block-3').show();

          //$('#daily_days').prop('selectedIndex',0);
          $('input[name="daily_patterns"]').prop('checked', false);          
          $('#weekly_days').prop('selectedIndex',0);

          $('#monthly_date').prop('selectedIndex',0); 

          $('input[name="yearly_option"]').prop('checked', false);
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);
        }
    });
    $("input[name='yearly_option']").change(function(e){
        if($(this).val() == '1') {
          $('.yearly-block-2').show(); 
          $('.yearly-block-3').hide(); 

          //$('#daily_days').prop('selectedIndex',0);
          $('input[name="daily_patterns"]').prop('checked', false);          
          $('#weekly_days').prop('selectedIndex',0);

          $('input[name="monthly_option"]').prop('checked', false);
          $('#monthly_date').prop('selectedIndex',0);   
          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);  
          
          $('#yearly_week').prop('selectedIndex',0);
          $('#yearly_days').prop('selectedIndex',0);
          $('#yearly_2_month').prop('selectedIndex',0);

        } else {
          $('.yearly-block-2').hide();
          $('.yearly-block-3').show();

          //$('#daily_days').prop('selectedIndex',0);
          $('input[name="daily_patterns"]').prop('checked', false);          
          $('#weekly_days').prop('selectedIndex',0);

          $('input[name="monthly_option"]').prop('checked', false);
          $('#monthly_date').prop('selectedIndex',0);   
          $('#monthly_week').prop('selectedIndex',0);   
          $('#monthly_days').prop('selectedIndex',0);  
          
          $('#yearly_date').prop('selectedIndex',0);
          $('#yearly_month').prop('selectedIndex',0);         

        }
    });

    });


  </script>
  <style type="text/css">
  .form-group.extra-div .select-items,
  .form-group.extra-div-weekly .select-items,
  .form-group.extra-div-yearly .select-items,
  .form-group.extra-div-daily .select-items,
  .form-group.extra-div-monthly .select-items {
    padding-left: 0;
  }
  .form-group.extra-div .select-items {
    display: flex;
    align-items: center;
  }
  .form-group.extra-div .select-items li:not(:last-child) {
    margin-right: 20px;
  }
</style>
@endsection