@extends('super-admin.layouts.main')
@section('content')
<!-- 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">
                <div class="col-sm-6">
                    <h1 class="m-0">Edit Event Details</h1><br>
                    <a class="btn btn-outline-info" href="{{ route('event.list') }}">Back</a>
                </div><!-- /.col -->

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

    <!-- 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('event.update', [$event->id]) }}" method="POST"
                                enctype="multipart/form-data" id="editEvents">
                                {{ method_field('put') }}
                                @if (Session::has('success'))
                                <div class="alert alert-success">{{ Session::get('success') }}</div>
                                @endif
                                @csrf
                               
                                <div class="form-group">
                                    <label>Title</label><span class="text-danger">*</span>
                                    <input type="text" name="title" class="form-control" value="{{ $event->title }}" />
                                    <span class="text-danger">@error('title') {{ $message }} @enderror</span>
                                </div>

                                <label>Meeting Link Type</label><span class="text-danger">*</span>
                                    <select class="form-control" name="linkTYpe" id="linkTYpe">
                                        <option value="zoom" @if ($event->video_link_type == 'zoom' ) selected @endif>Zoom</option> 
                                        <option value="googleMeet" @if ($event->video_link_type == 'googleMeet' ) selected @endif>Google Meet</option> 
                                        <option value="microsoft" @if ($event->video_link_type == 'microsoft' ) selected @endif>Microsoft Team</option>
                                    </select><br> 

                                <div class="form-group">
                                    <label>Meeting Link</label><span class="text-danger">*</span>
                                    <input type="text" name="link" class="form-control" value="{{ $event->link }}" />
                                    <span class="text-danger">@error('link') {{ $message }} @enderror</span>
                                </div>

                                <div class="form-group">
                                    <label for="Editor">Description</label>
                                    <textarea class="form-control summernote eventsummernoterror" name= "description">
                                                                            </textarea>
                                    <span class="text-danger error" id="descriptionError">@error('description') {{ $message }} @enderror</span><br>
                                </div>

                                <div class="form-group">
                                    <label>Banner Image</label><span class="text-danger">*</span>
                                    <input type="file" name="banner_image" class="form-control" value="{{ $event->banner_image }}" />
                                    <img src="{{ $event->banner_image }}"
                                        width="50" height="50">
                                    <span class="text-danger">@error('banner_image') {{ $message }} @enderror</span>
                                </div>

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

                                <div class="form-group">
                                    <label>Start Date</label><span class="text-danger">*</span>
                                    <input type="datetime-local" name="start_date" class="form-control" value="{{ $event->start_date }}" />
                                    <span class="text-danger">@error('start_date') {{ $message }} @enderror</span>
                                </div>

                                <div class="form-group">
                                    <label>End Date</label><span class="text-danger">*</span>
                                    <input type="datetime-local" name="end_date" class="form-control" value="{{ $event->end_date }}" />
                                    <span class="text-danger">@error('end_date') {{ $message }} @enderror</span>
                                </div>

                                <label>Location</label><span class="text-danger">*</span>
                                <select class="form-control" name="location">
                                    @foreach($cities as $city)
                                      <option value="{{$city->id}}" @if($event->city_name == $city->id) selected  @endif>{{$city->city_name}}</option>
                                    @endforeach
                                </select>

                                <label>Department</label><span class="text-danger">*</span>
                                <select class="form-control" name="departments">
                                    @foreach($departments as $department)
                                      <option value="{{$department->id}}" @if($event->department_id == $department->id) selected  @endif>{{$department->department_name}}</option>
                                    @endforeach
                                </select>

                                <label>Dificulty Level</label><span class="text-danger">*</span>
                                <select class="form-control" name="difficultyLevel">
                                    @foreach($difficultyLevels as $difficultyLeve)
                                      <option value="{{$difficultyLeve->id}}" @if($event->dificultylevel_id == $difficultyLeve->id) selected  @endif>{{$difficultyLeve->difficulty_level}}</option>
                                    @endforeach
                                </select>

                                <div class="form-group">
                                    <label>Contact Info</label><span class="text-danger">*</span>
                                    <input type="text" name="contact_info" class="form-control" value="{{ $event->contact_info }}" />
                                    <span class="text-danger">@error('contact_info') {{ $message }} @enderror</span>
                                </div>

                                <div class="form-group">
                                    <label>Category</label><span class="text-danger">*</span>
                                    <input type="text" name="category" class="form-control" value="{{ $event->category }}" />
                                    <span class="text-danger">@error('category') {{ $message }} @enderror</span>
                                </div>

                                <div class="form-group">
                                   <label> Skills </label><span class="text-danger">*</span>
                                   <input type="text" class="form-control forms" id="skills" name="skills" value="{{ old('skills') }}"
                                     placeholder="Enter skills">
                                     <div id="tagsContainer">@php
                                      $skillsArray = explode(',', $event->skills); // Split the string into an array
                                       @endphp
                                       @foreach($skillsArray as $index => $skill)
                                         <span class="tag" onclick="handleRemove('{{$skill}}')">{{$skill}}<span class="text-danger ml-1">X</span></span>
                                       @endforeach</div>

                                     

                                 </div>

                                <input type="text" hidden class="form-control forms" id="skill" name="skill" value="{{ $event->skills }}"
                                    placeholder="Enter skills">

                                <div class="form-group">
                                    <label>Actual Amount</label>
                                    <input type="text" name="amount" class="form-control" value="{{ $event->amount }}" />
                                    <span class="text-danger">@error('amount') {{ $message }} @enderror</span>
                                </div>
                                
                                <div class="form-group">
                                    <label>Discount Amount</label><span class="text-danger">*</span>
                                    <input type="text" class="form-control forms" name="discoutamount" value="{{ $event->discouned_amount }}"
                                        placeholder="Enter Your Discount Amount">
                                    </div>

                               
                                <label>Select Department</label><span class="text-danger">*</span>
                                    <select name="select[]" multiple multiselect-search="true">
                                        @foreach ($instructors as $instructor)
                                            <option
                                                @foreach ($eventInstructors as $map) @if ($map->instructor_id == $instructor->id) selected  @endif @endforeach
                                                value="{{ $instructor->id }}">{{ $instructor->name }}</option>
                                        @endforeach
                                    </select><br>
                                    <span class="text-danger">
                                        @error('select')
                                            {{ $message }}
                                        @enderror
                                    </span><br>

                             <div class="form-group">
                                 <label> Is Online </label><span class="text-danger">*</span>
                                <input type="checkbox" class=" forms" name="is_online"  {{$event->is_online ?'checked':'null'}}  >
                               </div>

                                <div class="form-group">
                                    <button class="btn btn-info mt-4" type="submit">Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- <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');
          skill.value=skill.value+','+ inputValue;
        if (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;
        }
    });
}

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> -->
@endsection