@extends('layouts.main')
@section('content')
<!--begin::Card-->
<div class="card card-custom">
  <div class="card-header">
    <div class="card-title">
        <span class="card-icon">
            <i class="flaticon-medal text-primary"></i>
        </span>
        <h3 class="card-label">Create New Achievement for <span class="text-info font-weight-bold">{{$career_path->career_path}}</span></h3>
    </div>      
  </div>

  <form class="form" id="kt_form_1" action="{{route('careerpath.achivements.create',[$career_path->id])}}" method="post" autocomplete="off" enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">       
          <div class="form-group">
            <label>Achievement Title<span class="text-danger">*</span></label>
            <input class="form-control" type="text" value="" id="achievements" name="achievements" placeholder="Enter Achievement Title" required/>
          </div>
        </div> 
        <div class="col-md-6">
          <div class="form-group">
            <label>Video URL</label>
            <input type="text" class="form-control" name="attachment_url" id="attachment_url" placeholder="Enter your video url (optional)"/>
          </div>
        </div>       
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Description</label>
            <textarea class="form-control" id="achievement_desc" name="achievement_desc" rows="3"></textarea>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row">
            <label class="col-lg-4 col-form-label text-right">Upload Image</label>
            <div class="col-md-8">
              <div class="image-input image-input-empty image-input-outline " id="kt_image_5" style="background-image: url({{$common->getTheamUrl('assets/media/no-image.jpg')}})">
               <div class="image-input-wrapper"></div>

               <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                <i class="fa fa-pen icon-sm text-muted"></i>
                <input type="file" name="imageUpload" accept=".png, .jpg, .jpeg"/>                  
               </label>

               <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                <i class="ki ki-bold-close icon-xs text-muted"></i>
               </span>

               <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove" data-toggle="tooltip" title="Remove avatar">
                <i class="ki ki-bold-close icon-xs text-muted"></i>
               </span>
              </div>
            </div>
          </div>
        </div>        
      </div>   

      <div id="manualCreationLibrary" style="display: block">        
        <div class="row">
          <div class="form-group col-lg-12 col-md-12 col-sm-12">
            <div class="form-group mb-6">
              <div class="alert alert-custom alert-default" role="alert">
                  <div class="alert-icon">
                      <span class="svg-icon svg-icon-primary svg-icon-xl">
                          <!--begin::Svg Icon | path:assets/media/svg/icons/Tools/Compass.svg-->
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                  <rect x="0" y="0" width="24" height="24"></rect>
                                  <path d="M7.07744993,12.3040451 C7.72444571,13.0716094 8.54044565,13.6920474 9.46808594,14.1079953 L5,23 L4.5,18 L7.07744993,12.3040451 Z M14.5865511,14.2597864 C15.5319561,13.9019016 16.375416,13.3366121 17.0614026,12.6194459 L19.5,18 L19,23 L14.5865511,14.2597864 Z M12,3.55271368e-14 C12.8284271,3.53749572e-14 13.5,0.671572875 13.5,1.5 L13.5,4 L10.5,4 L10.5,1.5 C10.5,0.671572875 11.1715729,3.56793164e-14 12,3.55271368e-14 Z" fill="#000000" opacity="0.3"></path>
                                  <path d="M12,10 C13.1045695,10 14,9.1045695 14,8 C14,6.8954305 13.1045695,6 12,6 C10.8954305,6 10,6.8954305 10,8 C10,9.1045695 10.8954305,10 12,10 Z M12,13 C9.23857625,13 7,10.7614237 7,8 C7,5.23857625 9.23857625,3 12,3 C14.7614237,3 17,5.23857625 17,8 C17,10.7614237 14.7614237,13 12,13 Z" fill="#000000" fill-rule="nonzero"></path>
                              </g>
                          </svg>
                          <!--end::Svg Icon-->
                      </span>
                  </div>
                  <div class="alert-text"><h6 class="font-weight-bold text-dark">Setup your Questions and multiple choice options<br><code>Create Your Customized Achievement Questions by Pressing "Add Question" Button Below</code></h6></div>
              </div>
            </div>
            {{--
            <div id="kt_repeater_1">
              <div class="form-group row">
                <label class="col-lg-2 col-form-label text-right">Questions</label>
                <div data-repeater-list="questions" class="col-lg-10">
                  <div data-repeater-item="" class="form-group row align-items-center">
                    <div class="col-md-10">                      
                      <input type="text" name="question" class="form-control" placeholder="Enter Question Here">
                    </div>                    
                    <div class="col-md-2">
                      <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-danger">
                      <i class="la la-trash-o"></i>Delete</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-2 col-form-label text-right"></label>
                <div class="col-lg-4">
                  <a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
                  <i class="la la-plus"></i>Add Question</a>
                </div>
              </div>
            </div>
            --}}
            <div id="kt_repeater_1">
              <div class="form-group row">
                <div data-repeater-list="questions" class="col-lg-12">
                  <div data-repeater-item="" class="form-group row align-items-center">
                    <div class="col-md-12">
                      <div class="row form-group">
                        <label class="col-lg-1 col-md-1 col-form-label">Question</label>
                        <div class="col-md-9">                  
                          <input type="text" name="question" class="form-control" placeholder="Enter Question Here">
                        </div>
                        <div class="col-md-2">
                          <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-danger">
                          <i class="la la-trash-o"></i>Delete</a>
                        </div> 
                      </div>
                    </div>

                    <div class="col-md-12 inner-repeater">  
                      <div class="form-group row"> 
                        <div data-repeater-list="options" class="col-lg-12">    
                          <div data-repeater-item="" class="form-group row align-items-center">  
                            <label class="col-lg-1 col-md-1 col-form-label text-right">Option</label>        
                            <div class="col-md-6">
                              <textarea class="form-control" id="option" name="option" rows="3" placeholder="Enter Option"></textarea>
                            </div>   
                            <div class="col-md-2">
                              <div class="checkbox-inline">
                                <label class="checkbox">
                                  <input type="checkbox" name="correct_option">
                                  <span></span>Is Correct?
                                </label>
                              </div>
                            </div>
                            <div class="col-md-2">
                              <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-danger">
                              <i class="la la-trash-o"></i>Delete</a>
                            </div> 
                          </div>
                        </div>
                      </div> 
                      <div class="form-group row">
                        <div class="col-lg-12 text-right">
                          <div class="row">
                            <div class="col-lg-2">
                              <a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
                              <i class="la la-plus"></i>Add Option</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-lg-4">
                  <a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
                  <i class="la la-plus"></i>Add Question</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <input type="hidden" name="team_id" value="{{$career_path->team_id}}">             
    </div> 
    <div class="card-footer">
        <div class="row">
            <div class="col-lg-9 ml-lg-auto">
                <button type="submit" class="btn btn-primary font-weight-bold mr-2">Save</button>
            </div>
        </div>
    </div>
  </form>
</div>
<!--end::Card-->
@endsection
@section('sub_header')
@section('sub_header')
<div class="subheader py-2 py-lg-6 subheader-transparent" id="kt_subheader">
    <div class="container d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Info-->
        <div class="d-flex align-items-center flex-wrap mr-1">
            <!--begin::Page Heading-->
            <div class="d-flex align-items-baseline flex-wrap mr-5">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold my-1 mr-5">Create Achievement </h5>
                <!--end::Page Title-->
                <!--begin::Breadcrumb-->
                <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('careerpath.achivements.list',[$career_path->id])}}" class="text-muted">{{$career_path->name}}</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="{{route('careerpath.list')}}" class="text-muted">Career Path</a>
                    </li>
                    <li class="breadcrumb-item text-muted">
                        <a href="" class="text-muted">List</a>
                    </li>
                </ul>
                <!--end::Breadcrumb-->
            </div>
            <!--end::Page Heading-->
        </div>
        
    </div>
</div>
@endsection
@section('theam_css')
<link href="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />

@endsection

@section('page_css')
<style type="text/css">
  #resourceLibraryList, #manualCreationLibrary{
    display: none;
  }
  .image-input .image-input-wrapper {
    width: 150px;
    height: 150px;
  }
</style>
@endsection

@section('js_file')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ $common->getTheamUrl('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
@endsection

@section('page_js')
    <script>
        $(document).ready(function(){   
            FormValidation.formValidation(
                document.getElementById('kt_form_1'),
                {
                    fields: {
                        achievements: {
                            validators: {
                                notEmpty: {
                                    message: 'Achievement Title is required'
                                },
                            }
                        },
                        // achievementType: {
                        //   validators: {
                        //     notEmpty: {
                        //       message: 'Please select an Achievement Type'
                        //     }
                        //   }
                        // },
                        attachment_url: {
                          validators: {
                            uri: {
                              message: 'Video url is not valid' 
                            }
                          }
                        },
                        
                    },

                    plugins: { //Learn more: https://formvalidation.io/guide/plugins
                        trigger: new FormValidation.plugins.Trigger(),
                        // Bootstrap Framework Integration
                        bootstrap: new FormValidation.plugins.Bootstrap(),
                        // Validate fields when clicking the Submit button
                        submitButton: new FormValidation.plugins.SubmitButton(),
                        // Submit the form when all fields are valid
                        defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                    }
                }
            );

            // $('body').on('change','#achievementType', function() {
            //   if (this.value == 'resourceLibrary') {
            //       $("#manualCreationLibrary").hide();
            //       $("#resourceLibraryList").show();
            //   } else if (this.value == 'new') {
            //       $("#manualCreationLibrary").show();
            //       $("#resourceLibraryList").hide();
            //   }else{
            //     $("#manualCreationLibrary").hide();
            //     $("#resourceLibraryList").hide();
            //   }
            // });

            $('#kt_repeater_1').repeater({
              initEmpty: false,
             
              defaultValues: {
                  'question': '',
                  'option':'',
                  'correct_option':'',
              },

              repeaters: [{
                // (Required)`enter code here`
                // Specify the jQuery selector for this nested repeater
                selector: '.inner-repeater',                
              }],
               
              show: function () {
                  $(this).slideDown();
              },

              hide: function (deleteElement) {                
                  $(this).slideUp(deleteElement);                 
              }   
            });

            var avatar5 = new KTImageInput('kt_image_5');

            $('body').on('keyup','.get-option', function(){              
              let myArray = $(this).val().split("|");   
              let selectElement= $(this).parent().next().children('.correct-option');
              selectElement.find('option').remove();
              selectElement.append('<option value="" selected=selected>Select Option</option>');
              $.each(myArray, function( key, value ) {
                selectElement.append('<option value="'+value+'">'+value+'</option>');
              });
            });
        });
    </script>
@endsection