@extends('locationAdmin.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>Global 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('locationAdmin.challenge') }}">
              <h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Challenges</h1>
            </a>
            
            <div class="filter-group" style="display:none;">
                          </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="" 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="text" class="form-control" name="point-value" id="point-value" value="{{ $getchallengesDetails->point_value }}">
                     </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" 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" 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 => $val)
                        <li><label for="" class="specific-label">{{ $key }}</label>                         
                          @if( count($val['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"> Select Options</span>
                              <span class="caret"></span></button>
                              <ul class="dropdown-menu">                                  
                                   @foreach( $val as $k => $v)                                    
                                    @foreach( $v as $k1 => $v1)
                                         <li><a href="javascript:void(0)"><label><input name='emp_name[]' type="checkbox" class="option justone  checked_loc checked_all_loc" value='{{ $v1->user_id }}' checked="checked" />{{ $v1->getEmployeeName->name }}</label></a></li>
                                    @endforeach 
                                  @endforeach                                 
                                </ul>  
                          </div>
                           @else
                          <p class="for-all-emp">For Locatios and All Employees</p>                       
                          @endif
                         </li>
                        @endforeach
                      </ul>
                      @else
                      <p class="for-all-emp">For Locatios and All Employees</p> 
                      @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)) }}"));

      $("#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: "",
                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>
@endsection