@extends('company.layouts.main')
@section('content')
    <main>
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                    <a class="btn btn-outline-info" href="{{ route('virtualExpList.view')}}">Back</a>

                        <div class="col-sm-6">
                            <h1 class="m-0">Add Virtual Experience Program</h1>
                        </div><!-- /.col -->

                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- Main content -->
            <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.store') }}" method="POST"
                                        enctype="multipart/form-data" id="addVirtualExperience">
                                        @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="{{ old('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>
                                            <input type="file" name="image" class="form-control"
                                                value="{{ old('image') }}" accept="image/jpeg, image/png">
                                            @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 }}">{{ $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><span class="text-danger">*</span>
                                            <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="{{ old('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" id="">
                                                <option value="">Select Difficulty Level</option>
                                                @foreach ($difficulty_levels as $difficulty_level)
                                                    <option value="{{ $difficulty_level->id }}">
                                                        {{ $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>
                                            <input type="file" name="banner" class="form-control"
                                                value="{{ old('banner') }}" accept="image/jpeg, image/png">
                                            @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">{{ old('description') }}</textarea>
                                            <span class='text-danger' id="descriptionError"></span>
                                        </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="{{ old('skills') }}" placeholder="Enter skills">
                                            <div id="tagsContainer"></div>

                                        </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 }}">
                                                        {{ $department->department_name }}</option>
                                                @endforeach

                                            </select>
                                        </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="{{ old('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>
                                            <input type="file" name="video" class="form-control"
                                                value="{{ old('video') }}"  accept="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">{{ old('video_intro_description') }}</textarea>
                                            <span class='text-danger' id="video_intro_descriptionError"></span>
                                        </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">{{ old('about') }}</textarea>
                                            <span class='text-danger' id="aboutError"></span>
                                        </div>

                                        <button id="submitBtn" class="btn btn-info mt-4" type="submit">Submit</button>

                                        </div>

                                        <!-- <div class="form-group">
                                            <label>How it works </label><span class="text-danger">*</span>
                                            <textarea class="form-control summernote" name="how_it_works" id="how_it_works" cols="30" rows="10">{{ old('how_it_works') }}</textarea>
                                            <span class='text-danger' id="how_it_worksError"></span>
                                        </div> -->

                                           
                                    </form>


                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->


        <!-- <script>
          var value=  document.getElementById('skills').value;
            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');
                tagsContainer.appendChild(tagElement);

                var removeIcon = document.createElement('span');
                removeIcon.style.marginLeft = '5px';
                removeIcon.style.color = 'red';
                removeIcon.innerHTML = 'X';
                tagElement.appendChild(removeIcon);
                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;
                    }
                });
            }
        </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>
    </main>
@endsection