@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">Add Event Details</h1><br>
                        <a class="btn btn-outline-info" href="javascript:history.back()">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.store') }}" method="POST" enctype="multipart/form-data"
                                    id="addEvents">
                                    @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" class="form-control forms" name="title"
                                            value="{{ old('title') }}" placeholder="Enter Your Title">
                                    </div>

                                    <label>Meeting Link Type</label><span class="text-danger">*</span>
                                    <select class="form-control" name="linkTYpe" id="linkTYpe">
                                        <option value="0">Select Meeting Link Type</option>
                                        <option value="googleMeet">Google Meet</option>
                                        <option value="zoom">Zoom</option>
                                        <option value="microsoft">Microsoft Teams</option>
                                    </select><br>

                                    <div class="form-group">
                                        <label> Meeting Link </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="link"
                                            value="{{ old('link') }}" placeholder="Enter Your link">
                                    </div>


                                    <div class="form-group">
                                        <label for="Editor">Description</label><span class="text-danger">*</span>
                                        <textarea class="form-control summernote eventsummernoterror" name="description" value="{{ old('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="{{ old('banner_image') }}" accept="image/jpeg, image/png" />
                                    </div>

                                    <div class="form-group">
                                        <label>Introduction Video</label><span class="text-danger">*</span>
                                        <input type="file" name="intro_video" class="form-control"
                                            value="{{ old('intro_video') }}" accept="video/*" />
                                    </div>

                                    <div class="row">
                                        <div class="form-group col-12 col-md-6">
                                            <label> Start Date </label><span class="text-danger">*</span>
                                            <input type="datetime-local" class="form-control forms" name="start_date"
                                                value="{{ old('start_date') }}">
                                        </div>

                                        <div class="form-group col-12 col-md-6">
                                            <label> End Date </label><span class="text-danger">*</span>
                                            <input type="datetime-local" class="form-control forms" name="end_date"
                                                value="{{ old('end_date') }}">
                                        </div>
                                    </div>

                                    <!-- <div class="form-group ">
                      <label> Location </label><span class="text-danger">*</span>
                      <input type="text" class="form-control forms" name="location" value="{{ old('location') }}"
                        placeholder="Enter Your Location">
                    </div> -->

                                    <label>Location</label><span class="text-danger">*</span>
                                    <select class="form-control" name="location" id="city_id">
                                        <option value="0">Select Location</option>
                                        @foreach ($cities as $city_name)
                                            <option value="{{ $city_name->id }}">{{ $city_name->city_name }}</option>
                                        @endforeach
                                    </select><br>

                                    <label>Department</label><span class="text-danger">*</span>
                                    <select class="form-control" name="departments" id="industry_id">
                                        <option value="0">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">{{ $department->department_name }}
                                            </option>
                                        @endforeach
                                    </select><br>

                                    <label>Dificulty Level</label><span class="text-danger">*</span>
                                    <select class="form-control" name="difficultyLevel" id="difficultyLevel_id">
                                        <option value="0">Select Dificulty Level</option>
                                        @foreach ($difficultyLevels as $difficultyLevel)
                                            <option value="{{ $difficultyLevel->id }}">
                                                {{ $difficultyLevel->difficulty_level }}</option>
                                        @endforeach
                                    </select><br>

                                    <div class="form-group">
                                        <label> Contact Info </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="contact_info"
                                            value="{{ old('contact_info') }}"
                                            placeholder="Enter Your Email or Phone Number">
                                    </div>

                                    <div class="form-group">
                                        <label> Category </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="category"
                                            value="{{ old('category') }}" placeholder="Enter Your Category">
                                    </div>

                                    <div class="form-group">
                                        <label> Skills </label><span class="text-danger">*</span><br>
                                        <span class="text-danger">Add comma seprated values</span>
                                        <input type="text" class="form-control forms" id="skills" name="skills"
                                            value="{{ old('skills') }}" placeholder="Enter skills">
                                        <div id="tagsContainer"></div>
                                    </div>

                                    <input type="text" hidden class="form-control forms" id="skill"
                                        name="skill" value="{{ old('skill') }}" placeholder="Enter skills">

                                    <div class="form-group">
                                        <label>Actual Amount </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="amount"
                                            value="{{ old('amount') }}" placeholder="Enter Your Amount">
                                    </div>

                                    <div class="form-group">
                                        <label>Discount Amount </label>
                                        <input type="text" class="form-control forms" name="discoutamount"
                                            value="{{ old('discoutamount') }}" placeholder="Enter Your Discount Amount">
                                    </div>


                                    <div class="form-group">
                                        <label>Select Instructor</label><span class="text-danger">*</span>
                                        <select name="select[]" multiple multiselect-search="true">
                                            @foreach ($instructors as $instructor)
                                                <option value="{{ $instructor->id }}"
                                                    {{ in_array($instructor->id, old('select') ?: []) ? 'selected' : '' }}>
                                                    {{ $instructor->name }}</option>
                                            @endforeach
                                        </select><br>
                                        <span class="text-danger">
                                            @error('select')
                                                {{ 'The Select Category field is required.' }}
                                            @enderror
                                        </span><br>

                                        <div class="form-group">
                                            <label> Is Online </label>
                                            <input type="checkbox" class=" forms" name="is_online">

                                        </div>
                                    </div>




                                    <div class="form-group">
                                        <button class="btn btn-info mt-4" type="submit">Submit</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;
                }
            });
        }
    </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