@extends('locationAdmin.layouts.auth')

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

@section('styles')
	<!-- Data table css -->
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
		<a href="{{ route('locationAdmin.company.daily.addChallenge') }}">
        	<h1 class="link"><img src="{{ asset('assets/images/back-btn.svg') }}" alt=""> Return to Daily Challenges</h1>
        </a>
    </div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

	<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('locationAdmin.company.daily.saveChallenge') }}" method="post" enctype="multipart/form-data">
	                	@csrf
		               <div class="row">
                   <div class="col-md-6">
                     <h5>Challenge Details</h5>

                     <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" min="2" value="{{ old('point-value') }}" >
                     </div>

                     @if($global_challenge_taking_type == 2 || $company_specific_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="{{ old('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">{{ old('challenge_description') }}</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">{{ old('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">
                        <span>Option 1</span>
                      </label></br></br>
                      <input type="text" class="form-control" name="answer-option1-value" value="{{ old('answer-option1-value') }}"></br>
                      <label for="answer-option2" class="custom-radio-fill left">
                        <input type="radio" name="answer-option" value="option2" id="answer-option2" class="d-none">
                        <span>Option 2</span>
                      </label></br></br>
                      <input type="text" class="form-control" name="answer-option2-value" value="{{ old('answer-option2-value') }}">

                    </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" id="startdate" type="text" value="{{ old('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" placeholder="HH:MM AM/PM" value="{{ old('start_time') }}" />
                          <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="enddate" value="{{ old('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="" maxlength="150">{{ old('modal_header') }}</textarea>
                     </div>
                     @if($global_challenge_taking_type == 2 || $company_specific_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="" maxlength="150" >{{ old('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="" maxlength="150">{{ old('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="" maxlength="150">{{ old('modal_desc_false') }}</textarea>
                    </div>
                    @endif
                    <div class="form-group">
                      <button class="btn btn-warning btn-block">Send Challenge</button>
                    </div>

                   </div>
                 </div>
	                </form> 
	            </div>
            </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@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(){

    $("#startdate").datepicker({
        todayBtn:  1,
        autoclose: true,
        format: 'd-m-yyyy',
        startDate:new Date(),
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());        
        $('#enddate').datepicker('setStartDate', minDate);        
    });

    $("#enddate").datepicker({
      format: 'd-m-yyyy',
       startDate:new Date(),
    }).on('changeDate', function (selected) {
            var maxDate = new Date(selected.date.valueOf());
            $('#startdate').datepicker('setEndDate', maxDate);
    });

      $("#timepicker").datetimepicker({
      format: "LT",
      icons: {
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down"
      }
    });
  })
  </script>
@endsection