@extends('superAdmin.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')}}" />
  <!-- SELECT 2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
	    <h1>Challenges</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('superAdmin.challenge') }}">
              <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>                  
                </div>
                  <div class="card-body">                    
                   <!-- add Company-->
                  <form action="{{ route('superAdmin.updateChallenge')}}" 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
                    <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" id="start_date" name="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" id="end_date" name="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>

                   <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 => $company)
                           <li>
                             @if(isset($assignEmployeeDetails[$key]['loc'])) 
                             <label for="" class="specific-label">{{($company['company_name'])}}</label>

                             
                               @if(count($assignEmployeeDetails[$key]['loc']) > 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 Locations</span>
                                <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                 @foreach($assignEmployeeDetails[$key]['loc'] as $key1 => $val)
                                 <li><a href="javascript:void(0)"><label><input name='location_name[]' type="checkbox" class="option justone  checked_loc checked_all_loc" value='{{$val->getCompanyLocation->name}}' checked="checked" />{{$val->getCompanyLocation->name}}</label></a></li>
                                 @endforeach
                               </ul>
                             </div>
                               @endif     
                             


                             @if(isset($assignEmployeeDetails[$key]['emp_name'])) 

                               @if(count($assignEmployeeDetails[$key]['emp_name']) > 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($assignEmployeeDetails[$key]['emp_name'] as $key => $emp)
                                   <li><a href="javascript:void(0)"><label><input name='emp_name[]' type="checkbox" class="option justone  checked_loc checked_all_loc" value='{{$emp->user_id}}' checked="checked" />{{$emp->getEmployeeName->name}}</label></a></li>
                                   @endforeach
                                </ul>  
                              </div>
                              @else
                              <p class="for-all-emp">For All Employees</p>   
                              @endif

                              @endif 

                            @endif                             
                           </li> 
                           @endforeach                          
                         </ul>
                         @else
                         <p class="for-all-emp">For Companies, All Locations and all Employees</p>   
                         @endif
                      </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(){

    /*$("#start_date").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)) }}")
      );

      $("#end_date").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('superAdmin.changeChallengeStatus') }}",
                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
                    }
                }
            });

            }
        });
    });
  </script>
<!-- SELECT 2 -->
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script>
  $(document).ready(function() {
      $('.js-example-basic-multiple').select2();
    $('[data-toggle="tooltip"]').tooltip()
  });
</script>
@endsection