@extends('company.layouts.main')
@section('content')
<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Edit virtual experience</h1><br>
          <a class="btn btn-outline-info" href="{{ route('virtualExpList.view') }}">Back</a>
        </div>

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

  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="row">
          <div class="col-lg-12">
            <div class="card-body">
              <form action="{{ route('virtualExperienceProg.update',[$virtual_exp_program->id])}}" method="POST" id="editVirtualExperience" enctype="multipart/form-data">
                @if(Session::has('success'))
                <div class="alert alert-success">{{ Session::get('success') }}</div>
                @endif
                @csrf

                <div class="form-group">
          <label class="form-label" for="title">VWEP Title</label>
           <input type="text" class="form-control" id="title" name="title"
             placeholder="title" value="{{ $virtual_exp_program->title }}" autocomplete="off" />
              <label id="agent-name-error" class="error" style="display: none;"></label>
              @error('title')
            <span class='text-danger'>{{$message}}</span>
              @enderror
           </div>


           <div class="form-group">
               <label>Thumbnail Image </label><span class="text-danger">*</span>
               <p style="font-size:14px;">Image size should be 476 * 551 px and image file type should be JPG or PNG .</p>
               <img src="{{$virtual_exp_program->image}}"
                                        width="50" height="50">
               <input type="file" name="image" class="form-control" value="{{ $virtual_exp_program->image }}" />
               @error('image')
              <span class='text-danger'>{{$message}}</span>
              @enderror
            </div>

            <div class="form-group">
             <label class="form-label" for="department_name">Category</label>
             <select name="category" class="form-control" id="category">
              <option value="">Select category</option>
                @foreach($categories as $category)
              <option value="{{$category->id}}" {{ $virtual_exp_program->category_id == $category->id ? 'selected' : null }}>{{$category->name}}</option>
              @endforeach
             </select>
               @error('category')
              <span class='text-danger'>{{$message}}</span>
                @enderror
           </div>

           <div class="form-group">
             <label class="form-label" for="department_name">VWEP Duration</label>
             <p style="font-size:14px;"> Please mentioned duration as hour and minutes i.e. 2h 30Min.</p>
              <input type="text" class="form-control" id="duration" name="duration"
               placeholder="duration" value="{{ $virtual_exp_program->duration }}" autocomplete="off" />
                <label id="agent-name-error" class="error" style="display: none;"></label>
                @error('name')
              <span class='text-danger'>{{$message}}</span>
                @enderror
           </div>

         <div class="form-group">
               <label>Difficulty Level </label><span class="text-danger">*</span>
           <select class="form-control" name="difficulty_level" value="{{$virtual_exp_program->difficulty_level}}" id="">
                <option value="">Select Difficulty Level</option>
                @foreach($difficulty_levels as $difficulty_level)
                <option value="{{$difficulty_level->id}}" {{ $virtual_exp_program->difficulty_level_id == $difficulty_level->id ? 'selected' : null }}>{{$difficulty_level->difficulty_level}}</option>
                @endforeach

           </select>
        </div>

            
           <div class="form-group">
               <label>Banner Image</label><span class="text-danger">*</span>
               <p style="font-size:14px;">Image size should be 1519 * 611 px and image file type should be JPG or PNG .</p>
               <img src="{{$virtual_exp_program->banner}}"
                                        width="50" height="50">
               <input type="file" name="banner" class="form-control" value="{{ $virtual_exp_program->banner }}" />
               @error('banner')
               <span class='text-danger'>{{$message}}</span>
              @enderror
            </div>

            <div class="form-group">
               <label>Banner Description </label><span class="text-danger">*</span>
              <textarea class="form-control summernote" name="description" id="description" cols="30" rows="10">{{$virtual_exp_program->description}}</textarea>
              <span class='text-danger' id="descriptionError"></span>

              @error('description')
              <span class='text-danger'>{{$message}}</span>
                @enderror
        </div>

                           <div class="form-group">
                                   <label> Skills </label><span class="text-danger">*</span>
                                   <input type="text" class="form-control forms" id="skill" name="skill" value="{{ $virtual_exp_program->skills }}"
                                     placeholder="Enter skills">
                                     <div id="tagsContainer">
                                      
                                 </div>

                


          <div class="form-group">
              <label>Department </label><span class="text-danger">*</span>
              <select class="form-select form-control" name="department_id" id="">
              <option value="">Select Department</option>
              @foreach($departments as $department)
              <option value={{$department->id}} {{ $virtual_exp_program->department_id == $department->id ? 'selected' : null }}>{{$department->department_name}}</option>
              @endforeach

              </select>
              @error('department_id')
              <span class='text-danger'>{{$message}}</span>
              @enderror
              </div>    
              
              
              <div class="form-group">
             <label class="form-label" for="self_pace_duration">Mode</label>
              <input type="text" class="form-control" id="self_pace_duration" name="self_pace_duration"
               placeholder="mode" value="{{ $virtual_exp_program->self_pace_duration }}" autocomplete="off" />
                <label id="agent-name-error" class="error" style="display: none;"></label>
                @error('self_pace_duration')
              <span class='text-danger'>{{$message}}</span>
                @enderror
           </div>
            


            <div class="form-group">
               <label>Introduction Video </label><span class="text-danger">*</span>
               <video src="{{$virtual_exp_program->video}}" width="100" height="100"></video>
               <input type="file" name="video" class="form-control" value="{{ $virtual_exp_program->video }}" />
               @error('video')
              <span class='text-danger'>{{$message}}</span>
              @enderror
            </div>

            <div class="form-group">
               <label>Introduction Video Description </label><span class="text-danger">*</span>
              <textarea class="form-control summernote" maxlength="250" name="video_intro_description" id="video_intro_description" cols="30" rows="10">{{$virtual_exp_program->video_intro_description}}</textarea>
              <span class='text-danger' id="video_intro_descriptionError"></span>

              @error('video_intro_description')
              <span class='text-danger'>{{$message}}</span>
                @enderror
          </div>          

                <div class="form-group">
               <label>About the Simulation</label><span class="text-danger">*</span>
              <textarea class="form-control summernote" name="about" id="about" cols="30" rows="10">{{$virtual_exp_program->about}}</textarea>
              <span class='text-danger' id="aboutError"></span>

              @error('about')
              <span class='text-danger'>{{$message}}</span>
                @enderror
          </div>  

           


                <button class="btn btn-info mt-4" type="submit">Update</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>


document.getElementById('skills').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // Prevent the default form submission behavior
        var inputValue = event.target.value.trim();
        var skill = document.getElementById('skill');
        if (inputValue !== '' && inputValue !== ',') {
           skill.value = skill.value ? skill.value + ',' + inputValue : inputValue;
           addTag(inputValue);
           event.target.value = ''; // Clear input after adding tag

       }
    }
});

function addTag(tag) {
    var tagsContainer = document.getElementById('tagsContainer');
    var tagElement = document.createElement('span');
    tagElement.textContent = tag;
    tagElement.classList.add('tag');
    var removeIcon=document.createElement('span');
    removeIcon.style.marginLeft='5px';
    removeIcon.style.color='red';

    removeIcon.innerHTML='X';
    tagElement.appendChild(removeIcon);
    tagElement.classList.add('tag');

    tagsContainer.appendChild(tagElement);

    // Add click event listener to remove tag
    tagElement.addEventListener('click', function() {
        tagElement.remove();

        // Remove the corresponding tag from the hidden input field
        var hiddenInput = document.getElementById('skill');
        var skillValue = hiddenInput.value;
        var index = skillValue.indexOf(tag);
        if (index !== -1) {
            skillValue = skillValue.slice(0, index) + skillValue.slice(index + tag.length + 1);
            hiddenInput.value = skillValue;
        }
    });
}

function handleRemove(value){
    var tagElement = event.target;
    tagElement.remove();

var hiddenInput = document.getElementById('skill');
      var skillValue = hiddenInput.value;
      var index = skillValue.indexOf(value);
      if (index !== -1) {
          skillValue = skillValue.slice(0, index) + skillValue.slice(index + value.length + 1);
          hiddenInput.value = skillValue;
      }
}

</script>

<style>
.tag {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer; /* Change cursor to pointer when hovering over tag */
}
</style>
@section('script')
  $('.summernote').summernote({
    height: 100,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['para', ['ul', 'ol']],
    ],
    disableDragAndDrop: true,
  });
@endsection
@endsection